diff --git a/.changeset/brown-shirts-judge.md b/.changeset/brown-shirts-judge.md new file mode 100644 index 0000000000..3d6268ffba --- /dev/null +++ b/.changeset/brown-shirts-judge.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": patch +"@appwrite.io/pink": patch +--- + +Fix desynced icons diff --git a/.changeset/neat-cats-cough.md b/.changeset/neat-cats-cough.md new file mode 100644 index 0000000000..99464781fe --- /dev/null +++ b/.changeset/neat-cats-cough.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": minor +"@appwrite.io/pink": minor +--- + +add divider diff --git a/.changeset/pre.json b/.changeset/pre.json index c680668d2f..2da7c80717 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -1,6 +1,6 @@ { "mode": "pre", - "tag": "sl10", + "tag": "next", "initialVersions": { "@appwrite.io/kitchensink": "0.0.0", "@appwrite.io/pink-design": "0.0.0-rc1", @@ -9,6 +9,17 @@ "@appwrite.io/pink": "0.0.6" }, "changesets": [ + "brown-shirts-judge", + "neat-cats-cough", + "pretty-feet-return", + "pretty-gorillas-cough", + "rotten-carpets-joke", + "sweet-turtles-hope", + "ten-pandas-share", + "ten-snakes-teach", + "three-waves-cheer", + "two-pans-shake", + "witty-bulldogs-repeat", "dirty-hounds-do" ] } diff --git a/.changeset/pretty-feet-return.md b/.changeset/pretty-feet-return.md new file mode 100644 index 0000000000..3785a7ac23 --- /dev/null +++ b/.changeset/pretty-feet-return.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": minor +"@appwrite.io/pink": minor +--- + +Fix avatar icons diff --git a/.changeset/pretty-gorillas-cough.md b/.changeset/pretty-gorillas-cough.md new file mode 100644 index 0000000000..42be9fa9db --- /dev/null +++ b/.changeset/pretty-gorillas-cough.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": minor +"@appwrite.io/pink": minor +--- + +Fix switch button diff --git a/.changeset/rotten-carpets-joke.md b/.changeset/rotten-carpets-joke.md new file mode 100644 index 0000000000..d9b17f1333 --- /dev/null +++ b/.changeset/rotten-carpets-joke.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": patch +"@appwrite.io/pink": patch +--- + +fixes for 1.4.x release diff --git a/.changeset/sweet-turtles-hope.md b/.changeset/sweet-turtles-hope.md new file mode 100644 index 0000000000..881f167445 --- /dev/null +++ b/.changeset/sweet-turtles-hope.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": minor +"@appwrite.io/pink": minor +--- + +Fix: font cropping diff --git a/.changeset/ten-pandas-share.md b/.changeset/ten-pandas-share.md new file mode 100644 index 0000000000..87d6b0f489 --- /dev/null +++ b/.changeset/ten-pandas-share.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": patch +"@appwrite.io/pink": patch +--- + +fix desync issue diff --git a/.changeset/ten-snakes-teach.md b/.changeset/ten-snakes-teach.md new file mode 100644 index 0000000000..f1cfb12c7e --- /dev/null +++ b/.changeset/ten-snakes-teach.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": patch +"@appwrite.io/pink": patch +--- + +patch diff --git a/.changeset/three-waves-cheer.md b/.changeset/three-waves-cheer.md new file mode 100644 index 0000000000..ffd9244070 --- /dev/null +++ b/.changeset/three-waves-cheer.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": patch +"@appwrite.io/pink": patch +--- + +pre-release patch diff --git a/.changeset/two-pans-shake.md b/.changeset/two-pans-shake.md new file mode 100644 index 0000000000..3038368ab8 --- /dev/null +++ b/.changeset/two-pans-shake.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": minor +"@appwrite.io/pink": minor +--- + +Add bun icon diff --git a/.changeset/witty-bulldogs-repeat.md b/.changeset/witty-bulldogs-repeat.md new file mode 100644 index 0000000000..0be3064993 --- /dev/null +++ b/.changeset/witty-bulldogs-repeat.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": minor +"@appwrite.io/pink": minor +--- + +Changes for 1.4 from other branch diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index dd2b91bcf0..0ee24e6081 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -4,6 +4,9 @@ on: push: branches: - main + - pre/** # pre-release branches + - style-level-* # style-level branches + - style-updates-for-release-1.4 # BRUTEFORCE concurrency: ${{ github.workflow }}-${{ github.ref }} diff --git a/VERSIONING.md b/VERSIONING.md new file mode 100644 index 0000000000..31256b0e0c --- /dev/null +++ b/VERSIONING.md @@ -0,0 +1,37 @@ +# Versioning + +Versioning consists in 3 steps. Specifying a bump (which can be `patch`, `minor` or `major`), updating package versions, and releasing. + +## Automatic PR flow + +### Bumping + +To specify a new bump in the package versions, you can use the `bump-x` script, where `x` is the bump type. + +This will automatically generate a [changeset](https://github.com/changesets/changesets). A changeset is a file that contains the bump intent, and a list of all commits that will be included in the release. + +### Releasing + +After bumping, you should commit and push the changesets. This will trigger a GitHub action that will automatically create a release PR to your branch. This PR will contain all the changesets that have been pushed since the last release. + +## CLI flow + +### Bumping + +To specify a new bump in the package versions, you can use the `bump-x` script, where `x` is the bump type. + +This will automatically generate a [changeset](https://github.com/changesets/changesets). A changeset is a file that contains the bump intent, and a list of all commits that will be included in the release. + +### Updating package versions + +To apply the bump intents, and change the package versions accordingly, you can use the `version` script. This will automatically update all the `CHANGELOG.md` files, and the `package.json` files. + +### Releasing + +If everything looks good, you can release the new version using the `release` script. This will automatically create a new git tag, and publish the packages to npm. Don't forget to commit! + +## Pre-releasing + +Sometimes, you will want to release a pre-release version. Firstly, be sure to be in a branch that is not `main`. Then, you can use the `pre` script, which will enter the current branch into pre-release mode. While in pre-release mode, all other actions are the same, but the version will be suffixed with `-next.X`. + +Before merging this pre-release branch into `main`, be sure to exit the pre-release mode using the `pre` script again. diff --git a/apps/kitchensink/cover-frame-light-mode-2.html b/apps/kitchensink/cover-frame-light-mode-2.html new file mode 100644 index 0000000000..86ecb86f7e --- /dev/null +++ b/apps/kitchensink/cover-frame-light-mode-2.html @@ -0,0 +1,309 @@ + + + + + + @appwrite/kitchensink - user demo + + + +
+ {{> topNav}} +
+
+
+
+
+
+
+ Eldad Test +
Eldad Test
+
Unverified
+
+
+ eldad@appwrite.io +

Joined: June 11, 2022

+
+
+
+ + +
+
+
+
+
+
+
+
Update Name
+

Free text in here

+
+
+
+
    +
  • + +
    + +
    +
    • +
+
+
+
+
+ +
+
+
+
+
+
+
+
Update Email
+

Free text

+
+
+
+
    +
  • + +
    + +
    +
    • +
+
+
+
+
+ +
+
+
+
+
+
+
+
Update Password
+

+ Enter a new password. A password must contain + at least 8 characters. +

+
+
+
+
    +
  • + +
    + +
    +
    • +
+
+
+
+
+ +
+
+
+
+
+
+
+
User Preferences
+

+ You can update your user preferences by storing information + on the user's objects so they can easily be shared across + devices and sessions. +

+
+
+
+
    +
  • +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    +
    • +
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
Danger Zone
+

+ The user will be permanently deleted, including all data + associated with this user. This action is irreversible. +

+
+
+
+
+ Eldad Test +
+
Eldad Test
+

eldad@appwrite.io

+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+ + +
+
+

Function ID: 0123456789012abcdefg

+ +
+
+
+
+ Chrome +
+
+

Deployment ID: 0123456789012

+ +
Size 555KB
+
+
+ + Ready + +
+
+
+
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+
+ + +
+
+ + +
+ 
blahFunction = {
+ +
+ 
    firstName: "hello"
+ +
+ 
}
+ +
+
+
+
+ + + + diff --git a/apps/kitchensink/cover-frame-light-mode.html b/apps/kitchensink/cover-frame-light-mode.html new file mode 100644 index 0000000000..fd5a0a9fd2 --- /dev/null +++ b/apps/kitchensink/cover-frame-light-mode.html @@ -0,0 +1,309 @@ + + + + + + @appwrite/kitchensink - user demo + + + +
+ {{> topNav}} +
+
+
+
+
+
+
+ Eldad Test +
Eldad Test
+
Unverified
+
+
+ eldad@appwrite.io +

Joined: June 11, 2022

+
+
+
+ + +
+
+
+
+
+
+
+
Update Name
+

Free text in here

+
+
+
+
    +
  • + +
    + +
    +
    • +
+
+
+
+
+ +
+
+
+
+
+
+
+
Update Email
+

Free text

+
+
+
+
    +
  • + +
    + +
    +
    • +
+
+
+
+
+ +
+
+
+
+
+
+
+
Update Password
+

+ Enter a new password. A password must contain + at least 8 characters. +

+
+
+
+
    +
  • + +
    + +
    +
    • +
+
+
+
+
+ +
+
+
+
+
+
+
+
User Preferences
+

+ You can update your user preferences by storing information + on the user's objects so they can easily be shared across + devices and sessions. +

+
+
+
+
    +
  • +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    +
    • +
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
Danger Zone
+

+ The user will be permanently deleted, including all data + associated with this user. This action is irreversible. +

+
+
+
+
+ Eldad Test +
+
Eldad Test
+

eldad@appwrite.io

+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+ + +
+
+

Function ID: 0123456789012abcdefg

+ +
+
+
+
+ Chrome +
+
+

Deployment ID: 0123456789012

+ +
Size 555KB
+
+
+ + Ready + +
+
+
+
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+
+ + +
+
+ + +
+ 
blahFunction = {
+ +
+ 
    firstName: "hello"
+ +
+ 
}
+ +
+
+
+
+ + + + diff --git a/apps/kitchensink/dashboard2.html b/apps/kitchensink/dashboard2.html new file mode 100644 index 0000000000..40b08133a4 --- /dev/null +++ b/apps/kitchensink/dashboard2.html @@ -0,0 +1,313 @@ + + + + + + @appwrite/kitchensink - bucket settings demo + + + +
+
+
+ +
+
This is a default alert
+

+ Some description about the alert sent to the user. +

+
+
+ +
+
+
+ {{> topNav}} +
+
+
+
+

+ Images +

+ + Click to copy +
+
+
+ +
+
+
+
+
+
+
1.19 GB
+
Bandwidth
+
+
+ +
+
+
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+
+
+
+
+
2K
+
Requests
+
+
+ +
+
+
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+
+
+
+
+
+ + Database +
+
+ +
+ +
+ +
+
4
+
Databases
+
+ +
+
Documents: 20
+
+
+
+
+
+
+
+ + Storage +
+
+ +
+ +
+ +
+
8.0 MB
+
Users
+
+ +
+
Buckets: 44
+
+
+
+
+
+
+
+ + authentication +
+
+ +
+ +
+ +
+
4K
+
Users
+
+ +
+
Sessions: 20K
+
+
+
+
+
+
+
+ + Functions +
+
+ +
+ +
+ +
+
12
+
Executions
+
+ +
+
+
+
+
+
+
10
+
Realtime Connections
+
+
+
+ +
+

Integrations

+
+ + + +
+ +
+

API Keys

+

Manage Your Server API Keys

+ + + + + + + + + + + + + + + + + +
Name + last accessed + + expiration date + + clients +
+ My API Key + + + +
+ +
Expires soon
+
+ 		+
    +
  • +
    + Gitlab +
    +
    • +
  • +
    + Gitlab +
    +
    • +
  • +
    + +2 +
    +
    • +
+
+ +
+
+
+
+
+ + + diff --git a/apps/kitchensink/images/icons/grayscale/git-branch.svg b/apps/kitchensink/images/icons/grayscale/git-branch.svg new file mode 100644 index 0000000000..c12da10b0c --- /dev/null +++ b/apps/kitchensink/images/icons/grayscale/git-branch.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/kitchensink/images/icons/grayscale/git-commit.svg b/apps/kitchensink/images/icons/grayscale/git-commit.svg new file mode 100644 index 0000000000..c4167076ad --- /dev/null +++ b/apps/kitchensink/images/icons/grayscale/git-commit.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/kitchensink/layout-1-2.html b/apps/kitchensink/layout-1-2.html new file mode 100644 index 0000000000..a1e68fcfbe --- /dev/null +++ b/apps/kitchensink/layout-1-2.html @@ -0,0 +1,397 @@ + + + + + + @appwrite/kitchensink - collection demo + + + +
+ {{> topNav}} {{> sideNav}} +
+
+
+
+ +

+ DemoColl +

+ + Click to copy +
+
+ +
+
+
+ +
+
+
+

Filter templates

+ +
+ + + +
+ +
    +
  • +
    + + + Use case + +
    + +
    +     +
    +

    + Collapsible +

    +
    +
    +
    • +
  • +
    + + + Runtime + +
    + +
    +     +
    +

    + Collapsible +

    +
    +
    +
    • +
+ +
+

Contribute

+

+ Have an idea for a function template? View our contribution guidelines. +

+
+
+
+
    +
  • +
    +
    +

    This is a log template name ehich is very long

    + +
      +
    • +
      + +
      +
      • +
    • +
      + +
      +
      • +
    • +
      + +2 +
      +
      • +
    + +
    + +

    Lorem ipsum dolor sit amet. This is a brief, two line description for this template.

    + +
    + + +
    + +
    +
    • +
  • +
    +
    +

    This is a log template name ehich is very long

    + +
      +
    • +
      + +
      +
      • +
    • +
      + +
      +
      • +
    • +
      + +2 +
      +
      • +
    + +
    + +

    Lorem ipsum dolor sit amet. This is a brief, two line description for this template.

    + +
    + + +
    + +
    +
    • +
  • +
    +
    +

    This is a log template name ehich is very long

    + +
      +
    • +
      + +
      +
      • +
    • +
      + +
      +
      • +
    • +
      + +2 +
      +
      • +
    + +
    + +

    Lorem ipsum dolor sit amet. This is a brief, two line description for this template.

    + +
    + + +
    + +
    +
    • +
  • +
    +
    +

    This is a log template name ehich is very long

    + +
      +
    • +
      + +
      +
      • +
    • +
      + +
      +
      • +
    • +
      + +2 +
      +
      • +
    + +
    + +

    Lorem ipsum dolor sit amet. This is a brief, two line description for this template.

    + +
    + + +
    + +
    +
    • +
  • +
    +
    +

    This is a log template name ehich is very long

    + +
      +
    • +
      + +
      +
      • +
    • +
      + +
      +
      • +
    • +
      + +2 +
      +
      • +
    + +
    + +

    Lorem ipsum dolor sit amet. This is a brief, two line description for this template.

    + +
    + + +
    + +
    +
    • +
  • +
    +
    +

    This is a log template name ehich is very long

    + +
      +
    • +
      + +
      +
      • +
    • +
      + +
      +
      • +
    • +
      + +2 +
      +
      • +
    + +
    + +

    Lorem ipsum dolor sit amet. This is a brief, two line description for this template.

    + +
    + + +
    + +
    +
    • +
+
+
+ +
+

Total results: 1

+ + +
+
+ + + +
+
+ + + diff --git a/apps/kitchensink/package.json b/apps/kitchensink/package.json index 3a686aa8fb..b93a91e8e9 100644 --- a/apps/kitchensink/package.json +++ b/apps/kitchensink/package.json @@ -16,8 +16,8 @@ "license": "ISC", "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.0.7-sl10.0", - "@appwrite.io/pink-icons": "0.0.7-sl10.0", + "@appwrite.io/pink": "0.1.0-next.9", + "@appwrite.io/pink-icons": "0.1.0-next.9", "vite-plugin-handlebars": "^1.6.0" } } diff --git a/apps/kitchensink/vite.config.js b/apps/kitchensink/vite.config.js index d692f1ae19..8a7bff3b56 100644 --- a/apps/kitchensink/vite.config.js +++ b/apps/kitchensink/vite.config.js @@ -14,12 +14,14 @@ const config = { input: { index: new URL("./index.html", import.meta.url).pathname, dashboard: new URL("./dashboard.html", import.meta.url).pathname, + dashboard2: new URL("./dashboard2.html", import.meta.url).pathname, login: new URL("./login.html", import.meta.url).pathname, login1: new URL("./login-1.html", import.meta.url).pathname, login2: new URL("./login-2.html", import.meta.url).pathname, noSide: new URL("./no-side.html", import.meta.url).pathname, wizard: new URL("./wizard.html", import.meta.url).pathname, wizardForm: new URL("./wizard-form.html", import.meta.url).pathname, + wizard11: new URL("./wizard-1-1.html", import.meta.url).pathname, coverFrame: new URL("./cover-frame.html", import.meta.url).pathname, coverFrame2: new URL("./cover-frame-2.html", import.meta.url).pathname, users: new URL("./users.html", import.meta.url).pathname, diff --git a/apps/kitchensink/wizard-1-1.html b/apps/kitchensink/wizard-1-1.html new file mode 100644 index 0000000000..183e63b135 --- /dev/null +++ b/apps/kitchensink/wizard-1-1.html @@ -0,0 +1,536 @@ + + + + + + @appwrite/kitchensink - user demo + + + +
+ {{> topNav}} +
+
+
+
+
+
+
+ Eldad Test +
Eldad Test
+
Unverified
+
+
+ eldad@appwrite.io +

Joined: June 11, 2022

+
+
+
+ + +
+
+
+
+
+
+
+
Update Name
+

Free text in here

+
+
+
+
    +
  • + +
    + +
    +
    • +
+
+
+
+
+ +
+
+
+
+
+
+
+
Update Email
+

Free text

+
+
+
+
    +
  • + +
    + +
    +
    • +
+
+
+
+
+ +
+
+
+
+
+
+
+
Update Password
+

+ Enter a new password. A password must contain + at least 8 characters. +

+
+
+
+
    +
  • + +
    + +
    +
    • +
+
+
+
+
+ +
+
+
+
+
+
+
+
User Preferences
+

+ You can update your user preferences by storing information + on the user's objects so they can easily be shared across + devices and sessions. +

+
+
+
+
    +
  • +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    +
    • +
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
Danger Zone
+

+ The user will be permanently deleted, including all data + associated with this user. This action is irreversible. +

+
+
+
+
+ Eldad Test +
+
Eldad Test
+

eldad@appwrite.io

+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+ + +
+ +
+ + + + +
+
Create Document
+ +
+ +
+
+

Choose your [style? type?]

+

Lorem ipsum dolor sit amet. Some kinda short description here..

+
+
+
+

Import Git repository

+

Create and deploy a function with a connected git repository.

+ +
+ +
+ + +
+ + +
+ + + +
+ +
+ +

+ Can’t see your repos? Manage GitHub application. +

+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ +
+

Total results: 1

+ + +
+
+
+
+

Quick start

+

Use a starter templates to begin with the basics.

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + +
+
+
+

Templates

+

Choose from a selection of templates to find the right one for your use case.

+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+

You can also create a function manually. Learn more.

+ +
+ + +
+ + + + diff --git a/apps/kitchensink/wizard.html b/apps/kitchensink/wizard.html index 969bda5db5..103c25dc44 100644 --- a/apps/kitchensink/wizard.html +++ b/apps/kitchensink/wizard.html @@ -287,6 +287,14 @@

Optional Header

+
  • +
    +
    +
    +
    Set permissions
    +
    +
    +
  • diff --git a/apps/pink/package.json b/apps/pink/package.json index 20405b96d4..5e3ad4872e 100644 --- a/apps/pink/package.json +++ b/apps/pink/package.json @@ -29,8 +29,8 @@ }, "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.0.7-sl10.0", - "@appwrite.io/pink-icons": "0.0.7-sl10.0", + "@appwrite.io/pink": "0.1.0-next.9", + "@appwrite.io/pink-icons": "0.1.0-next.9", "@types/prismjs": "^1.26.0", "glob": "^8.0.3", "sass": "^1.57.1" diff --git a/apps/pink/public/icons/color/dark/bun-sh.svg b/apps/pink/public/icons/color/dark/bun-sh.svg new file mode 100644 index 0000000000..8babba29d3 --- /dev/null +++ b/apps/pink/public/icons/color/dark/bun-sh.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pink/public/icons/color/dark/pangea.svg b/apps/pink/public/icons/color/dark/pangea.svg new file mode 100644 index 0000000000..ffa948a9d1 --- /dev/null +++ b/apps/pink/public/icons/color/dark/pangea.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pink/public/icons/color/light/bun-sh.svg b/apps/pink/public/icons/color/light/bun-sh.svg new file mode 100644 index 0000000000..d8854eafb4 --- /dev/null +++ b/apps/pink/public/icons/color/light/bun-sh.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pink/public/icons/color/light/pangea.svg b/apps/pink/public/icons/color/light/pangea.svg new file mode 100644 index 0000000000..4f30b6d557 --- /dev/null +++ b/apps/pink/public/icons/color/light/pangea.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pink/public/icons/grayscale/dark/bun-sh.svg b/apps/pink/public/icons/grayscale/dark/bun-sh.svg new file mode 100644 index 0000000000..769784eb0a --- /dev/null +++ b/apps/pink/public/icons/grayscale/dark/bun-sh.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/apps/pink/public/icons/grayscale/dark/pangea.svg b/apps/pink/public/icons/grayscale/dark/pangea.svg new file mode 100644 index 0000000000..fd83b53d82 --- /dev/null +++ b/apps/pink/public/icons/grayscale/dark/pangea.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pink/public/icons/grayscale/light/bun-sh.svg b/apps/pink/public/icons/grayscale/light/bun-sh.svg new file mode 100644 index 0000000000..df7fff6d41 --- /dev/null +++ b/apps/pink/public/icons/grayscale/light/bun-sh.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/apps/pink/public/icons/grayscale/light/pangea.svg b/apps/pink/public/icons/grayscale/light/pangea.svg new file mode 100644 index 0000000000..986b5d65c5 --- /dev/null +++ b/apps/pink/public/icons/grayscale/light/pangea.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pink/public/search.json b/apps/pink/public/search.json index 80c13bddaa..53023f1e92 100644 --- a/apps/pink/public/search.json +++ b/apps/pink/public/search.json @@ -1 +1 @@ -{"documentCount":60,"nextId":60,"documentIds":{"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9,"10":10,"11":11,"12":12,"13":13,"14":14,"15":15,"16":16,"17":17,"18":18,"19":19,"20":20,"21":21,"22":22,"23":23,"24":24,"25":25,"26":26,"27":27,"28":28,"29":29,"30":30,"31":31,"32":32,"33":33,"34":34,"35":35,"36":36,"37":37,"38":38,"39":39,"40":40,"41":41,"42":42,"43":43,"44":44,"45":45,"46":46,"47":47,"48":48,"49":49,"50":50,"51":51,"52":52,"53":53,"54":54,"55":55,"56":56,"57":57,"58":58,"59":59},"fieldIds":{"title":0,"content":1},"fieldLength":{"0":[3,134],"1":[2,263],"2":[2,230],"3":[3,133],"4":[3,149],"5":[2,180],"6":[3,205],"7":[3,151],"8":[3,189],"9":[3,137],"10":[3,203],"11":[2,252],"12":[3,147],"13":[3,125],"14":[2,201],"15":[3,162],"16":[3,182],"17":[4,210],"18":[3,140],"19":[2,131],"20":[2,268],"21":[2,195],"22":[2,207],"23":[3,120],"24":[3,137],"25":[3,395],"26":[2,113],"27":[2,141],"28":[2,112],"29":[2,179],"30":[3,188],"31":[2,131],"32":[2,193],"33":[2,341],"34":[2,243],"35":[2,154],"36":[3,191],"37":[2,213],"38":[3,160],"39":[2,186],"40":[2,273],"41":[2,217],"42":[2,224],"43":[2,159],"44":[1,354],"45":[2,121],"46":[3,157],"47":[3,152],"48":[2,133],"49":[2,169],"50":[3,165],"51":[2,129],"52":[2,100],"53":[2,232],"54":[2,168],"55":[3,149],"56":[2,123],"57":[2,173],"58":[2,104],"59":[2,122]},"averageFieldLength":[2.4,180.25],"storedFields":{"0":{"title":"components - action bar","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components action bar Action bar The floating action bar is a tool that appears on top of the main layout and enables action execution. Class Type action-bar Action Bar A class representing an action bar container action-bar-start Action Bar start side The content located on the start side of the action bar action-bar-end Action Bar end side The content located on the end side of the action bar Preview HTML 4 documents selected Cancel Delete selection 4 documents selected Cancel Delete selection \"> < section class = \" action-bar \" > < div class = \" action-bar-start u-flex u-gap-8 \" > < span class = \" inline-tag is-info \" > < span class = \" text \" > 4 </ span > </ span > < span class = \" text \" > < span class = \" is-not-mobile \" > documents </ span > selected </ span > </ div > < div class = \" action-bar-end u-flex u-gap-8 \" > < button class = \" button is-text \" > < span class = \" text \" > Cancel </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Delete < span class = \" is-not-mobile \" > selection </ span > </ span > </ button > </ div > </ section > tooltip alert Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/action-bar"},"1":{"title":"components - alert","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components alert Alert Alerts display both task-generated and system-generated messages. They can persist in the UI, or they can be dismissed by the user. Types In the Appwrite console, we use two types of alerts: Class Type alert Inline Inline alerts present additional information to the user related to content within a form or a body of text. alert is-standalone Standalone Alert Standalone is based Alert type Inline alert is-action Action Alert action is based Alert type Inline alert-sticky Sticky Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. States In the Appwrite console, we use five states of alerts: Class Type - Default Use this alert to provide general information to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-info Info Use this alert to provide additional information or tips to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-info \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-info \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-success Success Use this alert to inform the user of a task that has been completed successfully. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-success \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-success \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-warning Warning Use this alert to warn the user that action may be required depending on the context. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-warning \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-warning \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-danger Danger/Error Use this alert to warn the user about errors, and how they can fix the problem. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-danger \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-danger \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Best Practice Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application. Do Use human-readable language in your alerts to explain the purpose of the alert, and provide a call to action where necessary. Don't Show overly generic or patronizing messages in your alerts. action bar avatar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/alert"},"2":{"title":"components - avatar","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components avatar Avatar Avatars are a graphical representation of a person or object using an icon, image, or a string with initials. Class Type avatar Avatar A class representing an avatar Types Avatars have three different types: Class Type is-color-empty Empty The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode. - Text A text avatar can display up to two letters, typically a user’s or team’s initials. - Icon One icon can be displayed in the center of an icon avatar. - Image Avatars can display a preview of a file or the user’s profile picture. Preview HTML aa aa \"> < div class = \" avatar is-color-empty \" > </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar \" > < span class = \" icon-pencil \" > </ span > </ div > < img class = \" avatar \" src = \" https://unsplash.it/40 \" alt = \" \" /> Sizes There are five different sizes used for avatars: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px is-size-x-large xlarge 64px Preview HTML aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-size-x-small \" > aa </ div > < div class = \" avatar is-size-small \" > aa </ div > < div class = \" avatar is-size-medium \" > aa </ div > < div class = \" avatar is-size-large \" > aa </ div > < div class = \" avatar is-size-x-large \" > aa </ div > Colors In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors: class Type is-color-empty Empty - Default is-color-orange Orange is-color-green Green is-color-blue Blue is-color-pink Pink is-color-red Red Preview HTML aa aa aa aa aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-color-empty \" > aa </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar is-color-orange \" > aa </ div > < div class = \" avatar is-color-green \" > aa </ div > < div class = \" avatar is-color-blue \" > aa </ div > < div class = \" avatar is-color-pink \" > aa </ div > < div class = \" avatar is-color-red \" > aa </ div > Avatars Groups avatars-group Sizes Avatar groups have four different sizes: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px Preview HTML aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 \"> < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large \" > +2 </ div > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency in avatars: Do Use icons that have universal meanings and are easily recognizable. Don't Do not use Icons that are less recognizable and inconsistent. Do Use up to 2 uppercase letters and high color contrast Don't Do not use more than 2 letters or lowercase alert clickable list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/avatar"},"3":{"title":"components - clickable list","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components clickable list Clickable List Class Type clickable-list List Container Define clickable list clickable-list-item Item Container Define item clickable-list-button Button Clickable zone clickable-list-title Title clickable-list-title-sep Title seperator clickable-list-desc Description Preview HTML Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 \"> < ul class = \" clickable-list \" > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > </ ul > avatar code panel Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/clickable-list"},"4":{"title":"components - code panel","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components code panel Code Panel Code panels are used to create a focused view of a block of code, for example to display logs. Class Type code-panel Code Panel A class representing a code panel Preview HTML Raw data Scroll to top function = { firstName: “hello” } Raw data Scroll to top function = { firstName: “hello” } \"> < section class = \" code-panel u-min-width-100-percent theme-dark \" > < header class = \" code-panel-header \" > < div class = \" u-flex u-gap-16 u-margin-inline-start-auto \" > < button class = \" button is-text \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Raw data </ span > </ button > < button class = \" button is-secondary is-disabled \" > < span class = \" icon-arrow-narrow-up \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Scroll to top </ span > </ button > </ div > </ header > < code class = \" code-panel-content grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > </ section > Code Grid A grid of code lines, used inside the code panel. Preview HTML function = { firstName: “hello” } function = { firstName: “hello” } \"> < code class = \" grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > clickable list collapsible Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/code-panel"},"5":{"title":"components - collapsible","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components collapsible Collapsible Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow you to progressively display information as desired. Class Type collapsible Collapsible A class representing a collapsible Components Collapsible consist of five components: Class Type collapsible-item Item collapsible-wrapper Wrapper collapsible-button Button collapsible-button-optional Optional Label collapsible-content Content Preview HTML Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options one </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options two </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Option three </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > </ ul > Collapsible with Checkboxes In the Appwrite console, collapsibles can contain checkboxes: Preview HTML Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" open > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content u-margin-block-start-8 u-padding-inline-32 \" > < div class = \" form \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > </ ul > </ div > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > </ ul > code panel drop list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/collapsible"},"6":{"title":"components - drop list","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components drop list Drop List Drop lists allow users to select one option from a popover menu. Class Type drop Drop List A class representing a drop list Components Drop Lists consist of four components: Class Type drop-wrapper Wrapper drop-section Section drop-list List drop-list-item List item Alignment In the Appwrite console, we use three alignments: Class Type - Block Start + Inline Start is-block-end Block End is-inline-end Inline End Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-inline-start : 6rem ; \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end is-inline-end is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > Arrow Placement Use the classes below to control the arrow placement of the drop list: Class Type - Start is-arrow-center Center is-arrow-end End is-no-arrow No Arrow Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-center \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-center \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-end \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > </ div > Drop List with Checkboxes In the Appwrite console, drop list can contain checkboxes: Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 1 </ span > </ label > </ li > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 2 </ span > </ label > </ li > </ ul > </ section > </ div > </ div > </ div > Best Practice We recommend using icons in cases where they have strong universal meaning and aid in the recognition of an action. Do Use icons only if they help the user understand the action. Don't To avoid confusion, do not use icons if you can’t think of a unique icon for each action. collapsible file preview Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/drop-list"},"7":{"title":"components - file preview","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components file preview File Preview A representation of content uploaded as an attachment. Class Type file-preview File Preview A class representing a file preview Types There are 2 types of content representation: Class Type is-no-file No Image Use in cases the uploaded file is not an image and a preview is not available. file-preview-content Content Use in cases an image (.png, .jpeg, .jpg, etc.) was uploaded. Image will appear as a thumbnail. Preview HTML Preview not available Preview not available \"> < a href = \" \" class = \" file-preview is-with-image \" aria-label = \" open file in new window \" > < div class = \" file-preview-image \" > < img src = \" https://unsplash.it/600 \" alt = \" \" /> </ div > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > </ div > </ div > </ a > < a href = \" \" class = \" file-preview is-no-file \" aria-label = \" file \" > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < p > Preview not available </ p > </ div > </ a > drop list grid item Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/file-preview"},"8":{"title":"components - grid item","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components grid item Grid Item To simplify complex cards, a grid item is used to position elements. Class Type grid-item-1 Grid Item A class representing a grid item Positions There are four positions within a grid item: Class Type grid-item-1-start-start Top-Left grid-item-1-start-end Top-Right grid-item-1-end-start Bottom-Left grid-item-1-end-end Bottom-Right Preview HTML sub-header Header All services disabled Complete Interactive sub-header Header All services disabled Complete Interactive \"> < div class = \" card u-margin-auto \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > Multiple Grid Items Display multiple grid items by using the wrapper class grid-box : Preview HTML sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive \"> < ul class = \" grid-box \" style = \" --grid-gap : 2rem ; --grid-item-size : 18rem ; --grid-item-size-small-screens : 16rem ; \" > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status \" > < button class = \" tag \" disabled > < span class = \" text \" > Disabled </ span > </ button > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > </ ul > file preview inline loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/grid-item"},"9":{"title":"components - inline loader","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components inline loader Inline loader Pending/Waiting Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Loading Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Failed Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-exclamation-circle u-color-text-danger \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Success Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Multiple Loader Boxes Preview HTML Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > grid item label card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/inline-loader"},"10":{"title":"components - label card","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components label card Label Card A representation of content uploaded as an attachment. Plan Cards Preview HTML Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited \"> < ul class = \" u-flex u-flex-vertical u-gap-24 u-max-width-350 \" > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Pro plan </ h4 > < p class = \" u-color-text-gray \" > For projects you want to scale easily. < b > $25/month + Add-ons </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Free plan </ h4 > < p class = \" u-color-text-gray \" > For personal, passion projects. < b > Totally free </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-4 u-opacity-50 \" > < h4 class = \" body-text-2 u-bold \" > Disabled plan </ h4 > < p class = \" u-color-text-gray \" > < b > Unlimited </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto u-opacity-50 \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > </ ul > Region Cards Preview HTML Netherlands Notify me Netherlands Netherlands Netherlands Netherlands Netherlands Singapore Netherlands Notify me Netherlands Netherlands Netherlands Netherlands Netherlands Singapore \"> < ul class = \" grid-box \" style = \" --p-grid-item-size : 10em ; --p-grid-item-size-small-screens : 10rem ; \" > < li > < label class = \" card u-height-100-percent u-flex u-flex-vertical u-gap-16 \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/netherlands.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto u-opacity-20 \" alt = \" \" /> < p class = \" u-opacity-20 \" > Netherlands </ p > < button class = \" tag u-cross-child-center \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Notify me </ span > </ button > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/united-kingdom.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Netherlands </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/canada.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Netherlands </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/usa.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Netherlands </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/germany.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Netherlands </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/india.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Netherlands </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/netherlands.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Singapore </ p > </ div > </ label > </ li > </ ul > inline loader modal Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/label-card"},"11":{"title":"components - modal","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components modal Modal Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed. Class Type modals Modal A class representing a modal Components Modals consist of five components: Class Type modal-form Form modal-header Header modal-title Title modal-content Content modal-footer Footer Preview HTML Open Modal Modal title Modal label text. Button Button Open Modal Modal title Modal label text. Button Button \"> < button class = \" button \" > < span > Open Modal </ span > </ button > < dialog class = \" modal \" id = \" dialog \" > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < div class = \" avatar is-color-orange is-medium \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > </ div > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > To open or close a modal, use the native <dialog> element’s show() , showModal() and close() methods. For more information, please refer to the MDN documentation . Sizes In the Appwrite console, we use three sizes of modals: class Type is-small Small - Medium is-big Big Preview HTML Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button \"> < dialog id = \" dialog4 \" class = \" modal is-small \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > < dialog id = \" dialog5 \" class = \" modal is-big \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Separate Header State class which allow to seperate the header with border. class Type is-separate-header Add Border bottom to header of Modal Preview HTML Modal title Provide contextual feedback messages for complex modals. Label Label Button Button Modal title Provide contextual feedback messages for complex modals. Label Label Button Button \"> < dialog id = \" dialog6 \" class = \" modal is-big is-separate-header \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > < p > Provide contextual feedback messages for complex modals. </ p > </ header > < div class = \" modal-content \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Best Practice Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text. label card progress bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/modal"},"12":{"title":"components - progress bar","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components progress bar Progress Bar Preview HTML Bandwidth 50% 50.01GB 100GB Bandwidth 50% 50.01GB 100GB \"> < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > Full Progress Bar Options Preview HTML Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs \"> < ul class = \" u-flex-vertical u-gap-24 \" > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-folder \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Storage </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-warning \" > 85% </ p > </ div > < div class = \" progress-bar-container is-warning \" style = \" --graph-size : 85% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-lightning-bolt \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Compute </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-danger \" > 105% </ p > </ div > < div class = \" progress-bar-container is-danger \" style = \" --graph-size : 105% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 3.50hrs </ span > < span class = \" progress-bar-text-max \" > 100hrs </ span > </ div > </ section > </ li > </ ul > modal secondary tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/progress-bar"},"13":{"title":"components - secondary tabs","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components secondary tabs Secondary Tabs Secondary tabs allows users to switch between multiple sections of content within a single section/container. Class Type secondary-tabs Secondary Tabs A class representing secondary tabs Components Secondary Tabs consist of two components: Class Type secondary-tabs-item Item secondary-tabs-button Button Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Sizes Class Type is-large Large Used for big sections or to switch between code snippets Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-large \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > progress bar tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/secondary-tabs"},"14":{"title":"components - tabs","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components tabs Tabs Tab navigation allows users to switch between multiple sections of content within a single screen. Class Type tabs Tabs A class representing tabs Components Tabs consist of four components: Class Type tabs-list List - tabs-item Item - tabs-button Button - tabs-button-scroll Scroll Used when there is not enough space to display all tabs, mostly on mobile devices. The tabs-button-scroll element can be hidden by adding u-hide class to it. Preview HTML Overview Sessions Activity Settings Overview Sessions Activity Settings \"> < div class = \" tabs \" style = \" width : 350px \" > < button class = \" tabs-button-scroll is-start \" aria-label = \" Show items in start side \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > </ button > < button class = \" tabs-button-scroll is-end \" aria-label = \" Show items in end side \" > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < ul class = \" tabs-list \" > < li class = \" tabs-item \" > < a class = \" tabs-button is-selected \" href = \" # \" > < span class = \" text \" > Overview </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Sessions </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Activity </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Settings </ span > </ a > </ li > </ ul > </ div > Best Practice In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If the amount of tabs exceeds the space that is available, adding a horizontal scrolling element is recommended. The right arrow should always be visible. If the user can scroll right, the arrow is active, otherwise the arrow should be disabled. The left arrow should only visible if the user can scroll left. secondary tabs toggle button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/tabs"},"15":{"title":"components - toggle button","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components toggle button Toggle Button Icon toggle is used to switch between two possible states displayed with icons. Class Type toggle-button Icon Toggle A class representing an icon toggle. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Components Icons Toggle inner parts are: Class Type toggle-button-list A class that wraps both toggle items toggle-button-item A class that wraps one toggle item toggle-button-element An icon button States To disable the toggle, add the following attribute: Attribute Type disabled Disabled Use whenever clicking on a toggle isn’t allowed. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" disabled aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" disabled aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Icon Toggle with Tooltip In the Appwrite console, we display a tooltip on hover, as shown below: Preview HTML List View Grid View List View Grid View \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element tooltip \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > List View </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected tooltip \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > Grid View </ span > </ button > </ li > </ ul > </ div > < br /> tabs upload box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/toggle-button"},"16":{"title":"components - upload box","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload box Upload Box Upload Box displays the status of all uploaded files. Class Type upload-box Upload Box A class representing an upload box Components Upload Boxes consist of six components: Class Type upload-box-header Header upload-box-title Title upload-box-content Content upload-box-list List upload-box-item Item is-open Open State Preview HTML File Uploads 3 % hello.mp4 & % hello.mp4 & % hello.mp4 & File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 File Uploads 3 % hello.mp4 &amp; % hello.mp4 &amp; % hello.mp4 &amp; File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 \"> < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > </ ul > </ div > </ section > < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content is-open \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 30% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-warning \" > pending </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 60% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-danger \" > failed </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished u-margin-inline-end-16 \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < button class = \" icon-button u-color-text-success \" aria-label = \" Uploaded \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ section > Upload Loader Class Type upload-image Upload Loader Upload Loader displays the uploading progress of a specific file. Preview HTML \"> < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > </ span > </ div > toggle button upload file box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-box"},"17":{"title":"components - upload file-box","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload file box Upload File Box Upload File Box allows users to select and upload a file to a specific location. Class Type upload-file-box Upload File Box A class representing an upload file box Components Upload File Boxes consist of eight components: Class Type upload-file-box Partial container upload-file-box-image Image upload-file-box-title Title upload-file-box-info Info upload-file-box-list List upload-file-box-name File Name upload-file-box-size File Size is-hover-with-file Hover State Default Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > </ div > </ div > File Added Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > Error Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > < p class = \" helper u-color-text-danger u-margin-block-start-8 \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Display a contextual error message here </ span > </ p > upload box user profile Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-file-box"},"18":{"title":"components - user profile","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components user profile User Profile User profile popover shows extra details about a user or a team. Class Type user-profile User Profile A class representing a user profile Components User profiles consist of three components: Class Type user-profile-info Info user-profile-sep Separator user-profile-empty-column Empty Column Preview HTML UN User Name User ID Extra description UN User Name User ID Extra description \"> < div class = \" card \" > < div class = \" user-profile \" > < span class = \" avatar \" > UN </ span > < span class = \" user-profile-info \" > < span class = \" name \" > User Name </ span > < div class = \" interactive-text-output u-padding-inline-0 \" > < span class = \" text \" > User ID </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ span > < span class = \" user-profile-sep \" > </ span > < span class = \" user-profile-empty-column \" > </ span > < span class = \" user-profile-info \" > < span class = \" text \" > Extra description </ span > </ span > </ div > </ div > upload file box border radius Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/user-profile"},"19":{"title":"elements - box","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements box Box Boxes apply spacing, a border, and rounded corners to content areas. Class Type box Box A class representing a box Preview HTML Box element Box element \"> < div class = \" box \" > Box element </ div > Multiple Boxes You stack multiple boxes on each other by using the boxes-wrapper class. Middle boxes will appear without a border radius. Preview HTML Top Box Middle Box Middle Box Bottom Box Top Box Middle Box Middle Box Bottom Box \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-gap-16 u-cross-center \" > Top Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Bottom Box </ div > </ div > pagination button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/box"},"20":{"title":"elements - button","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements button Button Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it. Class Type button Button A class representing a button Types In the Appwrite console, we use four types of buttons: Class Type - Primary We recommend you use primary buttons for the principal call to action in a page or screen. is-secondary Secondary Secondary buttons can be used in conjunction with a primary button. As part of a pair with primary button, a secondary button will often perform a negative action, such as “Cancel”. is-text Text Text buttons can be used to complete an action inside another component. is-only-icon Icon Icon button with rounded corners Preview HTML Primary Secondary Text Primary Secondary Text \"> < button class = \" button \" > < span class = \" text \" > Primary </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Secondary </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Text </ span > </ button > < button class = \" button is-only-icon \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" style = \" --button-size : 2.5rem ; \" aria-label = \" Remove item \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > Sizes There are two sizes of buttons; large and medium. Each size has its own purpose, so make sure you use every size correctly. class Type - Medium The most commonly used size (default size). Pink Design’s input fields are 40px tall, which is why we use medium size buttons next to input fields. is-big Large Use in a case of call to action that should stand out and have a lot of attention, mostly used on landing pages. Preview HTML Medium Large Medium Large \"> < button class = \" button \" > < span class = \" text \" > Medium </ span > </ button > < button class = \" button is-big \" > < span class = \" text \" > Large </ span > </ button > Buttons With Icons Use icons in cases where they have a strong universal meaning and aid in the recognition of a button. In Appwrite, the icon is placed on the left by default. Preview HTML Button Button Button Button Button Button Button Button Button Button Button Button Button Button \"> < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" text \" > Button </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-download \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > Buttons List Preview HTML Button 1 Button 2 Button 3 Button 4 Button 1 Button 2 Button 3 Button 4 \"> < ul class = \" buttons-list u-margin-auto \" > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 1 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 2 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 3 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 4 </ span > </ button > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency and readability in buttons: Do Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word. Don't Avoid using specific icons, uppercase in every word and long sentences. box card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/button"},"21":{"title":"elements - card","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements card Card Cards are used to group related content in a single container. This can include text, images, lists, buttons, and other elements. Class Type card Card A class representing a card. Styles In the Appwrite console, we use two styles of card borders: Class Type - Solid Solid borders should be the default for cards. is-border-dashed Dashed Use dashed borders only for empty state cards. Special state Class Type is-allow-focus focus If card as this class, is something inside focus, the card will be focus as well (keyboared focus) Preview HTML \"> < article class = \" card \" > </ article > < article class = \" card is-border-dashed \" > </ article > Focus label card Play with the tab key to see focus of card according to the focus of checkbox. In components section you can see more complex demo of “Label Card”. Preview HTML some text some text some text some text \"> < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > Best Practice Cards are used to show empty states, to update or delete objects and to display overviews. A card can include avatars, buttons, illustrations, lists, tags and text. For example: Create your first file to get started. Need a hand? Check out our documentation. Documentation Create file button checkbox Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/card"},"22":{"title":"elements - checkbox","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements checkbox Checkbox Checkboxes allow users to select one or more items from a set. Preview HTML \"> < input type = \" checkbox \" /> < input type = \" checkbox \" checked = \" true \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state States To disable a checkbox, add the following class: Attribute Type disabled Disabled Use whenever clicking on a checkbox isn’t allowed. Preview HTML \"> < input type = \" checkbox \" disabled /> < input type = \" checkbox \" checked = \" true \" disabled /> < input type = \" checkbox \" disabled class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state Sizes There are three sizes of checkboxes; small, medium and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" is-small \" /> < input type = \" checkbox \" /> < input type = \" checkbox \" class = \" is-large \" /> < br /> < input type = \" checkbox \" class = \" is-small js-indeterminate \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < input type = \" checkbox \" class = \" is-large js-indeterminate \" /> Note: Javascript is used to implement the indeterminate state Best Practice We recommend checkboxes next to labels should have at minimum 8px of space in between for legibility. Checkboxes should be aligned to the center of a single line of text. If there are multiple lines in a label should be aligned to the center of the first line in the label. Checkboxes allow users to select multiple items from a set. Do Use checkboxes to allow users select one or more options from a list with related items. Don't Do not use switches; they imply enabling/disabling an item and take up more visual space. card inline code Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/checkbox"},"23":{"title":"elements - inline code","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline code Inline Code Inline code snippets can be used within text to create visual emphasis on code snippets, or indicate text that can be copied verbatim like file names and IDs. Class Type inline-code Inline Code A class representing an inline code Preview HTML keyword or part of a code keyword or part of a code \"> < code class = \" inline-code \" > keyword or part of a code </ code > checkbox inline tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-code"},"24":{"title":"elements - inline tag","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline tag Inline Tag An inline tag is used as a number label inside a button. Some possible use cases are indicating the number of columns in a table or the number of related items. Class Type inline-tag Inline Tag A class representing an Inline Tag Preview HTML 4 4 \"> < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > Color State Class Type is-info info state blue color for inline tag Preview HTML 2 2 \"> < span class = \" inline-tag is-info \" > < span class = \" text \" > 2 </ span > </ span > Usage with Buttons Incorporate the inline tag into secondary buttons or text buttons by doing the following: Preview HTML button 4 button 4 button 4 button 4 button 4 button 4 button 4 button 4 \"> < button class = \" button is-secondary \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-secondary \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > inline code input field Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-tag"},"25":{"title":"elements - input field","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements input field Input Field Input fields are an easily discoverable, efficient, and accessible way for users to input information. They typically appear in forms or dialogue modals. Types There are a few different types of input field that the user can interact with: Input Type Type text Text Default text input Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type text Search Used to input one or more terms to conduct a search. Preview HTML \"> < div class = \" input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 \" > < input type = \" search \" placeholder = \" Search \" /> < div class = \" icon-search \" aria-hidden = \" true \" > </ div > < button class = \" button is-text is-only-icon \" aria-label = \" Clear search \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > Input Type Type password Password Used to input passwords or other sensitive data. - Input with two buttons Displays up to two trailing icons to provide additional functionality to the text (for example: clear, copy, hide, edit). Preview HTML Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ form > Input Type Type numeric Numeric Used for numeric input - Input with two buttons Display with two buttons Preview HTML Label Disabled Label Disabled \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Disabled </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" disabled /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ form > Input Type Type file Upload file Used in case upload a file is necessary. Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" file \" name = \" file \" id = \" file-file \" size = \" 1 \" /> </ li > </ ul > </ form > Input Type Type text Multi Select Used to create ‘tags’ when the user types in the input field. Preview HTML Label role Label role \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" tags-input \" > < div class = \" tags \" > < ul class = \" tags-list \" > < li class = \" tags-item \" > < div class = \" input-tag \" > < span class = \" tag-text \" > role < div > </ div > </ span > < button class = \" input-tag-delete-button \" aria-label = \" delete all:role tag \" type = \" button \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ div > < input type = \" text \" class = \" tags-input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type select Dropdown Allows users to choose one option from a list of values. Preview HTML Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" select u-width-full-line \" > < select name = \" pets \" id = \" pet-select \" > < option value = \" \" > Select option </ option > < option value = \" 1 \" > Option 1 </ option > < option value = \" 2 \" > Option 2 </ option > < option value = \" 3 \" > Option 3 </ option > < option value = \" 4 \" > Option 4 </ option > < option value = \" 5 \" > Option 5 </ option > < option value = \" 6 \" > Option 6 </ option > </ select > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ li > </ ul > </ form > Custom Select Dropdown is made with drop-list . To hide items use the u-hide class. Preview HTML Label Placeholder Item 1 Item 2 Label Placeholder Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < button class = \" input-text-wrapper u-width-full-line \" type = \" button \" style = \" --amount-of-buttons : 1 \" > < span class = \" input-text \" > < span class = \" text \" > Placeholder </ span > </ span > < div class = \" options-list is-no-separator \" > < div class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ div > </ button > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Custom Select with Search Dropdown is made with drop-list . To hide items use the u-hide class. To adjust arrow upl add the is-open class, where the element with custom-select class. To show/hide the button clear field, toggle the u-hide class. Preview HTML Label Item 1 Item 2 Label Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" value = \" bessie \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg667fg6fg67fc68ac3515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Bessie, Cooper, < a class = \" link \" href = \" mailto:bessiecooper@gmail.com \" > bessiecooper@gmail.com </ a > , bessiecooper.com </ span > </ div > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg6673515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Baseball, Football, < a class = \" link \" href = \" mailto:ball@gmail.com \" > ball@gmail.com </ a > , playingball.com </ span > </ div > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select \" > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < div class = \" u-flex u-flex-vertical u-cross-center \" > < div > < img class = \" u-only-light \" src = \" /empty-state-light.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> < img class = \" u-only-dark \" src = \" /empty-state-dark.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> </ div > < div class = \" u-text-center u-margin-block-start-4 \" > < h2 class = \" body-text-2 u-bold u-trim-1 \" > < span class = \" text \" > Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ </ span > </ h2 > < p class = \" text \" > There are no documents that match your search. </ p > </ div > < div class = \" u-flex u-gap-16 u-main-center u-margin-block-start-16 \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" text \" > Clear Search </ span > </ button > </ div > </ div > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Input Type Type textarea Textarea For inputs containing more than two lines of text (for example: articles, blog posts, user feedback). Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < textarea class = \" input-text \" placeholder = \" Type here... \" > </ textarea > </ li > </ ul > </ form > States States can be applied to all inputs fields: Attribute Type - Default Default text input disabled Disabled Used in case the user can’t interact with an input field readonly Readonly Used in case the user can’t change the content in the input field. Sometimes in read-only fields there is a copy button. Preview HTML Label Label Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" disabled /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" readonly /> </ li > </ ul > </ form > Helper Text Helper text provides information and feedback about what to enter in an input. Use the helper class to add helper text below an input field. Class Type - Default Used to provide information about what should be entered into the input field. u-success Success An indication that the information entered into a field is valid/correct. u-warning Warning Used underneath the input field when the user provides incorrect information. This message should provide contextual instructions on how to fix the error. u-error Error An indication that the information entered into a field is invalid/incorrect. Preview HTML This is a helper This is success This is a warning This is an error This is a helper This is success This is a warning This is an error \"> < p class = \" helper \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a helper </ span > </ p > < p class = \" helper u-color-text-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is success </ span > </ p > < p class = \" helper u-color-text-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > < p class = \" helper u-color-text-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is an error </ span > </ p > Input with All Parameters Applied Preview HTML Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-56 \" placeholder = \" placeholder text \" /> < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-120 \" placeholder = \" placeholder text \" /> < ul class = \" buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12 \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < textarea class = \" input-text is-warning u-padding-block-end-32 \" placeholder = \" Type here... \" style = \" --amount-of-buttons : 0.25 ; \" > </ textarea > < ul class = \" buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12 \" style = \" border-end-end-radius : 0.0625rem ; \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > </ ul > </ form > inline tag keyboard Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/input-field"},"26":{"title":"elements - keyboard","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements keyboard Keyboard This element displays keyboard shortcuts. Class Type kbd Keyboard shortcuts A class representing a keyboard element Preview HTML To open search box please press ⌘ + K buttons. To open search box please press ⌘ + K buttons. \"> < p class = \" text u-margin-block-start-8 \" > To open search box please press < kbd class = \" kbd \" > ⌘ </ kbd > + < kbd class = \" kbd \" > K </ kbd > buttons. </ p > input field list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/keyboard"},"27":{"title":"elements - list","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements list List A list is a vertical grouping of related content. Class Type list List A class representing a list Types In the Appwrite console we use two types of list items: Class Type list-item List Item Use in cases list items begin with an icon numeric-list-item Numeric List Item Use in cases list items begin with a number Preview HTML List Item List Item (link) List Item (button) List Item List Item (link) List Item (button) \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < a href = \" # \" class = \" link \" > < span class = \" text \" > List Item (link) </ span > </ a > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < button class = \" link \" > < span class = \" text \" > List Item (button) </ span > </ button > </ li > </ ul > Preview HTML List Item List Item List Item List Item List Item List Item \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > </ ul > Preview HTML Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item \"> < ol class = \" numeric-list \" > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > Numeric List Item </ span > </ li > </ ol > keyboard loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/list"},"28":{"title":"elements - loader","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements loader Loader Use loaders to indicate to users that something is in progress and still needs to complete. Class Type loader Loader A class representing a loader Preview HTML \"> < div class = \" loader \" > </ div > Small Loader Preview HTML \"> < div class = \" loader is-small \" > </ div > list output Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/loader"},"29":{"title":"elements - output","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements output Output Interactive text outputs allow users to interact with the displayed text. Copying and hiding are the two most common actions in this element. Class Type interactive-text-output Output A class representing an interactive text output Components Interactive text output contains buttons: Class Type interactive-text-output-buttons Button/s Wrapper interactive-text-output-button Button Buttons can be hidden (will appear on hover) or displayed next to the content. Preview HTML visible text •••••• visible text •••••• \"> < div class = \" interactive-text-output \" > < span class = \" text u-break-word \" > visible text </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > Buttons On Top Preview HTML This is the visible text which is very long This is the visible text which is very long \"> < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-width-200 \" > < span class = \" text u-trim-start \" > This is the visible text which is very long </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > The following style can be applied to textareas using the is-textarea class: Preview HTML 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi \"> < div class = \" interactive-text-output is-textarea \" > < span class = \" text u-line-height-1-5 u-break-word \" > < p class = \" text u-margin-block-start-8 \" > 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi </ p > </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > loader radio button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/output"},"30":{"title":"elements - radio button","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements radio button Radio Button Radio buttons allow users to select one item from a set. Preview HTML \"> < input type = \" radio \" name = \" radio-1 \" /> < input type = \" radio \" name = \" radio-1 \" checked = \" true \" /> States To disable a radio button, add the following class: Attribute Type disabled Disabled Use whenever clicking on a radio button isn’t allowed. Preview HTML \"> < input type = \" radio \" name = \" radio-2 \" disabled /> < input type = \" radio \" name = \" radio-2 \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" radio \" class = \" is-small \" name = \" size \" /> < input type = \" radio \" name = \" size \" checked = \" true \" /> < input type = \" radio \" class = \" is-large \" name = \" size \" /> Best Practice Radio buttons next to labels should have at minimum 8px of space in between for legibility. Radio buttons should be aligned to the center of a single line of text. If there are multiple lines in a label, the radio button should be aligned to the center of the first line in the label. Radio buttons refer to a single item and allow selecting only one item from a list. Do Use radio buttons to allow users make a single selection from a list of options. Don't Do not use checkboxes when only one item can be selected. output status Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/radio-button"},"31":{"title":"elements - status","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements status Status Status indicates the current state of a multi-state process. Class Type status Status A class representing a status Components Status contains an icon: Class Type status-icon Icon States There are a few different states available for a status: Class Type - Default is-warning Waiting is-pending Pending is-failed Failed is-complete Complete is-processing Processing Preview HTML Ready Waiting Pending Failed Complete Processing Ready Waiting Pending Failed Complete Processing \"> < div class = \" status \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Ready </ span > </ div > < div class = \" status is-waiting \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Waiting </ span > </ div > < div class = \" status is-pending \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Pending </ span > </ div > < div class = \" status is-failed \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Failed </ span > </ div > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > < div class = \" status is-processing \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Processing </ span > </ div > radio button switch Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/status"},"32":{"title":"elements - switch","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements switch Switch Switches are used to quickly toggle between two possible states. They are commonly used for “on/off” switches. Class Type switch Switch A class representing a switch Preview HTML \"> < input type = \" checkbox \" class = \" switch \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> States To disable a switch, add the following class: Attribute Type disabled Disabled Use whenever clicking on a switch isn’t allowed. Preview HTML \"> < input type = \" checkbox \" class = \" switch \" disabled /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" switch is-small \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> < input type = \" checkbox \" class = \" switch is-large \" /> Best Practice Switches next to labels should have at minimum 8px of space in between for legibility. Switches should be aligned to the center of a single line of text. If there are multiple lines in a label, switches should be aligned to the center of the first line in the label. Switches refer to a single item and allow turning an item on or off. Do If each item in a set can be independently controlled, use switches to allow on or off options. Don't Do not use radio buttons to allow on or off options. status table Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/switch"},"33":{"title":"elements - table","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements table Table Tables are used throughout the Appwrite console to organize and display data. Class Type table Table A class representing a table Components Tables consist of five components: Class Type table-thead Head table-thead-col Head Column table-tbody Body table-row Row table-col Column Styles In the Appwrite console, we use three styles of tables: Class Type - Default Table The default table can have two or more columns. If the table width exceeds the size of the user’s screen, it should scroll horizontally. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-selected-columns-mobile \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-table-row-medium-size Narrow rows Change heght from 72px to 54px Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-table-row-medium-size \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-remove-outer-styles Without Outer Styles Secondary table - in the Appwrite console used mostly inside a card or a wizard. Preview HTML Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable \"> < section class = \" card \" > < table class = \" table is-remove-outer-styles \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Value </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Lorem </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > Numquam exercitationem. </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye-off \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Ipsum </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > </ tbody > </ table > < div class = \" u-flex u-margin-block-start-16 \" > < button class = \" button is-text u-padding-inline-0 \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create variable </ span > </ button > </ div > </ section > Class Type is-sticky-scroll Inner Scroll Used in case the content of a table exceeds the maximum width and the first column should be sticky. Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Preview HTML Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cross-center u-cursor-pointer \" aria-label = \" select/deselect all visible item on table \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" /> </ div > </ label > < span class = \" eyebrow-heading-3 \" > Collection ID </ span > </ div > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Updated </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Collection ID \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cursor-pointer \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" aria-label = \" select item that start in: 637a4 \" /> </ div > </ label > < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250 \" > < div class = \" text u-trim \" > 637a40ba7a703e3936e1 </ div > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ div > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Movie </ span > </ td > < td class = \" table-col \" data-title = \" Updated \" > < time class = \" text \" > May 3, 2023, 17:32 </ time > </ td > < td class = \" table-col \" data-title = \" Created \" > < time class = \" text \" > May 3, 2023, 16:59 </ time > </ td > </ tr > </ tbody > </ table > </ div > </ div > Scrolling tables without a sticky column should be wrapped by <div class="table-with-scroll"> and <div class="table-wrapper"> . Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Clickable Row Tables Clickable rows allow you to use rows as links. They are useful when you want to maintain native browser behavior for links, like opening in a new tab. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < div class = \" table \" role = \" table \" > < div class = \" table-thead \" role = \" rowheader \" > < div class = \" table-row \" role = \" row \" > < div class = \" table-thead-col \" role = \" columnheader \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ div > < div class = \" table-thead-col \" role = \" columnheader \" style = \" --p-col-width : 40 \" > </ div > </ div > </ div > < div class = \" table-tbody \" role = \" rowgroup \" > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > < p class = \" text u-margin-block-start-8 \" > Mobile illustration - dark.png </ p > </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/39 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > </ div > </ div > switch tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/table"},"34":{"title":"elements - tag","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tag Tag Tags help organize and differentiate between different categories of content. In the Appwrite console, tags may be interactive or static. Class Type tags Tag A class representing a tag Informative Tags Informative tags are used to visually label information for easy understanding and/or navigation. In the Appwrite console, we use our system colours for each type of tag (gray, blue, green, orange, red) depending on context. Class Type - Default Use this tag to provide general details to the user. In the Appwrite console this style is typically used for ‘disabled’ state tags. is-info Info Use this tag to provide additional information or ‘tips’ to the user. is-success Success Use this tag to inform the user of a task that has been completed or verified successfully. is-warning Warning Use this tag to warn the user that action may be required, or a task is currently processing, depending on the context. is-danger Danger / Error Use this tag to warn the user about an error that may have occured or a task has failed. Preview HTML default info success warning error Beta default info success warning error Beta \"> < div class = \" tag \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > default </ span > </ div > < div class = \" tag is-info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > info </ span > </ div > < div class = \" tag is-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > success </ span > </ div > < div class = \" tag is-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > warning </ span > </ div > < div class = \" tag is-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > error </ span > </ div > < div class = \" tag eyebrow-heading-3 \" > < span class = \" text u-x-small \" > Beta </ span > </ div > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. Interactive Tags Interactive tags are clickable or tappable. In the Appwrite console these are typically used to allow users to copy or edit an element’s ID. Use an icon to clarify the action (e.g. the ‘duplicate’ icon for copy and ‘pencil’ icon for edit). Preview HTML Interactive Interactive Interactive Interactive Interactive Interactive \"> < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > < a href = \" # \" class = \" tag is-selected \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ a > < button class = \" tag \" disabled > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. table tooltip Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tag"},"35":{"title":"elements - tooltip","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tooltip Tooltip Tooltips float over the layout and provide additional information about elements in the user interface or features upon hover or focus. Class Type tooltip Tooltip A class representing a tooltip Components Tooltips consist of two components: Class Type tooltip-popup Text is-bottom Align Bottom The tooltip will appear below the element. is-center Align Center The tooltip will be align center to the partial Preview HTML Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. \"> < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys. </ p > </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup is-bottom \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > tag action bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tooltip"},"36":{"title":"foundations - border radius","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations border radius Border Radius Different sizes of border radius are used throughout the Appwrite UI according to the component size. Sizes In Appwrite console we use 4 sizes of border radius: Variable Value --border-radius-xsmall 4px Designed to soften the corners of small components, such as checkboxes, input fields, buttons, alerts and tooltips. Preview HTML - -border-radius-xsmall \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-xsmall ) ; \" > </ div > Variable Value --border-radius-small 8px Designed to soften the corners of small components that are part of a bigger one or for medium components, such as items in the sidebar menu and popovers. Preview HTML - -border-radius-small \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-small ) ; \" > </ div > Variable Value --border-radius-medium 16px Used when a UI element is large or needs to float above the underlying UI, such as cards, modals and tables. Preview HTML - -border-radius-medium \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-medium ) ; \" > </ div > Variable Value --border-radius-circular 50% Used only on specific elements that needs to be rounded, such as icon buttons, avatars, tags and switches. Preview HTML - -border-radius-circular \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-circular ) ; \" > </ div > Best Practice Tips to keep in mind while using border radius: Do Use medium corner radius on large elements. Don't Do not use extra small or small corner radius on large elements, it will make them look too sharp and serious. user profile colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/border-radius"},"37":{"title":"foundations - colors","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations colors Colors Color helps us create a consistent brand identity across our products. Shades selected in Pink Design maintain a AA accessibility level. Usage All of our colors are available as CSS variables. The CSS variables represent the HSL values, for example, --color-primary-100 is 343, 87%, 56% . Colors can be used as follows: < style > div { color : hsl ( var ( --color-primary-100 ) ) ; /* To control opacity: */ color : hsl ( var ( --color-primary-100 ) / 0.5 ) ; } </ style > Brand Pink Design’s expanded brand color palette contains 3 shades. This is our primary color palette used to indicate primary actions. - -color-primary-100 - -color-primary-200 - -color-primary-300 Neutrals Pink Design’s neutral palette is used for both light and dark mode. Neutrals are used mostly for background colors, text, and seperators. - -color-neutral-0 - -color-neutral-5 - -color-neutral-10 - -color-neutral-30 - -color-neutral-50 - -color-neutral-70 - -color-neutral-100 - -color-neutral-120 - -color-neutral-150 - -color-neutral-200 - -color-neutral-300 - -color-neutral-400 - -color-neutral-500 System Colors In the Appwrite console, we use 4 system colors: Type Information Blue often used for informative alerts and ‘selected’ mode in selectors. Success Green often used for success alerts. Warning Orange often used for warning alerts and modals. Error Red often used for danger/error alerts. - -color-information-10 - -color-information-50 - -color-information-100 - -color-information-120 - -color-information-200 - -color-success-10 - -color-success-50 - -color-success-100 - -color-success-120 - -color-success-200 - -color-warning-10 - -color-warning-50 - -color-warning-100 - -color-warning-120 - -color-warning-200 - -color-danger-10 - -color-danger-50 - -color-danger-100 - -color-danger-120 - -color-danger-200 Additional Colors In the Appwrite console, we use the colors below in specific components, such as avatars and code snippets. - -color-blue-100 - -color-green-100 - -color-orange-100 - -color-red-100 - -color-purple-100 - -color-pink-100 Special Colors - -color-text-disabled - -color-text-info - -color-text-danger - -color-text-warning - -color-text-success - -color-border border radius dark theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/colors"},"38":{"title":"foundations - dark theme","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations dark theme Dark Theme Pink Design has in-built dark theme support. We use Sass (with the SCSS variant) for easier maintenance. CSS Class SCSS Variable Theme Default - Light .theme-dark $theme-dark Dark Global Sass variable This global CSS class is declared as a Sass variable in order to be used inside partials < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; </ style > Implementation to a SCSS Partial < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; /* Dark Theme */ # { $theme-dark } & { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } } </ style > Compiled CSS < style > .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; } /* Dark Theme */ .theme-dark .partial { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } </ style > Theme Utility Classes Navigate to Pink Design Theme utility classes to learn how to show or hide components based on the theme being used. colors elevation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/dark-theme"},"39":{"title":"foundations - elevation","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations elevation Elevation Elevation is the relative distance between two surfaces along the z-axis. Shadows and blurs create a layered effect that visually indicates that an object is "elevated" in priority or hierarchy. Types In the Appwrite console we use two types of elevation: Variable Type shadow-small Small Used to show contrast between layout elements, such as cards or tables, and their parent component. shadow-large Large Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below. Preview HTML shadow-small shadow-large shadow-small shadow-large \"> < div class = \" card \" style = \" box-shadow : var ( --shadow-small ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-small </ p > </ div > < div class = \" card \" style = \" box-shadow : var ( --shadow-large ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-large </ p > </ div > Best Practice Small shadows should be used with standard layout components (e.g. cards, tables). We recommend the use of a large drop-shadow for floating components (e.g. popovers, alerts, modals). Do To create contrast between a floating surface and the surface beneath, use shadow-large. Don't Do not make floating elements look flat by not using shadows. dark theme icons Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/elevation"},"40":{"title":"foundations - icons","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations icons Icons An icon is a visual representation of a command, device, directory, or common action. General Icons In Appwrite we use the heroicons library. By following the steps below, you can easily include all icons in your projects: Navigate to Heroicons website Navigate to heroicons and make sure you are looking at the solid icons. Select an icon and copy its name. Use the selected icon In your code use a class, type icon- and paste the icon’s name right after. Additional Icons Social and technology icons are available in gray-scale and color. Gray-scale Icons were translated into class names and color icons are available as SVG files. Grayscale Color icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-opera icon-paypal icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-opera icon-paypal icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom Best Practice We recommend using at minimum 4px of space between icons and labels for legibility. Icons should be aligned to the center of a single line of text. If there are multiple lines in a label, the icon should be aligned to the center of the first line in the label. Do Use minimum 4px of space between icon to text and make sure they are centered. Don't Do not use less than 4px of space. If there are multiple lines in a label, do not center the icon to all of them, but to the first line. elevation responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/icons"},"41":{"title":"foundations - responsive","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations responsive Responsive Responsive Design allows users to access content across multiple device resolutions. We use Sass (with the SCSS variant) for easier maintenance. Breakpoints In the Appwrite console we use three screen ranges (small / medium / large): Screen Size Range Scss Variable Small 0px - 767px $break1 Medium 768px - 1198px $break2 Medium (open) 768px - Infinite $break2open Large (open) 1199px - infinite $break3open CSS Implementation < style > /* affect all screens sizes */ .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* affect only small screens */ @media ( max-width : 767.99px ) { .partial { --p-padding : 1rem ; } } /* affect only small & medium screens */ @media ( max-width : 1198.99px ) { .partial { --p-padding : 1rem ; } } /* affect only medium and larger screens */ @media ( min-width : 768px ) { .partial { --p-padding : 1rem ; } } /* affect only small and larger screens */ @media ( max-width : 767.99px ) and ( min-width : 1199px ) { .partial { --p-padding : 1rem ; } } </ style > SCSS Code < style language = \" scss \" > /* Responsive Variables */ $ break1 : \"(max-width:767.99px)\" ; $ break2 : \"(min-width:768px) and (max-width:1198.99px)\" ; $ break2open : \"(min-width:768px)\" ; $ break3open : \"(min-width:1199px)\" ; </ style > Sass Variables Breakpoints in Media Queries Rule < style > @media # { $break1 } { } /* small screens */ @media # { $break2 } { } /* medium screens */ @media # { $break2open } { } /* medium & large screens */ @media # { $break3open } { } /* large screens */ </ style > Special Use Cases In some use cases, we might want to affect only a part of screen sizes and not all of them. In Pink Desing responsive library, there is no overlap between the different resolutions. As shown in the example below, you can affect more than one screen size by adding breakpoints. < style > .partial { /* here you put code for all screen sizes */ @media # { $break1 } { } /* only small screens */ @media # { $break1 } , # { $break2 } { } /* small & medium screens */ @media # { $break2 } { } /* only medium screens */ @media # { $break1 } , # { $break3open } { } /* small & large screens */ } </ style > Example of a SCSS Partial < style language = \" scss \" > .partial { --p-partial-padding : 1.25rem ; padding : var ( --p-partial-padding ) ; /* medium screens and larger */ @media # { $break2open } { --p-partial-padding : 2.5rem ; } } </ style > Compiled CSS < style > .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* medium screens and larger */ @media ( min-width : 768px ) { .partial { --p-padding : 2.5rem ; } } </ style > icons typography Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/responsive"},"42":{"title":"foundations - typography","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations typography Typography Typography is a system of fonts used to provide a clear hierarchy, organize information, and to assist users during the product journey. Headings To determine the size of the typography, we use a font scale. The font sizes fit well with the 4px grid. In order to preserve semantics, sizes are not directly matched with HTML tags. Preview HTML Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 \"> < h1 class = \" heading-level-1 \" > Heading level 1 </ h1 > < h2 class = \" heading-level-2 \" > Heading level 2 </ h2 > < h3 class = \" heading-level-3 \" > Heading level 3 </ h3 > < h4 class = \" heading-level-4 \" > Heading level 4 </ h4 > < h5 class = \" heading-level-5 \" > Heading level 5 </ h5 > < h6 class = \" heading-level-6 \" > Heading level 6 </ h6 > < h6 class = \" heading-level-7 \" > Heading level 7 </ h6 > Eyebrow Headings Eyebrow headings are additional labels that can be used. Mostly used to support the main heading of a page or to provide additional context or orientation. Preview HTML EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 \"> < h4 class = \" eyebrow-heading-1 \" > EYEBROW HEADING level 1 </ h4 > < h5 class = \" eyebrow-heading-2 \" > EYEBROW HEADING level 2 </ h5 > < h6 class = \" eyebrow-heading-3 \" > EYEBROW HEADING level 3 </ h6 > Paragraphs For body texts, there are two font sizes (14px, 16px) and two weights (400 and 600). Underline is mostly used for links. Preview HTML Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline \"> < p class = \" body-text-1 u-bold \" > Body text level 1 SemiBold </ p > < p class = \" body-text-1 \" > Body text level 1 Regular </ p > < p class = \" body-text-1 u-underline \" > Body text level 1 Underline </ p > < p class = \" body-text-2 u-bold \" > Body text level 2 SemiBold </ p > < p class = \" body-text-2 \" > Body text level 2 Regular </ p > < p class = \" body-text-2 u-underline \" > Body text level 2 Underline </ p > < a class = \" link \" > Link text Underline </ a > Code Code text style is used for code snippets or inline code. Preview HTML Code level 1 Code level 1 \"> < code class = \" inline-code \" > Code level 1 </ code > Best Practice Eyebrow headings can be used to compliment headings or for subtle headers for lists. We recommend the use of the Underline text style for inline links. Do Use Underline text style for inline links as it guarantees link visibility when scanning text. Don't Do not use the Underline text style for text that is not linked. Underlines provide a strong perceived affordance of clickability, and users will be confused if underlined text doesn’t match this perception. responsive box model Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/typography"},"43":{"title":"getting started","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Getting Started Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Follow the steps below to start building with Pink Design. CDN Include the CSS library in your project Copy the following code into the <head> section of your HTML file. \"> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink \" /> <!-- optionally, add icons --> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink-icons \" /> NPM Install the CSS library Run the following command to install Pink Design as an NPM package. npm install @appwrite.io/pink Include the library in your project After installing Pink Design as a package, it will be added to the node_modules directory of your project. Include Pink Design as CSS library by importing it in your JavaScript files. import \"@appwrite.io/pink\" ; // optionally, add icons import \"@appwrite.io/pink-icons\" ; Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/getting-started"},"44":{"title":"home","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Pink Design Design. Build. Collaborate. Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Pink is designed to prioritize collaboration, dev experience, and accessibility. Get Started Header Button #F02E65 100% RR RR \"> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" avatar is-color-pink \" > RR </ span > <!-- ... --> </ div > </ td > <!-- ... --> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < div class = \" avatar \" > < img src = \" /jenny.jpg \" alt = \" JW \" /> </ div > <!-- ... --> </ div > </ td > $ git commit Name RR Ronald Richards ronald@appwrite.io Jenny Wilson jenny@appwrite.io Design Build Collaborate Design Design and create simple, consistent and user friendly features when contributing to Appwrite, or use our components for your own products Fully accessibile Light and dark mode support Optimized for Dev tooling Create Delete Secondary Primary Create a new object Overview Auth Database Functions Storage Build Design system created with developer experience in mind, with support of our internal developer team Easy to integrate with your preferred framework Only one CSS file is needed Getting started guide npm install @appwrite.io/pink import \"@appwrite.io/pink\" ; Collaborate One (open) source of truth for collaborating with others on Appwrite, or your own products Documentation and tips on usage of components Fully open source Collaborate with us in Discord and GitHub GitHub Discord #F02E65 100% $ git commit Try It Out Yourself Card Form Alert Kristin Watson kristin.watson@appwrite.io Edit profile Kristin Watson kristin.watson@appwrite.io Edit profile \"> Articles Announcing Pink Design Building software is fun. Building open source software is even better. At Appwrite, open source is at the core of everything we do... 3 min read Getting Started with Pink Design Pink Design is Appwrite's Open Source design system for building consistent and reusable user interfaces... 2 min read CSS Layers for CSS Resets I have always been one of those people who preferred the aggressive CSS reset methods. These methods delete most of the default styles of the browser... 7 min read View all articles Join Our Growing Developer Community Design and develop with us the best developer experience out there! Shmuel Fogel @fogelito Software Engineer at Appwrite Arman Nik @ArmanNik Frontend Engineer at Appwrite Eldad Fux @eldadfux Appwrite's Founder Carla @heyCarla Product Designer at Appwrite Philipp Hausleiter @phaus Wess Cope @wess Software Engineer at Appwrite Torsten Dittmann @TorstenDittmann Engineering Lead at Appwrite Elad Shechter @elad2412 Web Developer at Appwrite Everly Precia Suresh @everly-gif Software Engineer at Appwrite Brandon @brandonroberts Bishwajeet Parhi @2002Bishwajeet Hardik Sachan @hardiksachan Shimon Newman @shimonewman Full Stack Engineer at Appwrite Aditya Oberai @adityaoberai Developer Advocate at Appwrite achintya @achintya-7 Aditya Rana @codingsamurai-10 Matej Bačo @Meldiron Software Engineer at Appwrite Jake Barnby @abnegate Engineering Lead at Appwrite Steven Nguyen @stnguyen90 Software Engineer at Appwrite Rahul Singh @drph4nt0m Chen Parnasa @chenparnasa Product Designer at Appwrite Brandon @kodumbeats Damodar Lohani @lohanidamodar Software Engineer at Appwrite Bradley Schofield @PineappleIOnic Software Engineer at Appwrite Join us on GitHub Join us on Discord Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/"},"45":{"title":"layout - container","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout container Container A container divides content into sections. It can hold any kind of content and is used to group content and create scannable interfaces. Class Type container Container A class representing a container Preview HTML Container Container \"> < div class = \" container \" > < p class = \" text u-margin-block-start-8 \" > Container </ p > </ div > visibility grid box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/container"},"46":{"title":"layout - grid box","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid box Grid Box Grid Box defines a dynamic custom CSS grid as a layout wrapper. Rows will be filled with the maximum number of items that can fit in the grid. Class Type grid-box Grid Container A class representing a dynamic grid container Parameters Grid box can get three parameters, using CSS variables: Variable Value --grid-gap 1.5rem (=24px) Grid gap in all screen sizes. --grid-item-size 13.125rem (=210px) Size of an item on medium and large screens (min screen size of 768px and above). --grid-item-size-small-screens 13.125rem (=210px) Size of an item on small screens (max screen size of 767px). Preview HTML card card card card card card card card card card card card \"> < ul class = \" grid-box \" style = \" --grid-gap : 1rem ; --grid-item-size : 16rem ; --grid-item-size-small-screens : 8rem ; \" > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > </ ul > container grid header Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-box"},"47":{"title":"layout - grid header","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid header Grid Header Grid header; Behave as flex container in big screens, and grid container in small screens. Class Type grid-header Grid Header Container Define Grid in small screen grid-header-col-1 Grid Header column 1 Define Column 1 in small screen grid-header-col-2 Grid Header column 2 Define Column 2 in small screen grid-header-col-3 Grid Header column 3 Define Column 3 in small screen grid-header-col-4 Grid Header column 4 Define Column 2 in small screen Preview HTML Databases Columns 4 Create database Databases Columns 4 Create database \"> < header class = \" grid-header \" > < h2 class = \" grid-header-col-1 heading-level-5 u-trim-1 u-cross-child-center \" > Databases </ h2 > < div class = \" u-flex u-gap-16 u-contents-mobile \" > < div class = \" grid-header-col-4 drop-wrapper \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" icon-view-boards u-opacity-50 \" aria-hidden = \" true \" aria-label = \" columns \" > </ span > < span class = \" text is-only-desktop \" > Columns </ span > < span class = \" inline-tag \" > 4 </ span > </ button > </ div > < div class = \" grid-header-col-3 toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" List View \" type = \" button \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" Grid View \" type = \" button \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > < button class = \" grid-header-col-2 button \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create database </ span > </ button > </ div > </ header > grid box navigation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-header"},"48":{"title":"layout - navigation","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout navigation Navigation Navigation menus provide easy access to different areas in a website or application. Class Type side-nav Sidebar Navigation A class representing a sidebar Preview HTML Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item \"> < div class = \" side-nav \" > < div class = \" side-nav-main \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < a class = \" drop-button is-selected \" href = \" \" > < span class = \" icon-home \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-user-group \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-chart-pie \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > </ ul > </ section > </ div > < div class = \" side-nav-bottom \" > < section class = \" drop-section \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-cog \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ section > </ div > </ div > grid header pagination Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/navigation"},"49":{"title":"layout - pagination","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout pagination Pagination Pagination allows you to break up content that doesn't fit on a single page. Class Type pagination Pagination A class representing pagination Preview HTML Prev 1 … 2 3 4 5 … 20 Next Prev 1 … 2 3 4 5 … 20 Next \"> < nav class = \" pagination \" > < span href = \" \" class = \" button is-text is-disabled \" aria-label = \" prev page \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Prev </ span > </ span > < ol class = \" pagination-list is-only-desktop \" > < li class = \" pagination-item \" > < span href = \" \" class = \" button is-disabled \" aria-label = \" page \" > < span class = \" text \" > 1 </ span > </ span > </ li > < li class = \" pagination-item \" > < button class = \" button is-text /*u-hide*/ \" aria-label = \" show prev 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 2 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 3 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 4 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 5 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" show next 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 20 </ span > </ button > </ li > </ ol > < a href = \" \" class = \" button is-text \" aria-label = \" next page \" > < span class = \" text \" > Next </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ a > </ nav > Best Practice Tips to keep in mind while using pagination: Do Use pagination to help users find information within a table containing a large amount of data. Don't Make your user click through multiple pages to find what they need. navigation box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/pagination"},"50":{"title":"utilities - box model","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities box model Box Model Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation. Class Scss Define Compiled CSS u-padding-0 padding: 0 !important; Stays the same u-padding-8 padding: pxToRem(8) !important; padding: 0.5rem !important; u-padding-12 padding: pxToRem(12) !important; padding: 0.75rem !important; u-padding-16 padding: pxToRem(16) !important; padding: 1rem !important; u-padding-24 padding: pxToRem(24) !important; padding: 1.5rem !important; u-padding-32 padding: pxToRem(32) !important; padding: 2rem !important; u-padding-64 padding: pxToRem(64) !important; padding: 4rem !important; u-padding-inline-0 padding-inline: 0 !important; Stays the same u-padding-inline-8 padding-inline: pxToRem(8) !important; padding-inline: 0.5rem !important; u-padding-inline-12 padding-inline: pxToRem(12) !important; padding-inline: 0.75rem !important; u-padding-inline-16 padding-inline: pxToRem(16) !important; padding-inline: 1rem !important; u-padding-inline-24 padding-inline: pxToRem(24) !important; padding-inline: 1.5rem !important; u-padding-inline-32 padding-inline: pxToRem(32) !important; padding-inline: 2rem !important; u-padding-inline-end-0 padding-inline-end: 0 !important; Stays the same u-padding-inline-end-12 padding-inline-end: pxToRem(12) !important; padding-inline-end: 0.75rem !important; u-padding-inline-end-56 padding-inline-end: pxToRem(56) !important; padding-inline-end: 3.5rem !important; u-padding-inline-end-120 padding-inline-end: pxToRem(120) !important; padding-inline-end: 7.5rem !important; u-padding-block-8 padding-block: pxToRem(8) !important; padding-block: 0.5rem !important; u-padding-block-12 padding-block: pxToRem(12) !important; padding-block: 0.75rem !important; u-padding-block-start-16 padding-block-start: pxToRem(16)!important; padding-block-start: 1rem !important; u-padding-block-start-20 padding-block-start: pxToRem(20)!important; padding-block-start: 1,25rem !important; u-padding-block-end-32 padding-block-end: pxToRem(32)!important; padding-block-end: 2rem !important; u-padding-block-end-56 padding-block-end: pxToRem(56)!important; padding-block-end: 3.5rem !important; u-margin-16-negative margin: pxToRem(-16) !important; margin: -1rem !important; u-margin-0 margin: 0 !important; Stays the same u-margin-32 margin: pxToRem(32) !important; margin: 2rem !important; u-margin-inline-start-auto margin-inline-start: auto; Stays the same u-margin-block-start-auto margin-block-start: auto; Stays the same u-margin-block-start-negative-56 margin-block-start: pxToRem(-56); margin-block-start: pxToRem(-56); u-margin-block-start-2 margin-block-start: pxToRem(2); margin-block-start: 0.125rem; u-margin-block-start-4 margin-block-start: pxToRem(4); margin-block-start: 0.25rem; u-margin-block-start-8 margin-block-start: pxToRem(8); margin-block-start: 0.5rem; u-margin-block-start-12 margin-block-start: pxToRem(12); margin-block-start: 0.75rem; u-margin-block-start-16 margin-block-start: pxToRem(16); margin-block-start: 1rem; u-margin-block-start-20 margin-block-start: pxToRem(20); margin-block-start: 1.25rem; u-margin-block-start-24 margin-block-start: pxToRem(24); margin-block-start: 1.5rem; u-margin-block-start-32 margin-block-start: pxToRem(32); margin-block-start: 2rem; u-margin-block-start-40 margin-block-start: pxToRem(40); margin-block-start: 2.5rem; u-margin-block-start-48 margin-block-start: pxToRem(48); margin-block-start: 3rem; u-margin-block-start-52 margin-block-start: pxToRem(52); margin-block-start: 3.25rem; u-margin-block-start-100 margin-block-start: pxToRem(100); margin-block-start: 6.25rem; u-margin-block-start-200 margin-block-start: pxToRem(200); margin-block-start: 12.5rem; u-margin-block-start-300 margin-block-start: pxToRem(300); margin-block-start: 18.75rem; u-margin-inline-start-4 margin-inline-start: pxToRem(4); margin-inline-start: 0.25rem; u-margin-inline-start-8 margin-inline-start: pxToRem(8); margin-inline-start: 0.5rem; u-margin-inline-start-12 margin-inline-start: pxToRem(12); margin-inline-start: 0.75rem; u-margin-inline-start-16 margin-inline-start: pxToRem(16); margin-inline-start: 1rem; u-margin-inline-start-24 margin-inline-start: pxToRem(24); margin-inline-start: 1.5rem; u-margin-inline-start-32 margin-inline-start: pxToRem(32); margin-inline-start: 2rem; u-margin-inline-end-16 margin-inline-end: pxToRem(16); margin-inline-end: 1rem; u-margin-inline-end-24 margin-inline-end: pxToRem(24); margin-inline-end: 1.5rem; \"> < div class = \" box u-margin-block-start-32 u-padding-block-end-56 \" > </ div > typography colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/box-model"},"51":{"title":"utilities - colors","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities colors Colors Colors utility classes help to convey consistent meaning through colors. States Colors In the Appwrite console we use six classes to set system colors based on states: Class Properties u-color-text-disabled color: hsl(var(--color-text-disabled)); u-color-text-offline color: hsl(var(--color-text-offline)); u-color-text-info color: hsl(var(--color-text-info)); u-color-text-danger color: hsl(var(--color-text-danger)); u-color-text-warning color: hsl(var(--color-text-warning)); u-color-text-success color: hsl(var(--color-text-success)); Text Colors Class Properties u-color-text-gray color: hsl(var(--color-text-gray)); u-color-text-pink color: hsl(var(--color-pink-text)); Preview HTML \"> < div class = \" icon-check u-color-text-disabled \" > </ div > < div class = \" icon-check u-color-text-offline \" > </ div > < div class = \" icon-check u-color-text-info \" > </ div > < div class = \" icon-check u-color-text-danger \" > </ div > < div class = \" icon-check u-color-text-warning \" > </ div > < div class = \" icon-check u-color-text-success \" > </ div > < div class = \" icon-check u-color-text-gray \" > </ div > < div class = \" icon-check u-color-text-pink \" > </ div > box model cursor Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/colors"},"52":{"title":"utilities - cursor","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities cursor Cursor Utility class for cursor Class Properties u-cursor-pointer cursor:pointer; this text will now have cursor \"> < p class = \" u-cursor-pointer \" > this text will now have cursor </ p > colors display Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/cursor"},"53":{"title":"utilities - display","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities display Display Display controls how an element is displayed, including its alignment, spacing and size. Class Scss Definition Compiled CSS u-block display: block; Stays the same u-inline display: inline; Stays the same u-grid display: grid; Stays the same u-flex display: flex; Stays the same u-inline-flex display: inline-flex; Stays the same u-contents display: contents; Stays the same u-contents-mobile @media #{$break1} { {display: contents;} } @media (max-width:767.99px) { display: contents; } u-box-sizing-content box-sizing: content-box; Stays the same u-sep-inline-start border-inline-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-inline-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-start border-block-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-end border-block-end: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-end: solid 0.0625rem hsl(var(--color-border)) !important; u-gap-2 gap: pxToRem(2); gap: 0.125rem; u-gap-4 gap: pxToRem(4); gap: 0.25rem; u-gap-8 gap: pxToRem(8); gap: 0.5rem; u-gap-12 gap: pxToRem(12); gap: 0.75rem; u-gap-16 gap: pxToRem(16); gap: 1rem; u-gap-24 gap: pxToRem(24); gap: 1.5rem; u-gap-32 gap: pxToRem(32); gap: 2eem; u-column-gap-2 column-gap: pxToRem(2); column-gap: 0.125rem; u-column-gap-4 column-gap: pxToRem(4); column-gap: 0.25rem; u-column-gap-8 column-gap: pxToRem(8); column-gap: 0.5rem; u-column-gap-12 column-gap: pxToRem(12); column-gap: 0.75rem; u-column-gap-16 column-gap: pxToRem(16); column-gap: 1rem; u-column-gap-24 column-gap: pxToRem(24); column-gap: 1.5rem; u-column-gap-32 column-gap: pxToRem(32); column-gap: 2rem; u-row-gap-2 row-gap: pxToRem(2); row-gap: 0.125rem; u-row-gap-4 row-gap: pxToRem(4); row-gap: 0.25rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-row-gap-32 row-gap: pxToRem(32); row-gap: 2rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-flex-vertical display:flex; flex-direction: column; Stays the same u-flex-vertical-mobile @media #{$break1} { flex-direction:column; } @media (max-width:767.99px) { flex-direction:column; } u-flex-wrap flex-wrap: wrap; Stays the same u-stretch flex: 1; Stays the same u-flex-basis-140 flex-basis: pxToRem(140); flex-basis: 8.75rem u-flex-basis-250 flex-basis: pxToRem(250); flex-basis: 15.625rem u-flex-basis-500 flex-basis: pxToRem(500); flex-basis: 31.25rem u-flex-basis-50-percent flex-basis: 50%; Stays the same u-flex-basis-100-percent flex-basis: 100%; Stays the same u-flex-shrink-0 flex-shrink: 0; Stays the same u-flex-basis-auto flex-basis: auto; Stays the same u-grid-columns-auto-1fr grid-template-columns: auto 1fr; Stays the same u-width-full-line inline-size: 100%; Stays the same u-width-140 inline-size: pxToRem(140); inline-size: 8.75rem; u-width-150 inline-size: pxToRem(150); inline-size: 9.375rem; u-width-200 inline-size: pxToRem(200); inline-size: 12.5rem; u-width-250 inline-size: pxToRem(250); inline-size: 15.625rem; u-width-600 inline-size: pxToRem(600); inline-size: 37.5rem; u-width-280-desktop @media #{$break3open} { inline-size: pxToRem(280); } @media (min-width:1199px) { inline-size: 17.25rem; } u-min-width-0 min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/ Stays the same u-min-width-200 min-inline-size: pxToRem(200); min-inline-size: 25rem; u-min-width-100-percent min-inline-size: 100%; Stays the same u-max-width-250 max-inline-size: pxToRem(250); max-inline-size: 15.625rem; u-max-width-300 max-inline-size: pxToRem(300); max-inline-size: 18.75rem; u-max-width-350 max-inline-size: pxToRem(350); max-inline-size: 21.875rem; u-max-width-400 max-inline-size: pxToRem(400); max-inline-size: 25rem; u-max-width-450 max-inline-size: pxToRem(450); max-inline-size: 28.125rem; u-max-width-500 max-inline-size: pxToRem(500); max-inline-size: 31.25rem; u-max-width-600 max-inline-size: pxToRem(600); max-inline-size: 37.5rem; u-max-width-650 max-inline-size: pxToRem(650); max-inline-size: 40.625rem; u-max-width-700 max-inline-size: pxToRem(700); max-inline-size: 43.75rem; u-max-width-100-percent max-inline-size: 100%; Stays the same u-height-100-percent block-size: 100%; Stays the same u-height-auto block-size: auto !important; Stays the same u-full-screen-height block-size: 100vh; block-size: 100lvh; Stays the same u-min-height-100 min-block-size: pxToRem(100); min-block-size: 6.25rem; u-min-height-184 min-block-size: pxToRem(184); min-block-size: 11.5rem; u-min-height-100-percent min-block-size:100%; Stays the same u-max-height-200 max-block-size: pxToRem(200); max-block-size: 12.5rem; Alignments In the Appwrite console we control alignments by using: Class CSS u-main-center justify-content: center; u-main-space-between justify-content: space-between; u-main-end justify-content: end; u-cross-start align-items: start; u-cross-baseline align-items: baseline; u-cross-center align-items: center; u-cross-end align-items: end; u-cross-child-start align-self: start; u-cross-child-center align-self: center; u-cross-child-end align-self: end; Preview HTML 1 2 3 1 2 3 \"> < div class = \" u-flex u-main-space-between u-min-width-100-percent card \" > < div class = \" box \" > 1 </ div > < div class = \" box \" > 2 </ div > < div class = \" box \" > 3 </ div > </ div > cursor position Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/display"},"54":{"title":"utilities - position","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities position Position An element's position can be quickly configured by using Position classes. Class Scss Define Translated CSS u-position-relative position: relative; Stays the same u-position-absolute position: absolute; Stays the same u-position-fixed position: fixed; Stays the same u-position-static position: static !important; Stays the same u-inset-0 inset: 0; Stays the same u-inset-inline-0 inset-inline: 0; Stays the same u-inset-inline-start-0 inset-inline-start: 0; Stays the same u-inset-inline-start-1 inset-inline-start: pxToRem(1); inset-inline-start: 0.0625rem; u-inset-inline-start-4 inset-inline-start: pxToRem(4); inset-inline-start: 0.25rem; u-inset-inline-start-8 inset-inline-start: pxToRem(8); inset-inline-start: 0.5rem; u-inset-inline-start-12 inset-inline-start: pxToRem(12); inset-inline-start: 0.75rem; u-inset-inline-start-16 inset-inline-start: pxToRem(16); inset-inline-start: 1rem; u-inset-inline-end-0 inset-inline-end: 0; Stays the same u-inset-inline-end-1 inset-inline-end: pxToRem(1); inset-inline-end: 0.0625rem; u-inset-inline-end-4 inset-inline-end: pxToRem(4); inset-inline-end: 0.25rem; u-inset-inline-end-8 inset-inline-end: pxToRem(8); inset-inline-end: 0.5rem; u-inset-inline-end-12 inset-inline-end: pxToRem(12); inset-inline-end: 0.75rem; u-inset-inline-end-16 inset-inline-end: pxToRem(16); inset-inline-end: 1rem; u-inset-block-start-0 inset-block-start: 0; Stays the same u-inset-block-start-1 inset-block-start: pxToRem(1); inset-block-start: 0.0625rem; u-inset-block-start-4 inset-block-start: pxToRem(4); inset-block-start: 0.25rem; u-inset-block-start-8 inset-block-start: pxToRem(8); inset-block-start: 0.5rem; u-inset-block-start-12 inset-block-start: pxToRem(12); inset-block-start: 0.75rem; u-inset-block-start-16 inset-block-start: pxToRem(16); inset-block-start: 1rem; u-inset-block-end-0 inset-block-end: 0; Stays the same u-inset-block-end-1 inset-block-end: pxToRem(1); inset-block-end: 0.0625rem; u-inset-block-end-4 inset-block-end: pxToRem(4); inset-block-end: 0.25rem; u-inset-block-end-8 inset-block-end: pxToRem(8); inset-block-end: 0.5rem; u-inset-block-end-12 inset-block-end: pxToRem(12); inset-block-end: 0.75rem; u-inset-block-end-16 inset-block-end: pxToRem(16); inset-block-end: 1rem; Z-index Classes Class styles u-z-index-0 z-index: 0 u-z-index-1 z-index: 1 u-z-index-5 z-index: 5 u-z-index-10 z-index: 10 u-z-index-15 z-index: 15 u-z-index-20 z-index: 20 Position Sticky Position sticky can take 4 direction variables Class styles Default Direction u-position-sticky position: sticky; --inset-block-start: auto; top --inset-block-end: auto; bottom --inset-inline-start: auto; left --inset-inline-end: auto; right For using you can attach direction via inline style which will define the local variables. Example: Position Sticky element with sticky top direction of 24px \"> < section class = \" u-position-sticky \" style = \" --inset-block-start : 3rem ; \" > < p class = \" text u-margin-block-start-8 \" > Position Sticky element with sticky top direction of 24px </ p > </ section > display reset inputs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/position"},"55":{"title":"utilities - reset inputs","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities reset inputs Reset Inputs A numeric input field's arrows are hidden when the Reset Inputs utility is used. Class styles u-remove-input-number-buttons Chrome, Safari, Edge, Opera -webkit-appearance: none; margin: 0; Firefox -moz-appearance: textfield; Best Practice The example below shows two numeric input fields - one with Reset Input class and one without. Use mouse or keyboard focus to see the difference between the fields. Preview HTML \"> < input type = \" number \" placeholder = \" without reset input \" class = \" u-max-width-250 \" /> < br /> < input type = \" number \" placeholder = \" with reset input \" class = \" u-remove-input-number-buttons u-max-width-250 \" /> position responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/reset-inputs"},"56":{"title":"utilities - responsive","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities responsive Responsive Responsive shows or hides elements depending on the size of the screen. Class Properties .is-only-mobile @media #{$break2open} { display: none !important; } .is-only-tablet @media #{$break1}, #{$break3open} { display: none !important; } .is-only-desktop @media #{$break1}, #{$break2} { display: none !important; } .is-not-mobile @media #{$break1} { display: none !important; } .is-not-desktop @media #{$break3open} { display: none !important; } Preview HTML I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets & desktops I’m visible on mobile & tablets I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets &amp; desktops I’m visible on mobile &amp; tablets \"> < p class = \" is-only-mobile \" > I’m visible on mobile </ p > < p class = \" is-only-tablet \" > I’m visible on tablets </ p > < p class = \" is-only-desktop \" > I’m visible on desktop </ p > < p class = \" is-not-mobile \" > I’m visible on tablets &amp; desktops </ p > < p class = \" is-not-desktop \" > I’m visible on mobile &amp; tablets </ p > reset inputs text Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/responsive"},"57":{"title":"utilities - text","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities text Text Text ensures consistent text size, weight, line height and breaks across our products. Class Scss Define Compiled CSS u-x-small font-size: pxToRem(12)!important; font-size: 0.75rem!important; u-small font-size: pxToRem(14)!important; font-size: 0.875rem!important; u-medium font-size: pxToRem(16)!important; font-size: 1rem!important; u-font-size-32 font-size: pxToRem(32)!important; font-size: 2rem!important; u-bold font-weight: 600; Stays the same u-normal font-weight: normal; Stays the same u-underline text-decoration: underline; Stays the same u-text-start text-align: start; Stays the same u-text-center text-align: center; Stays the same u-text-end text-align: end; Stays the same u-line-height-0-7 line-height: 0.7; Stays the same u-line-height-1 line-height: 1; Stays the same u-line-height-1-25 line-height: 1.25; Stays the same u-line-height-1-5 line-height: 1.5; Stays the same u-line-height-2 line-height: 2; Stays the same u-break-word @include break-word; white-space: initial; Full browser fallbacks u-break-all @include break-all; white-space: initial; Full browser fallbacks u-trim @include trim; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; u-trim-start @include trim; direction:rtl; text-align:right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; direction: rtl; text-align: right; u-trim-1 @include trim(1); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; u-un-break-text white-space: nowrap !important; Stays the same u-capitalize text-transform: capitalize; Stays the same u-icon-small font-size: var(--icon-size-small); Stays the same u-font-heading font-family: var(--heading-font); Stays the same u-font-content font-family: var(--content-font); Stays the same u-font-code font-family: var(--code-font); Stays the same Preview HTML x-small small text bold x-small small text bold \"> < div > < p class = \" text u-x-small \" > x-small </ p > < p class = \" text u-small \" > small </ p > < p class = \" text \" > text </ p > < p class = \" text u-bold \" > bold </ p > </ div > responsive theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/text"},"58":{"title":"utilities - theme","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities theme Theme Theme shows or hides elements depending on the selected theme (light or dark). Selector Properties .u-only-light display: none; .u-only-dark display: none; #{$theme-dark} .u-only-dark display: block; body:not(#{$theme-dark}) .u-only-light display: block; text visibility Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/theme"},"59":{"title":"utilities - visibility","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities visibility Visibility An element's visibility, opacity and overflow are controlled by the classes below. Class Properties u-hide display: none !important; u-opacity-0 opacity: 0 !important; u-opacity-20 opacity: 0.2 !important; u-opacity-50 opacity: 0.5 !important; u-overflow-hidden overflow: hidden !important; u-overflow-visible overflow: visible !important; u-overflow-x-auto overflow-x: auto !important; u-overflow-y-auto overflow-y: auto !important; some text hide me \"> < div class = \" box u-overflow-y-auto \" > < p class = \" text \" > some text </ p > < p class = \" u-hide \" > hide me </ p > </ div > theme container Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/visibility"}},"dirtCount":0,"index":[["9",{"1":{"53":1}}],["99px",{"1":{"41":5,"53":2}}],["$break3open",{"1":{"41":3,"53":1,"56":2}}],["$break2open",{"1":{"41":3,"56":1}}],["$break2",{"1":{"41":4,"56":1}}],["$break1",{"1":{"41":5,"53":2,"56":3}}],["$",{"1":{"38":2,"41":4,"44":2}}],["$theme",{"1":{"38":2,"58":2}}],["$25",{"1":{"10":3}}],["queries",{"1":{"41":1}}],["quot",{"1":{"33":4,"39":2}}],["quickly",{"1":{"32":1,"54":1}}],["zoom",{"1":{"40":2}}],["zone",{"1":{"3":1}}],["z",{"1":{"39":1,"54":13}}],["zagar",{"1":{"33":18}}],["⌘",{"1":{"26":3}}],["justify",{"1":{"53":3}}],["jake",{"1":{"44":1}}],["java",{"1":{"40":2}}],["javascript",{"1":{"22":3,"43":1}}],["join",{"1":{"44":3}}],["journey",{"1":{"42":1}}],["jw",{"1":{"44":1}}],["jenny",{"1":{"44":3}}],["jeremiah",{"1":{"33":18}}],["js",{"1":{"22":7,"40":2}}],["jpg",{"1":{"7":1,"33":18,"44":1}}],["jpeg",{"1":{"7":1,"33":27}}],["75rem",{"1":{"50":7,"53":8,"54":4,"57":1}}],["767",{"1":{"41":3,"53":2}}],["767px",{"1":{"41":1,"46":1}}],["768px",{"1":{"41":6,"46":1}}],["72px",{"1":{"33":1}}],["7",{"1":{"17":3,"25":4,"42":4,"44":2,"50":1,"57":2}}],["700",{"1":{"53":2}}],["70",{"1":{"8":3,"16":2,"37":1}}],["0px",{"1":{"41":1}}],["0625rem",{"1":{"25":1,"53":3,"54":4}}],["01gb",{"1":{"12":9}}],["09375rem",{"1":{"9":2}}],["0",{"1":{"9":2,"10":7,"16":7,"17":13,"18":1,"25":12,"33":1,"37":2,"38":2,"50":22,"53":21,"54":30,"55":1,"57":4,"59":4}}],["52",{"1":{"50":2}}],["59",{"1":{"33":3}}],["57",{"1":{"33":18}}],["54px",{"1":{"33":1}}],["56",{"1":{"25":1,"37":1,"50":8}}],["5",{"1":{"11":4,"25":4,"29":1,"33":9,"37":2,"42":4,"47":1,"49":5,"54":2,"57":2,"59":1}}],["500",{"1":{"25":16,"37":1,"53":4}}],["50hrs",{"1":{"12":3}}],["50",{"1":{"8":3,"10":2,"12":17,"36":1,"37":5,"38":2,"47":1,"53":2,"59":1}}],["5rem",{"1":{"1":15,"9":7,"10":7,"17":2,"20":1,"25":1,"41":2,"46":1,"50":15,"53":13,"54":4}}],["vue",{"1":{"40":2}}],["vs",{"1":{"40":2}}],["vk",{"1":{"40":2}}],["verified",{"1":{"34":1}}],["very",{"1":{"29":3}}],["verbatim",{"1":{"23":1}}],["vertical",{"1":{"5":16,"10":18,"12":1,"17":3,"25":1,"27":1,"53":2,"57":1}}],["valid",{"1":{"25":1}}],["values",{"1":{"25":1,"37":1}}],["valuemax",{"1":{"16":7}}],["valuemin",{"1":{"16":7}}],["valuenow",{"1":{"16":7}}],["value",{"1":{"16":7,"25":15,"33":5,"36":4,"46":1}}],["variant",{"1":{"38":1,"41":1}}],["variable",{"1":{"33":3,"36":4,"38":3,"39":1,"41":1,"46":1}}],["variables",{"1":{"17":3,"25":12,"35":10,"37":2,"41":2,"46":1,"54":2}}],["vars",{"1":{"25":9}}],["var",{"1":{"10":10,"17":3,"36":4,"37":2,"38":12,"39":2,"41":3,"51":8,"53":6,"57":4}}],["via",{"1":{"50":1,"54":1}}],["vimeo",{"1":{"40":2}}],["view",{"1":{"4":1,"15":16,"44":1,"47":5}}],["visual",{"1":{"22":1,"23":1,"40":1}}],["visually",{"1":{"3":6,"34":1,"39":1}}],["visible",{"1":{"14":2,"29":6,"33":7,"56":15,"59":2}}],["visibility",{"0":{"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":2,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":2,"59":4}}],["650",{"1":{"53":2}}],["625rem",{"1":{"53":4}}],["64",{"1":{"50":2}}],["64px",{"1":{"2":1}}],["637a4",{"1":{"33":1}}],["637a40ba7a703e3936e1",{"1":{"33":3}}],["63f1efg6673515e4bc06",{"1":{"25":3}}],["63f1efg667fg6fg67fc68ac3515e4bc06",{"1":{"25":3}}],["63f1ec68ac3515e4bc0663f1",{"1":{"25":3}}],["63f1ec68ac3515e4bc06",{"1":{"3":6}}],["60",{"1":{"16":3}}],["600",{"1":{"7":1,"42":1,"53":4,"57":1}}],["6",{"1":{"8":3,"25":4,"33":27,"42":4,"50":1,"53":1}}],["6rem",{"1":{"6":1}}],["|",{"1":{"3":6}}],["37",{"1":{"53":2}}],["375rem",{"1":{"53":1}}],["31",{"1":{"53":2}}],["318",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["3rem",{"1":{"50":1,"54":1}}],["343",{"1":{"37":1}}],["39",{"1":{"33":1,"43":1,"44":1,"49":1,"54":1,"55":1,"59":1}}],["336",{"1":{"33":27}}],["300",{"1":{"37":2,"50":2,"53":2}}],["30",{"1":{"10":7,"16":3,"37":1}}],["350px",{"1":{"14":1}}],["350",{"1":{"10":1,"53":2}}],["3",{"1":{"8":3,"12":3,"16":6,"20":3,"25":6,"33":36,"34":1,"37":1,"42":8,"44":1,"47":4,"49":3,"50":3,"53":3}}],["32",{"1":{"5":1,"25":1,"33":21,"50":13,"53":6,"57":2}}],["32px",{"1":{"2":2}}],["ycombinator",{"1":{"40":2}}],["yandex",{"1":{"40":2}}],["yammer",{"1":{"40":2}}],["yahoo",{"1":{"40":2}}],["y",{"1":{"33":18,"59":3}}],["year",{"1":{"33":12}}],["yet",{"1":{"2":1}}],["youtube",{"1":{"40":2}}],["you",{"1":{"5":10,"6":1,"10":3,"14":1,"19":1,"20":2,"21":1,"22":1,"30":1,"32":1,"33":2,"34":2,"40":2,"41":2,"49":1,"54":1}}],["yourself",{"1":{"44":1}}],["your",{"1":{"1":2,"21":1,"25":12,"40":2,"43":5,"44":3,"49":1}}],["xsmall",{"1":{"17":3,"36":3}}],["xlarge",{"1":{"2":1}}],["x",{"1":{"1":15,"2":11,"11":4,"16":4,"17":2,"20":1,"25":9,"34":1,"57":5,"59":2}}],["28",{"1":{"53":1}}],["280",{"1":{"53":2}}],["21",{"1":{"53":1}}],["2eem",{"1":{"53":1}}],["230",{"1":{"33":2}}],["25rem",{"1":{"41":3,"50":6,"53":9,"54":4}}],["250",{"1":{"33":1,"53":6,"55":2}}],["25",{"1":{"25":1,"57":2}}],["24",{"1":{"10":1,"12":1,"17":3,"50":10,"53":8}}],["24px",{"1":{"2":2,"54":2}}],["2022",{"1":{"33":45}}],["2023",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":7,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["2002bishwajeet",{"1":{"44":1}}],["200",{"1":{"29":1,"37":6,"50":2,"53":6}}],["20",{"1":{"8":2,"10":2,"16":10,"25":9,"49":3,"50":4,"54":2,"59":1}}],["2rem",{"1":{"8":1,"50":6,"53":2,"57":1}}],["2",{"1":{"1":45,"2":2,"6":24,"7":1,"10":13,"11":1,"17":3,"20":4,"24":3,"25":13,"30":2,"41":2,"42":20,"44":1,"47":5,"49":3,"50":3,"53":9,"57":2,"59":1}}],["1fr",{"1":{"53":2}}],["15",{"1":{"53":3,"54":2}}],["150",{"1":{"37":1,"53":2}}],["13",{"1":{"46":2}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73",{"1":{"29":3}}],["14",{"1":{"57":1}}],["14px",{"1":{"42":1}}],["140",{"1":{"25":2,"33":3,"53":4}}],["17",{"1":{"33":3,"53":1}}],["184",{"1":{"53":2}}],["18",{"1":{"50":1,"53":1}}],["185",{"1":{"33":11}}],["18rem",{"1":{"8":1}}],["1198",{"1":{"41":2}}],["1198px",{"1":{"41":1}}],["1199px",{"1":{"41":3,"53":1}}],["11",{"1":{"33":27,"53":1}}],["125rem",{"1":{"46":2,"50":1,"53":4}}],["128",{"1":{"25":2}}],["120",{"1":{"25":3,"33":3,"37":5,"50":2}}],["12",{"1":{"10":7,"25":4,"29":1,"33":10,"44":2,"50":13,"53":10,"54":8,"57":1}}],["12rem",{"1":{"6":5}}],["10",{"1":{"37":5,"44":1,"54":2}}],["10mb",{"1":{"17":9}}],["105",{"1":{"12":4}}],["10rem",{"1":{"10":1}}],["10em",{"1":{"10":1}}],["100lvh",{"1":{"53":1}}],["100vh",{"1":{"53":1}}],["100hrs",{"1":{"12":3}}],["100gb",{"1":{"12":9}}],["100",{"1":{"4":1,"10":7,"16":9,"33":3,"37":15,"38":2,"44":2,"50":2,"53":14}}],["1rem",{"1":{"9":9,"10":3,"41":4,"46":1,"50":7,"53":4,"54":4,"57":1}}],["16px",{"1":{"36":1,"42":1}}],["16rem",{"1":{"8":1,"46":1}}],["16",{"1":{"1":5,"4":1,"8":6,"9":7,"10":10,"11":8,"16":1,"17":5,"19":4,"25":2,"33":10,"47":1,"50":14,"53":8,"54":8,"57":1}}],["1",{"1":{"1":60,"3":2,"6":24,"8":19,"9":7,"11":1,"12":4,"17":2,"20":3,"25":25,"29":1,"30":2,"33":27,"41":3,"42":23,"46":1,"47":5,"49":3,"50":7,"53":11,"54":10,"57":9}}],["wordpress",{"1":{"40":2}}],["word",{"1":{"20":2,"29":2,"33":9,"57":3}}],["wrapped",{"1":{"33":1}}],["wrapper",{"1":{"5":8,"6":10,"8":1,"9":1,"11":2,"19":2,"25":13,"29":1,"33":4,"46":1,"47":1}}],["wraps",{"1":{"15":2}}],["wrap",{"1":{"8":3,"53":3}}],["watson",{"1":{"44":4}}],["way",{"1":{"25":1}}],["want",{"1":{"10":3,"33":1,"41":1}}],["waiting",{"1":{"9":1,"31":5}}],["was",{"1":{"7":1}}],["warn",{"1":{"1":2,"34":2}}],["warning",{"1":{"1":6,"8":3,"12":2,"16":1,"25":21,"31":1,"34":6,"37":8,"51":3}}],["white",{"1":{"57":5}}],["while",{"1":{"36":1,"49":1}}],["which",{"1":{"11":1,"20":1,"29":3,"54":1}}],["who",{"1":{"34":2,"44":1}}],["why",{"1":{"20":1}}],["whatsapp",{"1":{"40":2}}],["what",{"1":{"5":9,"20":1,"25":2,"49":1}}],["whenever",{"1":{"15":1,"22":1,"30":1,"32":1}}],["when",{"1":{"2":1,"14":1,"20":1,"25":2,"30":1,"33":1,"34":2,"36":1,"42":1,"44":1,"55":1}}],["where",{"1":{"1":2,"6":1,"20":1,"25":1}}],["wilson",{"1":{"44":1}}],["will",{"1":{"5":9,"7":1,"19":1,"20":2,"21":1,"25":9,"29":1,"35":2,"36":1,"42":1,"43":1,"46":1,"52":2,"54":1}}],["williamson",{"1":{"3":6}}],["wizard",{"1":{"33":1}}],["window",{"1":{"7":1,"11":1}}],["without",{"1":{"19":1,"33":2,"55":2}}],["with",{"1":{"2":1,"5":1,"6":1,"7":1,"11":3,"15":2,"17":1,"20":6,"21":1,"22":1,"24":1,"25":11,"27":2,"29":1,"33":4,"38":1,"39":1,"41":1,"42":2,"43":1,"44":7,"46":1,"54":2,"55":2}}],["within",{"1":{"1":1,"8":1,"13":1,"14":1,"23":1,"34":2,"49":1}}],["width",{"1":{"1":10,"4":1,"5":2,"6":2,"10":8,"14":1,"16":2,"17":14,"25":38,"29":1,"33":38,"41":11,"53":24,"55":2}}],["weight",{"1":{"57":3}}],["weights",{"1":{"42":1}}],["webkit",{"1":{"55":1,"57":3}}],["web",{"1":{"44":1}}],["website",{"1":{"40":1,"48":1}}],["wess",{"1":{"44":2}}],["were",{"1":{"40":1}}],["well",{"1":{"21":1,"42":1}}],["we",{"1":{"1":2,"6":2,"11":1,"15":1,"20":3,"21":1,"22":1,"25":3,"27":1,"33":1,"34":3,"36":1,"37":2,"38":1,"39":2,"40":2,"41":3,"42":2,"44":1,"51":1,"53":1}}],["ⓒ",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["nguyen",{"1":{"44":1}}],["nik",{"1":{"44":1}}],["npm",{"1":{"43":3,"44":1}}],["null",{"1":{"25":6}}],["numquam",{"1":{"33":3}}],["numeric",{"1":{"25":7,"27":15,"55":2}}],["number",{"1":{"4":6,"24":3,"25":4,"27":1,"46":1,"55":4}}],["normal",{"1":{"57":2}}],["none",{"1":{"55":1,"56":5,"58":2,"59":1}}],["nowrap",{"1":{"57":3}}],["now",{"1":{"52":2}}],["node",{"1":{"40":2,"43":1}}],["no",{"1":{"6":4,"7":3,"14":1,"17":3,"25":8,"41":1}}],["notion",{"1":{"40":2}}],["notify",{"1":{"1":1,"10":3}}],["note",{"1":{"22":3}}],["not",{"1":{"0":2,"2":2,"6":1,"7":5,"14":1,"17":3,"22":1,"30":1,"32":1,"34":2,"36":1,"39":2,"40":2,"41":1,"42":3,"56":4,"58":1}}],["nav",{"1":{"48":4,"49":2}}],["navigate",{"1":{"38":1,"40":2}}],["navigation",{"0":{"48":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":5,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["native",{"1":{"11":1,"33":1}}],["names",{"1":{"23":1,"40":1}}],["name",{"1":{"10":10,"16":6,"17":6,"18":4,"25":2,"30":7,"33":30,"40":2,"44":3,"50":1}}],["narrow",{"1":{"4":1,"33":1}}],["needed",{"1":{"44":1}}],["need",{"1":{"21":1,"49":1}}],["needs",{"1":{"1":1,"28":1,"36":2}}],["next",{"1":{"20":1,"22":1,"29":1,"30":1,"32":1,"49":5}}],["negative",{"1":{"20":1,"33":2,"50":2}}],["netherlands",{"1":{"10":20}}],["neutrals",{"1":{"37":2}}],["neutral",{"1":{"8":6,"37":14,"38":8}}],["newman",{"1":{"44":1}}],["new",{"1":{"7":1,"20":8,"33":1,"44":1}}],["necessary",{"1":{"1":2,"25":1,"34":2}}],["875rem",{"1":{"53":1,"57":1}}],["87",{"1":{"37":1}}],["8px",{"1":{"22":1,"30":1,"32":1,"36":1}}],["85",{"1":{"12":4}}],["8rem",{"1":{"6":6,"46":1}}],["8",{"1":{"0":2,"3":2,"5":6,"8":3,"12":8,"16":3,"17":1,"18":1,"21":2,"25":19,"26":1,"27":2,"29":1,"33":3,"35":1,"39":2,"45":1,"50":10,"53":10,"54":9}}],["=210px",{"1":{"46":2}}],["=24px",{"1":{"46":1}}],["=>",{"1":{"22":2}}],["=",{"1":{"0":12,"1":310,"2":55,"3":19,"4":25,"5":87,"6":117,"7":17,"8":79,"9":50,"10":118,"11":106,"12":49,"13":20,"14":27,"15":38,"16":131,"17":90,"18":16,"19":6,"20":67,"21":8,"22":23,"23":1,"24":20,"25":376,"26":3,"27":38,"28":2,"29":33,"30":19,"31":18,"32":17,"33":672,"34":35,"35":19,"36":8,"38":2,"39":6,"41":2,"42":18,"43":4,"44":10,"45":2,"46":8,"47":30,"48":41,"49":47,"50":1,"51":8,"52":1,"53":4,"54":3,"55":6,"56":5,"57":4,"59":3}}],["43",{"1":{"53":1}}],["450",{"1":{"53":2}}],["48",{"1":{"50":2}}],["48px",{"1":{"2":2}}],["4rem",{"1":{"50":1}}],["4px",{"1":{"36":1,"40":3,"42":1}}],["442",{"1":{"33":2}}],["41",{"1":{"33":2}}],["4mb",{"1":{"17":6}}],["400",{"1":{"37":1,"38":2,"42":1,"53":2}}],["40px",{"1":{"2":2,"20":1}}],["40",{"1":{"2":1,"10":7,"33":8,"50":2,"53":1}}],["4",{"1":{"0":3,"8":6,"10":3,"12":4,"17":5,"20":3,"24":15,"25":18,"36":1,"37":1,"42":4,"47":6,"49":3,"50":4,"53":6,"54":9}}],["everly",{"1":{"44":2}}],["everything",{"1":{"44":1}}],["every",{"1":{"20":2,"22":1,"30":1,"32":1}}],["even",{"1":{"44":1}}],["edge",{"1":{"40":2,"55":1}}],["edit",{"1":{"25":1,"34":2,"44":2}}],["etsy",{"1":{"40":2}}],["etc",{"1":{"7":1}}],["effect",{"1":{"39":1}}],["efficient",{"1":{"25":1}}],["e",{"1":{"34":1,"39":2}}],["emphasis",{"1":{"23":1}}],["empty",{"1":{"2":8,"18":3,"21":2,"25":2}}],["ellipsis",{"1":{"57":2}}],["elad2412",{"1":{"44":1}}],["elad",{"1":{"44":1}}],["eldadfux",{"1":{"44":1}}],["eldad",{"1":{"44":1}}],["el",{"1":{"22":4}}],["elevated",{"1":{"39":1}}],["elevation",{"0":{"39":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":2,"39":5,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["element",{"1":{"11":1,"14":2,"15":7,"19":3,"25":1,"26":2,"29":1,"34":1,"35":1,"36":1,"47":2,"53":1,"54":3,"59":1}}],["elements",{"0":{"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":2,"21":3,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":4,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":2,"57":1,"58":2,"59":1}}],["eight",{"1":{"17":1}}],["eye",{"1":{"11":2,"25":2,"29":1,"33":2}}],["eyebrow",{"1":{"8":3,"25":2,"33":30,"34":1,"42":15}}],["easier",{"1":{"38":1,"41":1}}],["easily",{"1":{"2":1,"10":3,"25":1,"40":1}}],["easy",{"1":{"34":1,"44":1,"48":1}}],["each",{"1":{"6":1,"19":1,"20":1,"22":1,"30":1,"32":2,"34":1}}],["exercitationem",{"1":{"33":3}}],["execution",{"1":{"0":1}}],["experience",{"1":{"44":3}}],["expanded",{"1":{"37":1}}],["express",{"1":{"20":1}}],["explain",{"1":{"1":1}}],["extra",{"1":{"18":4,"36":1}}],["external",{"1":{"4":1,"7":1,"20":1}}],["exceeds",{"1":{"14":1,"33":2}}],["exclamation",{"1":{"8":3,"9":1,"11":1,"17":1,"25":5,"34":2}}],["example",{"1":{"2":1,"4":1,"21":1,"25":2,"37":1,"41":2,"54":1,"55":1}}],["errors",{"1":{"1":1}}],["error",{"1":{"1":1,"17":4,"25":6,"34":5,"37":2}}],["ensures",{"1":{"50":1,"57":1}}],["engineering",{"1":{"44":2}}],["engineer",{"1":{"44":9}}],["env",{"1":{"25":9}}],["entered",{"1":{"25":3}}],["enter",{"1":{"25":1}}],["enabling",{"1":{"22":1}}],["enables",{"1":{"0":1}}],["enough",{"1":{"1":1,"14":1}}],["end",{"1":{"0":4,"6":12,"8":15,"11":4,"14":2,"16":1,"17":2,"25":20,"29":1,"33":1,"50":24,"53":9,"54":36,"57":2}}],["m",{"1":{"56":15}}],["might",{"1":{"41":1}}],["microsoft",{"1":{"40":4}}],["mix",{"1":{"34":2}}],["middle",{"1":{"19":7}}],["min",{"1":{"4":1,"6":5,"17":11,"41":6,"44":3,"46":1,"53":17}}],["mind",{"1":{"2":1,"20":1,"36":1,"44":1,"49":1}}],["minimum",{"1":{"1":1,"22":1,"30":1,"32":1,"40":2}}],["mp4",{"1":{"16":18}}],["mdn",{"1":{"11":1}}],["multi",{"1":{"25":1,"31":1}}],["multiple",{"1":{"8":2,"9":1,"13":1,"14":1,"19":2,"22":2,"30":1,"32":1,"40":2,"41":1,"49":1}}],["must",{"1":{"11":1}}],["meldiron",{"1":{"44":1}}],["media",{"1":{"41":15,"53":6,"56":5}}],["medium",{"1":{"2":3,"11":2,"12":4,"20":6,"22":2,"30":2,"32":2,"33":2,"36":5,"40":2,"41":11,"46":1,"57":1}}],["methods",{"1":{"11":1,"44":2}}],["method",{"1":{"11":4}}],["me",{"1":{"10":3,"59":2}}],["meaning",{"1":{"6":1,"20":2,"51":1}}],["meanings",{"1":{"2":1}}],["menus",{"1":{"48":1}}],["menu",{"1":{"6":1,"36":1,"48":18}}],["messaging",{"1":{"1":1}}],["message",{"1":{"1":15,"9":21,"17":3,"25":1}}],["messages",{"1":{"1":17,"11":3}}],["matej",{"1":{"44":1}}],["matched",{"1":{"42":1}}],["match",{"1":{"25":3,"34":2,"42":1}}],["mar",{"1":{"33":27}}],["margins",{"1":{"50":1}}],["margin",{"1":{"3":2,"4":1,"5":6,"6":7,"8":7,"10":20,"11":3,"16":4,"17":10,"20":1,"25":12,"26":1,"27":2,"29":1,"33":4,"35":1,"39":2,"45":1,"50":82,"54":1,"55":1}}],["mailto",{"1":{"25":2}}],["maintenance",{"1":{"38":1,"41":1}}],["maintain",{"1":{"33":1,"37":1}}],["maintains",{"1":{"14":1}}],["main",{"1":{"0":1,"6":2,"11":8,"12":8,"17":3,"25":1,"42":1,"48":1,"53":4}}],["made",{"1":{"25":2}}],["make",{"1":{"20":1,"22":1,"30":2,"32":1,"36":1,"39":1,"40":2,"49":1}}],["maximum",{"1":{"33":1,"46":1}}],["max",{"1":{"10":1,"12":4,"17":9,"25":19,"33":1,"41":5,"46":1,"53":34,"55":2}}],["may",{"1":{"1":1,"33":6,"34":5}}],["mouse",{"1":{"55":1}}],["moz",{"1":{"55":1}}],["movie",{"1":{"33":3}}],["month",{"1":{"10":3}}],["mostly",{"1":{"11":1,"14":1,"20":1,"33":1,"37":1,"42":2}}],["most",{"1":{"3":6,"14":1,"20":1,"29":1,"44":1}}],["more",{"1":{"2":2,"11":1,"14":1,"21":1,"22":3,"25":2,"33":12,"41":1}}],["mobile",{"1":{"0":2,"1":10,"14":1,"17":6,"33":10,"47":1,"53":2,"56":10}}],["modules",{"1":{"43":1}}],["mode",{"1":{"2":1,"37":2,"44":1}}],["model",{"0":{"50":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":4,"51":2,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["modals",{"1":{"11":10,"25":1,"36":1,"37":1,"39":2}}],["modal",{"0":{"11":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":2,"11":64,"12":2,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["oberai",{"1":{"44":1}}],["objects",{"1":{"21":1}}],["object",{"1":{"2":1,"11":1,"39":1,"44":1}}],["okta",{"1":{"40":2}}],["ol",{"1":{"27":2,"49":2}}],["our",{"1":{"21":1,"34":1,"37":3,"44":3,"50":1,"57":1}}],["outer",{"1":{"33":3}}],["out",{"1":{"20":1,"21":1,"44":2}}],["outputs",{"1":{"29":1}}],["output",{"0":{"29":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":3,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":22,"30":2,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["own",{"1":{"20":1,"22":1,"30":1,"32":1,"44":2}}],["occured",{"1":{"34":1}}],["occur",{"1":{"20":1}}],["others",{"1":{"44":1}}],["other",{"1":{"19":1,"21":1,"25":1}}],["otherwise",{"1":{"14":1}}],["over",{"1":{"35":1}}],["overflow",{"1":{"33":6,"57":5,"59":10}}],["overviews",{"1":{"21":1}}],["overview",{"1":{"14":3,"44":1}}],["overlap",{"1":{"41":1}}],["overlay",{"1":{"11":1}}],["overly",{"1":{"1":1}}],["optimized",{"1":{"44":1}}],["option",{"1":{"5":12,"6":1,"25":36}}],["options",{"1":{"5":15,"11":3,"12":1,"22":1,"25":14,"30":1,"32":2,"33":16}}],["optionally",{"1":{"43":2}}],["optional",{"1":{"5":26,"25":12}}],["opera",{"1":{"40":2,"55":1}}],["opening",{"1":{"33":1}}],["open",{"1":{"5":1,"7":1,"11":7,"16":3,"25":4,"26":3,"41":2,"43":1,"44":6}}],["opacity",{"1":{"8":2,"10":4,"37":1,"47":1,"59":7}}],["orient",{"1":{"57":1}}],["orientation",{"1":{"42":1}}],["order",{"1":{"38":1,"42":1}}],["organize",{"1":{"33":1,"34":1,"42":1}}],["orange",{"1":{"2":7,"11":1,"34":1,"37":2}}],["or",{"1":{"1":5,"2":5,"5":16,"8":6,"11":3,"13":1,"18":1,"20":1,"21":1,"22":2,"23":4,"24":2,"25":12,"29":1,"32":3,"33":2,"34":8,"35":11,"36":3,"38":1,"39":3,"40":1,"42":4,"44":2,"48":1,"55":1,"56":1,"58":2}}],["off",{"1":{"32":4,"33":1}}],["offline",{"1":{"9":2,"51":3}}],["often",{"1":{"20":1,"37":4}}],["of",{"1":{"0":3,"1":6,"2":3,"3":12,"4":3,"5":26,"6":4,"7":2,"10":1,"11":7,"13":2,"14":3,"16":3,"17":1,"18":1,"20":6,"21":4,"22":5,"23":3,"24":2,"25":16,"27":2,"30":6,"31":1,"32":5,"33":4,"34":5,"35":1,"36":5,"37":1,"39":2,"40":8,"41":3,"42":5,"43":2,"44":7,"45":1,"46":5,"49":1,"54":2,"56":1}}],["ons",{"1":{"10":3}}],["one",{"1":{"2":1,"3":6,"5":3,"6":1,"15":1,"22":2,"25":2,"30":3,"36":1,"41":1,"44":3,"55":2}}],["only",{"1":{"1":15,"6":1,"8":6,"11":4,"14":1,"17":14,"20":4,"21":1,"25":4,"30":2,"33":61,"34":2,"36":1,"41":7,"44":1,"47":1,"49":1,"56":6,"58":4}}],["on",{"1":{"0":3,"1":1,"11":1,"14":1,"15":2,"19":1,"20":2,"22":1,"23":1,"25":1,"29":3,"30":1,"32":5,"33":2,"34":2,"36":3,"38":1,"44":4,"46":2,"49":1,"51":1,"56":16,"58":1}}],["utility",{"1":{"38":2,"51":1,"52":1,"55":1}}],["utilities",{"0":{"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["ul",{"1":{"2":8,"3":2,"5":6,"6":16,"8":8,"10":4,"11":2,"12":2,"13":4,"14":2,"15":6,"16":4,"17":4,"20":2,"25":38,"27":4,"46":2,"47":2,"48":2}}],["unpkg",{"1":{"43":2}}],["underlined",{"1":{"42":1}}],["underlines",{"1":{"42":1}}],["underline",{"1":{"42":15,"57":2}}],["underlying",{"1":{"36":1}}],["underneath",{"1":{"25":1}}],["understanding",{"1":{"34":1}}],["understand",{"1":{"1":1,"6":1}}],["un",{"1":{"18":3,"53":1,"57":1}}],["uncluttered",{"1":{"14":1}}],["unlimited",{"1":{"10":3}}],["unsafe",{"1":{"8":3}}],["unsecure",{"1":{"8":3}}],["unsplash",{"1":{"2":1,"7":1,"33":9}}],["units",{"1":{"50":1}}],["unity",{"1":{"40":2}}],["united",{"1":{"10":1}}],["unique",{"1":{"6":1}}],["universal",{"1":{"2":1,"6":1,"20":2}}],["upon",{"1":{"35":1}}],["upl",{"1":{"25":1}}],["uploading",{"1":{"16":4}}],["uploads",{"1":{"16":6}}],["uploaded",{"1":{"7":3,"10":1,"16":2}}],["upload",{"0":{"16":1,"17":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":3,"16":57,"17":59,"18":3,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":4,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["updated",{"1":{"33":4}}],["update",{"1":{"21":1}}],["uppercase",{"1":{"2":1,"20":2}}],["up",{"1":{"2":2,"4":1,"22":1,"25":5,"49":1}}],["us",{"1":{"37":1,"44":4}}],["usage",{"1":{"24":1,"37":1,"44":1}}],["usa",{"1":{"10":1}}],["using",{"1":{"2":1,"6":1,"8":1,"19":1,"20":3,"29":1,"36":1,"39":1,"40":1,"46":1,"49":1,"53":1,"54":2}}],["useful",{"1":{"33":1}}],["used",{"1":{"1":1,"2":2,"4":2,"5":16,"8":1,"11":1,"12":4,"13":1,"14":1,"15":1,"20":5,"21":2,"22":3,"23":1,"24":1,"25":9,"32":2,"33":3,"34":3,"36":3,"37":8,"38":2,"39":3,"42":6,"45":1,"55":1}}],["use",{"1":{"1":8,"2":5,"6":4,"7":2,"11":2,"14":1,"15":1,"20":6,"21":2,"22":4,"24":1,"25":3,"27":3,"28":1,"30":4,"32":4,"33":2,"34":11,"36":3,"37":2,"38":1,"39":3,"40":5,"41":4,"42":4,"44":1,"49":1,"51":1,"53":1,"55":1}}],["users",{"1":{"6":1,"13":1,"14":2,"17":1,"22":3,"25":2,"28":1,"29":1,"30":2,"34":1,"41":1,"42":2,"49":1}}],["user",{"0":{"18":1},"1":{"0":1,"1":70,"2":3,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":3,"15":1,"16":1,"17":2,"18":23,"19":1,"20":2,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":8,"35":8,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["ui",{"1":{"1":1,"14":1,"36":3}}],["u",{"1":{"0":4,"1":30,"3":4,"4":4,"5":9,"6":9,"8":42,"9":40,"10":114,"11":37,"12":52,"14":1,"16":7,"17":57,"18":4,"19":12,"20":1,"21":4,"25":143,"26":1,"27":2,"29":7,"33":100,"34":1,"35":1,"39":2,"42":4,"44":6,"45":1,"47":6,"49":1,"50":53,"51":16,"52":2,"53":88,"54":39,"55":4,"57":29,"58":4,"59":10}}],["aggressive",{"1":{"44":1}}],["affordance",{"1":{"42":1}}],["affect",{"1":{"41":7}}],["after",{"1":{"40":1,"43":1}}],["azure",{"1":{"40":2}}],["auth",{"1":{"44":1}}],["authentik",{"1":{"40":2}}],["auth0",{"1":{"40":2}}],["autodesk",{"1":{"40":2}}],["auto",{"1":{"4":1,"8":1,"10":10,"11":3,"17":2,"20":1,"25":4,"50":4,"53":6,"54":4,"59":5}}],["axis",{"1":{"39":1}}],["airport",{"1":{"33":18}}],["aid",{"1":{"6":1,"20":1}}],["abnegate",{"1":{"44":1}}],["above",{"1":{"36":1,"46":1}}],["about",{"1":{"1":48,"18":1,"25":2,"34":1,"35":1}}],["absolute",{"1":{"25":6,"54":2}}],["amazon",{"1":{"40":2}}],["amp",{"1":{"16":15,"38":1,"41":4,"56":10}}],["amount",{"1":{"11":2,"14":1,"16":2,"25":9,"49":1}}],["available",{"1":{"7":4,"14":1,"31":1,"37":1,"40":2}}],["avatars",{"1":{"2":30,"11":1,"21":1,"36":1,"37":1}}],["avatar",{"0":{"2":1},"1":{"0":1,"1":2,"2":43,"3":2,"4":1,"5":1,"6":1,"7":3,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":2,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["avoid",{"1":{"6":1,"20":1}}],["advocate",{"1":{"44":1}}],["advanced",{"1":{"5":9}}],["adityaoberai",{"1":{"44":1}}],["aditya",{"1":{"44":2}}],["adam",{"1":{"33":18}}],["adjust",{"1":{"25":1}}],["added",{"1":{"17":1,"43":1}}],["adding",{"1":{"14":2,"41":1}}],["additional",{"1":{"1":2,"25":1,"34":1,"35":1,"37":1,"40":1,"42":2}}],["add",{"1":{"10":3,"11":1,"15":1,"20":8,"22":1,"25":2,"30":1,"32":1,"43":2}}],["assist",{"1":{"42":1}}],["as",{"1":{"5":16,"7":2,"10":1,"15":1,"20":2,"21":2,"24":1,"25":9,"33":1,"34":2,"36":4,"37":3,"38":1,"39":2,"40":1,"41":1,"42":1,"43":3,"46":1,"47":1}}],["apart",{"1":{"2":1}}],["apple",{"1":{"40":2}}],["applied",{"1":{"25":2,"29":1}}],["application",{"1":{"1":1,"48":1}}],["apply",{"1":{"19":1}}],["appearance",{"1":{"55":2}}],["appear",{"1":{"7":1,"11":1,"19":1,"25":1,"29":1,"35":1}}],["appears",{"1":{"0":1}}],["appwrite",{"1":{"0":1,"1":3,"2":2,"3":1,"4":1,"5":2,"6":3,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":2,"16":1,"17":1,"18":1,"19":1,"20":3,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":4,"34":5,"35":1,"36":3,"37":3,"38":1,"39":2,"40":4,"41":2,"42":1,"43":7,"44":28,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":1,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["aa",{"1":{"2":75,"37":1}}],["achintya",{"1":{"44":2}}],["access",{"1":{"41":1,"48":1}}],["accessibile",{"1":{"44":1}}],["accessibility",{"1":{"37":1,"44":1}}],["accessible",{"1":{"25":1}}],["accepted",{"1":{"17":9}}],["according",{"1":{"21":1,"36":1}}],["active",{"1":{"14":1}}],["activity",{"1":{"14":3}}],["actions",{"1":{"1":15,"11":1,"29":1,"37":1}}],["action",{"0":{"0":1},"1":{"0":17,"1":133,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":7,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":3,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["across",{"1":{"1":1,"37":1,"41":1,"50":1,"57":1}}],["attach",{"1":{"54":1}}],["attachment",{"1":{"7":1,"10":1}}],["attribute",{"1":{"15":2,"22":1,"25":1,"30":1,"32":1}}],["attention",{"1":{"11":1,"20":1}}],["at",{"1":{"1":1,"22":1,"25":9,"30":1,"32":1,"40":2,"44":17}}],["armannik",{"1":{"44":1}}],["arman",{"1":{"44":1}}],["array",{"1":{"22":2}}],["arrows",{"1":{"55":1}}],["arrow",{"1":{"4":1,"6":11,"14":4,"25":5,"27":3}}],["articles",{"1":{"25":1,"44":2}}],["article",{"1":{"21":4}}],["aria",{"1":{"1":50,"4":2,"5":6,"7":4,"8":18,"9":5,"10":4,"11":15,"12":4,"14":4,"15":10,"16":39,"17":16,"18":2,"20":18,"25":45,"27":6,"29":10,"33":69,"34":8,"35":4,"47":7,"48":6,"49":12}}],["areas",{"1":{"19":1,"48":1}}],["are",{"1":{"1":1,"2":4,"4":1,"5":16,"7":1,"8":1,"11":2,"15":1,"20":3,"21":2,"22":2,"24":1,"25":5,"29":1,"30":2,"31":1,"32":4,"33":2,"34":3,"36":2,"37":2,"40":6,"42":3,"55":1,"59":1}}],["along",{"1":{"39":1}}],["align",{"1":{"35":3,"53":7,"57":5}}],["aligned",{"1":{"22":2,"30":2,"32":2,"40":2}}],["alignments",{"1":{"6":1,"53":2}}],["alignment",{"1":{"6":1,"53":1}}],["always",{"1":{"14":1,"44":1}}],["alt",{"1":{"2":1,"7":1,"10":7,"25":2,"33":9,"44":1}}],["allowed",{"1":{"15":1,"22":1,"30":1,"32":1}}],["allows",{"1":{"13":1,"14":1,"17":1,"25":1,"41":1,"49":1}}],["allow",{"1":{"5":16,"6":1,"10":8,"11":1,"21":3,"22":3,"29":1,"30":3,"32":3,"33":1,"34":1}}],["all",{"1":{"0":1,"1":1,"2":1,"3":7,"4":1,"5":1,"6":1,"7":1,"8":10,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":4,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":3,"41":4,"42":1,"43":1,"44":2,"45":1,"46":2,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":4,"58":1,"59":1}}],["alerts",{"1":{"1":8,"36":1,"37":4,"39":2}}],["alert",{"0":{"1":1},"1":{"0":2,"1":254,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["any",{"1":{"45":1}}],["announcing",{"1":{"44":1}}],["angular",{"1":{"40":2}}],["another",{"1":{"20":1}}],["an",{"1":{"0":1,"2":4,"6":1,"7":3,"10":1,"11":1,"14":1,"15":2,"16":1,"17":1,"20":2,"22":1,"23":1,"24":2,"25":9,"27":1,"29":1,"31":1,"32":1,"34":3,"39":1,"40":2,"43":1,"46":2,"53":1,"54":1,"59":1}}],["android",{"1":{"40":2}}],["and",{"1":{"0":1,"1":4,"2":4,"6":1,"7":1,"11":2,"14":1,"17":10,"19":1,"20":6,"21":3,"22":2,"23":1,"25":2,"28":1,"29":1,"30":2,"32":2,"33":3,"34":7,"35":1,"36":5,"37":5,"39":4,"40":8,"41":7,"42":4,"43":1,"44":9,"45":2,"46":2,"47":1,"50":1,"53":1,"55":1,"57":1,"59":1}}],["a",{"1":{"0":2,"1":53,"2":8,"3":4,"4":5,"5":27,"6":4,"7":9,"8":4,"10":1,"11":4,"13":2,"14":11,"15":5,"16":2,"17":24,"18":4,"19":4,"20":11,"21":5,"22":7,"23":4,"24":4,"25":26,"26":2,"27":7,"28":2,"29":1,"30":9,"31":5,"32":8,"33":13,"34":7,"35":2,"36":2,"37":2,"38":2,"39":3,"40":6,"41":2,"42":7,"43":1,"44":1,"45":3,"46":4,"48":15,"49":6,"55":1}}],["lead",{"1":{"44":2}}],["learn",{"1":{"38":1}}],["legibility",{"1":{"22":1,"30":1,"32":1,"40":1}}],["letter",{"1":{"20":1}}],["letters",{"1":{"2":3}}],["level",{"1":{"8":3,"11":4,"17":3,"37":1,"42":58,"47":1}}],["left",{"1":{"8":2,"14":3,"20":2,"49":1,"54":1}}],["less",{"1":{"2":1,"40":1}}],["library",{"1":{"40":1,"41":1,"43":4}}],["like",{"1":{"23":1,"33":1}}],["lightning",{"1":{"10":3,"12":1}}],["light",{"1":{"8":3,"25":2,"37":1,"38":1,"44":1,"58":3}}],["linux",{"1":{"40":2}}],["lines",{"1":{"4":1,"22":1,"25":1,"30":1,"32":1,"40":2}}],["line",{"1":{"4":6,"5":2,"12":4,"16":2,"22":2,"25":22,"29":1,"30":2,"32":2,"33":9,"40":3,"53":1,"57":12}}],["linked",{"1":{"42":1}}],["linkedin",{"1":{"40":2}}],["links",{"1":{"33":2,"42":3}}],["link",{"1":{"4":1,"7":1,"20":1,"25":2,"27":5,"42":5,"43":2}}],["li",{"1":{"2":32,"3":4,"5":18,"6":32,"8":16,"10":20,"11":4,"12":6,"13":12,"14":8,"15":12,"16":12,"17":4,"20":8,"25":60,"27":18,"46":12,"47":4,"48":10,"49":16}}],["lists",{"1":{"6":2,"21":2,"42":1}}],["list",{"0":{"3":1,"6":1,"27":1},"1":{"0":3,"1":3,"2":4,"3":24,"4":4,"5":21,"6":38,"7":4,"8":3,"9":3,"10":3,"11":7,"12":3,"13":3,"14":6,"15":15,"16":7,"17":7,"18":3,"19":3,"20":9,"21":3,"22":4,"23":3,"24":3,"25":49,"26":4,"27":55,"28":4,"29":3,"30":5,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":3,"43":3,"44":3,"45":3,"46":3,"47":6,"48":9,"49":4,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["lt",{"1":{"0":24,"1":500,"2":105,"3":34,"4":46,"5":156,"6":208,"7":21,"8":136,"9":72,"10":131,"11":153,"12":88,"13":40,"14":36,"15":53,"16":144,"17":128,"18":28,"19":12,"20":96,"21":14,"22":17,"23":2,"24":40,"25":544,"26":6,"27":62,"28":4,"29":46,"30":7,"31":36,"32":7,"33":835,"34":52,"35":24,"36":8,"37":2,"38":6,"39":8,"41":12,"42":36,"43":4,"44":16,"45":4,"46":26,"47":38,"48":58,"49":64,"50":2,"51":16,"52":2,"53":8,"54":4,"55":3,"56":10,"57":10,"59":6}}],["lohanidamodar",{"1":{"44":1}}],["lohani",{"1":{"44":1}}],["looking",{"1":{"40":1}}],["look",{"1":{"36":1,"39":1}}],["lorem",{"1":{"33":3}}],["long",{"1":{"20":1,"29":3}}],["lot",{"1":{"20":1}}],["load",{"1":{"14":1}}],["loading",{"1":{"9":1}}],["loaders",{"1":{"28":1}}],["loader",{"0":{"9":1,"28":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":3,"9":11,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":5,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":3,"28":10,"29":3,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["local",{"1":{"54":1}}],["location",{"1":{"17":1}}],["located",{"1":{"0":2}}],["lock",{"1":{"8":3}}],["logs",{"1":{"4":1}}],["lowercase",{"1":{"2":1}}],["layers",{"1":{"44":1}}],["layered",{"1":{"39":1}}],["layout",{"0":{"45":1,"46":1,"47":1,"48":1,"49":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":2,"36":1,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":2,"46":3,"47":2,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["landing",{"1":{"20":1}}],["language",{"1":{"1":1,"38":2,"41":2}}],["larger",{"1":{"41":4}}],["large",{"1":{"2":11,"13":3,"20":5,"22":5,"30":4,"32":4,"36":3,"39":8,"41":5,"46":1,"49":1}}],["labels",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1,"42":1}}],["label",{"0":{"10":1},"1":{"0":1,"1":16,"2":1,"3":1,"4":1,"5":8,"6":5,"7":3,"8":7,"9":2,"10":23,"11":30,"12":1,"13":1,"14":3,"15":5,"16":23,"17":6,"18":2,"19":1,"20":10,"21":7,"22":3,"23":1,"24":2,"25":131,"26":1,"27":1,"28":1,"29":6,"30":3,"31":1,"32":3,"33":37,"34":2,"35":2,"36":1,"37":1,"38":1,"39":1,"40":4,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":4,"48":1,"49":11,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["f02e65",{"1":{"44":2}}],["family",{"1":{"57":3}}],["fallbacks",{"1":{"57":2}}],["facebook",{"1":{"40":2}}],["failed",{"1":{"9":1,"16":3,"31":6,"34":1}}],["features",{"1":{"35":1,"44":1}}],["few",{"1":{"25":1,"31":1}}],["feedback",{"1":{"1":15,"11":3,"25":2}}],["frontend",{"1":{"44":1}}],["from",{"1":{"2":1,"6":1,"22":5,"25":1,"30":3,"33":1}}],["framework",{"1":{"44":1}}],["friendly",{"1":{"44":1}}],["free",{"1":{"10":6}}],["fux",{"1":{"44":1}}],["fun",{"1":{"44":1}}],["functions",{"1":{"44":1,"50":1}}],["functionality",{"1":{"25":1}}],["function",{"1":{"4":6,"25":9}}],["fully",{"1":{"44":2}}],["full",{"1":{"1":10,"5":2,"6":2,"12":1,"16":2,"17":3,"25":18,"44":1,"53":2,"57":2}}],["fogelito",{"1":{"44":1}}],["fogel",{"1":{"44":1}}],["font",{"1":{"42":3,"57":21}}],["fonts",{"1":{"42":1}}],["football",{"1":{"25":3}}],["footer",{"1":{"11":6}}],["follow",{"1":{"43":1}}],["follows",{"1":{"37":1}}],["following",{"1":{"15":1,"22":1,"24":1,"29":1,"30":1,"32":1,"40":1,"43":2}}],["folder",{"1":{"12":1}}],["focus",{"1":{"10":8,"21":10,"35":1,"55":1}}],["focused",{"1":{"4":1}}],["founder",{"1":{"44":1}}],["foundations",{"0":{"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["four",{"1":{"2":1,"6":1,"8":1,"14":1,"20":1}}],["foreach",{"1":{"22":2}}],["for",{"1":{"1":15,"2":2,"4":1,"6":1,"10":6,"11":5,"13":1,"14":1,"16":6,"20":2,"21":3,"22":1,"24":1,"25":5,"30":1,"31":1,"32":2,"33":1,"34":7,"36":1,"37":7,"38":1,"39":1,"40":1,"41":2,"42":8,"43":1,"44":6,"52":1,"54":1}}],["forms",{"1":{"25":1}}],["form",{"1":{"1":1,"5":5,"11":17,"25":71,"44":1}}],["flutter",{"1":{"40":2}}],["flat",{"1":{"39":1}}],["flags",{"1":{"10":7}}],["float",{"1":{"35":1,"36":1}}],["floating",{"1":{"0":1,"39":4}}],["floyd",{"1":{"17":6}}],["flexbox",{"1":{"53":1}}],["flex",{"1":{"0":2,"1":20,"4":1,"6":5,"8":12,"9":7,"10":39,"11":8,"12":13,"17":10,"18":1,"19":4,"21":2,"25":11,"33":23,"44":2,"47":2,"53":31}}],["fit",{"1":{"42":1,"46":1,"49":1}}],["firefox",{"1":{"40":2,"55":1}}],["first",{"1":{"20":1,"21":1,"22":1,"30":1,"32":1,"33":19,"40":2}}],["firstname",{"1":{"4":6}}],["figma",{"1":{"40":2}}],["find",{"1":{"25":3,"49":2}}],["finished",{"1":{"16":2}}],["filled",{"1":{"46":1}}],["films",{"1":{"3":6}}],["filename",{"1":{"33":9}}],["file1",{"1":{"16":6}}],["files",{"1":{"16":1,"17":9,"40":1,"43":1}}],["file",{"0":{"7":1,"17":1},"1":{"0":2,"1":2,"2":3,"3":2,"4":2,"5":2,"6":3,"7":18,"8":3,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":16,"17":70,"18":3,"19":2,"20":2,"21":4,"22":2,"23":3,"24":2,"25":9,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":3,"44":3,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["fixed",{"1":{"54":2}}],["fix",{"1":{"1":1,"25":1}}],["five",{"1":{"1":1,"2":2,"5":1,"11":1,"33":1}}],["fields",{"1":{"20":2,"25":3,"36":1,"55":2}}],["field",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":20,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pxtorem",{"1":{"50":46,"53":50,"54":20,"57":4}}],["phaus",{"1":{"44":1}}],["philipp",{"1":{"44":1}}],["php",{"1":{"40":2}}],["put",{"1":{"41":1}}],["purple",{"1":{"37":1}}],["purpose",{"1":{"1":2,"20":1,"22":1,"30":1,"32":1}}],["python",{"1":{"40":2}}],["plus",{"1":{"20":2,"33":1,"47":1}}],["please",{"1":{"11":1,"26":3}}],["playingball",{"1":{"25":3}}],["play",{"1":{"21":1}}],["placed",{"1":{"20":1}}],["placeholder",{"1":{"11":4,"25":31,"55":2}}],["placement",{"1":{"6":2,"34":2}}],["plan",{"1":{"10":13}}],["pngs",{"1":{"17":9}}],["png",{"1":{"7":1,"17":6,"33":9}}],["podio",{"1":{"40":2}}],["popup",{"1":{"15":2,"17":3,"25":3,"35":4}}],["popovers",{"1":{"36":1,"39":2}}],["popover",{"1":{"6":1,"18":1}}],["posts",{"1":{"25":1}}],["possible",{"1":{"15":1,"24":1,"32":1}}],["positions",{"1":{"8":2}}],["position",{"0":{"54":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":2,"54":20,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pointer",{"1":{"10":8,"33":2,"52":3}}],["pixels",{"1":{"50":1}}],["pie",{"1":{"48":1}}],["pineappleionic",{"1":{"44":1}}],["pinterest",{"1":{"40":2}}],["pink",{"1":{"2":3,"17":6,"20":1,"37":4,"38":2,"41":1,"43":10,"44":9,"51":3}}],["picture",{"1":{"2":1}}],["people",{"1":{"44":1}}],["pet",{"1":{"25":1}}],["pets",{"1":{"25":1}}],["pencil",{"1":{"2":1,"34":1}}],["pending",{"1":{"2":1,"9":1,"16":3,"31":6}}],["perception",{"1":{"42":1}}],["perceived",{"1":{"42":1}}],["percent",{"1":{"4":1,"10":7,"53":7}}],["perform",{"1":{"20":1}}],["performed",{"1":{"1":1}}],["personal",{"1":{"10":3}}],["person",{"1":{"2":1}}],["persist",{"1":{"1":1}}],["p",{"1":{"1":40,"3":4,"5":22,"7":2,"8":6,"9":7,"10":22,"11":2,"12":8,"16":6,"17":8,"25":22,"26":2,"27":4,"29":2,"33":28,"35":2,"38":8,"39":4,"41":12,"42":12,"45":2,"52":2,"54":2,"56":10,"57":8,"59":4}}],["prioritize",{"1":{"44":1}}],["priority",{"1":{"39":1}}],["principal",{"1":{"20":1}}],["primary",{"1":{"20":7,"37":8,"44":1}}],["privacy",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["practice",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"49":1,"55":1}}],["prev",{"1":{"49":5}}],["preview",{"0":{"7":1},"1":{"0":2,"1":21,"2":6,"3":2,"4":3,"5":3,"6":5,"7":17,"8":4,"9":6,"10":3,"11":4,"12":3,"13":3,"14":2,"15":4,"16":3,"17":4,"18":2,"19":3,"20":5,"21":3,"22":4,"23":2,"24":4,"25":16,"26":2,"27":4,"28":3,"29":4,"30":4,"31":2,"32":4,"33":8,"34":3,"35":2,"36":5,"37":1,"38":1,"39":2,"40":1,"41":1,"42":5,"43":1,"44":1,"45":2,"46":2,"47":2,"48":2,"49":2,"50":1,"51":2,"52":1,"53":2,"54":1,"55":2,"56":2,"57":2,"58":1,"59":1}}],["precia",{"1":{"44":1}}],["preferred",{"1":{"44":2}}],["preserve",{"1":{"42":1}}],["presented",{"1":{"50":1}}],["present",{"1":{"1":1}}],["press",{"1":{"26":3}}],["pre",{"1":{"4":12}}],["properties",{"1":{"51":2,"52":1,"56":1,"58":1,"59":1}}],["project",{"1":{"43":3}}],["projects",{"1":{"10":6,"40":1}}],["product",{"1":{"42":1,"44":2}}],["products",{"1":{"37":1,"44":2,"50":1,"57":1}}],["processing",{"1":{"31":6,"34":1}}],["process",{"1":{"31":1}}],["pro",{"1":{"10":3}}],["problem",{"1":{"1":1,"53":1}}],["provides",{"1":{"25":2}}],["provide",{"1":{"1":19,"9":21,"11":3,"25":3,"34":2,"35":1,"42":3,"48":1}}],["profiles",{"1":{"18":1}}],["profile",{"0":{"18":1},"1":{"0":1,"1":1,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":2,"18":15,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["progressbar",{"1":{"16":7}}],["progressively",{"1":{"5":16}}],["progress",{"0":{"12":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":2,"12":24,"13":2,"14":1,"15":1,"16":16,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["package",{"1":{"43":2}}],["paypal",{"1":{"40":2}}],["paste",{"1":{"40":1}}],["passed",{"1":{"25":9}}],["passwords",{"1":{"25":1}}],["password",{"1":{"11":5,"25":7}}],["passion",{"1":{"10":3}}],["palette",{"1":{"37":3}}],["pair",{"1":{"20":1}}],["pages",{"1":{"20":1,"49":3}}],["page",{"1":{"20":1,"42":1,"49":9}}],["pagination",{"0":{"49":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":19,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["parnasa",{"1":{"44":1}}],["parhi",{"1":{"44":1}}],["parent",{"1":{"39":1}}],["parameters",{"1":{"25":1,"46":2}}],["paragraphs",{"1":{"42":1}}],["paragraph",{"1":{"5":3}}],["part",{"1":{"20":1,"23":3,"36":1,"41":1}}],["partials",{"1":{"38":1}}],["partial",{"1":{"17":1,"35":1,"38":16,"41":13}}],["parts",{"1":{"15":1}}],["paddings",{"1":{"50":1}}],["padding",{"1":{"5":1,"9":7,"10":10,"17":3,"18":1,"25":9,"29":1,"33":4,"41":15,"50":67}}],["patronizing",{"1":{"1":1}}],["panels",{"1":{"4":1}}],["panel",{"0":{"4":1},"1":{"0":1,"1":1,"2":1,"3":2,"4":10,"5":2,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["h1",{"1":{"42":2}}],["hsl",{"1":{"37":3,"38":4,"51":8,"53":6}}],["hustle",{"1":{"33":18}}],["human",{"1":{"1":1}}],["h3",{"1":{"12":8,"42":2}}],["h2",{"1":{"8":6,"25":2,"42":2,"47":2}}],["h5",{"1":{"3":4,"17":6,"42":4}}],["href",{"1":{"3":2,"7":2,"14":4,"25":2,"27":1,"33":3,"34":1,"43":2,"48":6,"49":3}}],["hierarchy",{"1":{"39":1,"42":1}}],["hiding",{"1":{"29":1}}],["hides",{"1":{"56":1,"58":1}}],["hide",{"1":{"5":16,"11":1,"14":1,"25":10,"33":14,"38":1,"49":1,"59":4}}],["hidden",{"1":{"1":35,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":3,"15":6,"16":8,"17":11,"18":1,"20":9,"25":30,"27":6,"29":9,"33":40,"34":8,"35":3,"47":4,"48":6,"49":2,"55":1,"57":3,"59":2}}],["high",{"1":{"2":1}}],["https",{"1":{"2":1,"7":1,"33":9,"43":2}}],["html5",{"1":{"40":2}}],["html",{"1":{"0":1,"1":20,"2":4,"3":1,"4":2,"5":2,"6":3,"7":1,"8":2,"9":5,"10":2,"11":3,"12":2,"13":2,"14":1,"15":3,"16":2,"17":3,"18":1,"19":2,"20":4,"21":2,"22":3,"23":1,"24":3,"25":15,"26":1,"27":3,"28":2,"29":3,"30":3,"31":1,"32":3,"33":7,"34":2,"35":1,"36":4,"39":1,"42":5,"43":1,"45":1,"46":1,"47":1,"48":1,"49":1,"51":1,"53":1,"55":1,"56":1,"57":1}}],["hardiksachan",{"1":{"44":1}}],["hardik",{"1":{"44":1}}],["hausleiter",{"1":{"44":1}}],["hand",{"1":{"21":1}}],["happen",{"1":{"5":9}}],["have",{"1":{"2":3,"6":1,"20":2,"22":1,"30":1,"32":1,"33":1,"34":1,"44":1,"52":2}}],["has",{"1":{"1":1,"20":1,"22":1,"30":1,"32":1,"34":2,"38":1}}],["heycarla",{"1":{"44":1}}],["heroicons",{"1":{"40":3}}],["here",{"1":{"17":12,"25":2,"41":1}}],["heght",{"1":{"33":1}}],["height",{"1":{"10":14,"25":10,"29":1,"33":18,"53":7,"57":11}}],["head",{"1":{"33":2,"43":1}}],["headings",{"1":{"42":5}}],["heading",{"1":{"8":6,"11":4,"17":3,"25":2,"33":30,"34":1,"42":41,"47":1,"57":2}}],["headers",{"1":{"5":16,"42":1}}],["header",{"0":{"47":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":4,"5":1,"6":1,"7":1,"8":19,"9":1,"10":1,"11":20,"12":1,"13":1,"14":1,"15":1,"16":9,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":2,"47":21,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["hello",{"1":{"4":6,"16":18}}],["helps",{"1":{"37":1}}],["helper",{"1":{"17":1,"25":14}}],["help",{"1":{"1":1,"6":1,"34":1,"49":1,"51":1}}],["hold",{"1":{"45":1}}],["hover",{"1":{"15":1,"17":2,"29":1,"35":1}}],["horizontally",{"1":{"33":1}}],["horizontal",{"1":{"14":1,"33":11}}],["how",{"1":{"1":1,"25":1,"38":1,"53":1}}],["home",{"0":{"44":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["h4",{"1":{"1":10,"10":6,"11":8,"16":4,"42":4}}],["h6",{"1":{"1":30,"42":6}}],["i",{"1":{"44":1,"56":15}}],["io",{"1":{"43":5,"44":6}}],["ios",{"1":{"40":2}}],["ipsum",{"1":{"33":3}}],["illustration",{"1":{"33":9}}],["illustrations",{"1":{"11":1,"21":1}}],["identity",{"1":{"37":1}}],["ids",{"1":{"23":1}}],["id",{"1":{"11":4,"18":3,"25":2,"33":16,"34":1,"35":6}}],["its",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1,"53":1}}],["it",{"1":{"2":1,"7":1,"14":1,"20":1,"33":10,"36":1,"42":1,"43":2,"44":1,"45":1}}],["items",{"1":{"8":2,"14":2,"15":1,"22":3,"24":1,"25":2,"27":3,"36":1,"46":1,"53":4}}],["item",{"0":{"8":1},"1":{"0":1,"1":1,"2":17,"3":6,"4":1,"5":24,"6":67,"7":2,"8":28,"9":2,"10":3,"11":3,"12":1,"13":27,"14":7,"15":9,"16":9,"17":1,"18":1,"19":1,"20":14,"21":1,"22":2,"23":1,"24":1,"25":43,"26":1,"27":41,"28":1,"29":1,"30":5,"31":1,"32":4,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":7,"47":3,"48":24,"49":9,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["important",{"1":{"50":48,"53":7,"54":1,"56":5,"57":9,"59":8}}],["import",{"1":{"43":2,"44":1}}],["importing",{"1":{"43":1}}],["imply",{"1":{"22":1}}],["implementation",{"1":{"38":1,"41":1}}],["implement",{"1":{"22":3}}],["img",{"1":{"2":1,"7":1,"10":7,"25":2,"33":9,"44":1}}],["images",{"1":{"21":1}}],["image",{"1":{"1":5,"2":2,"7":6,"16":8,"17":5,"33":36}}],["if",{"1":{"1":1,"5":9,"6":2,"14":3,"21":1,"22":1,"30":1,"32":2,"33":1,"34":2,"40":2,"42":1}}],["icon",{"1":{"1":50,"2":5,"4":2,"5":12,"6":1,"7":2,"8":13,"9":5,"10":4,"11":12,"12":4,"14":2,"15":11,"16":16,"17":13,"18":1,"20":15,"25":29,"27":7,"29":5,"31":9,"33":62,"34":11,"35":3,"36":1,"40":174,"47":4,"48":6,"49":4,"51":8,"57":2}}],["icons",{"0":{"40":1},"1":{"0":1,"1":1,"2":3,"3":1,"4":1,"5":1,"6":4,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":1,"17":1,"18":1,"19":1,"20":5,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":5,"35":1,"36":1,"37":1,"38":1,"39":2,"40":12,"41":2,"42":1,"43":5,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["isn",{"1":{"15":1,"22":1,"30":1,"32":1}}],["is",{"1":{"0":6,"1":169,"2":50,"4":3,"6":23,"7":5,"8":2,"9":7,"10":18,"11":30,"12":2,"13":2,"14":7,"15":8,"16":6,"17":23,"20":23,"21":6,"22":9,"24":7,"25":56,"27":1,"28":2,"29":11,"30":4,"31":10,"32":4,"33":97,"34":11,"35":3,"36":1,"37":3,"38":1,"39":2,"40":1,"41":1,"42":4,"43":1,"44":8,"45":1,"47":3,"48":1,"49":12,"50":1,"53":1,"55":1,"56":10}}],["infinite",{"1":{"41":2}}],["informative",{"1":{"34":4,"37":1}}],["information",{"1":{"1":4,"5":16,"11":1,"25":6,"34":4,"35":1,"37":6,"42":1,"49":1}}],["inform",{"1":{"1":1,"34":1}}],["info",{"1":{"0":1,"1":26,"17":11,"18":4,"24":3,"25":7,"34":8,"35":2,"37":1,"51":3}}],["invalid",{"1":{"25":1}}],["installing",{"1":{"43":1}}],["install",{"1":{"43":3,"44":1}}],["instagram",{"1":{"40":2}}],["instructions",{"1":{"25":1}}],["inset",{"1":{"25":13,"54":77}}],["inside",{"1":{"4":1,"20":1,"21":1,"24":1,"33":1,"38":1}}],["integrate",{"1":{"44":1}}],["internal",{"1":{"44":1}}],["interfaces",{"1":{"43":1,"44":2,"45":1}}],["interface",{"1":{"35":1}}],["interact",{"1":{"25":2,"29":1}}],["interacts",{"1":{"20":1}}],["interacting",{"1":{"11":1}}],["interactive",{"1":{"8":9,"18":2,"29":19,"33":9,"34":12}}],["into",{"1":{"24":1,"25":3,"40":1,"43":1,"45":1}}],["index",{"1":{"54":13}}],["independently",{"1":{"32":1}}],["indeterminate",{"1":{"22":12}}],["indication",{"1":{"25":2}}],["indicating",{"1":{"24":1}}],["indicates",{"1":{"31":1,"39":1}}],["indicate",{"1":{"23":1,"28":1,"37":1}}],["india",{"1":{"10":1}}],["initial",{"1":{"57":2}}],["initialize",{"1":{"20":1}}],["initials",{"1":{"2":2}}],["inner",{"1":{"15":1,"33":1}}],["innovative",{"1":{"3":6}}],["including",{"1":{"53":1}}],["include",{"1":{"11":1,"21":2,"40":1,"43":3,"57":5}}],["incorrect",{"1":{"25":2}}],["incorporate",{"1":{"24":1}}],["inconsistent",{"1":{"2":1}}],["increase",{"1":{"2":1,"20":3}}],["in",{"1":{"1":6,"2":5,"5":1,"6":4,"7":3,"11":1,"14":3,"15":1,"20":10,"21":3,"22":3,"24":1,"25":8,"27":3,"28":1,"29":1,"30":3,"32":4,"33":5,"34":4,"35":1,"36":3,"37":5,"38":2,"39":2,"40":7,"41":5,"42":1,"43":3,"44":2,"46":2,"47":7,"48":1,"49":1,"50":1,"51":1,"53":1}}],["input",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":11,"11":6,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":3,"21":3,"22":13,"23":1,"24":2,"25":81,"26":2,"27":1,"28":1,"29":1,"30":8,"31":1,"32":8,"33":3,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":10,"56":1,"57":1,"58":1,"59":1}}],["inputs",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":4,"56":2,"57":1,"58":1,"59":1}}],["inline",{"0":{"9":1,"23":1,"24":1},"1":{"0":4,"1":7,"2":3,"3":3,"4":4,"5":4,"6":13,"7":3,"8":4,"9":5,"10":14,"11":6,"12":3,"13":3,"14":3,"15":3,"16":4,"17":18,"18":4,"19":3,"20":3,"21":3,"22":4,"23":11,"24":18,"25":17,"26":3,"27":3,"28":3,"29":4,"30":3,"31":3,"32":3,"33":14,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":7,"43":3,"44":5,"45":3,"46":3,"47":4,"48":3,"49":3,"50":57,"51":3,"52":3,"53":46,"54":42,"55":3,"56":3,"57":3,"58":3,"59":3}}],["dynamic",{"1":{"46":2}}],["during",{"1":{"42":1,"50":1}}],["duration",{"1":{"33":12}}],["duplicate",{"1":{"8":3,"11":1,"18":1,"20":1,"25":1,"29":4,"33":9,"34":4,"35":2}}],["d",{"1":{"25":1}}],["drph4nt0m",{"1":{"44":1}}],["dribbble",{"1":{"40":2}}],["drag",{"1":{"17":9}}],["draw",{"1":{"11":1}}],["dropbox",{"1":{"40":2}}],["dropdown",{"1":{"25":3}}],["drop",{"0":{"6":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":2,"6":79,"7":2,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":26,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":15,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["doesn",{"1":{"42":1,"49":1}}],["dotnet",{"1":{"40":2}}],["dots",{"1":{"33":11}}],["docker",{"1":{"40":2}}],["documentation",{"1":{"11":1,"21":2,"44":1}}],["document",{"1":{"7":1,"16":1,"17":2,"22":2,"33":12,"48":1}}],["documents",{"1":{"0":3,"25":3}}],["doing",{"1":{"24":1}}],["download",{"1":{"20":1}}],["down",{"1":{"5":6,"16":2,"25":9}}],["don",{"1":{"1":1,"2":2,"6":1,"20":1,"22":1,"30":1,"32":1,"34":4,"36":1,"39":1,"40":1,"42":1,"49":1}}],["done",{"1":{"1":1}}],["do",{"1":{"1":1,"2":4,"6":2,"20":1,"22":2,"30":2,"32":2,"34":2,"36":2,"39":2,"40":3,"42":2,"44":1,"49":1}}],["damodar",{"1":{"44":1}}],["dart",{"1":{"40":2}}],["dark",{"0":{"38":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":3,"38":15,"39":2,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":6,"59":1}}],["dailymotion",{"1":{"40":2}}],["date",{"1":{"33":3}}],["databases",{"1":{"47":3}}],["database",{"1":{"44":1,"47":3}}],["data",{"1":{"4":3,"25":1,"33":83,"44":2,"49":1}}],["dashed",{"1":{"17":3,"21":4}}],["danger",{"1":{"1":6,"9":1,"12":2,"16":1,"17":1,"25":1,"34":3,"37":7,"51":3}}],["decoration",{"1":{"57":1}}],["declared",{"1":{"38":1}}],["develop",{"1":{"44":1}}],["developer",{"1":{"44":6}}],["dev",{"1":{"44":2}}],["device",{"1":{"40":1,"41":1}}],["devices",{"1":{"14":1}}],["determine",{"1":{"42":1}}],["details",{"1":{"5":12,"18":1,"34":1}}],["deno",{"1":{"40":2}}],["demo",{"1":{"21":1}}],["deletion",{"1":{"11":1}}],["delete",{"1":{"0":3,"21":1,"25":2,"33":7,"44":2}}],["deselect",{"1":{"33":1}}],["desing",{"1":{"41":1}}],["designer",{"1":{"44":2}}],["designed",{"1":{"36":2,"44":1}}],["design",{"1":{"20":1,"37":3,"38":2,"41":1,"43":6,"44":13}}],["desired",{"1":{"5":16}}],["desktops",{"1":{"56":3}}],["desktop",{"1":{"17":6,"33":36,"47":1,"49":1,"53":1,"56":7}}],["desc",{"1":{"3":3}}],["description",{"1":{"1":46,"3":1,"5":9,"18":3}}],["definition",{"1":{"53":1}}],["defines",{"1":{"46":1}}],["define",{"1":{"3":2,"47":5,"50":1,"54":2,"57":1}}],["default",{"1":{"1":31,"2":2,"17":1,"20":2,"21":1,"25":4,"31":1,"33":2,"34":4,"38":1,"44":1,"54":1}}],["depending",{"1":{"1":1,"34":2,"56":1,"58":1}}],["difference",{"1":{"55":1}}],["differentiate",{"1":{"34":1}}],["different",{"1":{"2":3,"25":1,"31":1,"34":1,"36":1,"41":1,"48":1}}],["dittmann",{"1":{"44":1}}],["direction",{"1":{"53":3,"54":5,"57":2}}],["directions",{"1":{"33":6}}],["directly",{"1":{"42":1}}],["directory",{"1":{"40":1,"43":1}}],["directors",{"1":{"33":6}}],["dialogue",{"1":{"25":1}}],["dialog6",{"1":{"11":1}}],["dialog5",{"1":{"11":1}}],["dialog4",{"1":{"11":1}}],["dialog",{"1":{"11":14}}],["disqus",{"1":{"40":2}}],["distance",{"1":{"39":1}}],["distract",{"1":{"34":2}}],["discord",{"1":{"40":2,"44":3}}],["discoverable",{"1":{"25":1}}],["disclose",{"1":{"5":15}}],["disabling",{"1":{"22":1}}],["disable",{"1":{"15":1,"22":1,"30":1,"32":1}}],["disabled",{"1":{"4":1,"8":13,"10":5,"13":2,"14":1,"15":4,"22":5,"24":2,"25":9,"30":4,"32":4,"34":2,"37":1,"49":2,"51":3}}],["dismissed",{"1":{"1":1,"11":1}}],["displays",{"1":{"16":2,"25":1,"26":1}}],["displayed",{"1":{"2":1,"15":1,"29":2,"53":1}}],["display",{"0":{"53":1},"1":{"0":1,"1":2,"2":3,"3":1,"4":2,"5":18,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":2,"16":1,"17":4,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":2,"53":13,"54":2,"55":1,"56":6,"57":4,"58":5,"59":2}}],["divides",{"1":{"45":1}}],["div",{"1":{"0":4,"1":120,"2":62,"3":4,"4":14,"5":38,"6":46,"7":10,"8":56,"9":20,"10":26,"11":40,"12":24,"14":2,"15":6,"16":36,"17":30,"18":8,"19":12,"25":76,"28":4,"29":16,"31":12,"33":136,"34":12,"36":8,"37":1,"39":4,"44":6,"45":2,"46":12,"47":6,"48":6,"50":2,"51":16,"53":8,"57":2,"59":2}}],["twitter",{"1":{"40":2}}],["twitch",{"1":{"40":2}}],["two",{"1":{"1":1,"2":1,"5":3,"13":1,"15":1,"20":1,"21":1,"25":5,"27":1,"29":1,"32":1,"33":1,"35":1,"39":2,"42":2,"55":1}}],["tumbir",{"1":{"40":2}}],["turning",{"1":{"32":1}}],["td",{"1":{"33":152,"44":4}}],["tbody",{"1":{"33":20}}],["try",{"1":{"44":1}}],["truth",{"1":{"44":1}}],["true",{"1":{"1":35,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":2,"15":6,"16":8,"17":11,"18":1,"20":9,"22":4,"25":30,"27":6,"29":5,"30":3,"32":3,"33":37,"34":8,"35":3,"47":4,"48":6,"49":2}}],["tr",{"1":{"33":42}}],["tradeshift",{"1":{"40":2}}],["transform",{"1":{"57":1}}],["translated",{"1":{"40":1,"50":1,"54":1}}],["transparent",{"1":{"11":1}}],["trailing",{"1":{"25":1}}],["trash",{"1":{"20":1,"33":7}}],["trim",{"1":{"3":2,"9":7,"17":2,"25":5,"29":1,"33":1,"47":1,"57":6}}],["t",{"1":{"1":1,"2":2,"6":2,"15":1,"20":1,"22":2,"25":5,"30":2,"32":2,"34":4,"36":1,"39":1,"40":1,"42":2,"49":2}}],["tiktok",{"1":{"40":2}}],["time",{"1":{"33":22}}],["times",{"1":{"3":6}}],["tips",{"1":{"1":1,"2":1,"20":1,"34":1,"36":1,"44":1,"49":1}}],["title",{"1":{"1":36,"3":8,"5":3,"11":18,"16":4,"17":5,"33":85,"44":2}}],["template",{"1":{"53":1}}],["telegram",{"1":{"40":2}}],["technology",{"1":{"40":1}}],["team",{"1":{"2":1,"18":1,"44":1}}],["terms",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["textfield",{"1":{"55":1}}],["texts",{"1":{"42":1}}],["textareas",{"1":{"29":1}}],["textarea",{"1":{"25":6,"29":2}}],["text",{"0":{"57":1},"1":{"0":6,"1":92,"2":3,"3":3,"4":4,"5":15,"6":57,"7":1,"8":15,"9":13,"10":15,"11":32,"12":19,"13":7,"14":5,"15":1,"16":9,"17":14,"18":6,"19":1,"20":30,"21":11,"22":2,"23":3,"24":14,"25":108,"26":2,"27":12,"28":1,"29":37,"30":2,"31":7,"32":2,"33":123,"34":12,"35":5,"36":1,"37":7,"38":1,"39":3,"40":3,"41":1,"42":35,"43":1,"44":1,"45":2,"46":1,"47":3,"48":7,"49":18,"50":1,"51":26,"52":3,"53":1,"54":2,"55":1,"56":2,"57":25,"58":2,"59":4}}],["typically",{"1":{"2":1,"25":1,"34":2}}],["typical",{"1":{"1":15}}],["types",{"1":{"1":2,"2":2,"7":2,"20":2,"25":3,"27":2,"39":2}}],["type",{"1":{"0":1,"1":8,"2":5,"3":1,"4":1,"5":8,"6":6,"7":2,"8":2,"10":10,"11":9,"13":3,"14":2,"15":3,"16":3,"17":4,"18":2,"19":1,"20":3,"21":5,"22":14,"23":1,"24":2,"25":48,"26":1,"27":2,"28":1,"29":2,"30":9,"31":3,"32":10,"33":27,"34":3,"35":2,"37":1,"39":1,"40":1,"45":1,"46":1,"47":5,"48":1,"49":1,"55":2}}],["typography",{"0":{"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":2,"42":5,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["those",{"1":{"44":1}}],["th",{"1":{"33":58}}],["through",{"1":{"49":1,"51":1}}],["throughout",{"1":{"33":1,"36":1}}],["three",{"1":{"2":1,"5":3,"6":1,"11":1,"18":1,"22":1,"30":1,"32":1,"33":1,"41":1,"46":1}}],["thumbnail",{"1":{"7":1}}],["think",{"1":{"6":1}}],["this",{"1":{"1":50,"5":9,"14":1,"21":2,"25":22,"26":1,"29":4,"34":6,"37":1,"38":1,"42":1,"52":2}}],["than",{"1":{"2":1,"14":1,"25":1,"40":1,"41":1}}],["that",{"1":{"0":1,"1":2,"2":2,"5":16,"11":2,"14":1,"15":2,"20":1,"23":1,"25":15,"28":1,"33":1,"34":3,"36":2,"39":2,"42":2,"46":1,"49":1}}],["these",{"1":{"34":1,"44":1}}],["their",{"1":{"34":2,"39":1}}],["thead",{"1":{"33":55}}],["there",{"1":{"2":1,"7":1,"8":1,"14":1,"20":1,"22":2,"25":5,"30":2,"31":1,"32":2,"40":2,"41":1,"42":1,"44":1}}],["them",{"1":{"1":1,"36":1,"40":1,"41":1}}],["theme",{"0":{"38":1,"58":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":3,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":17,"39":3,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":3,"58":6,"59":3}}],["they",{"1":{"1":3,"5":16,"6":2,"11":1,"20":1,"22":1,"25":1,"32":1,"33":1,"40":1,"49":1}}],["the",{"1":{"0":8,"1":110,"2":4,"3":6,"4":1,"5":1,"6":8,"7":1,"8":1,"11":7,"14":9,"15":3,"16":2,"19":1,"20":8,"21":5,"22":8,"24":4,"25":21,"27":1,"29":8,"30":6,"31":1,"32":5,"33":10,"34":16,"35":6,"36":6,"37":5,"38":2,"39":6,"40":12,"41":4,"42":9,"43":8,"44":5,"46":2,"50":7,"51":1,"53":24,"54":11,"55":4,"56":2,"57":17,"58":1,"59":1}}],["torstendittmann",{"1":{"44":1}}],["torsten",{"1":{"44":1}}],["too",{"1":{"36":1}}],["tooling",{"1":{"44":1}}],["tool",{"1":{"0":1}}],["tooltips",{"1":{"35":2,"36":1}}],["tooltip",{"0":{"35":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":9,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":10,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":18,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["totally",{"1":{"10":3}}],["to",{"1":{"1":90,"2":4,"4":5,"5":32,"6":3,"8":2,"10":3,"11":5,"13":2,"14":3,"15":2,"17":11,"19":1,"20":7,"21":7,"22":10,"23":1,"25":27,"26":3,"28":3,"29":3,"30":7,"32":8,"33":4,"34":17,"35":1,"36":6,"37":2,"38":5,"39":3,"40":7,"41":2,"42":7,"43":3,"44":3,"45":1,"48":1,"49":4,"50":1,"51":2,"53":1,"55":1}}],["top",{"1":{"0":1,"4":3,"8":2,"11":1,"12":4,"19":3,"29":2,"33":1,"54":3}}],["toggle",{"0":{"15":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":34,"16":4,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":7,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tappable",{"1":{"34":1}}],["take",{"1":{"22":1,"54":1}}],["taken",{"1":{"11":1}}],["tall",{"1":{"20":1}}],["task",{"1":{"1":2,"34":3}}],["tab",{"1":{"14":1,"21":1,"33":1}}],["tabs",{"0":{"13":1,"14":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":3,"13":26,"14":29,"15":3,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["tablets",{"1":{"56":9}}],["tablet",{"1":{"56":2}}],["tables",{"1":{"33":5,"36":1,"39":2}}],["table",{"0":{"33":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":211,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tags",{"1":{"11":1,"21":1,"25":6,"34":10,"36":1,"42":1}}],["tag",{"0":{"24":1,"34":1},"1":{"0":3,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":6,"9":2,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":4,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":3,"24":16,"25":7,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":18,"34":23,"35":5,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":3,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["rtl",{"1":{"57":2}}],["richards",{"1":{"44":1}}],["right",{"1":{"8":2,"14":3,"20":1,"27":3,"40":1,"49":1,"54":1,"57":2}}],["rights",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rr",{"1":{"44":4}}],["run",{"1":{"43":1}}],["runtime",{"1":{"25":9}}],["rule",{"1":{"41":1}}],["ruby",{"1":{"40":2}}],["ronald",{"1":{"44":2}}],["rowgroup",{"1":{"33":1}}],["rowheader",{"1":{"33":1}}],["rows",{"1":{"33":3,"46":1}}],["row",{"1":{"33":34,"53":33}}],["rounded",{"1":{"19":1,"20":1,"36":1}}],["role",{"1":{"15":2,"16":7,"17":3,"25":7,"33":27,"35":3}}],["rahul",{"1":{"44":1}}],["rana",{"1":{"44":1}}],["range",{"1":{"41":1}}],["ranges",{"1":{"41":1}}],["raw",{"1":{"4":3}}],["radio",{"0":{"30":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":11,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":22,"31":2,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["radius",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":21,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":7,"18":2,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":24,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rem",{"1":{"50":1}}],["remove",{"1":{"17":2,"20":1,"25":2,"33":2,"55":2}}],["rel",{"1":{"43":2}}],["relative",{"1":{"39":1,"54":2}}],["related",{"1":{"1":1,"21":1,"22":1,"24":1,"27":1}}],["reusable",{"1":{"43":1,"44":2}}],["regular",{"1":{"42":6}}],["region",{"1":{"10":1}}],["react",{"1":{"40":2}}],["ready",{"1":{"31":3}}],["read",{"1":{"25":1,"44":3}}],["readonly",{"1":{"25":3}}],["readability",{"1":{"20":2}}],["readable",{"1":{"1":1}}],["refresh",{"1":{"33":14}}],["refer",{"1":{"11":1,"30":1,"32":1}}],["reveal",{"1":{"5":16}}],["recognition",{"1":{"6":1,"20":2}}],["recognizable",{"1":{"2":2}}],["recommended",{"1":{"14":1}}],["recommend",{"1":{"6":1,"20":1,"22":1,"34":2,"39":1,"40":1,"42":1}}],["recently",{"1":{"1":1}}],["reddit",{"1":{"40":2}}],["reduces",{"1":{"14":1}}],["red",{"1":{"2":3,"34":1,"37":2}}],["represent",{"1":{"37":1}}],["representation",{"1":{"2":1,"7":2,"10":1,"40":1}}],["representing",{"1":{"0":1,"2":1,"4":1,"5":1,"6":1,"7":1,"8":1,"11":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"23":1,"24":1,"26":1,"27":1,"28":1,"29":1,"31":1,"32":1,"33":1,"34":1,"35":1,"45":1,"46":1,"48":1,"49":1}}],["required",{"1":{"1":1,"25":3,"34":1}}],["resolutions",{"1":{"41":2}}],["reserved",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["resets",{"1":{"44":1}}],["reset",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":7,"56":2,"57":1,"58":1,"59":1}}],["responsive",{"0":{"41":1,"56":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":3,"41":7,"42":3,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":3,"56":5,"57":3,"58":2,"59":2}}],["bishwajeet",{"1":{"44":1}}],["bitly",{"1":{"40":2}}],["bitbucket",{"1":{"40":2}}],["bigger",{"1":{"36":1}}],["big",{"1":{"11":4,"13":1,"20":2,"47":1}}],["bg",{"1":{"38":6}}],["build",{"1":{"44":3}}],["building",{"1":{"43":2,"44":4}}],["built",{"1":{"38":1}}],["but",{"1":{"40":1,"50":1}}],["buttons",{"1":{"1":20,"11":3,"20":15,"21":2,"24":3,"25":20,"26":3,"29":9,"30":5,"32":1,"33":2,"36":2,"55":2}}],["button",{"0":{"15":1,"20":1,"30":1},"1":{"0":9,"1":183,"2":3,"3":7,"4":9,"5":18,"6":95,"7":3,"8":5,"9":45,"10":5,"11":78,"12":3,"13":23,"14":18,"15":40,"16":34,"17":28,"18":6,"19":4,"20":102,"21":4,"22":3,"23":3,"24":28,"25":92,"26":3,"27":8,"28":3,"29":22,"30":8,"31":4,"32":3,"33":109,"34":7,"35":9,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":3,"43":3,"44":4,"45":3,"46":3,"47":23,"48":9,"49":27,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["bradley",{"1":{"44":1}}],["brandonroberts",{"1":{"44":1}}],["brandon",{"1":{"44":2}}],["brand",{"1":{"37":3}}],["browser",{"1":{"33":1,"44":1,"57":2}}],["breaks",{"1":{"57":1}}],["break3open",{"1":{"41":1}}],["break2open",{"1":{"41":1}}],["break2",{"1":{"41":1}}],["break1",{"1":{"41":1}}],["breakpoints",{"1":{"41":3}}],["break",{"1":{"29":2,"33":9,"49":1,"57":7}}],["br",{"1":{"15":1,"22":1,"25":40,"55":1}}],["b",{"1":{"10":6}}],["blurs",{"1":{"39":1}}],["blue",{"1":{"2":7,"24":1,"34":1,"37":2}}],["blog",{"1":{"25":1}}],["block",{"1":{"3":2,"4":1,"5":6,"6":11,"8":6,"10":10,"16":3,"17":1,"25":21,"26":1,"27":2,"29":1,"33":2,"35":1,"39":2,"45":1,"50":67,"53":19,"54":38,"57":2,"58":2}}],["basis",{"1":{"53":15}}],["baseball",{"1":{"25":3}}],["baseline",{"1":{"8":3,"12":8,"25":2,"53":2}}],["based",{"1":{"1":2,"38":1,"51":1}}],["bačo",{"1":{"44":1}}],["background",{"1":{"37":1,"38":2}}],["ball",{"1":{"25":4}}],["bandwidth",{"1":{"12":6}}],["barnby",{"1":{"44":1}}],["bar",{"0":{"0":1,"12":1},"1":{"0":17,"1":3,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":3,"12":27,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["by",{"1":{"1":1,"8":1,"14":1,"19":1,"20":3,"24":1,"33":1,"39":1,"40":1,"41":1,"43":1,"53":1,"54":1,"59":1}}],["behave",{"1":{"47":1}}],["behavior",{"1":{"33":1}}],["behance",{"1":{"40":2}}],["beneath",{"1":{"39":1}}],["being",{"1":{"38":1,"50":1}}],["better",{"1":{"44":1}}],["beta",{"1":{"34":3}}],["between",{"1":{"11":4,"12":8,"13":2,"14":1,"15":1,"22":1,"30":1,"32":2,"34":1,"39":4,"40":2,"41":1,"53":3,"55":1}}],["begin",{"1":{"27":2}}],["bessiecooper",{"1":{"25":7}}],["bessie",{"1":{"25":4}}],["best",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"44":1,"49":1,"55":1}}],["before",{"1":{"11":1}}],["bell",{"1":{"10":1,"48":1}}],["below",{"1":{"6":1,"15":1,"25":1,"35":1,"37":1,"39":1,"40":1,"41":1,"43":1,"55":1,"59":1}}],["been",{"1":{"1":1,"34":1,"44":1}}],["be",{"1":{"1":4,"2":3,"11":2,"14":3,"20":2,"21":2,"22":2,"23":2,"25":11,"29":2,"30":3,"32":3,"33":2,"34":4,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"42":3,"43":1,"46":1,"54":1}}],["boards",{"1":{"47":1}}],["bolt",{"1":{"10":3,"12":1}}],["bold",{"1":{"10":3,"12":4,"25":1,"42":2,"57":5}}],["bottom",{"1":{"8":2,"11":1,"15":2,"19":3,"35":3,"48":1,"54":1}}],["both",{"1":{"1":1,"15":1,"37":1}}],["body",{"1":{"1":1,"10":3,"12":4,"17":3,"25":1,"33":1,"42":25,"58":1}}],["boxes",{"1":{"9":2,"16":1,"17":1,"19":6}}],["box",{"0":{"16":1,"17":1,"19":1,"46":1,"50":1},"1":{"0":5,"1":15,"2":5,"3":5,"4":5,"5":5,"6":7,"7":5,"8":7,"9":19,"10":6,"11":5,"12":5,"13":5,"14":5,"15":6,"16":46,"17":45,"18":6,"19":30,"20":6,"21":5,"22":5,"23":5,"24":5,"25":5,"26":8,"27":5,"28":5,"29":5,"30":5,"31":5,"32":5,"33":5,"34":5,"35":5,"36":5,"37":5,"38":5,"39":7,"40":7,"41":5,"42":6,"43":5,"44":5,"45":6,"46":11,"47":6,"48":5,"49":6,"50":9,"51":6,"52":5,"53":11,"54":5,"55":5,"56":5,"57":7,"58":5,"59":6}}],["borders",{"1":{"21":3,"50":1}}],["border",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":3,"10":21,"11":3,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":2,"19":3,"20":1,"21":3,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":22,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":13,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["swift",{"1":{"40":2}}],["switches",{"1":{"22":1,"32":7,"36":1}}],["switch",{"0":{"32":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":3,"14":2,"15":2,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":2,"32":15,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["slack",{"1":{"40":2}}],["skype",{"1":{"40":2}}],["same",{"1":{"50":6,"53":23,"54":10,"57":17}}],["sachan",{"1":{"44":1}}],["salesforce",{"1":{"40":2}}],["safari",{"1":{"40":2,"55":1}}],["safe",{"1":{"8":3}}],["sass",{"1":{"38":3,"41":2}}],["sandler",{"1":{"33":18}}],["solve",{"1":{"53":1}}],["solid",{"1":{"21":2,"40":1,"53":6}}],["software",{"1":{"44":9}}],["soften",{"1":{"36":2}}],["source",{"1":{"43":1,"44":6}}],["social",{"1":{"40":1}}],["sorry",{"1":{"25":3}}],["so",{"1":{"20":1,"22":1,"30":1,"32":1,"34":2}}],["sometimes",{"1":{"25":1}}],["something",{"1":{"1":1,"21":1,"28":1}}],["some",{"1":{"1":45,"21":6,"24":1,"41":1,"59":2}}],["spotify",{"1":{"40":2}}],["special",{"1":{"21":1,"37":1,"41":1}}],["specific",{"1":{"16":1,"17":1,"20":1,"36":1,"37":1}}],["spacing",{"1":{"19":1,"53":1}}],["space",{"1":{"11":4,"12":8,"14":2,"22":2,"30":1,"32":1,"40":3,"53":3,"57":5}}],["span",{"1":{"0":14,"1":150,"2":2,"3":12,"4":8,"5":36,"6":48,"7":4,"8":42,"9":38,"10":10,"11":34,"12":32,"13":12,"14":12,"15":16,"16":42,"17":60,"18":18,"20":50,"21":4,"24":32,"25":134,"27":30,"29":18,"31":24,"33":290,"34":34,"35":16,"44":2,"47":14,"48":24,"49":28}}],["snippets",{"1":{"13":1,"23":2,"37":1,"42":1}}],["svg",{"1":{"10":7,"25":2,"40":1}}],["schofield",{"1":{"44":1}}],["scss",{"1":{"38":5,"41":6,"50":2,"53":1,"54":1,"57":1}}],["scannable",{"1":{"45":1}}],["scanning",{"1":{"34":2,"42":1}}],["scale",{"1":{"10":3,"40":2,"42":1}}],["scenarios",{"1":{"14":1}}],["script",{"1":{"22":4}}],["scrim",{"1":{"11":1}}],["screen",{"1":{"14":1,"20":1,"33":1,"41":5,"46":3,"47":5,"53":1,"56":1}}],["screens",{"1":{"8":1,"10":1,"41":15,"46":4,"47":2}}],["scrolling",{"1":{"14":1,"33":1}}],["scroll",{"1":{"4":3,"14":7,"33":9}}],["shimonewman",{"1":{"44":1}}],["shimon",{"1":{"44":1}}],["shield",{"1":{"8":3}}],["shechter",{"1":{"44":1}}],["shmuel",{"1":{"44":1}}],["shades",{"1":{"37":2}}],["shadows",{"1":{"39":3}}],["shadow",{"1":{"17":3,"39":14}}],["sharp",{"1":{"36":1}}],["shrink",{"1":{"17":2,"25":2,"53":3}}],["shortcuts",{"1":{"26":2}}],["short",{"1":{"20":1,"34":2}}],["shows",{"1":{"18":1,"55":1,"56":1,"58":1}}],["showmodal",{"1":{"11":1}}],["shown",{"1":{"2":1,"15":1,"41":1}}],["show",{"1":{"1":1,"11":4,"14":2,"21":1,"25":4,"29":1,"33":2,"38":1,"39":2,"49":2}}],["should",{"1":{"1":2,"14":4,"20":1,"21":1,"22":3,"25":2,"30":3,"32":3,"33":3,"39":1,"40":2}}],["surface",{"1":{"39":2}}],["surfaces",{"1":{"39":1}}],["suresh",{"1":{"44":1}}],["sure",{"1":{"20":1,"22":1,"30":1,"32":1,"40":2}}],["support",{"1":{"38":1,"42":1,"44":2}}],["such",{"1":{"20":1,"36":4,"37":1,"39":2}}],["successfully",{"1":{"1":1,"34":1}}],["success",{"1":{"1":6,"9":3,"16":1,"25":6,"34":6,"37":8,"51":3}}],["subtle",{"1":{"42":1}}],["sub",{"1":{"8":9}}],["subheading",{"1":{"5":9}}],["summary",{"1":{"5":12}}],["src",{"1":{"2":1,"7":1,"10":7,"25":2,"33":9,"44":1}}],["s",{"1":{"2":3,"11":1,"20":1,"29":1,"33":1,"34":1,"37":2,"40":1,"43":1,"44":3,"54":1,"55":1,"59":1}}],["small",{"1":{"1":10,"2":18,"8":1,"10":21,"11":10,"22":5,"25":6,"28":2,"30":4,"32":4,"34":1,"36":7,"39":7,"41":9,"46":3,"47":6,"57":12}}],["sizing",{"1":{"53":2}}],["sizes",{"1":{"2":4,"11":2,"13":1,"20":2,"22":2,"30":2,"32":2,"36":3,"41":3,"42":3,"46":1}}],["size",{"1":{"1":15,"2":24,"6":5,"8":2,"9":4,"10":2,"12":4,"17":15,"20":6,"22":2,"25":2,"30":5,"32":2,"33":21,"36":1,"41":2,"42":1,"46":8,"53":48,"56":1,"57":12}}],["simple",{"1":{"34":2,"44":1}}],["simplify",{"1":{"8":1}}],["six",{"1":{"14":1,"16":1,"51":1}}],["singh",{"1":{"44":1}}],["single",{"1":{"13":1,"14":1,"21":1,"22":1,"30":3,"32":2,"40":1,"49":1}}],["singapore",{"1":{"10":3}}],["sidebar",{"1":{"36":1,"48":2}}],["side",{"1":{"0":4,"14":2,"48":4}}],["stnguyen90",{"1":{"44":1}}],["steven",{"1":{"44":1}}],["steps",{"1":{"40":1,"43":1}}],["still",{"1":{"28":1}}],["sticky",{"1":{"1":43,"33":5,"54":9}}],["storage",{"1":{"12":3,"44":1}}],["stripe",{"1":{"40":2}}],["string",{"1":{"2":1}}],["stretch",{"1":{"9":7,"53":1}}],["strong",{"1":{"6":1,"20":1,"42":1}}],["stylesheet",{"1":{"43":2}}],["styles",{"1":{"21":2,"33":5,"44":1,"54":2,"55":1}}],["style",{"1":{"1":15,"6":12,"8":1,"9":9,"10":11,"11":2,"12":4,"14":1,"16":7,"17":5,"20":1,"25":11,"29":1,"33":29,"34":1,"36":4,"37":2,"38":6,"39":2,"41":12,"42":4,"46":1,"54":2}}],["stays",{"1":{"50":6,"53":23,"54":10,"57":17}}],["stars",{"1":{"33":12}}],["start",{"1":{"0":4,"3":2,"4":1,"5":6,"6":12,"8":21,"10":13,"11":3,"14":2,"16":3,"17":8,"18":1,"25":19,"26":1,"27":2,"29":2,"33":5,"35":1,"39":2,"43":1,"45":1,"50":74,"53":10,"54":38,"57":3}}],["started",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["standard",{"1":{"39":1}}],["standalone",{"1":{"1":23}}],["stand",{"1":{"20":1}}],["stack",{"1":{"19":1,"44":1}}],["static",{"1":{"34":1,"54":2}}],["state",{"1":{"11":1,"16":1,"17":1,"21":2,"22":3,"24":2,"25":2,"31":2,"34":1}}],["states",{"1":{"1":2,"15":2,"21":1,"22":1,"25":2,"30":1,"31":2,"32":2,"51":2}}],["status",{"0":{"31":1},"1":{"0":1,"1":2,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":2,"31":22,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["system",{"1":{"1":2,"34":1,"37":2,"42":1,"43":1,"44":3,"51":1}}],["self",{"1":{"53":3}}],["selector",{"1":{"58":1}}],["selectors",{"1":{"30":1,"32":1,"37":1}}],["selecting",{"1":{"30":1}}],["selection",{"1":{"0":3,"30":1}}],["select",{"1":{"5":9,"6":1,"17":1,"22":3,"25":16,"30":1,"33":2,"40":1}}],["selected",{"1":{"0":3,"14":1,"15":3,"30":1,"33":1,"34":1,"37":2,"40":1,"47":1,"48":1,"58":1}}],["semantics",{"1":{"42":1}}],["semibold",{"1":{"42":6}}],["semi",{"1":{"11":1}}],["serious",{"1":{"36":1}}],["services",{"1":{"8":9}}],["sensitive",{"1":{"25":1}}],["sentences",{"1":{"20":1}}],["sent",{"1":{"1":45}}],["set",{"1":{"22":2,"25":9,"30":1,"32":1,"35":9,"51":1}}],["settings",{"1":{"14":3}}],["see",{"1":{"21":2,"55":1}}],["sessions",{"1":{"14":3}}],["separator",{"1":{"18":1,"25":4}}],["separate",{"1":{"11":3}}],["seperate",{"1":{"11":1}}],["seperators",{"1":{"37":1}}],["seperator",{"1":{"3":1}}],["sep",{"1":{"3":3,"18":2,"53":3}}],["secret",{"1":{"25":9,"35":9}}],["secure",{"1":{"8":3}}],["sections",{"1":{"13":2,"14":1,"45":1}}],["section",{"1":{"0":2,"1":40,"4":2,"6":26,"12":8,"13":1,"16":4,"21":1,"25":12,"33":2,"43":1,"48":6,"54":2}}],["secondary",{"0":{"13":1},"1":{"0":2,"1":21,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":1,"9":8,"10":1,"11":5,"12":2,"13":24,"14":2,"15":1,"16":1,"17":4,"18":1,"19":1,"20":16,"21":1,"22":1,"23":1,"24":4,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":2,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["search",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":14,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["guide",{"1":{"44":1}}],["guarantees",{"1":{"42":1}}],["google",{"1":{"40":2}}],["global",{"1":{"38":2}}],["g",{"1":{"34":1,"39":2}}],["gmail",{"1":{"25":8}}],["gt",{"1":{"11":1,"33":2,"43":1}}],["growing",{"1":{"44":1}}],["grouping",{"1":{"27":1}}],["group",{"1":{"2":21,"21":1,"45":1,"48":1}}],["groups",{"1":{"2":2}}],["green",{"1":{"2":7,"34":1,"37":2}}],["graph",{"1":{"12":4}}],["graphical",{"1":{"2":1}}],["grayscale",{"1":{"40":1}}],["gray",{"1":{"2":1,"10":3,"25":4,"34":1,"40":2,"51":3}}],["grid",{"0":{"8":1,"46":1,"47":1},"1":{"0":3,"1":18,"2":3,"3":3,"4":13,"5":3,"6":5,"7":4,"8":35,"9":4,"10":6,"11":3,"12":3,"13":3,"14":3,"15":11,"16":3,"17":3,"18":3,"19":3,"20":3,"21":3,"22":3,"23":3,"24":3,"25":3,"26":3,"27":3,"28":3,"29":3,"30":3,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":4,"43":3,"44":3,"45":4,"46":21,"47":26,"48":4,"49":3,"50":3,"51":3,"52":3,"53":7,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["gif",{"1":{"44":1}}],["gitlab",{"1":{"40":2}}],["git",{"1":{"40":2,"44":2}}],["github",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":4,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["give",{"1":{"1":1}}],["getelementsbyclassname",{"1":{"22":2}}],["get",{"1":{"21":1,"44":1,"46":1}}],["getting",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["germany",{"1":{"10":1}}],["generic",{"1":{"1":1}}],["general",{"1":{"1":1,"34":1,"40":1}}],["generated",{"1":{"1":2}}],["gap",{"1":{"0":2,"1":5,"4":1,"8":10,"9":7,"10":21,"11":8,"12":13,"17":3,"18":1,"19":4,"21":2,"25":5,"33":13,"44":2,"46":3,"47":1,"53":75}}],["kind",{"1":{"45":1}}],["kingdom",{"1":{"10":1}}],["kodumbeats",{"1":{"44":1}}],["kotlin",{"1":{"40":2}}],["kristin",{"1":{"44":4}}],["kb",{"1":{"33":27}}],["kbd",{"1":{"26":7}}],["keys",{"1":{"25":9,"35":9}}],["keyword",{"1":{"23":3}}],["key",{"1":{"21":1}}],["keyboared",{"1":{"21":1}}],["keyboard",{"0":{"26":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":6,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["keeping",{"1":{"20":1}}],["keep",{"1":{"2":1,"20":1,"34":2,"36":1,"49":1}}],["k",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],[">",{"1":{"0":26,"1":521,"2":110,"3":36,"4":49,"5":159,"6":212,"7":23,"8":139,"9":78,"10":134,"11":156,"12":91,"13":43,"14":38,"15":57,"16":147,"17":132,"18":30,"19":15,"20":101,"21":17,"22":21,"23":4,"24":44,"25":560,"26":8,"27":66,"28":7,"29":50,"30":11,"31":38,"32":11,"33":841,"34":55,"35":26,"36":13,"37":3,"38":7,"39":10,"40":1,"41":13,"42":41,"43":5,"44":19,"45":6,"46":28,"47":40,"48":60,"49":66,"50":4,"51":18,"52":4,"53":10,"54":6,"55":5,"56":12,"57":12,"58":1,"59":8}}],["+2",{"1":{"2":12}}],["+",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":4,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cdn",{"1":{"43":1}}],["cpp",{"1":{"40":2}}],["css3",{"1":{"40":2}}],["css",{"1":{"37":2,"38":3,"41":2,"43":3,"44":4,"46":2,"50":1,"53":2,"54":1,"57":1}}],["circular",{"1":{"36":3}}],["circle",{"1":{"9":3,"17":1,"25":2,"27":3,"34":2}}],["cell",{"1":{"33":15}}],["centered",{"1":{"40":1}}],["center",{"1":{"1":5,"2":1,"6":4,"9":7,"10":8,"11":7,"15":2,"17":11,"19":4,"22":2,"25":7,"30":2,"32":2,"33":12,"35":3,"40":3,"44":2,"47":1,"53":6,"57":2}}],["c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["custom",{"1":{"25":7,"46":1}}],["current",{"1":{"31":1}}],["currently",{"1":{"11":1,"34":1}}],["cursor",{"0":{"52":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":9,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":9,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["creation",{"1":{"11":1}}],["created",{"1":{"33":22,"44":1}}],["create",{"1":{"4":1,"21":2,"23":1,"25":1,"33":3,"37":1,"39":2,"44":3,"45":1,"47":3}}],["cross",{"1":{"1":5,"6":2,"8":3,"9":7,"10":1,"11":7,"12":8,"17":5,"18":1,"19":4,"25":7,"33":14,"44":2,"47":1,"53":7}}],["chrome",{"1":{"55":1}}],["choose",{"1":{"17":9,"25":1,"34":2}}],["choice",{"1":{"5":12}}],["chart",{"1":{"12":2,"48":1}}],["change",{"1":{"1":1,"25":1,"33":1}}],["chenparnasa",{"1":{"44":1}}],["chen",{"1":{"44":1}}],["checked",{"1":{"22":2,"30":3,"32":3}}],["check",{"1":{"8":3,"9":2,"16":1,"21":1,"25":1,"27":3,"34":1,"51":8}}],["checkboxes",{"1":{"5":2,"6":2,"22":6,"30":1,"36":1}}],["checkbox",{"0":{"22":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":5,"22":17,"23":2,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":8,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cheveron",{"1":{"5":6,"14":2,"16":2,"20":2,"25":9,"49":2}}],["child",{"1":{"1":5,"10":1,"18":1,"33":2,"47":1,"53":3}}],["capitalize",{"1":{"57":2}}],["carla",{"1":{"44":1}}],["cards",{"1":{"8":1,"10":2,"21":4,"36":1,"39":2}}],["card",{"0":{"10":1,"21":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":5,"9":3,"10":34,"11":3,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":3,"19":2,"20":3,"21":18,"22":3,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":4,"34":2,"35":2,"36":6,"37":2,"38":2,"39":4,"40":2,"41":2,"42":2,"43":2,"44":3,"45":2,"46":26,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":3,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["categories",{"1":{"34":1}}],["case",{"1":{"20":1,"25":3,"33":1}}],["cases",{"1":{"6":1,"7":2,"20":1,"24":1,"27":2,"41":2}}],["cameron",{"1":{"3":6}}],["call",{"1":{"1":31,"20":2}}],["canada",{"1":{"10":1}}],["cannot",{"1":{"2":1}}],["can",{"1":{"1":4,"2":5,"5":1,"6":2,"11":2,"14":3,"20":2,"21":3,"23":2,"25":4,"29":2,"30":1,"32":1,"33":1,"37":1,"40":1,"41":1,"42":2,"45":1,"46":2,"54":3}}],["cancel",{"1":{"0":3,"16":2,"20":1}}],["clamp",{"1":{"57":1}}],["clarify",{"1":{"34":1}}],["class=",{"1":{"33":2}}],["classes",{"1":{"6":1,"38":2,"51":2,"54":2,"59":1}}],["class",{"1":{"0":14,"1":251,"2":59,"3":18,"4":19,"5":78,"6":108,"7":12,"8":64,"9":36,"10":55,"11":80,"12":41,"13":24,"14":22,"15":31,"16":76,"17":67,"18":17,"19":9,"20":52,"21":11,"22":9,"23":3,"24":23,"25":256,"26":5,"27":34,"28":4,"29":27,"30":4,"31":22,"32":11,"33":427,"34":29,"35":15,"36":4,"38":2,"39":4,"40":2,"42":18,"44":6,"45":4,"46":9,"47":20,"48":31,"49":34,"50":3,"51":10,"52":3,"53":6,"54":5,"55":4,"56":6,"57":5,"59":4}}],["click",{"1":{"49":1}}],["clickability",{"1":{"42":1}}],["clickable",{"0":{"3":1},"1":{"0":1,"1":1,"2":2,"3":22,"4":2,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["clicking",{"1":{"15":1,"22":1,"30":1,"32":1}}],["clock",{"1":{"9":2}}],["closed",{"1":{"8":3}}],["close",{"1":{"1":15,"11":6,"16":2}}],["clear",{"1":{"5":9,"25":9,"42":1}}],["cog",{"1":{"48":1}}],["cognitive",{"1":{"14":1}}],["codingsamurai",{"1":{"44":1}}],["code",{"0":{"4":1,"23":1},"1":{"0":2,"1":2,"2":2,"3":3,"4":27,"5":3,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":3,"23":15,"24":3,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":2,"39":2,"40":7,"41":4,"42":12,"43":3,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":4,"58":2,"59":2}}],["count",{"1":{"25":3}}],["counter",{"1":{"25":12}}],["country",{"1":{"10":7}}],["couldn",{"1":{"25":3}}],["cooper",{"1":{"25":3}}],["cope",{"1":{"44":1}}],["copied",{"1":{"23":1}}],["copying",{"1":{"29":1}}],["copy",{"1":{"11":1,"18":1,"25":3,"29":4,"33":3,"34":2,"40":1,"43":1}}],["community",{"1":{"44":1}}],["commit",{"1":{"44":2}}],["command",{"1":{"40":1,"43":1}}],["common",{"1":{"29":1,"40":1}}],["commonly",{"1":{"20":1,"32":1}}],["com",{"1":{"25":14,"43":2}}],["compilation",{"1":{"50":1}}],["compiled",{"1":{"38":1,"41":1,"50":1,"53":1,"57":1}}],["compliment",{"1":{"42":1}}],["complete",{"1":{"8":4,"20":1,"28":1,"31":6}}],["completed",{"1":{"1":1,"34":1}}],["complex",{"1":{"8":1,"11":3,"21":1}}],["component",{"1":{"20":1,"36":1,"39":1}}],["components",{"0":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":4,"6":4,"7":2,"8":2,"9":2,"10":2,"11":4,"12":2,"13":4,"14":4,"15":3,"16":4,"17":4,"18":4,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":1,"31":2,"32":1,"33":3,"34":1,"35":3,"36":4,"37":2,"38":2,"39":5,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["compute",{"1":{"12":3}}],["core",{"1":{"44":1}}],["corner",{"1":{"36":2}}],["corners",{"1":{"19":1,"20":1,"36":2}}],["correct",{"1":{"25":1}}],["correctly",{"1":{"20":1,"22":1,"30":1,"32":1}}],["cover",{"1":{"17":6}}],["configured",{"1":{"54":1}}],["confused",{"1":{"42":1}}],["confusion",{"1":{"6":1}}],["convey",{"1":{"34":2,"51":1}}],["conduct",{"1":{"25":1}}],["conjunction",{"1":{"20":1}}],["consist",{"1":{"5":1,"6":1,"11":1,"13":1,"14":1,"16":1,"17":1,"18":1,"33":1,"35":1}}],["consistency",{"1":{"2":1,"20":1}}],["consistent",{"1":{"1":1,"37":1,"43":1,"44":3,"50":1,"51":1,"57":1}}],["console",{"1":{"1":2,"2":1,"5":1,"6":2,"11":1,"15":1,"20":1,"21":1,"27":1,"33":3,"34":4,"36":1,"37":2,"39":1,"41":1,"51":1,"53":1}}],["contributing",{"1":{"44":1}}],["controls",{"1":{"53":1}}],["controlled",{"1":{"32":1,"59":1}}],["control",{"1":{"6":1,"37":1,"53":1}}],["contrast",{"1":{"2":1,"39":3}}],["contains",{"1":{"29":1,"31":1,"37":1}}],["containing",{"1":{"25":1,"49":1}}],["contain",{"1":{"1":1,"5":1,"6":1}}],["containers",{"1":{"11":1}}],["container",{"0":{"45":1},"1":{"0":2,"1":1,"2":1,"3":3,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":5,"13":2,"14":1,"15":1,"16":1,"17":2,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":11,"46":4,"47":4,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":2}}],["context",{"1":{"1":2,"34":4,"42":1}}],["contextual",{"1":{"1":15,"9":21,"11":3,"17":3,"25":1}}],["contents",{"1":{"47":1,"53":5}}],["content",{"1":{"0":2,"1":21,"4":1,"5":27,"7":6,"10":1,"11":7,"13":1,"14":1,"16":4,"19":1,"21":1,"25":1,"27":1,"29":1,"33":1,"34":1,"41":1,"45":3,"49":1,"53":5,"57":2}}],["colours",{"1":{"34":1}}],["colored",{"1":{"2":1}}],["color",{"1":{"2":27,"8":9,"9":5,"10":3,"11":1,"12":2,"16":1,"17":1,"24":2,"25":10,"37":56,"38":24,"40":3,"44":1,"51":32,"53":6}}],["colors",{"0":{"37":1,"51":1},"1":{"0":2,"1":2,"2":4,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":3,"37":12,"38":3,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":3,"51":9,"52":3,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["collaborating",{"1":{"44":1}}],["collaboration",{"1":{"44":1}}],["collaborate",{"1":{"44":4}}],["collapsibles",{"1":{"5":17}}],["collapsible",{"0":{"5":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":45,"6":2,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["collection",{"1":{"33":22}}],["col",{"1":{"33":153,"44":2,"47":8}}],["columnheader",{"1":{"33":5}}],["columns",{"1":{"24":1,"33":2,"47":4,"53":2}}],["column",{"1":{"18":3,"33":4,"47":8,"53":24}}],["ctrl",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}]],"serializationVersion":2} \ No newline at end of file +{"documentCount":60,"nextId":60,"documentIds":{"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9,"10":10,"11":11,"12":12,"13":13,"14":14,"15":15,"16":16,"17":17,"18":18,"19":19,"20":20,"21":21,"22":22,"23":23,"24":24,"25":25,"26":26,"27":27,"28":28,"29":29,"30":30,"31":31,"32":32,"33":33,"34":34,"35":35,"36":36,"37":37,"38":38,"39":39,"40":40,"41":41,"42":42,"43":43,"44":44,"45":45,"46":46,"47":47,"48":48,"49":49,"50":50,"51":51,"52":52,"53":53,"54":54,"55":55,"56":56,"57":57,"58":58,"59":59},"fieldIds":{"title":0,"content":1},"fieldLength":{"0":[3,132],"1":[2,261],"2":[2,243],"3":[3,131],"4":[3,147],"5":[2,178],"6":[3,203],"7":[3,149],"8":[3,187],"9":[3,135],"10":[3,205],"11":[2,250],"12":[3,145],"13":[3,129],"14":[2,199],"15":[3,160],"16":[3,180],"17":[4,208],"18":[3,138],"19":[2,129],"20":[2,266],"21":[2,193],"22":[2,205],"23":[3,118],"24":[3,135],"25":[3,393],"26":[2,111],"27":[2,139],"28":[2,110],"29":[2,177],"30":[3,186],"31":[2,129],"32":[2,191],"33":[2,339],"34":[2,241],"35":[2,153],"36":[3,189],"37":[2,211],"38":[3,158],"39":[2,184],"40":[2,475],"41":[2,214],"42":[2,222],"43":[2,157],"44":[1,360],"45":[2,119],"46":[3,155],"47":[3,150],"48":[2,131],"49":[2,167],"50":[3,163],"51":[2,127],"52":[2,98],"53":[2,230],"54":[2,166],"55":[3,147],"56":[2,121],"57":[2,171],"58":[2,102],"59":[2,120]},"averageFieldLength":[2.4,182.2],"storedFields":{"0":{"title":"components - action bar","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components action bar Action bar The floating action bar is a tool that appears on top of the main layout and enables action execution. Class Type action-bar Action Bar A class representing an action bar container action-bar-start Action Bar start side The content located on the start side of the action bar action-bar-end Action Bar end side The content located on the end side of the action bar Preview HTML 4 documents selected Cancel Delete selection 4 documents selected Cancel Delete selection \"> < section class = \" action-bar \" > < div class = \" action-bar-start u-flex u-gap-8 \" > < span class = \" inline-tag is-info \" > < span class = \" text \" > 4 </ span > </ span > < span class = \" text \" > < span class = \" is-not-mobile \" > documents </ span > selected </ span > </ div > < div class = \" action-bar-end u-flex u-gap-8 \" > < button class = \" button is-text \" > < span class = \" text \" > Cancel </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Delete < span class = \" is-not-mobile \" > selection </ span > </ span > </ button > </ div > </ section > tooltip alert Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/action-bar"},"1":{"title":"components - alert","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components alert Alert Alerts display both task-generated and system-generated messages. They can persist in the UI, or they can be dismissed by the user. Types In the Appwrite console, we use two types of alerts: Class Type alert Inline Inline alerts present additional information to the user related to content within a form or a body of text. alert is-standalone Standalone Alert Standalone is based Alert type Inline alert is-action Action Alert action is based Alert type Inline alert-sticky Sticky Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. States In the Appwrite console, we use five states of alerts: Class Type - Default Use this alert to provide general information to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-info Info Use this alert to provide additional information or tips to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-info \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-info \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-success Success Use this alert to inform the user of a task that has been completed successfully. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-success \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-success \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-warning Warning Use this alert to warn the user that action may be required depending on the context. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-warning \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-warning \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-danger Danger/Error Use this alert to warn the user about errors, and how they can fix the problem. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-danger \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-danger \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Best Practice Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application. Do Use human-readable language in your alerts to explain the purpose of the alert, and provide a call to action where necessary. Don't Show overly generic or patronizing messages in your alerts. action bar avatar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/alert"},"2":{"title":"components - avatar","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components avatar Avatar Avatars are a graphical representation of a person or object using an icon, image, or a string with initials. Class Type avatar Avatar A class representing an avatar Types Avatars have three different types: Class Type is-color-empty Empty The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode. - Text A text avatar can display up to two letters, typically a user’s or team’s initials. - Icon One icon can be displayed in the center of an icon avatar. - Image Avatars can display a preview of a file or the user’s profile picture. Preview HTML aa aa \"> < div class = \" avatar is-color-empty \" > </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar \" > < span class = \" icon-pencil \" > </ span > </ div > < img class = \" avatar \" src = \" https://unsplash.it/40 \" alt = \" \" /> Sizes There are five different sizes used for avatars: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px is-size-x-large xlarge 64px Preview HTML aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-size-x-small \" > aa </ div > < div class = \" avatar is-size-small \" > aa </ div > < div class = \" avatar is-size-medium \" > aa </ div > < div class = \" avatar is-size-large \" > aa </ div > < div class = \" avatar is-size-x-large \" > aa </ div > Colors In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors: class Type is-color-empty Empty - Default is-color-orange Orange is-color-green Green is-color-blue Blue is-color-pink Pink is-color-red Red Preview HTML aa aa aa aa aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-color-empty \" > aa </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar is-color-orange \" > aa </ div > < div class = \" avatar is-color-green \" > aa </ div > < div class = \" avatar is-color-blue \" > aa </ div > < div class = \" avatar is-color-pink \" > aa </ div > < div class = \" avatar is-color-red \" > aa </ div > Avatars Groups avatars-group Sizes Avatar groups have four different sizes: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px Preview HTML aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 \"> < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large \" > +2 </ div > </ li > </ ul > Avatar Group - icon with border Avatar groups have four different sizes: class Type Size is-with-border add border 1px Preview HTML \"> < ul class = \" avatars-group is-with-border \" > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-github \" aria-hidden = \" true \" aria-label = \" GitHub \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-gitlab \" aria-hidden = \" true \" aria-label = \" GitLab \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-bitBucket \" aria-hidden = \" true \" aria-label = \" BitBucket \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-azure \" aria-hidden = \" true \" aria-label = \" Azure \" > </ span > </ div > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency in avatars: Do Use icons that have universal meanings and are easily recognizable. Don't Do not use Icons that are less recognizable and inconsistent. Do Use up to 2 uppercase letters and high color contrast Don't Do not use more than 2 letters or lowercase alert clickable list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/avatar"},"3":{"title":"components - clickable list","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components clickable list Clickable List Class Type clickable-list List Container Define clickable list clickable-list-item Item Container Define item clickable-list-button Button Clickable zone clickable-list-title Title clickable-list-title-sep Title seperator clickable-list-desc Description Preview HTML Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 \"> < ul class = \" clickable-list \" > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > </ ul > avatar code panel Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/clickable-list"},"4":{"title":"components - code panel","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components code panel Code Panel Code panels are used to create a focused view of a block of code, for example to display logs. Class Type code-panel Code Panel A class representing a code panel Preview HTML Raw data Scroll to top function = { firstName: “hello” } Raw data Scroll to top function = { firstName: “hello” } \"> < section class = \" code-panel u-min-width-100-percent theme-dark \" > < header class = \" code-panel-header \" > < div class = \" u-flex u-gap-16 u-margin-inline-start-auto \" > < button class = \" button is-text \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Raw data </ span > </ button > < button class = \" button is-secondary is-disabled \" > < span class = \" icon-arrow-narrow-up \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Scroll to top </ span > </ button > </ div > </ header > < code class = \" code-panel-content grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > </ section > Code Grid A grid of code lines, used inside the code panel. Preview HTML function = { firstName: “hello” } function = { firstName: “hello” } \"> < code class = \" grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > clickable list collapsible Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/code-panel"},"5":{"title":"components - collapsible","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components collapsible Collapsible Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow you to progressively display information as desired. Class Type collapsible Collapsible A class representing a collapsible Components Collapsible consist of five components: Class Type collapsible-item Item collapsible-wrapper Wrapper collapsible-button Button collapsible-button-optional Optional Label collapsible-content Content Preview HTML Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options one </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options two </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Option three </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > </ ul > Collapsible with Checkboxes In the Appwrite console, collapsibles can contain checkboxes: Preview HTML Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" open > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content u-margin-block-start-8 u-padding-inline-32 \" > < div class = \" form \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > </ ul > </ div > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > </ ul > code panel drop list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/collapsible"},"6":{"title":"components - drop list","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components drop list Drop List Drop lists allow users to select one option from a popover menu. Class Type drop Drop List A class representing a drop list Components Drop Lists consist of four components: Class Type drop-wrapper Wrapper drop-section Section drop-list List drop-list-item List item Alignment In the Appwrite console, we use three alignments: Class Type - Block Start + Inline Start is-block-end Block End is-inline-end Inline End Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-inline-start : 6rem ; \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end is-inline-end is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > Arrow Placement Use the classes below to control the arrow placement of the drop list: Class Type - Start is-arrow-center Center is-arrow-end End is-no-arrow No Arrow Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-center \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-center \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-end \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > </ div > Drop List with Checkboxes In the Appwrite console, drop list can contain checkboxes: Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 1 </ span > </ label > </ li > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 2 </ span > </ label > </ li > </ ul > </ section > </ div > </ div > </ div > Best Practice We recommend using icons in cases where they have strong universal meaning and aid in the recognition of an action. Do Use icons only if they help the user understand the action. Don't To avoid confusion, do not use icons if you can’t think of a unique icon for each action. collapsible file preview Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/drop-list"},"7":{"title":"components - file preview","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components file preview File Preview A representation of content uploaded as an attachment. Class Type file-preview File Preview A class representing a file preview Types There are 2 types of content representation: Class Type is-no-file No Image Use in cases the uploaded file is not an image and a preview is not available. file-preview-content Content Use in cases an image (.png, .jpeg, .jpg, etc.) was uploaded. Image will appear as a thumbnail. Preview HTML Preview not available Preview not available \"> < a href = \" \" class = \" file-preview is-with-image \" aria-label = \" open file in new window \" > < div class = \" file-preview-image \" > < img src = \" https://unsplash.it/600 \" alt = \" \" /> </ div > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > </ div > </ div > </ a > < a href = \" \" class = \" file-preview is-no-file \" aria-label = \" file \" > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < p > Preview not available </ p > </ div > </ a > drop list grid item Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/file-preview"},"8":{"title":"components - grid item","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components grid item Grid Item To simplify complex cards, a grid item is used to position elements. Class Type grid-item-1 Grid Item A class representing a grid item Positions There are four positions within a grid item: Class Type grid-item-1-start-start Top-Left grid-item-1-start-end Top-Right grid-item-1-end-start Bottom-Left grid-item-1-end-end Bottom-Right Preview HTML sub-header Header All services disabled Complete Interactive sub-header Header All services disabled Complete Interactive \"> < div class = \" card u-margin-auto \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > Multiple Grid Items Display multiple grid items by using the wrapper class grid-box : Preview HTML sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive \"> < ul class = \" grid-box \" style = \" --grid-gap : 2rem ; --grid-item-size : 18rem ; --grid-item-size-small-screens : 16rem ; \" > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status \" > < button class = \" tag \" disabled > < span class = \" text \" > Disabled </ span > </ button > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > </ ul > file preview inline loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/grid-item"},"9":{"title":"components - inline loader","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components inline loader Inline loader Pending/Waiting Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Loading Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Failed Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-exclamation-circle u-color-text-danger \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Success Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Multiple Loader Boxes Preview HTML Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > grid item label card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/inline-loader"},"10":{"title":"components - label card","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components label card Label Card A representation of content uploaded as an attachment. Plan Cards Preview HTML Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited \"> < ul class = \" u-flex u-flex-vertical u-gap-24 u-max-width-350 \" > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Pro plan </ h4 > < p class = \" u-color-text-gray \" > For projects you want to scale easily. < b > $25/month + Add-ons </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Free plan </ h4 > < p class = \" u-color-text-gray \" > For personal, passion projects. < b > Totally free </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-4 u-opacity-50 \" > < h4 class = \" body-text-2 u-bold \" > Disabled plan </ h4 > < p class = \" u-color-text-gray \" > < b > Unlimited </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto u-opacity-50 \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > </ ul > Region Cards Preview HTML Netherlands Notify me UK Canada US Germany India Netherlands Notify me UK Canada US Germany India \"> < ul class = \" grid-box \" style = \" --p-grid-item-size : 10em ; --p-grid-item-size-small-screens : 10rem ; \" > < li > < label class = \" card u-height-100-percent u-flex u-flex-vertical u-gap-16 \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/netherlands.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto u-opacity-20 \" alt = \" \" /> < p class = \" u-opacity-20 \" > Netherlands </ p > < button class = \" tag u-cross-child-center \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Notify me </ span > </ button > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/united-kingdom.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > UK </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/canada.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Canada </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/usa.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > US </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/germany.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Germany </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/india.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > India </ p > </ div > </ label > </ li > </ ul > inline loader modal Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/label-card"},"11":{"title":"components - modal","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components modal Modal Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed. Class Type modals Modal A class representing a modal Components Modals consist of five components: Class Type modal-form Form modal-header Header modal-title Title modal-content Content modal-footer Footer Preview HTML Open Modal Modal title Modal label text. Button Button Open Modal Modal title Modal label text. Button Button \"> < button class = \" button \" > < span > Open Modal </ span > </ button > < dialog class = \" modal \" id = \" dialog \" > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < div class = \" avatar is-color-orange is-medium \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > </ div > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > To open or close a modal, use the native <dialog> element’s show() , showModal() and close() methods. For more information, please refer to the MDN documentation . Sizes In the Appwrite console, we use three sizes of modals: class Type is-small Small - Medium is-big Big Preview HTML Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button \"> < dialog id = \" dialog4 \" class = \" modal is-small \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > < dialog id = \" dialog5 \" class = \" modal is-big \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Separate Header State class which allow to seperate the header with border. class Type is-separate-header Add Border bottom to header of Modal Preview HTML Modal title Provide contextual feedback messages for complex modals. Label Label Button Button Modal title Provide contextual feedback messages for complex modals. Label Label Button Button \"> < dialog id = \" dialog6 \" class = \" modal is-big is-separate-header \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > < p > Provide contextual feedback messages for complex modals. </ p > </ header > < div class = \" modal-content \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Best Practice Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text. label card progress bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/modal"},"12":{"title":"components - progress bar","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components progress bar Progress Bar Preview HTML Bandwidth 50% 50.01GB 100GB Bandwidth 50% 50.01GB 100GB \"> < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > Full Progress Bar Options Preview HTML Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs \"> < ul class = \" u-flex-vertical u-gap-24 \" > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-folder \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Storage </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-warning \" > 85% </ p > </ div > < div class = \" progress-bar-container is-warning \" style = \" --graph-size : 85% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-lightning-bolt \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Compute </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-danger \" > 105% </ p > </ div > < div class = \" progress-bar-container is-danger \" style = \" --graph-size : 105% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 3.50hrs </ span > < span class = \" progress-bar-text-max \" > 100hrs </ span > </ div > </ section > </ li > </ ul > modal secondary tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/progress-bar"},"13":{"title":"components - secondary tabs","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components secondary tabs Secondary Tabs Secondary tabs allows users to switch between multiple sections of content within a single section/container. Class Type secondary-tabs Secondary Tabs A class representing secondary tabs Components Secondary Tabs consist of two components: Class Type secondary-tabs-item Item secondary-tabs-button Button Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Stretch Tabs Tabs stretch to fill all line: Class Behave is-stretch Stretch Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-stretch \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Sizes Class Type is-large Large Used for big sections or to switch between code snippets Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-large \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > progress bar tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/secondary-tabs"},"14":{"title":"components - tabs","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components tabs Tabs Tab navigation allows users to switch between multiple sections of content within a single screen. Class Type tabs Tabs A class representing tabs Components Tabs consist of four components: Class Type tabs-list List - tabs-item Item - tabs-button Button - tabs-button-scroll Scroll Used when there is not enough space to display all tabs, mostly on mobile devices. The tabs-button-scroll element can be hidden by adding u-hide class to it. Preview HTML Overview Sessions Activity Settings Overview Sessions Activity Settings \"> < div class = \" tabs \" style = \" width : 350px \" > < button class = \" tabs-button-scroll is-start \" aria-label = \" Show items in start side \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > </ button > < button class = \" tabs-button-scroll is-end \" aria-label = \" Show items in end side \" > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < ul class = \" tabs-list \" > < li class = \" tabs-item \" > < a class = \" tabs-button is-selected \" href = \" # \" > < span class = \" text \" > Overview </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Sessions </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Activity </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Settings </ span > </ a > </ li > </ ul > </ div > Best Practice In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If the amount of tabs exceeds the space that is available, adding a horizontal scrolling element is recommended. The right arrow should always be visible. If the user can scroll right, the arrow is active, otherwise the arrow should be disabled. The left arrow should only visible if the user can scroll left. secondary tabs toggle button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/tabs"},"15":{"title":"components - toggle button","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components toggle button Toggle Button Icon toggle is used to switch between two possible states displayed with icons. Class Type toggle-button Icon Toggle A class representing an icon toggle. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Components Icons Toggle inner parts are: Class Type toggle-button-list A class that wraps both toggle items toggle-button-item A class that wraps one toggle item toggle-button-element An icon button States To disable the toggle, add the following attribute: Attribute Type disabled Disabled Use whenever clicking on a toggle isn’t allowed. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" disabled aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" disabled aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Icon Toggle with Tooltip In the Appwrite console, we display a tooltip on hover, as shown below: Preview HTML List View Grid View List View Grid View \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element tooltip \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > List View </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected tooltip \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > Grid View </ span > </ button > </ li > </ ul > </ div > < br /> tabs upload box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/toggle-button"},"16":{"title":"components - upload box","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload box Upload Box Upload Box displays the status of all uploaded files. Class Type upload-box Upload Box A class representing an upload box Components Upload Boxes consist of six components: Class Type upload-box-header Header upload-box-title Title upload-box-content Content upload-box-list List upload-box-item Item is-open Open State Preview HTML File Uploads 3 % hello.mp4 & % hello.mp4 & % hello.mp4 & File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 File Uploads 3 % hello.mp4 &amp; % hello.mp4 &amp; % hello.mp4 &amp; File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 \"> < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > </ ul > </ div > </ section > < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content is-open \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 30% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-warning \" > pending </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 60% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-danger \" > failed </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished u-margin-inline-end-16 \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < button class = \" icon-button u-color-text-success \" aria-label = \" Uploaded \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ section > Upload Loader Class Type upload-image Upload Loader Upload Loader displays the uploading progress of a specific file. Preview HTML \"> < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > </ span > </ div > toggle button upload file box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-box"},"17":{"title":"components - upload file-box","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload file box Upload File Box Upload File Box allows users to select and upload a file to a specific location. Class Type upload-file-box Upload File Box A class representing an upload file box Components Upload File Boxes consist of eight components: Class Type upload-file-box Partial container upload-file-box-image Image upload-file-box-title Title upload-file-box-info Info upload-file-box-list List upload-file-box-name File Name upload-file-box-size File Size is-hover-with-file Hover State Default Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > </ div > </ div > File Added Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > Error Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > < p class = \" helper u-color-text-danger u-margin-block-start-8 \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Display a contextual error message here </ span > </ p > upload box user profile Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-file-box"},"18":{"title":"components - user profile","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components user profile User Profile User profile popover shows extra details about a user or a team. Class Type user-profile User Profile A class representing a user profile Components User profiles consist of three components: Class Type user-profile-info Info user-profile-sep Separator user-profile-empty-column Empty Column Preview HTML UN User Name User ID Extra description UN User Name User ID Extra description \"> < div class = \" card \" > < div class = \" user-profile \" > < span class = \" avatar \" > UN </ span > < span class = \" user-profile-info \" > < span class = \" name \" > User Name </ span > < div class = \" interactive-text-output u-padding-inline-0 \" > < span class = \" text \" > User ID </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ span > < span class = \" user-profile-sep \" > </ span > < span class = \" user-profile-empty-column \" > </ span > < span class = \" user-profile-info \" > < span class = \" text \" > Extra description </ span > </ span > </ div > </ div > upload file box border radius Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/user-profile"},"19":{"title":"elements - box","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements box Box Boxes apply spacing, a border, and rounded corners to content areas. Class Type box Box A class representing a box Preview HTML Box element Box element \"> < div class = \" box \" > Box element </ div > Multiple Boxes You stack multiple boxes on each other by using the boxes-wrapper class. Middle boxes will appear without a border radius. Preview HTML Top Box Middle Box Middle Box Bottom Box Top Box Middle Box Middle Box Bottom Box \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-gap-16 u-cross-center \" > Top Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Bottom Box </ div > </ div > pagination button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/box"},"20":{"title":"elements - button","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements button Button Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it. Class Type button Button A class representing a button Types In the Appwrite console, we use four types of buttons: Class Type - Primary We recommend you use primary buttons for the principal call to action in a page or screen. is-secondary Secondary Secondary buttons can be used in conjunction with a primary button. As part of a pair with primary button, a secondary button will often perform a negative action, such as “Cancel”. is-text Text Text buttons can be used to complete an action inside another component. is-only-icon Icon Icon button with rounded corners Preview HTML Primary Secondary Text Primary Secondary Text \"> < button class = \" button \" > < span class = \" text \" > Primary </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Secondary </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Text </ span > </ button > < button class = \" button is-only-icon \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" style = \" --button-size : 2.5rem ; \" aria-label = \" Remove item \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > Sizes There are two sizes of buttons; large and medium. Each size has its own purpose, so make sure you use every size correctly. class Type - Medium The most commonly used size (default size). Pink Design’s input fields are 40px tall, which is why we use medium size buttons next to input fields. is-big Large Use in a case of call to action that should stand out and have a lot of attention, mostly used on landing pages. Preview HTML Medium Large Medium Large \"> < button class = \" button \" > < span class = \" text \" > Medium </ span > </ button > < button class = \" button is-big \" > < span class = \" text \" > Large </ span > </ button > Buttons With Icons Use icons in cases where they have a strong universal meaning and aid in the recognition of a button. In Appwrite, the icon is placed on the left by default. Preview HTML Button Button Button Button Button Button Button Button Button Button Button Button Button Button \"> < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" text \" > Button </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-download \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > Buttons List Preview HTML Button 1 Button 2 Button 3 Button 4 Button 1 Button 2 Button 3 Button 4 \"> < ul class = \" buttons-list u-margin-auto \" > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 1 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 2 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 3 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 4 </ span > </ button > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency and readability in buttons: Do Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word. Don't Avoid using specific icons, uppercase in every word and long sentences. box card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/button"},"21":{"title":"elements - card","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements card Card Cards are used to group related content in a single container. This can include text, images, lists, buttons, and other elements. Class Type card Card A class representing a card. Styles In the Appwrite console, we use two styles of card borders: Class Type - Solid Solid borders should be the default for cards. is-border-dashed Dashed Use dashed borders only for empty state cards. Special state Class Type is-allow-focus focus If card as this class, is something inside focus, the card will be focus as well (keyboared focus) Preview HTML \"> < article class = \" card \" > </ article > < article class = \" card is-border-dashed \" > </ article > Focus label card Play with the tab key to see focus of card according to the focus of checkbox. In components section you can see more complex demo of “Label Card”. Preview HTML some text some text some text some text \"> < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > Best Practice Cards are used to show empty states, to update or delete objects and to display overviews. A card can include avatars, buttons, illustrations, lists, tags and text. For example: Create your first file to get started. Need a hand? Check out our documentation. Documentation Create file button checkbox Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/card"},"22":{"title":"elements - checkbox","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements checkbox Checkbox Checkboxes allow users to select one or more items from a set. Preview HTML \"> < input type = \" checkbox \" /> < input type = \" checkbox \" checked = \" true \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state States To disable a checkbox, add the following class: Attribute Type disabled Disabled Use whenever clicking on a checkbox isn’t allowed. Preview HTML \"> < input type = \" checkbox \" disabled /> < input type = \" checkbox \" checked = \" true \" disabled /> < input type = \" checkbox \" disabled class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state Sizes There are three sizes of checkboxes; small, medium and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" is-small \" /> < input type = \" checkbox \" /> < input type = \" checkbox \" class = \" is-large \" /> < br /> < input type = \" checkbox \" class = \" is-small js-indeterminate \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < input type = \" checkbox \" class = \" is-large js-indeterminate \" /> Note: Javascript is used to implement the indeterminate state Best Practice We recommend checkboxes next to labels should have at minimum 8px of space in between for legibility. Checkboxes should be aligned to the center of a single line of text. If there are multiple lines in a label should be aligned to the center of the first line in the label. Checkboxes allow users to select multiple items from a set. Do Use checkboxes to allow users select one or more options from a list with related items. Don't Do not use switches; they imply enabling/disabling an item and take up more visual space. card inline code Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/checkbox"},"23":{"title":"elements - inline code","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline code Inline Code Inline code snippets can be used within text to create visual emphasis on code snippets, or indicate text that can be copied verbatim like file names and IDs. Class Type inline-code Inline Code A class representing an inline code Preview HTML keyword or part of a code keyword or part of a code \"> < code class = \" inline-code \" > keyword or part of a code </ code > checkbox inline tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-code"},"24":{"title":"elements - inline tag","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline tag Inline Tag An inline tag is used as a number label inside a button. Some possible use cases are indicating the number of columns in a table or the number of related items. Class Type inline-tag Inline Tag A class representing an Inline Tag Preview HTML 4 4 \"> < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > Color State Class Type is-info info state blue color for inline tag Preview HTML 2 2 \"> < span class = \" inline-tag is-info \" > < span class = \" text \" > 2 </ span > </ span > Usage with Buttons Incorporate the inline tag into secondary buttons or text buttons by doing the following: Preview HTML button 4 button 4 button 4 button 4 button 4 button 4 button 4 button 4 \"> < button class = \" button is-secondary \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-secondary \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > inline code input field Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-tag"},"25":{"title":"elements - input field","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements input field Input Field Input fields are an easily discoverable, efficient, and accessible way for users to input information. They typically appear in forms or dialogue modals. Types There are a few different types of input field that the user can interact with: Input Type Type text Text Default text input Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type text Search Used to input one or more terms to conduct a search. Preview HTML \"> < div class = \" input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 \" > < input type = \" search \" placeholder = \" Search \" /> < div class = \" icon-search \" aria-hidden = \" true \" > </ div > < button class = \" button is-text is-only-icon \" aria-label = \" Clear search \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > Input Type Type password Password Used to input passwords or other sensitive data. - Input with two buttons Displays up to two trailing icons to provide additional functionality to the text (for example: clear, copy, hide, edit). Preview HTML Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ form > Input Type Type numeric Numeric Used for numeric input - Input with two buttons Display with two buttons Preview HTML Label Disabled Label Disabled \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Disabled </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" disabled /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ form > Input Type Type file Upload file Used in case upload a file is necessary. Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" file \" name = \" file \" id = \" file-file \" size = \" 1 \" /> </ li > </ ul > </ form > Input Type Type text Multi Select Used to create ‘tags’ when the user types in the input field. Preview HTML Label role Label role \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" tags-input \" > < div class = \" tags \" > < ul class = \" tags-list \" > < li class = \" tags-item \" > < div class = \" input-tag \" > < span class = \" tag-text \" > role < div > </ div > </ span > < button class = \" input-tag-delete-button \" aria-label = \" delete all:role tag \" type = \" button \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ div > < input type = \" text \" class = \" tags-input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type select Dropdown Allows users to choose one option from a list of values. Preview HTML Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" select u-width-full-line \" > < select name = \" pets \" id = \" pet-select \" > < option value = \" \" > Select option </ option > < option value = \" 1 \" > Option 1 </ option > < option value = \" 2 \" > Option 2 </ option > < option value = \" 3 \" > Option 3 </ option > < option value = \" 4 \" > Option 4 </ option > < option value = \" 5 \" > Option 5 </ option > < option value = \" 6 \" > Option 6 </ option > </ select > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ li > </ ul > </ form > Custom Select Dropdown is made with drop-list . To hide items use the u-hide class. Preview HTML Label Placeholder Item 1 Item 2 Label Placeholder Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < button class = \" input-text-wrapper u-width-full-line \" type = \" button \" style = \" --amount-of-buttons : 1 \" > < span class = \" input-text \" > < span class = \" text \" > Placeholder </ span > </ span > < div class = \" options-list is-no-separator \" > < div class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ div > </ button > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Custom Select with Search Dropdown is made with drop-list . To hide items use the u-hide class. To adjust arrow upl add the is-open class, where the element with custom-select class. To show/hide the button clear field, toggle the u-hide class. Preview HTML Label Item 1 Item 2 Label Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" value = \" bessie \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg667fg6fg67fc68ac3515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Bessie, Cooper, < a class = \" link \" href = \" mailto:bessiecooper@gmail.com \" > bessiecooper@gmail.com </ a > , bessiecooper.com </ span > </ div > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg6673515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Baseball, Football, < a class = \" link \" href = \" mailto:ball@gmail.com \" > ball@gmail.com </ a > , playingball.com </ span > </ div > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select \" > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < div class = \" u-flex u-flex-vertical u-cross-center \" > < div > < img class = \" u-only-light \" src = \" /empty-state-light.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> < img class = \" u-only-dark \" src = \" /empty-state-dark.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> </ div > < div class = \" u-text-center u-margin-block-start-4 \" > < h2 class = \" body-text-2 u-bold u-trim-1 \" > < span class = \" text \" > Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ </ span > </ h2 > < p class = \" text \" > There are no documents that match your search. </ p > </ div > < div class = \" u-flex u-gap-16 u-main-center u-margin-block-start-16 \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" text \" > Clear Search </ span > </ button > </ div > </ div > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Input Type Type textarea Textarea For inputs containing more than two lines of text (for example: articles, blog posts, user feedback). Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < textarea class = \" input-text \" placeholder = \" Type here... \" > </ textarea > </ li > </ ul > </ form > States States can be applied to all inputs fields: Attribute Type - Default Default text input disabled Disabled Used in case the user can’t interact with an input field readonly Readonly Used in case the user can’t change the content in the input field. Sometimes in read-only fields there is a copy button. Preview HTML Label Label Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" disabled /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" readonly /> </ li > </ ul > </ form > Helper Text Helper text provides information and feedback about what to enter in an input. Use the helper class to add helper text below an input field. Class Type - Default Used to provide information about what should be entered into the input field. u-success Success An indication that the information entered into a field is valid/correct. u-warning Warning Used underneath the input field when the user provides incorrect information. This message should provide contextual instructions on how to fix the error. u-error Error An indication that the information entered into a field is invalid/incorrect. Preview HTML This is a helper This is success This is a warning This is an error This is a helper This is success This is a warning This is an error \"> < p class = \" helper \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a helper </ span > </ p > < p class = \" helper u-color-text-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is success </ span > </ p > < p class = \" helper u-color-text-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > < p class = \" helper u-color-text-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is an error </ span > </ p > Input with All Parameters Applied Preview HTML Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-56 \" placeholder = \" placeholder text \" /> < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-120 \" placeholder = \" placeholder text \" /> < ul class = \" buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12 \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < textarea class = \" input-text is-warning u-padding-block-end-32 \" placeholder = \" Type here... \" style = \" --amount-of-buttons : 0.25 ; \" > </ textarea > < ul class = \" buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12 \" style = \" border-end-end-radius : 0.0625rem ; \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > </ ul > </ form > inline tag keyboard Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/input-field"},"26":{"title":"elements - keyboard","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements keyboard Keyboard This element displays keyboard shortcuts. Class Type kbd Keyboard shortcuts A class representing a keyboard element Preview HTML To open search box please press ⌘ + K buttons. To open search box please press ⌘ + K buttons. \"> < p class = \" text u-margin-block-start-8 \" > To open search box please press < kbd class = \" kbd \" > ⌘ </ kbd > + < kbd class = \" kbd \" > K </ kbd > buttons. </ p > input field list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/keyboard"},"27":{"title":"elements - list","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements list List A list is a vertical grouping of related content. Class Type list List A class representing a list Types In the Appwrite console we use two types of list items: Class Type list-item List Item Use in cases list items begin with an icon numeric-list-item Numeric List Item Use in cases list items begin with a number Preview HTML List Item List Item (link) List Item (button) List Item List Item (link) List Item (button) \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < a href = \" # \" class = \" link \" > < span class = \" text \" > List Item (link) </ span > </ a > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < button class = \" link \" > < span class = \" text \" > List Item (button) </ span > </ button > </ li > </ ul > Preview HTML List Item List Item List Item List Item List Item List Item \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > </ ul > Preview HTML Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item \"> < ol class = \" numeric-list \" > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > Numeric List Item </ span > </ li > </ ol > keyboard loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/list"},"28":{"title":"elements - loader","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements loader Loader Use loaders to indicate to users that something is in progress and still needs to complete. Class Type loader Loader A class representing a loader Preview HTML \"> < div class = \" loader \" > </ div > Small Loader Preview HTML \"> < div class = \" loader is-small \" > </ div > list output Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/loader"},"29":{"title":"elements - output","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements output Output Interactive text outputs allow users to interact with the displayed text. Copying and hiding are the two most common actions in this element. Class Type interactive-text-output Output A class representing an interactive text output Components Interactive text output contains buttons: Class Type interactive-text-output-buttons Button/s Wrapper interactive-text-output-button Button Buttons can be hidden (will appear on hover) or displayed next to the content. Preview HTML visible text •••••• visible text •••••• \"> < div class = \" interactive-text-output \" > < span class = \" text u-break-word \" > visible text </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > Buttons On Top Preview HTML This is the visible text which is very long This is the visible text which is very long \"> < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-width-200 \" > < span class = \" text u-trim-start \" > This is the visible text which is very long </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > The following style can be applied to textareas using the is-textarea class: Preview HTML 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi \"> < div class = \" interactive-text-output is-textarea \" > < span class = \" text u-line-height-1-5 u-break-word \" > < p class = \" text u-margin-block-start-8 \" > 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi </ p > </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > loader radio button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/output"},"30":{"title":"elements - radio button","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements radio button Radio Button Radio buttons allow users to select one item from a set. Preview HTML \"> < input type = \" radio \" name = \" radio-1 \" /> < input type = \" radio \" name = \" radio-1 \" checked = \" true \" /> States To disable a radio button, add the following class: Attribute Type disabled Disabled Use whenever clicking on a radio button isn’t allowed. Preview HTML \"> < input type = \" radio \" name = \" radio-2 \" disabled /> < input type = \" radio \" name = \" radio-2 \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" radio \" class = \" is-small \" name = \" size \" /> < input type = \" radio \" name = \" size \" checked = \" true \" /> < input type = \" radio \" class = \" is-large \" name = \" size \" /> Best Practice Radio buttons next to labels should have at minimum 8px of space in between for legibility. Radio buttons should be aligned to the center of a single line of text. If there are multiple lines in a label, the radio button should be aligned to the center of the first line in the label. Radio buttons refer to a single item and allow selecting only one item from a list. Do Use radio buttons to allow users make a single selection from a list of options. Don't Do not use checkboxes when only one item can be selected. output status Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/radio-button"},"31":{"title":"elements - status","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements status Status Status indicates the current state of a multi-state process. Class Type status Status A class representing a status Components Status contains an icon: Class Type status-icon Icon States There are a few different states available for a status: Class Type - Default is-warning Waiting is-pending Pending is-failed Failed is-complete Complete is-processing Processing Preview HTML Ready Waiting Pending Failed Complete Processing Ready Waiting Pending Failed Complete Processing \"> < div class = \" status \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Ready </ span > </ div > < div class = \" status is-waiting \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Waiting </ span > </ div > < div class = \" status is-pending \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Pending </ span > </ div > < div class = \" status is-failed \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Failed </ span > </ div > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > < div class = \" status is-processing \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Processing </ span > </ div > radio button switch Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/status"},"32":{"title":"elements - switch","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements switch Switch Switches are used to quickly toggle between two possible states. They are commonly used for “on/off” switches. Class Type switch Switch A class representing a switch Preview HTML \"> < input type = \" checkbox \" class = \" switch \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> States To disable a switch, add the following class: Attribute Type disabled Disabled Use whenever clicking on a switch isn’t allowed. Preview HTML \"> < input type = \" checkbox \" class = \" switch \" disabled /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" switch is-small \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> < input type = \" checkbox \" class = \" switch is-large \" /> Best Practice Switches next to labels should have at minimum 8px of space in between for legibility. Switches should be aligned to the center of a single line of text. If there are multiple lines in a label, switches should be aligned to the center of the first line in the label. Switches refer to a single item and allow turning an item on or off. Do If each item in a set can be independently controlled, use switches to allow on or off options. Don't Do not use radio buttons to allow on or off options. status table Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/switch"},"33":{"title":"elements - table","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements table Table Tables are used throughout the Appwrite console to organize and display data. Class Type table Table A class representing a table Components Tables consist of five components: Class Type table-thead Head table-thead-col Head Column table-tbody Body table-row Row table-col Column Styles In the Appwrite console, we use three styles of tables: Class Type - Default Table The default table can have two or more columns. If the table width exceeds the size of the user’s screen, it should scroll horizontally. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-selected-columns-mobile \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-table-row-medium-size Narrow rows Change heght from 72px to 54px Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-table-row-medium-size \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-remove-outer-styles Without Outer Styles Secondary table - in the Appwrite console used mostly inside a card or a wizard. Preview HTML Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable \"> < section class = \" card \" > < table class = \" table is-remove-outer-styles \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Value </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Lorem </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > Numquam exercitationem. </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye-off \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Ipsum </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > </ tbody > </ table > < div class = \" u-flex u-margin-block-start-16 \" > < button class = \" button is-text u-padding-inline-0 \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create variable </ span > </ button > </ div > </ section > Class Type is-sticky-scroll Inner Scroll Used in case the content of a table exceeds the maximum width and the first column should be sticky. Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Preview HTML Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cross-center u-cursor-pointer \" aria-label = \" select/deselect all visible item on table \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" /> </ div > </ label > < span class = \" eyebrow-heading-3 \" > Collection ID </ span > </ div > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Updated </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Collection ID \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cursor-pointer \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" aria-label = \" select item that start in: 637a4 \" /> </ div > </ label > < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250 \" > < div class = \" text u-trim \" > 637a40ba7a703e3936e1 </ div > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ div > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Movie </ span > </ td > < td class = \" table-col \" data-title = \" Updated \" > < time class = \" text \" > May 3, 2023, 17:32 </ time > </ td > < td class = \" table-col \" data-title = \" Created \" > < time class = \" text \" > May 3, 2023, 16:59 </ time > </ td > </ tr > </ tbody > </ table > </ div > </ div > Scrolling tables without a sticky column should be wrapped by <div class="table-with-scroll"> and <div class="table-wrapper"> . Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Clickable Row Tables Clickable rows allow you to use rows as links. They are useful when you want to maintain native browser behavior for links, like opening in a new tab. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < div class = \" table \" role = \" table \" > < div class = \" table-thead \" role = \" rowheader \" > < div class = \" table-row \" role = \" row \" > < div class = \" table-thead-col \" role = \" columnheader \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ div > < div class = \" table-thead-col \" role = \" columnheader \" style = \" --p-col-width : 40 \" > </ div > </ div > </ div > < div class = \" table-tbody \" role = \" rowgroup \" > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > < p class = \" text u-margin-block-start-8 \" > Mobile illustration - dark.png </ p > </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/39 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > </ div > </ div > switch tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/table"},"34":{"title":"elements - tag","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tag Tag Tags help organize and differentiate between different categories of content. In the Appwrite console, tags may be interactive or static. Class Type tags Tag A class representing a tag Informative Tags Informative tags are used to visually label information for easy understanding and/or navigation. In the Appwrite console, we use our system colours for each type of tag (gray, blue, green, orange, red) depending on context. Class Type - Default Use this tag to provide general details to the user. In the Appwrite console this style is typically used for ‘disabled’ state tags. is-info Info Use this tag to provide additional information or ‘tips’ to the user. is-success Success Use this tag to inform the user of a task that has been completed or verified successfully. is-warning Warning Use this tag to warn the user that action may be required, or a task is currently processing, depending on the context. is-danger Danger / Error Use this tag to warn the user about an error that may have occured or a task has failed. Preview HTML default info success warning error Beta default info success warning error Beta \"> < div class = \" tag \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > default </ span > </ div > < div class = \" tag is-info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > info </ span > </ div > < div class = \" tag is-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > success </ span > </ div > < div class = \" tag is-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > warning </ span > </ div > < div class = \" tag is-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > error </ span > </ div > < div class = \" tag eyebrow-heading-3 \" > < span class = \" text u-x-small \" > Beta </ span > </ div > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. Interactive Tags Interactive tags are clickable or tappable. In the Appwrite console these are typically used to allow users to copy or edit an element’s ID. Use an icon to clarify the action (e.g. the ‘duplicate’ icon for copy and ‘pencil’ icon for edit). Preview HTML Interactive Interactive Interactive Interactive Interactive Interactive \"> < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > < a href = \" # \" class = \" tag is-selected \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ a > < button class = \" tag \" disabled > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. table tooltip Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tag"},"35":{"title":"elements - tooltip","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tooltip Tooltip Tooltips float over the layout and provide additional information about elements in the user interface or features upon hover or focus. Class Type tooltip Tooltip A class representing a tooltip Components Tooltips consist of two components: Class Type tooltip-popup Text is-bottom Align Bottom The tooltip will appear below the element. is-center Align Center The tooltip will be align center to the partial is-end Align Center The tooltip will be align end of the partial Preview HTML Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. \"> < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys. </ p > </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup is-bottom \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > tag action bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tooltip"},"36":{"title":"foundations - border radius","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations border radius Border Radius Different sizes of border radius are used throughout the Appwrite UI according to the component size. Sizes In Appwrite console we use 4 sizes of border radius: Variable Value --border-radius-xsmall 4px Designed to soften the corners of small components, such as checkboxes, input fields, buttons, alerts and tooltips. Preview HTML - -border-radius-xsmall \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-xsmall ) ; \" > </ div > Variable Value --border-radius-small 8px Designed to soften the corners of small components that are part of a bigger one or for medium components, such as items in the sidebar menu and popovers. Preview HTML - -border-radius-small \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-small ) ; \" > </ div > Variable Value --border-radius-medium 16px Used when a UI element is large or needs to float above the underlying UI, such as cards, modals and tables. Preview HTML - -border-radius-medium \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-medium ) ; \" > </ div > Variable Value --border-radius-circular 50% Used only on specific elements that needs to be rounded, such as icon buttons, avatars, tags and switches. Preview HTML - -border-radius-circular \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-circular ) ; \" > </ div > Best Practice Tips to keep in mind while using border radius: Do Use medium corner radius on large elements. Don't Do not use extra small or small corner radius on large elements, it will make them look too sharp and serious. user profile colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/border-radius"},"37":{"title":"foundations - colors","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations colors Colors Color helps us create a consistent brand identity across our products. Shades selected in Pink Design maintain a AA accessibility level. Usage All of our colors are available as CSS variables. The CSS variables represent the HSL values, for example, --color-primary-100 is 343, 87%, 56% . Colors can be used as follows: < style > div { color : hsl ( var ( --color-primary-100 ) ) ; /* To control opacity: */ color : hsl ( var ( --color-primary-100 ) / 0.5 ) ; } </ style > Brand Pink Design’s expanded brand color palette contains 3 shades. This is our primary color palette used to indicate primary actions. - -color-primary-100 - -color-primary-200 - -color-primary-300 Neutrals Pink Design’s neutral palette is used for both light and dark mode. Neutrals are used mostly for background colors, text, and seperators. - -color-neutral-0 - -color-neutral-5 - -color-neutral-10 - -color-neutral-30 - -color-neutral-50 - -color-neutral-70 - -color-neutral-100 - -color-neutral-120 - -color-neutral-150 - -color-neutral-200 - -color-neutral-300 - -color-neutral-400 - -color-neutral-500 System Colors In the Appwrite console, we use 4 system colors: Type Information Blue often used for informative alerts and ‘selected’ mode in selectors. Success Green often used for success alerts. Warning Orange often used for warning alerts and modals. Error Red often used for danger/error alerts. - -color-information-10 - -color-information-50 - -color-information-100 - -color-information-120 - -color-information-200 - -color-success-10 - -color-success-50 - -color-success-100 - -color-success-120 - -color-success-200 - -color-warning-10 - -color-warning-50 - -color-warning-100 - -color-warning-120 - -color-warning-200 - -color-danger-10 - -color-danger-50 - -color-danger-100 - -color-danger-120 - -color-danger-200 Additional Colors In the Appwrite console, we use the colors below in specific components, such as avatars and code snippets. - -color-blue-100 - -color-green-100 - -color-orange-100 - -color-red-100 - -color-purple-100 - -color-pink-100 Special Colors - -color-text-disabled - -color-text-info - -color-text-danger - -color-text-warning - -color-text-success - -color-border border radius dark theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/colors"},"38":{"title":"foundations - dark theme","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations dark theme Dark Theme Pink Design has in-built dark theme support. We use Sass (with the SCSS variant) for easier maintenance. CSS Class SCSS Variable Theme Default - Light .theme-dark $theme-dark Dark Global Sass variable This global CSS class is declared as a Sass variable in order to be used inside partials < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; </ style > Implementation to a SCSS Partial < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; /* Dark Theme */ # { $theme-dark } & { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } } </ style > Compiled CSS < style > .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; } /* Dark Theme */ .theme-dark .partial { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } </ style > Theme Utility Classes Navigate to Pink Design Theme utility classes to learn how to show or hide components based on the theme being used. colors elevation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/dark-theme"},"39":{"title":"foundations - elevation","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations elevation Elevation Elevation is the relative distance between two surfaces along the z-axis. Shadows and blurs create a layered effect that visually indicates that an object is "elevated" in priority or hierarchy. Types In the Appwrite console we use two types of elevation: Variable Type shadow-small Small Used to show contrast between layout elements, such as cards or tables, and their parent component. shadow-large Large Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below. Preview HTML shadow-small shadow-large shadow-small shadow-large \"> < div class = \" card \" style = \" box-shadow : var ( --shadow-small ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-small </ p > </ div > < div class = \" card \" style = \" box-shadow : var ( --shadow-large ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-large </ p > </ div > Best Practice Small shadows should be used with standard layout components (e.g. cards, tables). We recommend the use of a large drop-shadow for floating components (e.g. popovers, alerts, modals). Do To create contrast between a floating surface and the surface beneath, use shadow-large. Don't Do not make floating elements look flat by not using shadows. dark theme icons Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/elevation"},"40":{"title":"foundations - icons","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations icons Icons An icon is a visual representation of a command, device, directory, or common action. General Icons In Appwrite we use a subset of the heroicons library. To use them, use the class name of the icon you want shown below. icon-academic-cap icon-adjustments icon-akamai icon-annotation icon-anonymous icon-archive icon-arrow-circle-down icon-arrow-circle-left icon-arrow-circle-right icon-arrow-circle-up icon-arrow-down icon-arrow-expand icon-arrow-left icon-arrow-narrow-down icon-arrow-narrow-left icon-arrow-narrow-right icon-arrow-narrow-up icon-arrow-right icon-arrow-sm-down icon-arrow-sm-left icon-arrow-sm-right icon-arrow-sm-up icon-arrow-up icon-astro icon-at-symbol icon-backspace icon-badge-check icon-ban icon-beaker icon-bell icon-bitBucket icon-book-open icon-bookmark-alt icon-bookmark icon-briefcase icon-cake icon-calculator icon-calendar icon-camera icon-cash icon-chart-bar icon-chart-pie icon-chart-square-bar icon-chat-alt-2 icon-chat-alt icon-chat icon-check-circle icon-check icon-cheveron-down icon-cheveron-left icon-cheveron-right icon-cheveron-up icon-chevron-double-down icon-chevron-double-left icon-chevron-double-right icon-chevron-double-up icon-chip icon-clipboard-arrow icon-clipboard-check icon-clipboard-copy icon-clipboard-list icon-clock icon-cloud-download icon-cloud-upload icon-cloud icon-cog icon-collection icon-color-swatch icon-credit-card icon-cube-transparent icon-cube icon-currency-bangladesh icon-currency-dollar icon-currency-euro icon-currency-pound icon-currency-rupee icon-currency-yen icon-cursor-click icon-database icon-desktop-computer icon-device-ipad icon-device-mobile icon-document-add icon-document-download icon-document-duplicate icon-document-remove icon-document-report icon-document-search icon-document-text icon-document icon-dots-circle-horizontal icon-dots-horizontal icon-dots-vertical icon-download icon-duplicate icon-emoji-happy icon-emoji-sad icon-exclamation-circle icon-exclamation icon-external-link icon-eye-off icon-eye icon-fast-forward icon-film icon-filter-line icon-filter icon-finger-print icon-flag icon-folder-add icon-folder-download icon-folder-open icon-folder-remove icon-folder icon-gift icon-git-branch icon-git-commit icon-globe-alt icon-globe icon-graphql icon-hand icon-hashtag icon-heart icon-home icon-identification icon-inbox-in icon-inbox icon-info icon-ionic icon-key icon-light-bulb icon-lightning-bolt icon-list icon-location-marker icon-lock-closed icon-lock-open icon-logout-left icon-logout-right icon-mail-open icon-mail icon-map icon-md-library icon-menu-alt-1 icon-menu-alt-2 icon-menu-alt-3 icon-menu-alt-4 icon-menu icon-microphone icon-minus-circle icon-minus-sm icon-minus icon-mode icon-moon icon-ms_yammer icon-msg91 icon-music-note icon-newspaper icon-nextjs icon-node_js icon-null icon-nuxt icon-office-building icon-openid icon-paper-airplane icon-paper-clip icon-pause icon-pencil-alt icon-pencil icon-phone-incoming icon-phone-missed-call icon-phone-outgoing icon-phone icon-photograph icon-play-button icon-play icon-plus-circle icon-plus-sm icon-plus icon-presentation-chart-1 icon-presentation-chart-2 icon-printer icon-product_hunt icon-puzzle icon-qrcode icon-question-mark-circle icon-qwik icon-receipt-refund icon-receipt-tax icon-refresh icon-relation icon-relationship icon-replay icon-rewind icon-rss icon-save-as icon-save icon-scale icon-scissors icon-search-circle icon-selector icon-send icon-server icon-share icon-shield-check icon-shield-exclamation icon-shopping-bag icon-shopping-cart icon-sort-ascending icon-sort-descending icon-sparkles icon-speakerphone icon-spin icon-star icon-status-offline icon-status-online icon-stop icon-sun icon-support icon-svelte icon-switch-horizontal icon-switch-vertical icon-table icon-telesign icon-template icon-terminal icon-text icon-textmagic icon-thumb-dowm icon-thumb-up icon-ticket icon-toggle icon-translate icon-trash icon-trending-down icon-trending-up icon-truck icon-twilio icon-typescript icon-upload icon-user-add icon-user-circle icon-user-group icon-user-remove icon-user icon-users icon-variable icon-video-camera icon-video icon-view-boards icon-view-grid-add icon-view-grid icon-view-list icon-volume-off icon-volume-up icon-vonage icon-wifi icon-x-circle icon-zoom-in icon-zoom-out Additional Icons Social and technology icons are available in gray-scale and color. Gray-scale Icons were translated into class names and color icons are available as SVG files. Grayscale Color icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom Best Practice We recommend using at minimum 4px of space between icons and labels for legibility. Icons should be aligned to the center of a single line of text. If there are multiple lines in a label, the icon should be aligned to the center of the first line in the label. Do Use minimum 4px of space between icon to text and make sure they are centered. Don't Do not use less than 4px of space. If there are multiple lines in a label, do not center the icon to all of them, but to the first line. elevation responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/icons"},"41":{"title":"foundations - responsive","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations responsive Responsive Responsive Design allows users to access content across multiple device resolutions. We use Sass (with the SCSS variant) for easier maintenance. Breakpoints In the Appwrite console we use three screen ranges (small / medium / large): Screen Size Range Scss Variable Small 0px - 767px $break1 Medium 768px - 1198px $break2 Medium (open) 768px - Infinite $break2open Large (open) 1199px - infinite $break3open CSS Implementation < style > /* affect all screens sizes */ .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* affect only small screens */ @media ( max-width : 767.99px ) { .partial { --p-padding : 1rem ; } } /* affect only small & medium screens */ @media ( max-width : 1198.99px ) { .partial { --p-padding : 1rem ; } } /* affect only medium and larger screens */ @media ( min-width : 768px ) { .partial { --p-padding : 1rem ; } } /* affect only small and larger screens */ @media ( max-width : 767.99px ) and ( min-width : 1199px ) { .partial { --p-padding : 1rem ; } } </ style > SCSS Code < style language = \" scss \" > /* Responsive Variables */ $ break1 : \"(max-width:767.99px)\" ; $ break2 : \"(min-width:768px) and (max-width:1198.99px)\" ; $ break2open : \"(min-width:768px)\" ; $ break3open : \"(min-width:1199px)\" ; </ style > Sass Variables Breakpoints in Media Queries Rule < style > @media # { $break1 } { } /* small screens */ @media # { $break2 } { } /* medium screens */ @media # { $break2open } { } /* medium & large screens */ @media # { $break3open } { } /* large screens */ </ style > Special Use Cases In some use cases, we might want to affect only a part of screen sizes and not all of them. In Pink Design responsive library, there is no overlap between the different resolutions. As shown in the example below, you can affect more than one screen size by adding breakpoints. < style > .partial { /* here you put code for all screen sizes */ @media # { $break1 } { } /* only small screens */ @media # { $break1 } , # { $break2 } { } /* small & medium screens */ @media # { $break2 } { } /* only medium screens */ @media # { $break1 } , # { $break3open } { } /* small & large screens */ } </ style > Example of a SCSS Partial < style language = \" scss \" > .partial { --p-partial-padding : 1.25rem ; padding : var ( --p-partial-padding ) ; /* medium screens and larger */ @media # { $break2open } { --p-partial-padding : 2.5rem ; } } </ style > Compiled CSS < style > .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* medium screens and larger */ @media ( min-width : 768px ) { .partial { --p-padding : 2.5rem ; } } </ style > icons typography Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/responsive"},"42":{"title":"foundations - typography","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations typography Typography Typography is a system of fonts used to provide a clear hierarchy, organize information, and to assist users during the product journey. Headings To determine the size of the typography, we use a font scale. The font sizes fit well with the 4px grid. In order to preserve semantics, sizes are not directly matched with HTML tags. Preview HTML Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 \"> < h1 class = \" heading-level-1 \" > Heading level 1 </ h1 > < h2 class = \" heading-level-2 \" > Heading level 2 </ h2 > < h3 class = \" heading-level-3 \" > Heading level 3 </ h3 > < h4 class = \" heading-level-4 \" > Heading level 4 </ h4 > < h5 class = \" heading-level-5 \" > Heading level 5 </ h5 > < h6 class = \" heading-level-6 \" > Heading level 6 </ h6 > < h6 class = \" heading-level-7 \" > Heading level 7 </ h6 > Eyebrow Headings Eyebrow headings are additional labels that can be used. Mostly used to support the main heading of a page or to provide additional context or orientation. Preview HTML EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 \"> < h4 class = \" eyebrow-heading-1 \" > EYEBROW HEADING level 1 </ h4 > < h5 class = \" eyebrow-heading-2 \" > EYEBROW HEADING level 2 </ h5 > < h6 class = \" eyebrow-heading-3 \" > EYEBROW HEADING level 3 </ h6 > Paragraphs For body texts, there are two font sizes (14px, 16px) and two weights (400 and 600). Underline is mostly used for links. Preview HTML Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline \"> < p class = \" body-text-1 u-bold \" > Body text level 1 SemiBold </ p > < p class = \" body-text-1 \" > Body text level 1 Regular </ p > < p class = \" body-text-1 u-underline \" > Body text level 1 Underline </ p > < p class = \" body-text-2 u-bold \" > Body text level 2 SemiBold </ p > < p class = \" body-text-2 \" > Body text level 2 Regular </ p > < p class = \" body-text-2 u-underline \" > Body text level 2 Underline </ p > < a class = \" link \" > Link text Underline </ a > Code Code text style is used for code snippets or inline code. Preview HTML Code level 1 Code level 1 \"> < code class = \" inline-code \" > Code level 1 </ code > Best Practice Eyebrow headings can be used to compliment headings or for subtle headers for lists. We recommend the use of the Underline text style for inline links. Do Use Underline text style for inline links as it guarantees link visibility when scanning text. Don't Do not use the Underline text style for text that is not linked. Underlines provide a strong perceived affordance of clickability, and users will be confused if underlined text doesn’t match this perception. responsive box model Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/typography"},"43":{"title":"getting started","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Getting Started Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Follow the steps below to start building with Pink Design. CDN Include the CSS library in your project Copy the following code into the <head> section of your HTML file. \"> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink \" /> <!-- optionally, add icons --> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink-icons \" /> NPM Install the CSS library Run the following command to install Pink Design as an NPM package. npm install \"@appwrite.io/pink\" Include the library in your project After installing Pink Design as a package, it will be added to the node_modules directory of your project. Include Pink Design as CSS library by importing it in your JavaScript files. import \"@appwrite.io/pink\" ; // optionally, add icons import \"@appwrite.io/pink-icons\" ; Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/getting-started"},"44":{"title":"home","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Pink Design Design. Build. Collaborate. Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Pink is designed to prioritize collaboration, dev experience, and accessibility. Get Started Header Button #F02E65 100% RR RR \"> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" avatar is-color-pink \" > RR </ span > <!-- ... --> </ div > </ td > <!-- ... --> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < div class = \" avatar \" > < img src = \" /jenny.jpg \" alt = \" JW \" /> </ div > <!-- ... --> </ div > </ td > $ git commit Name RR Ronald Richards ronald@appwrite.io Jenny Wilson jenny@appwrite.io Design Build Collaborate Design Design and create simple, consistent and user friendly features when contributing to Appwrite, or use our components for your own products Fully accessibile Light and dark mode support Optimized for Dev tooling Create Delete Secondary Primary Create a new object Overview Auth Database Functions Storage Build Design system created with developer experience in mind, with support of our internal developer team Easy to integrate with your preferred framework Only one CSS file is needed Getting started guide npm install \"@appwrite.io/pink\" import \"@appwrite.io/pink\" ; Collaborate One (open) source of truth for collaborating with others on Appwrite, or your own products Documentation and tips on usage of components Fully open source Collaborate with us in Discord and GitHub GitHub Discord #F02E65 100% $ git commit Try It Out Yourself Card Form Alert Kristin Watson kristin.watson@appwrite.io Edit profile Kristin Watson kristin.watson@appwrite.io Edit profile \"> Articles Announcing Pink Design Building software is fun. Building open source software is even better. At Appwrite, open source is at the core of everything we do... 3 min read Getting Started with Pink Design Pink Design is Appwrite's Open Source design system for building consistent and reusable user interfaces... 2 min read CSS Layers for CSS Resets I have always been one of those people who preferred the aggressive CSS reset methods. These methods delete most of the default styles of the browser... 7 min read View all articles Join Our Growing Developer Community Design and develop with us the best developer experience out there! Christy Jacob @christyjacob4 Engineering Lead at Appwrite Damodar Lohani @lohanidamodar Software Engineer at Appwrite Everly Precia Suresh @everly-gif Software Engineer at Appwrite Torsten Dittmann @TorstenDittmann Engineering Lead at Appwrite Elad Shechter @elad2412 Web Developer at Appwrite Bishwajeet Parhi @2002Bishwajeet Shmuel Fogel @fogelito Software Engineer at Appwrite Bradley Schofield @PineappleIOnic Software Engineer at Appwrite Vincent (Wen Yu) Ge @gewenyu99 DevRel Engineer at Appwrite Chen Parnasa @chenparnasa Product Designer at Appwrite Hardik Sachan @hardiksachan Brandon @kodumbeats Shimon Newman @shimonewman Full Stack Engineer at Appwrite Matej Bačo @Meldiron Software Engineer at Appwrite Steven Nguyen @stnguyen90 Software Engineer at Appwrite Arman Nik @ArmanNik Frontend Engineer at Appwrite Wess Cope @wess Software Engineer at Appwrite Rahul Singh @drph4nt0m achintya @achintya-7 Eldad Fux @eldadfux Appwrite's Founder Philipp Hausleiter @phaus Aditya Oberai @adityaoberai Developer Advocate at Appwrite Aditya Rana @codingsamurai-10 Thomas G. Lopes @tglide Frontend Engineer at Appwrite Join us on GitHub Join us on Discord Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/"},"45":{"title":"layout - container","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout container Container A container divides content into sections. It can hold any kind of content and is used to group content and create scannable interfaces. Class Type container Container A class representing a container Preview HTML Container Container \"> < div class = \" container \" > < p class = \" text u-margin-block-start-8 \" > Container </ p > </ div > visibility grid box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/container"},"46":{"title":"layout - grid box","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid box Grid Box Grid Box defines a dynamic custom CSS grid as a layout wrapper. Rows will be filled with the maximum number of items that can fit in the grid. Class Type grid-box Grid Container A class representing a dynamic grid container Parameters Grid box can get three parameters, using CSS variables: Variable Value --grid-gap 1.5rem (=24px) Grid gap in all screen sizes. --grid-item-size 13.125rem (=210px) Size of an item on medium and large screens (min screen size of 768px and above). --grid-item-size-small-screens 13.125rem (=210px) Size of an item on small screens (max screen size of 767px). Preview HTML card card card card card card card card card card card card \"> < ul class = \" grid-box \" style = \" --grid-gap : 1rem ; --grid-item-size : 16rem ; --grid-item-size-small-screens : 8rem ; \" > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > </ ul > container grid header Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-box"},"47":{"title":"layout - grid header","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid header Grid Header Grid header; Behave as flex container in big screens, and grid container in small screens. Class Type grid-header Grid Header Container Define Grid in small screen grid-header-col-1 Grid Header column 1 Define Column 1 in small screen grid-header-col-2 Grid Header column 2 Define Column 2 in small screen grid-header-col-3 Grid Header column 3 Define Column 3 in small screen grid-header-col-4 Grid Header column 4 Define Column 2 in small screen Preview HTML Databases Columns 4 Create database Databases Columns 4 Create database \"> < header class = \" grid-header \" > < h2 class = \" grid-header-col-1 heading-level-5 u-trim-1 u-cross-child-center \" > Databases </ h2 > < div class = \" u-flex u-gap-16 u-contents-mobile \" > < div class = \" grid-header-col-4 drop-wrapper \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" icon-view-boards u-opacity-50 \" aria-hidden = \" true \" aria-label = \" columns \" > </ span > < span class = \" text is-only-desktop \" > Columns </ span > < span class = \" inline-tag \" > 4 </ span > </ button > </ div > < div class = \" grid-header-col-3 toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" List View \" type = \" button \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" Grid View \" type = \" button \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > < button class = \" grid-header-col-2 button \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create database </ span > </ button > </ div > </ header > grid box navigation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-header"},"48":{"title":"layout - navigation","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout navigation Navigation Navigation menus provide easy access to different areas in a website or application. Class Type side-nav Sidebar Navigation A class representing a sidebar Preview HTML Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item \"> < div class = \" side-nav \" > < div class = \" side-nav-main \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < a class = \" drop-button is-selected \" href = \" \" > < span class = \" icon-home \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-user-group \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-chart-pie \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > </ ul > </ section > </ div > < div class = \" side-nav-bottom \" > < section class = \" drop-section \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-cog \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ section > </ div > </ div > grid header pagination Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/navigation"},"49":{"title":"layout - pagination","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout pagination Pagination Pagination allows you to break up content that doesn't fit on a single page. Class Type pagination Pagination A class representing pagination Preview HTML Prev 1 … 2 3 4 5 … 20 Next Prev 1 … 2 3 4 5 … 20 Next \"> < nav class = \" pagination \" > < span href = \" \" class = \" button is-text is-disabled \" aria-label = \" prev page \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Prev </ span > </ span > < ol class = \" pagination-list is-only-desktop \" > < li class = \" pagination-item \" > < span href = \" \" class = \" button is-disabled \" aria-label = \" page \" > < span class = \" text \" > 1 </ span > </ span > </ li > < li class = \" pagination-item \" > < button class = \" button is-text /*u-hide*/ \" aria-label = \" show prev 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 2 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 3 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 4 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 5 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" show next 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 20 </ span > </ button > </ li > </ ol > < a href = \" \" class = \" button is-text \" aria-label = \" next page \" > < span class = \" text \" > Next </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ a > </ nav > Best Practice Tips to keep in mind while using pagination: Do Use pagination to help users find information within a table containing a large amount of data. Don't Make your user click through multiple pages to find what they need. navigation box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/pagination"},"50":{"title":"utilities - box model","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities box model Box Model Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation. Class Scss Define Compiled CSS u-padding-0 padding: 0 !important; Stays the same u-padding-8 padding: pxToRem(8) !important; padding: 0.5rem !important; u-padding-12 padding: pxToRem(12) !important; padding: 0.75rem !important; u-padding-16 padding: pxToRem(16) !important; padding: 1rem !important; u-padding-24 padding: pxToRem(24) !important; padding: 1.5rem !important; u-padding-32 padding: pxToRem(32) !important; padding: 2rem !important; u-padding-64 padding: pxToRem(64) !important; padding: 4rem !important; u-padding-inline-0 padding-inline: 0 !important; Stays the same u-padding-inline-8 padding-inline: pxToRem(8) !important; padding-inline: 0.5rem !important; u-padding-inline-12 padding-inline: pxToRem(12) !important; padding-inline: 0.75rem !important; u-padding-inline-16 padding-inline: pxToRem(16) !important; padding-inline: 1rem !important; u-padding-inline-24 padding-inline: pxToRem(24) !important; padding-inline: 1.5rem !important; u-padding-inline-32 padding-inline: pxToRem(32) !important; padding-inline: 2rem !important; u-padding-inline-end-0 padding-inline-end: 0 !important; Stays the same u-padding-inline-end-12 padding-inline-end: pxToRem(12) !important; padding-inline-end: 0.75rem !important; u-padding-inline-end-56 padding-inline-end: pxToRem(56) !important; padding-inline-end: 3.5rem !important; u-padding-inline-end-120 padding-inline-end: pxToRem(120) !important; padding-inline-end: 7.5rem !important; u-padding-block-8 padding-block: pxToRem(8) !important; padding-block: 0.5rem !important; u-padding-block-12 padding-block: pxToRem(12) !important; padding-block: 0.75rem !important; u-padding-block-start-16 padding-block-start: pxToRem(16)!important; padding-block-start: 1rem !important; u-padding-block-start-20 padding-block-start: pxToRem(20)!important; padding-block-start: 1,25rem !important; u-padding-block-end-32 padding-block-end: pxToRem(32)!important; padding-block-end: 2rem !important; u-padding-block-end-56 padding-block-end: pxToRem(56)!important; padding-block-end: 3.5rem !important; u-margin-16-negative margin: pxToRem(-16) !important; margin: -1rem !important; u-margin-0 margin: 0 !important; Stays the same u-margin-32 margin: pxToRem(32) !important; margin: 2rem !important; u-margin-inline-start-auto margin-inline-start: auto; Stays the same u-margin-block-start-auto margin-block-start: auto; Stays the same u-margin-block-start-negative-56 margin-block-start: pxToRem(-56); margin-block-start: pxToRem(-56); u-margin-block-start-2 margin-block-start: pxToRem(2); margin-block-start: 0.125rem; u-margin-block-start-4 margin-block-start: pxToRem(4); margin-block-start: 0.25rem; u-margin-block-start-8 margin-block-start: pxToRem(8); margin-block-start: 0.5rem; u-margin-block-start-12 margin-block-start: pxToRem(12); margin-block-start: 0.75rem; u-margin-block-start-16 margin-block-start: pxToRem(16); margin-block-start: 1rem; u-margin-block-start-20 margin-block-start: pxToRem(20); margin-block-start: 1.25rem; u-margin-block-start-24 margin-block-start: pxToRem(24); margin-block-start: 1.5rem; u-margin-block-start-32 margin-block-start: pxToRem(32); margin-block-start: 2rem; u-margin-block-start-40 margin-block-start: pxToRem(40); margin-block-start: 2.5rem; u-margin-block-start-48 margin-block-start: pxToRem(48); margin-block-start: 3rem; u-margin-block-start-52 margin-block-start: pxToRem(52); margin-block-start: 3.25rem; u-margin-block-start-100 margin-block-start: pxToRem(100); margin-block-start: 6.25rem; u-margin-block-start-200 margin-block-start: pxToRem(200); margin-block-start: 12.5rem; u-margin-block-start-300 margin-block-start: pxToRem(300); margin-block-start: 18.75rem; u-margin-inline-start-4 margin-inline-start: pxToRem(4); margin-inline-start: 0.25rem; u-margin-inline-start-8 margin-inline-start: pxToRem(8); margin-inline-start: 0.5rem; u-margin-inline-start-12 margin-inline-start: pxToRem(12); margin-inline-start: 0.75rem; u-margin-inline-start-16 margin-inline-start: pxToRem(16); margin-inline-start: 1rem; u-margin-inline-start-24 margin-inline-start: pxToRem(24); margin-inline-start: 1.5rem; u-margin-inline-start-32 margin-inline-start: pxToRem(32); margin-inline-start: 2rem; u-margin-inline-end-16 margin-inline-end: pxToRem(16); margin-inline-end: 1rem; u-margin-inline-end-24 margin-inline-end: pxToRem(24); margin-inline-end: 1.5rem; \"> < div class = \" box u-margin-block-start-32 u-padding-block-end-56 \" > </ div > typography colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/box-model"},"51":{"title":"utilities - colors","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities colors Colors Colors utility classes help to convey consistent meaning through colors. States Colors In the Appwrite console we use six classes to set system colors based on states: Class Properties u-color-text-disabled color: hsl(var(--color-text-disabled)); u-color-text-offline color: hsl(var(--color-text-offline)); u-color-text-info color: hsl(var(--color-text-info)); u-color-text-danger color: hsl(var(--color-text-danger)); u-color-text-warning color: hsl(var(--color-text-warning)); u-color-text-success color: hsl(var(--color-text-success)); Text Colors Class Properties u-color-text-gray color: hsl(var(--color-text-gray)); u-color-text-pink color: hsl(var(--color-pink-text)); Preview HTML \"> < div class = \" icon-check u-color-text-disabled \" > </ div > < div class = \" icon-check u-color-text-offline \" > </ div > < div class = \" icon-check u-color-text-info \" > </ div > < div class = \" icon-check u-color-text-danger \" > </ div > < div class = \" icon-check u-color-text-warning \" > </ div > < div class = \" icon-check u-color-text-success \" > </ div > < div class = \" icon-check u-color-text-gray \" > </ div > < div class = \" icon-check u-color-text-pink \" > </ div > box model cursor Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/colors"},"52":{"title":"utilities - cursor","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities cursor Cursor Utility class for cursor Class Properties u-cursor-pointer cursor:pointer; this text will now have cursor \"> < p class = \" u-cursor-pointer \" > this text will now have cursor </ p > colors display Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/cursor"},"53":{"title":"utilities - display","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities display Display Display controls how an element is displayed, including its alignment, spacing and size. Class Scss Definition Compiled CSS u-block display: block; Stays the same u-inline display: inline; Stays the same u-grid display: grid; Stays the same u-flex display: flex; Stays the same u-inline-flex display: inline-flex; Stays the same u-contents display: contents; Stays the same u-contents-mobile @media #{$break1} { {display: contents;} } @media (max-width:767.99px) { display: contents; } u-box-sizing-content box-sizing: content-box; Stays the same u-sep-inline-start border-inline-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-inline-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-start border-block-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-end border-block-end: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-end: solid 0.0625rem hsl(var(--color-border)) !important; u-gap-2 gap: pxToRem(2); gap: 0.125rem; u-gap-4 gap: pxToRem(4); gap: 0.25rem; u-gap-8 gap: pxToRem(8); gap: 0.5rem; u-gap-12 gap: pxToRem(12); gap: 0.75rem; u-gap-16 gap: pxToRem(16); gap: 1rem; u-gap-24 gap: pxToRem(24); gap: 1.5rem; u-gap-32 gap: pxToRem(32); gap: 2eem; u-column-gap-2 column-gap: pxToRem(2); column-gap: 0.125rem; u-column-gap-4 column-gap: pxToRem(4); column-gap: 0.25rem; u-column-gap-8 column-gap: pxToRem(8); column-gap: 0.5rem; u-column-gap-12 column-gap: pxToRem(12); column-gap: 0.75rem; u-column-gap-16 column-gap: pxToRem(16); column-gap: 1rem; u-column-gap-24 column-gap: pxToRem(24); column-gap: 1.5rem; u-column-gap-32 column-gap: pxToRem(32); column-gap: 2rem; u-row-gap-2 row-gap: pxToRem(2); row-gap: 0.125rem; u-row-gap-4 row-gap: pxToRem(4); row-gap: 0.25rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-row-gap-32 row-gap: pxToRem(32); row-gap: 2rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-flex-vertical display:flex; flex-direction: column; Stays the same u-flex-vertical-mobile @media #{$break1} { flex-direction:column; } @media (max-width:767.99px) { flex-direction:column; } u-flex-wrap flex-wrap: wrap; Stays the same u-stretch flex: 1; Stays the same u-flex-basis-140 flex-basis: pxToRem(140); flex-basis: 8.75rem u-flex-basis-250 flex-basis: pxToRem(250); flex-basis: 15.625rem u-flex-basis-500 flex-basis: pxToRem(500); flex-basis: 31.25rem u-flex-basis-50-percent flex-basis: 50%; Stays the same u-flex-basis-100-percent flex-basis: 100%; Stays the same u-flex-shrink-0 flex-shrink: 0; Stays the same u-flex-basis-auto flex-basis: auto; Stays the same u-grid-columns-auto-1fr grid-template-columns: auto 1fr; Stays the same u-width-full-line inline-size: 100%; Stays the same u-width-140 inline-size: pxToRem(140); inline-size: 8.75rem; u-width-150 inline-size: pxToRem(150); inline-size: 9.375rem; u-width-200 inline-size: pxToRem(200); inline-size: 12.5rem; u-width-250 inline-size: pxToRem(250); inline-size: 15.625rem; u-width-600 inline-size: pxToRem(600); inline-size: 37.5rem; u-width-280-desktop @media #{$break3open} { inline-size: pxToRem(280); } @media (min-width:1199px) { inline-size: 17.25rem; } u-min-width-0 min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/ Stays the same u-min-width-200 min-inline-size: pxToRem(200); min-inline-size: 25rem; u-min-width-100-percent min-inline-size: 100%; Stays the same u-max-width-250 max-inline-size: pxToRem(250); max-inline-size: 15.625rem; u-max-width-300 max-inline-size: pxToRem(300); max-inline-size: 18.75rem; u-max-width-350 max-inline-size: pxToRem(350); max-inline-size: 21.875rem; u-max-width-400 max-inline-size: pxToRem(400); max-inline-size: 25rem; u-max-width-450 max-inline-size: pxToRem(450); max-inline-size: 28.125rem; u-max-width-500 max-inline-size: pxToRem(500); max-inline-size: 31.25rem; u-max-width-600 max-inline-size: pxToRem(600); max-inline-size: 37.5rem; u-max-width-650 max-inline-size: pxToRem(650); max-inline-size: 40.625rem; u-max-width-700 max-inline-size: pxToRem(700); max-inline-size: 43.75rem; u-max-width-100-percent max-inline-size: 100%; Stays the same u-height-100-percent block-size: 100%; Stays the same u-height-auto block-size: auto !important; Stays the same u-full-screen-height block-size: 100vh; block-size: 100lvh; Stays the same u-min-height-100 min-block-size: pxToRem(100); min-block-size: 6.25rem; u-min-height-184 min-block-size: pxToRem(184); min-block-size: 11.5rem; u-min-height-100-percent min-block-size:100%; Stays the same u-max-height-200 max-block-size: pxToRem(200); max-block-size: 12.5rem; Alignments In the Appwrite console we control alignments by using: Class CSS u-main-center justify-content: center; u-main-space-between justify-content: space-between; u-main-end justify-content: end; u-cross-start align-items: start; u-cross-baseline align-items: baseline; u-cross-center align-items: center; u-cross-end align-items: end; u-cross-child-start align-self: start; u-cross-child-center align-self: center; u-cross-child-end align-self: end; Preview HTML 1 2 3 1 2 3 \"> < div class = \" u-flex u-main-space-between u-min-width-100-percent card \" > < div class = \" box \" > 1 </ div > < div class = \" box \" > 2 </ div > < div class = \" box \" > 3 </ div > </ div > cursor position Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/display"},"54":{"title":"utilities - position","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities position Position An element's position can be quickly configured by using Position classes. Class Scss Define Translated CSS u-position-relative position: relative; Stays the same u-position-absolute position: absolute; Stays the same u-position-fixed position: fixed; Stays the same u-position-static position: static !important; Stays the same u-inset-0 inset: 0; Stays the same u-inset-inline-0 inset-inline: 0; Stays the same u-inset-inline-start-0 inset-inline-start: 0; Stays the same u-inset-inline-start-1 inset-inline-start: pxToRem(1); inset-inline-start: 0.0625rem; u-inset-inline-start-4 inset-inline-start: pxToRem(4); inset-inline-start: 0.25rem; u-inset-inline-start-8 inset-inline-start: pxToRem(8); inset-inline-start: 0.5rem; u-inset-inline-start-12 inset-inline-start: pxToRem(12); inset-inline-start: 0.75rem; u-inset-inline-start-16 inset-inline-start: pxToRem(16); inset-inline-start: 1rem; u-inset-inline-end-0 inset-inline-end: 0; Stays the same u-inset-inline-end-1 inset-inline-end: pxToRem(1); inset-inline-end: 0.0625rem; u-inset-inline-end-4 inset-inline-end: pxToRem(4); inset-inline-end: 0.25rem; u-inset-inline-end-8 inset-inline-end: pxToRem(8); inset-inline-end: 0.5rem; u-inset-inline-end-12 inset-inline-end: pxToRem(12); inset-inline-end: 0.75rem; u-inset-inline-end-16 inset-inline-end: pxToRem(16); inset-inline-end: 1rem; u-inset-block-start-0 inset-block-start: 0; Stays the same u-inset-block-start-1 inset-block-start: pxToRem(1); inset-block-start: 0.0625rem; u-inset-block-start-4 inset-block-start: pxToRem(4); inset-block-start: 0.25rem; u-inset-block-start-8 inset-block-start: pxToRem(8); inset-block-start: 0.5rem; u-inset-block-start-12 inset-block-start: pxToRem(12); inset-block-start: 0.75rem; u-inset-block-start-16 inset-block-start: pxToRem(16); inset-block-start: 1rem; u-inset-block-end-0 inset-block-end: 0; Stays the same u-inset-block-end-1 inset-block-end: pxToRem(1); inset-block-end: 0.0625rem; u-inset-block-end-4 inset-block-end: pxToRem(4); inset-block-end: 0.25rem; u-inset-block-end-8 inset-block-end: pxToRem(8); inset-block-end: 0.5rem; u-inset-block-end-12 inset-block-end: pxToRem(12); inset-block-end: 0.75rem; u-inset-block-end-16 inset-block-end: pxToRem(16); inset-block-end: 1rem; Z-index Classes Class styles u-z-index-0 z-index: 0 u-z-index-1 z-index: 1 u-z-index-5 z-index: 5 u-z-index-10 z-index: 10 u-z-index-15 z-index: 15 u-z-index-20 z-index: 20 Position Sticky Position sticky can take 4 direction variables Class styles Default Direction u-position-sticky position: sticky; --inset-block-start: auto; top --inset-block-end: auto; bottom --inset-inline-start: auto; left --inset-inline-end: auto; right For using you can attach direction via inline style which will define the local variables. Example: Position Sticky element with sticky top direction of 24px \"> < section class = \" u-position-sticky \" style = \" --inset-block-start : 3rem ; \" > < p class = \" text u-margin-block-start-8 \" > Position Sticky element with sticky top direction of 24px </ p > </ section > display reset inputs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/position"},"55":{"title":"utilities - reset inputs","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities reset inputs Reset Inputs A numeric input field's arrows are hidden when the Reset Inputs utility is used. Class styles u-remove-input-number-buttons Chrome, Safari, Edge, Opera -webkit-appearance: none; margin: 0; Firefox -moz-appearance: textfield; Best Practice The example below shows two numeric input fields - one with Reset Input class and one without. Use mouse or keyboard focus to see the difference between the fields. Preview HTML \"> < input type = \" number \" placeholder = \" without reset input \" class = \" u-max-width-250 \" /> < br /> < input type = \" number \" placeholder = \" with reset input \" class = \" u-remove-input-number-buttons u-max-width-250 \" /> position responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/reset-inputs"},"56":{"title":"utilities - responsive","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities responsive Responsive Responsive shows or hides elements depending on the size of the screen. Class Properties .is-only-mobile @media #{$break2open} { display: none !important; } .is-only-tablet @media #{$break1}, #{$break3open} { display: none !important; } .is-only-desktop @media #{$break1}, #{$break2} { display: none !important; } .is-not-mobile @media #{$break1} { display: none !important; } .is-not-desktop @media #{$break3open} { display: none !important; } Preview HTML I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets & desktops I’m visible on mobile & tablets I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets &amp; desktops I’m visible on mobile &amp; tablets \"> < p class = \" is-only-mobile \" > I’m visible on mobile </ p > < p class = \" is-only-tablet \" > I’m visible on tablets </ p > < p class = \" is-only-desktop \" > I’m visible on desktop </ p > < p class = \" is-not-mobile \" > I’m visible on tablets &amp; desktops </ p > < p class = \" is-not-desktop \" > I’m visible on mobile &amp; tablets </ p > reset inputs text Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/responsive"},"57":{"title":"utilities - text","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities text Text Text ensures consistent text size, weight, line height and breaks across our products. Class Scss Define Compiled CSS u-x-small font-size: pxToRem(12)!important; font-size: 0.75rem!important; u-small font-size: pxToRem(14)!important; font-size: 0.875rem!important; u-medium font-size: pxToRem(16)!important; font-size: 1rem!important; u-font-size-32 font-size: pxToRem(32)!important; font-size: 2rem!important; u-bold font-weight: 600; Stays the same u-normal font-weight: normal; Stays the same u-underline text-decoration: underline; Stays the same u-text-start text-align: start; Stays the same u-text-center text-align: center; Stays the same u-text-end text-align: end; Stays the same u-line-height-0-7 line-height: 0.7; Stays the same u-line-height-1 line-height: 1; Stays the same u-line-height-1-25 line-height: 1.25; Stays the same u-line-height-1-5 line-height: 1.5; Stays the same u-line-height-2 line-height: 2; Stays the same u-break-word @include break-word; white-space: initial; Full browser fallbacks u-break-all @include break-all; white-space: initial; Full browser fallbacks u-trim @include trim; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; u-trim-start @include trim; direction:rtl; text-align:right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; direction: rtl; text-align: right; u-trim-1 @include trim(1); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; u-un-break-text white-space: nowrap !important; Stays the same u-capitalize text-transform: capitalize; Stays the same u-icon-small font-size: var(--icon-size-small); Stays the same u-font-heading font-family: var(--heading-font); Stays the same u-font-content font-family: var(--content-font); Stays the same u-font-code font-family: var(--code-font); Stays the same Preview HTML x-small small text bold x-small small text bold \"> < div > < p class = \" text u-x-small \" > x-small </ p > < p class = \" text u-small \" > small </ p > < p class = \" text \" > text </ p > < p class = \" text u-bold \" > bold </ p > </ div > responsive theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/text"},"58":{"title":"utilities - theme","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities theme Theme Theme shows or hides elements depending on the selected theme (light or dark). Selector Properties .u-only-light display: none; .u-only-dark display: none; #{$theme-dark} .u-only-dark display: block; body:not(#{$theme-dark}) .u-only-light display: block; text visibility Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/theme"},"59":{"title":"utilities - visibility","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities visibility Visibility An element's visibility, opacity and overflow are controlled by the classes below. Class Properties u-hide display: none !important; u-opacity-0 opacity: 0 !important; u-opacity-20 opacity: 0.2 !important; u-opacity-50 opacity: 0.5 !important; u-overflow-hidden overflow: hidden !important; u-overflow-visible overflow: visible !important; u-overflow-x-auto overflow-x: auto !important; u-overflow-y-auto overflow-y: auto !important; some text hide me \"> < div class = \" box u-overflow-y-auto \" > < p class = \" text \" > some text </ p > < p class = \" u-hide \" > hide me </ p > </ div > theme container Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/visibility"}},"dirtCount":0,"index":[["9",{"1":{"53":1}}],["99px",{"1":{"41":5,"53":2}}],["qwik",{"1":{"40":1}}],["qrcode",{"1":{"40":1}}],["queries",{"1":{"41":1}}],["question",{"1":{"40":1}}],["quot",{"1":{"33":4,"39":2}}],["quickly",{"1":{"32":1,"54":1}}],["$break3open",{"1":{"41":3,"53":1,"56":2}}],["$break2open",{"1":{"41":3,"56":1}}],["$break2",{"1":{"41":4,"56":1}}],["$break1",{"1":{"41":5,"53":2,"56":3}}],["$",{"1":{"38":2,"41":4,"44":2}}],["$theme",{"1":{"38":2,"58":2}}],["$25",{"1":{"10":3}}],["zoom",{"1":{"40":6}}],["zone",{"1":{"3":1}}],["z",{"1":{"39":1,"54":13}}],["zagar",{"1":{"33":18}}],["⌘",{"1":{"26":3}}],["justify",{"1":{"53":3}}],["jacob",{"1":{"44":1}}],["java",{"1":{"40":4}}],["javascript",{"1":{"22":3,"43":1}}],["join",{"1":{"44":3}}],["journey",{"1":{"42":1}}],["jw",{"1":{"44":1}}],["jenny",{"1":{"44":3}}],["jeremiah",{"1":{"33":18}}],["js",{"1":{"22":7,"40":5}}],["jpg",{"1":{"7":1,"33":18,"44":1}}],["jpeg",{"1":{"7":1,"33":27}}],["75rem",{"1":{"50":7,"53":8,"54":4,"57":1}}],["767",{"1":{"41":3,"53":2}}],["767px",{"1":{"41":1,"46":1}}],["768px",{"1":{"41":6,"46":1}}],["72px",{"1":{"33":1}}],["7",{"1":{"17":3,"25":4,"42":4,"44":2,"50":1,"57":2}}],["700",{"1":{"53":2}}],["70",{"1":{"8":3,"16":2,"37":1}}],["0px",{"1":{"41":1}}],["0625rem",{"1":{"25":1,"53":3,"54":4}}],["01gb",{"1":{"12":9}}],["09375rem",{"1":{"9":2}}],["0",{"1":{"9":2,"10":6,"16":7,"17":13,"18":1,"25":12,"33":1,"37":2,"38":2,"50":22,"53":21,"54":30,"55":1,"57":4,"59":4}}],["52",{"1":{"50":2}}],["59",{"1":{"33":3}}],["57",{"1":{"33":18}}],["54px",{"1":{"33":1}}],["56",{"1":{"25":1,"37":1,"50":8}}],["5",{"1":{"11":4,"25":4,"29":1,"33":9,"37":2,"42":4,"47":1,"49":5,"54":2,"57":2,"59":1}}],["500",{"1":{"25":16,"37":1,"53":4}}],["50hrs",{"1":{"12":3}}],["50",{"1":{"8":3,"10":2,"12":17,"36":1,"37":5,"38":2,"47":1,"53":2,"59":1}}],["5rem",{"1":{"1":15,"9":7,"10":6,"17":2,"20":1,"25":1,"41":2,"46":1,"50":15,"53":13,"54":4}}],["37",{"1":{"53":2}}],["375rem",{"1":{"53":1}}],["31",{"1":{"53":2}}],["3rem",{"1":{"50":1,"54":1}}],["343",{"1":{"37":1}}],["39",{"1":{"33":1,"43":1,"44":1,"49":1,"54":1,"55":1,"59":1}}],["336",{"1":{"33":27}}],["300",{"1":{"37":2,"50":2,"53":2}}],["30",{"1":{"10":6,"16":3,"37":1}}],["350px",{"1":{"14":1}}],["350",{"1":{"10":1,"53":2}}],["3",{"1":{"8":3,"12":3,"16":6,"20":3,"25":6,"33":36,"34":1,"37":1,"40":1,"42":8,"44":1,"47":4,"49":3,"50":3,"53":3}}],["32",{"1":{"5":1,"25":1,"33":21,"50":13,"53":6,"57":2}}],["32px",{"1":{"2":2}}],["vue",{"1":{"40":4}}],["vs",{"1":{"40":4}}],["vk",{"1":{"40":4}}],["vonage",{"1":{"40":1}}],["volume",{"1":{"40":2}}],["verified",{"1":{"34":1}}],["very",{"1":{"29":3}}],["verbatim",{"1":{"23":1}}],["vertical",{"1":{"5":16,"10":16,"12":1,"17":3,"25":1,"27":1,"40":2,"53":2,"57":1}}],["valid",{"1":{"25":1}}],["values",{"1":{"25":1,"37":1}}],["valuemax",{"1":{"16":7}}],["valuemin",{"1":{"16":7}}],["valuenow",{"1":{"16":7}}],["value",{"1":{"16":7,"25":15,"33":5,"36":4,"46":1}}],["variant",{"1":{"38":1,"41":1}}],["variable",{"1":{"33":3,"36":4,"38":3,"39":1,"40":1,"41":1,"46":1}}],["variables",{"1":{"17":3,"25":12,"35":11,"37":2,"41":2,"46":1,"54":2}}],["vars",{"1":{"25":9}}],["var",{"1":{"10":9,"17":3,"36":4,"37":2,"38":12,"39":2,"41":3,"51":8,"53":6,"57":4}}],["via",{"1":{"50":1,"54":1}}],["vincent",{"1":{"44":1}}],["vimeo",{"1":{"40":4}}],["video",{"1":{"40":2}}],["view",{"1":{"4":1,"15":16,"40":4,"44":1,"47":5}}],["visual",{"1":{"22":1,"23":1,"40":1}}],["visually",{"1":{"3":6,"34":1,"39":1}}],["visible",{"1":{"14":2,"29":6,"33":7,"56":15,"59":2}}],["visibility",{"0":{"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":2,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":2,"59":4}}],["650",{"1":{"53":2}}],["625rem",{"1":{"53":4}}],["64",{"1":{"50":2}}],["64px",{"1":{"2":1}}],["637a4",{"1":{"33":1}}],["637a40ba7a703e3936e1",{"1":{"33":3}}],["63f1efg6673515e4bc06",{"1":{"25":3}}],["63f1efg667fg6fg67fc68ac3515e4bc06",{"1":{"25":3}}],["63f1ec68ac3515e4bc0663f1",{"1":{"25":3}}],["63f1ec68ac3515e4bc06",{"1":{"3":6}}],["60",{"1":{"16":3}}],["600",{"1":{"7":1,"42":1,"53":4,"57":1}}],["6",{"1":{"8":3,"25":4,"33":27,"42":4,"50":1,"53":1}}],["6rem",{"1":{"6":1}}],["|",{"1":{"3":6}}],["yu",{"1":{"44":1}}],["ycombinator",{"1":{"40":4}}],["yandex",{"1":{"40":4}}],["yahoo",{"1":{"40":4}}],["yammer",{"1":{"40":5}}],["y",{"1":{"33":18,"59":3}}],["yen",{"1":{"40":1}}],["year",{"1":{"33":12}}],["yet",{"1":{"2":1}}],["youtube",{"1":{"40":4}}],["you",{"1":{"5":10,"6":1,"10":3,"14":1,"19":1,"20":2,"21":1,"22":1,"30":1,"32":1,"33":2,"34":2,"40":1,"41":2,"49":1,"54":1}}],["yourself",{"1":{"44":1}}],["your",{"1":{"1":2,"21":1,"25":12,"43":5,"44":3,"49":1}}],["xsmall",{"1":{"17":3,"36":3}}],["xlarge",{"1":{"2":1}}],["x",{"1":{"1":15,"2":11,"11":4,"16":4,"17":2,"20":1,"25":9,"34":1,"40":1,"57":5,"59":2}}],["28",{"1":{"53":1}}],["280",{"1":{"53":2}}],["21",{"1":{"53":1}}],["2eem",{"1":{"53":1}}],["230",{"1":{"33":2}}],["25rem",{"1":{"41":3,"50":6,"53":9,"54":4}}],["250",{"1":{"33":1,"53":6,"55":2}}],["25",{"1":{"25":1,"57":2}}],["24",{"1":{"10":1,"12":1,"17":3,"50":10,"53":8}}],["24px",{"1":{"2":2,"54":2}}],["2022",{"1":{"33":45}}],["2023",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":7,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["2002bishwajeet",{"1":{"44":1}}],["200",{"1":{"29":1,"37":6,"50":2,"53":6}}],["20",{"1":{"8":2,"10":2,"16":10,"25":9,"49":3,"50":4,"54":2,"59":1}}],["2rem",{"1":{"8":1,"50":6,"53":2,"57":1}}],["2",{"1":{"1":45,"2":2,"6":24,"7":1,"10":12,"11":1,"17":3,"20":4,"24":3,"25":13,"30":2,"40":3,"41":2,"42":20,"44":1,"47":5,"49":3,"50":3,"53":9,"57":2,"59":1}}],["1fr",{"1":{"53":2}}],["15",{"1":{"53":3,"54":2}}],["150",{"1":{"37":1,"53":2}}],["13",{"1":{"46":2}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73",{"1":{"29":3}}],["14",{"1":{"57":1}}],["14px",{"1":{"42":1}}],["140",{"1":{"25":2,"33":3,"53":4}}],["17",{"1":{"33":3,"53":1}}],["184",{"1":{"53":2}}],["18",{"1":{"50":1,"53":1}}],["185",{"1":{"33":11}}],["18rem",{"1":{"8":1}}],["1198",{"1":{"41":2}}],["1198px",{"1":{"41":1}}],["1199px",{"1":{"41":3,"53":1}}],["11",{"1":{"33":27,"53":1}}],["125rem",{"1":{"46":2,"50":1,"53":4}}],["128",{"1":{"25":2}}],["120",{"1":{"25":3,"33":3,"37":5,"50":2}}],["12",{"1":{"10":6,"25":4,"29":1,"33":10,"44":2,"50":13,"53":10,"54":8,"57":1}}],["12rem",{"1":{"6":5}}],["10",{"1":{"37":5,"44":1,"54":2}}],["10mb",{"1":{"17":9}}],["105",{"1":{"12":4}}],["10rem",{"1":{"10":1}}],["10em",{"1":{"10":1}}],["100lvh",{"1":{"53":1}}],["100vh",{"1":{"53":1}}],["100hrs",{"1":{"12":3}}],["100gb",{"1":{"12":9}}],["100",{"1":{"4":1,"10":6,"16":9,"33":3,"37":15,"38":2,"44":2,"50":2,"53":14}}],["1rem",{"1":{"9":9,"10":3,"41":4,"46":1,"50":7,"53":4,"54":4,"57":1}}],["1px",{"1":{"2":1}}],["16px",{"1":{"36":1,"42":1}}],["16rem",{"1":{"8":1,"46":1}}],["16",{"1":{"1":5,"4":1,"8":6,"9":7,"10":9,"11":8,"16":1,"17":5,"19":4,"25":2,"33":10,"47":1,"50":14,"53":8,"54":8,"57":1}}],["1",{"1":{"1":60,"3":2,"6":24,"8":19,"9":7,"11":1,"12":4,"17":2,"20":3,"25":25,"29":1,"30":2,"33":27,"40":2,"41":3,"42":23,"46":1,"47":5,"49":3,"50":7,"53":11,"54":10,"57":9}}],["wordpress",{"1":{"40":4}}],["word",{"1":{"20":2,"29":2,"33":9,"57":3}}],["wrapped",{"1":{"33":1}}],["wrapper",{"1":{"5":8,"6":10,"8":1,"9":1,"11":2,"19":2,"25":13,"29":1,"33":4,"46":1,"47":1}}],["wraps",{"1":{"15":2}}],["wrap",{"1":{"8":3,"53":3}}],["watson",{"1":{"44":4}}],["way",{"1":{"25":1}}],["want",{"1":{"10":3,"33":1,"40":1,"41":1}}],["waiting",{"1":{"9":1,"31":5}}],["was",{"1":{"7":1}}],["warn",{"1":{"1":2,"34":2}}],["warning",{"1":{"1":6,"8":3,"12":2,"16":1,"25":21,"31":1,"34":6,"37":8,"51":3}}],["white",{"1":{"57":5}}],["while",{"1":{"36":1,"49":1}}],["which",{"1":{"11":1,"20":1,"29":3,"54":1}}],["who",{"1":{"34":2,"44":1}}],["why",{"1":{"20":1}}],["whatsapp",{"1":{"40":4}}],["what",{"1":{"5":9,"20":1,"25":2,"49":1}}],["whenever",{"1":{"15":1,"22":1,"30":1,"32":1}}],["when",{"1":{"2":1,"14":1,"20":1,"25":2,"30":1,"33":1,"34":2,"36":1,"42":1,"44":1,"55":1}}],["where",{"1":{"1":2,"6":1,"20":1,"25":1}}],["wilson",{"1":{"44":1}}],["will",{"1":{"5":9,"7":1,"19":1,"20":2,"21":1,"25":9,"29":1,"35":3,"36":1,"42":1,"43":1,"46":1,"52":2,"54":1}}],["williamson",{"1":{"3":6}}],["wifi",{"1":{"40":1}}],["wizard",{"1":{"33":1}}],["window",{"1":{"7":1,"11":1}}],["without",{"1":{"19":1,"33":2,"55":2}}],["with",{"1":{"2":4,"5":1,"6":1,"7":1,"11":3,"15":2,"17":1,"20":6,"21":1,"22":1,"24":1,"25":11,"27":2,"29":1,"33":4,"38":1,"39":1,"41":1,"42":2,"43":1,"44":7,"46":1,"54":2,"55":2}}],["within",{"1":{"1":1,"8":1,"13":1,"14":1,"23":1,"34":2,"49":1}}],["width",{"1":{"1":10,"4":1,"5":2,"6":2,"10":7,"14":1,"16":2,"17":14,"25":38,"29":1,"33":38,"41":11,"53":24,"55":2}}],["weight",{"1":{"57":3}}],["weights",{"1":{"42":1}}],["wess",{"1":{"44":2}}],["wen",{"1":{"44":1}}],["webkit",{"1":{"55":1,"57":3}}],["website",{"1":{"48":1}}],["web",{"1":{"44":1}}],["were",{"1":{"40":1}}],["well",{"1":{"21":1,"42":1}}],["we",{"1":{"1":2,"6":2,"11":1,"15":1,"20":3,"21":1,"22":1,"25":3,"27":1,"33":1,"34":3,"36":1,"37":2,"38":1,"39":2,"40":2,"41":3,"42":2,"44":1,"51":1,"53":1}}],["ⓒ",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["nik",{"1":{"44":1}}],["nguyen",{"1":{"44":1}}],["npm",{"1":{"43":3,"44":1}}],["nuxt",{"1":{"40":1}}],["null",{"1":{"25":6,"40":1}}],["numquam",{"1":{"33":3}}],["numeric",{"1":{"25":7,"27":15,"55":2}}],["number",{"1":{"4":6,"24":3,"25":4,"27":1,"46":1,"55":4}}],["normal",{"1":{"57":2}}],["none",{"1":{"55":1,"56":5,"58":2,"59":1}}],["nowrap",{"1":{"57":3}}],["now",{"1":{"52":2}}],["node",{"1":{"40":5,"43":1}}],["no",{"1":{"6":4,"7":3,"14":1,"17":3,"25":8,"41":1}}],["notion",{"1":{"40":4}}],["notify",{"1":{"1":1,"10":3}}],["note",{"1":{"22":3,"40":1}}],["not",{"1":{"0":2,"2":2,"6":1,"7":5,"14":1,"17":3,"22":1,"30":1,"32":1,"34":2,"36":1,"39":2,"40":2,"41":1,"42":3,"56":4,"58":1}}],["nav",{"1":{"48":4,"49":2}}],["navigate",{"1":{"38":1}}],["navigation",{"0":{"48":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":5,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["native",{"1":{"11":1,"33":1}}],["names",{"1":{"23":1,"40":1}}],["name",{"1":{"10":9,"16":6,"17":6,"18":4,"25":2,"30":7,"33":30,"40":1,"44":3,"50":1}}],["narrow",{"1":{"4":1,"33":1,"40":4}}],["needed",{"1":{"44":1}}],["need",{"1":{"21":1,"49":1}}],["needs",{"1":{"1":1,"28":1,"36":2}}],["nextjs",{"1":{"40":1}}],["next",{"1":{"20":1,"22":1,"29":1,"30":1,"32":1,"49":5}}],["negative",{"1":{"20":1,"33":2,"50":2}}],["netherlands",{"1":{"10":4}}],["neutrals",{"1":{"37":2}}],["neutral",{"1":{"8":6,"37":14,"38":8}}],["newman",{"1":{"44":1}}],["newspaper",{"1":{"40":1}}],["new",{"1":{"7":1,"20":8,"33":1,"44":1}}],["necessary",{"1":{"1":2,"25":1,"34":2}}],["875rem",{"1":{"53":1,"57":1}}],["87",{"1":{"37":1}}],["8px",{"1":{"22":1,"30":1,"32":1,"36":1}}],["85",{"1":{"12":4}}],["8rem",{"1":{"6":6,"46":1}}],["8",{"1":{"0":2,"3":2,"5":6,"8":3,"12":8,"16":3,"17":1,"18":1,"21":2,"25":19,"26":1,"27":2,"29":1,"33":3,"35":1,"39":2,"45":1,"50":10,"53":10,"54":9}}],["=210px",{"1":{"46":2}}],["=24px",{"1":{"46":1}}],["=>",{"1":{"22":2}}],["=",{"1":{"0":12,"1":310,"2":76,"3":19,"4":25,"5":87,"6":117,"7":17,"8":79,"9":50,"10":107,"11":106,"12":49,"13":30,"14":27,"15":38,"16":131,"17":90,"18":16,"19":6,"20":67,"21":8,"22":23,"23":1,"24":20,"25":376,"26":3,"27":38,"28":2,"29":33,"30":19,"31":18,"32":17,"33":672,"34":35,"35":19,"36":8,"38":2,"39":6,"41":2,"42":18,"43":4,"44":10,"45":2,"46":8,"47":30,"48":41,"49":47,"50":1,"51":8,"52":1,"53":4,"54":3,"55":6,"56":5,"57":4,"59":3}}],["43",{"1":{"53":1}}],["450",{"1":{"53":2}}],["48",{"1":{"50":2}}],["48px",{"1":{"2":2}}],["4rem",{"1":{"50":1}}],["4px",{"1":{"36":1,"40":3,"42":1}}],["442",{"1":{"33":2}}],["41",{"1":{"33":2}}],["4mb",{"1":{"17":6}}],["400",{"1":{"37":1,"38":2,"42":1,"53":2}}],["40px",{"1":{"2":2,"20":1}}],["40",{"1":{"2":1,"10":6,"33":8,"50":2,"53":1}}],["4",{"1":{"0":3,"8":6,"10":3,"12":4,"17":5,"20":3,"24":15,"25":18,"36":1,"37":1,"40":1,"42":4,"47":6,"49":3,"50":4,"53":6,"54":9}}],["everly",{"1":{"44":2}}],["everything",{"1":{"44":1}}],["every",{"1":{"20":2,"22":1,"30":1,"32":1}}],["even",{"1":{"44":1}}],["edge",{"1":{"40":4,"55":1}}],["edit",{"1":{"25":1,"34":2,"44":2}}],["etsy",{"1":{"40":4}}],["etc",{"1":{"7":1}}],["emoji",{"1":{"40":2}}],["emphasis",{"1":{"23":1}}],["empty",{"1":{"2":8,"18":3,"21":2,"25":2}}],["euro",{"1":{"40":1}}],["effect",{"1":{"39":1}}],["efficient",{"1":{"25":1}}],["e",{"1":{"34":1,"39":2}}],["ellipsis",{"1":{"57":2}}],["eldadfux",{"1":{"44":1}}],["eldad",{"1":{"44":1}}],["elad2412",{"1":{"44":1}}],["elad",{"1":{"44":1}}],["el",{"1":{"22":4}}],["elevated",{"1":{"39":1}}],["elevation",{"0":{"39":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":2,"39":5,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["element",{"1":{"11":1,"14":2,"15":7,"19":3,"25":1,"26":2,"29":1,"34":1,"35":1,"36":1,"47":2,"53":1,"54":3,"59":1}}],["elements",{"0":{"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":2,"21":3,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":4,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":2,"57":1,"58":2,"59":1}}],["eight",{"1":{"17":1}}],["eye",{"1":{"11":2,"25":2,"29":1,"33":2,"40":2}}],["eyebrow",{"1":{"8":3,"25":2,"33":30,"34":1,"42":15}}],["easier",{"1":{"38":1,"41":1}}],["easily",{"1":{"2":1,"10":3,"25":1}}],["easy",{"1":{"34":1,"44":1,"48":1}}],["each",{"1":{"6":1,"19":1,"20":1,"22":1,"30":1,"32":2,"34":1}}],["exercitationem",{"1":{"33":3}}],["execution",{"1":{"0":1}}],["experience",{"1":{"44":3}}],["expand",{"1":{"40":1}}],["expanded",{"1":{"37":1}}],["express",{"1":{"20":1}}],["explain",{"1":{"1":1}}],["extra",{"1":{"18":4,"36":1}}],["external",{"1":{"4":1,"7":1,"20":1,"40":1}}],["exceeds",{"1":{"14":1,"33":2}}],["exclamation",{"1":{"8":3,"9":1,"11":1,"17":1,"25":5,"34":2,"40":3}}],["example",{"1":{"2":1,"4":1,"21":1,"25":2,"37":1,"41":2,"54":1,"55":1}}],["errors",{"1":{"1":1}}],["error",{"1":{"1":1,"17":4,"25":6,"34":5,"37":2}}],["ensures",{"1":{"50":1,"57":1}}],["engineer",{"1":{"44":11}}],["engineering",{"1":{"44":2}}],["env",{"1":{"25":9}}],["entered",{"1":{"25":3}}],["enter",{"1":{"25":1}}],["enabling",{"1":{"22":1}}],["enables",{"1":{"0":1}}],["enough",{"1":{"1":1,"14":1}}],["end",{"1":{"0":4,"6":12,"8":15,"11":4,"14":2,"16":1,"17":2,"25":20,"29":1,"33":1,"35":2,"50":24,"53":9,"54":36,"57":2}}],["m",{"1":{"56":15}}],["msg91",{"1":{"40":1}}],["ms",{"1":{"40":1}}],["md",{"1":{"40":1}}],["mdn",{"1":{"11":1}}],["might",{"1":{"41":1}}],["microsoft",{"1":{"40":8}}],["microphone",{"1":{"40":1}}],["missed",{"1":{"40":1}}],["mix",{"1":{"34":2}}],["middle",{"1":{"19":7}}],["minus",{"1":{"40":3}}],["min",{"1":{"4":1,"6":5,"17":11,"41":6,"44":3,"46":1,"53":17}}],["mind",{"1":{"2":1,"20":1,"36":1,"44":1,"49":1}}],["minimum",{"1":{"1":1,"22":1,"30":1,"32":1,"40":2}}],["mp4",{"1":{"16":18}}],["music",{"1":{"40":1}}],["must",{"1":{"11":1}}],["multi",{"1":{"25":1,"31":1}}],["multiple",{"1":{"8":2,"9":1,"13":1,"14":1,"19":2,"22":2,"30":1,"32":1,"40":2,"41":1,"49":1}}],["meldiron",{"1":{"44":1}}],["media",{"1":{"41":15,"53":6,"56":5}}],["medium",{"1":{"2":3,"11":2,"12":4,"20":6,"22":2,"30":2,"32":2,"33":2,"36":5,"40":4,"41":11,"46":1,"57":1}}],["meilisearch",{"1":{"40":4}}],["methods",{"1":{"11":1,"44":2}}],["method",{"1":{"11":4}}],["me",{"1":{"10":3,"59":2}}],["meaning",{"1":{"6":1,"20":2,"51":1}}],["meanings",{"1":{"2":1}}],["menus",{"1":{"48":1}}],["menu",{"1":{"6":1,"36":1,"40":5,"48":18}}],["messaging",{"1":{"1":1}}],["message",{"1":{"1":15,"9":21,"17":3,"25":1}}],["messages",{"1":{"1":17,"11":3}}],["matej",{"1":{"44":1}}],["matched",{"1":{"42":1}}],["match",{"1":{"25":3,"34":2,"42":1}}],["map",{"1":{"40":1}}],["mark",{"1":{"40":1}}],["marker",{"1":{"40":1}}],["mar",{"1":{"33":27}}],["margins",{"1":{"50":1}}],["margin",{"1":{"3":2,"4":1,"5":6,"6":7,"8":7,"10":18,"11":3,"16":4,"17":10,"20":1,"25":12,"26":1,"27":2,"29":1,"33":4,"35":1,"39":2,"45":1,"50":82,"54":1,"55":1}}],["mail",{"1":{"40":2}}],["mailto",{"1":{"25":2}}],["maintenance",{"1":{"38":1,"41":1}}],["maintain",{"1":{"33":1,"37":1}}],["maintains",{"1":{"14":1}}],["main",{"1":{"0":1,"6":2,"11":8,"12":8,"17":3,"25":1,"42":1,"48":1,"53":4}}],["made",{"1":{"25":2}}],["make",{"1":{"20":1,"22":1,"30":2,"32":1,"36":1,"39":1,"40":1,"49":1}}],["maximum",{"1":{"33":1,"46":1}}],["max",{"1":{"10":1,"12":4,"17":9,"25":19,"33":1,"41":5,"46":1,"53":34,"55":2}}],["may",{"1":{"1":1,"33":6,"34":5}}],["mouse",{"1":{"55":1}}],["moz",{"1":{"55":1}}],["moon",{"1":{"40":1}}],["movie",{"1":{"33":3}}],["month",{"1":{"10":3}}],["mostly",{"1":{"11":1,"14":1,"20":1,"33":1,"37":1,"42":2}}],["most",{"1":{"3":6,"14":1,"20":1,"29":1,"44":1}}],["more",{"1":{"2":2,"11":1,"14":1,"21":1,"22":3,"25":2,"33":12,"41":1}}],["mobile",{"1":{"0":2,"1":10,"14":1,"17":6,"33":10,"40":1,"47":1,"53":2,"56":10}}],["modules",{"1":{"43":1}}],["mode",{"1":{"2":1,"37":2,"40":1,"44":1}}],["model",{"0":{"50":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":4,"51":2,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["modals",{"1":{"11":10,"25":1,"36":1,"37":1,"39":2}}],["modal",{"0":{"11":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":2,"11":64,"12":2,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["oberai",{"1":{"44":1}}],["objects",{"1":{"21":1}}],["object",{"1":{"2":1,"11":1,"39":1,"44":1}}],["okta",{"1":{"40":4}}],["ol",{"1":{"27":2,"49":2}}],["our",{"1":{"21":1,"34":1,"37":3,"44":3,"50":1,"57":1}}],["outgoing",{"1":{"40":1}}],["outer",{"1":{"33":3}}],["out",{"1":{"20":1,"21":1,"40":1,"44":2}}],["outputs",{"1":{"29":1}}],["output",{"0":{"29":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":3,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":22,"30":2,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["own",{"1":{"20":1,"22":1,"30":1,"32":1,"44":2}}],["occured",{"1":{"34":1}}],["occur",{"1":{"20":1}}],["others",{"1":{"44":1}}],["other",{"1":{"19":1,"21":1,"25":1}}],["otherwise",{"1":{"14":1}}],["over",{"1":{"35":1}}],["overflow",{"1":{"33":6,"57":5,"59":10}}],["overviews",{"1":{"21":1}}],["overview",{"1":{"14":3,"44":1}}],["overlap",{"1":{"41":1}}],["overlay",{"1":{"11":1}}],["overly",{"1":{"1":1}}],["optimized",{"1":{"44":1}}],["option",{"1":{"5":12,"6":1,"25":36}}],["options",{"1":{"5":15,"11":3,"12":1,"22":1,"25":14,"30":1,"32":2,"33":16}}],["optionally",{"1":{"43":2}}],["optional",{"1":{"5":26,"25":12}}],["opera",{"1":{"40":4,"55":1}}],["openid",{"1":{"40":1}}],["opening",{"1":{"33":1}}],["open",{"1":{"5":1,"7":1,"11":7,"16":3,"25":4,"26":3,"40":8,"41":2,"43":1,"44":6}}],["opacity",{"1":{"8":2,"10":4,"37":1,"47":1,"59":7}}],["orient",{"1":{"57":1}}],["orientation",{"1":{"42":1}}],["order",{"1":{"38":1,"42":1}}],["organize",{"1":{"33":1,"34":1,"42":1}}],["orange",{"1":{"2":7,"11":1,"34":1,"37":2}}],["or",{"1":{"1":5,"2":5,"5":16,"8":6,"11":3,"13":1,"18":1,"20":1,"21":1,"22":2,"23":4,"24":2,"25":12,"29":1,"32":3,"33":2,"34":8,"35":12,"36":3,"38":1,"39":3,"40":1,"42":4,"44":2,"48":1,"55":1,"56":1,"58":2}}],["office",{"1":{"40":1}}],["off",{"1":{"32":4,"33":1,"40":2}}],["offline",{"1":{"9":2,"40":1,"51":3}}],["often",{"1":{"20":1,"37":4}}],["of",{"1":{"0":3,"1":6,"2":3,"3":12,"4":3,"5":26,"6":4,"7":2,"10":1,"11":7,"13":2,"14":3,"16":3,"17":1,"18":1,"20":6,"21":4,"22":5,"23":3,"24":2,"25":16,"27":2,"30":6,"31":1,"32":5,"33":4,"34":5,"35":2,"36":5,"37":1,"39":2,"40":10,"41":3,"42":5,"43":2,"44":7,"45":1,"46":5,"49":1,"54":2,"56":1}}],["online",{"1":{"40":1}}],["only",{"1":{"1":15,"6":1,"8":6,"11":4,"14":1,"17":14,"20":4,"21":1,"25":4,"30":2,"33":61,"34":2,"36":1,"41":7,"44":1,"47":1,"49":1,"56":6,"58":4}}],["ons",{"1":{"10":3}}],["one",{"1":{"2":1,"3":6,"5":3,"6":1,"15":1,"22":2,"25":2,"30":3,"36":1,"41":1,"44":3,"55":2}}],["on",{"1":{"0":3,"1":1,"11":1,"14":1,"15":2,"19":1,"20":2,"22":1,"23":1,"25":1,"29":3,"30":1,"32":5,"33":2,"34":2,"36":3,"38":1,"44":4,"46":2,"49":1,"51":1,"56":16,"58":1}}],["utility",{"1":{"38":2,"51":1,"52":1,"55":1}}],["utilities",{"0":{"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["uk",{"1":{"10":3}}],["ul",{"1":{"2":10,"3":2,"5":6,"6":16,"8":8,"10":4,"11":2,"12":2,"13":6,"14":2,"15":6,"16":4,"17":4,"20":2,"25":38,"27":4,"46":2,"47":2,"48":2}}],["unpkg",{"1":{"43":2}}],["underlined",{"1":{"42":1}}],["underlines",{"1":{"42":1}}],["underline",{"1":{"42":15,"57":2}}],["underlying",{"1":{"36":1}}],["underneath",{"1":{"25":1}}],["understanding",{"1":{"34":1}}],["understand",{"1":{"1":1,"6":1}}],["un",{"1":{"18":3,"53":1,"57":1}}],["uncluttered",{"1":{"14":1}}],["unlimited",{"1":{"10":3}}],["unsafe",{"1":{"8":3}}],["unsecure",{"1":{"8":3}}],["unsplash",{"1":{"2":1,"7":1,"33":9}}],["units",{"1":{"50":1}}],["unity",{"1":{"40":4}}],["united",{"1":{"10":1}}],["unique",{"1":{"6":1}}],["universal",{"1":{"2":1,"6":1,"20":2}}],["upon",{"1":{"35":1}}],["upl",{"1":{"25":1}}],["uploading",{"1":{"16":4}}],["uploads",{"1":{"16":6}}],["uploaded",{"1":{"7":3,"10":1,"16":2}}],["upload",{"0":{"16":1,"17":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":3,"16":57,"17":59,"18":3,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":4,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["updated",{"1":{"33":4}}],["update",{"1":{"21":1}}],["uppercase",{"1":{"2":1,"20":2}}],["up",{"1":{"2":2,"4":1,"22":1,"25":5,"40":9,"49":1}}],["usage",{"1":{"24":1,"37":1,"44":1}}],["usa",{"1":{"10":1}}],["us",{"1":{"10":3,"37":1,"44":4}}],["using",{"1":{"2":1,"6":1,"8":1,"19":1,"20":3,"29":1,"36":1,"39":1,"40":1,"46":1,"49":1,"53":1,"54":2}}],["useful",{"1":{"33":1}}],["used",{"1":{"1":1,"2":2,"4":2,"5":16,"8":1,"11":1,"12":4,"13":1,"14":1,"15":1,"20":5,"21":2,"22":3,"23":1,"24":1,"25":9,"32":2,"33":3,"34":3,"36":3,"37":8,"38":2,"39":3,"42":6,"45":1,"55":1}}],["use",{"1":{"1":8,"2":5,"6":4,"7":2,"11":2,"14":1,"15":1,"20":6,"21":2,"22":4,"24":1,"25":3,"27":3,"28":1,"30":4,"32":4,"33":2,"34":11,"36":3,"37":2,"38":1,"39":3,"40":5,"41":4,"42":4,"44":1,"49":1,"51":1,"53":1,"55":1}}],["users",{"1":{"6":1,"13":1,"14":2,"17":1,"22":3,"25":2,"28":1,"29":1,"30":2,"34":1,"40":1,"41":1,"42":2,"49":1}}],["user",{"0":{"18":1},"1":{"0":1,"1":70,"2":3,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":3,"15":1,"16":1,"17":2,"18":23,"19":1,"20":2,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":8,"35":9,"36":2,"37":1,"38":1,"39":1,"40":6,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["ui",{"1":{"1":1,"14":1,"36":3}}],["u",{"1":{"0":4,"1":30,"3":4,"4":4,"5":9,"6":9,"8":42,"9":40,"10":103,"11":37,"12":52,"14":1,"16":7,"17":57,"18":4,"19":12,"20":1,"21":4,"25":143,"26":1,"27":2,"29":7,"33":100,"34":1,"35":1,"39":2,"42":4,"44":6,"45":1,"47":6,"49":1,"50":53,"51":16,"52":2,"53":88,"54":39,"55":4,"57":29,"58":4,"59":10}}],["aggressive",{"1":{"44":1}}],["after",{"1":{"43":1}}],["affordance",{"1":{"42":1}}],["affect",{"1":{"41":7}}],["auth",{"1":{"44":1}}],["authentik",{"1":{"40":4}}],["auth0",{"1":{"40":4}}],["autodesk",{"1":{"40":4}}],["auto",{"1":{"4":1,"8":1,"10":9,"11":3,"17":2,"20":1,"25":4,"50":4,"53":6,"54":4,"59":5}}],["akamai",{"1":{"40":1}}],["axis",{"1":{"39":1}}],["ai",{"1":{"40":4}}],["airplane",{"1":{"40":1}}],["airport",{"1":{"33":18}}],["aid",{"1":{"6":1,"20":1}}],["above",{"1":{"36":1,"46":1}}],["about",{"1":{"1":48,"18":1,"25":2,"34":1,"35":1}}],["absolute",{"1":{"25":6,"54":2}}],["amazon",{"1":{"40":4}}],["amp",{"1":{"16":15,"38":1,"41":4,"56":10}}],["amount",{"1":{"11":2,"14":1,"16":2,"25":9,"49":1}}],["available",{"1":{"7":4,"14":1,"31":1,"37":1,"40":2}}],["avatars",{"1":{"2":35,"11":1,"21":1,"36":1,"37":1}}],["avatar",{"0":{"2":1},"1":{"0":1,"1":2,"2":49,"3":2,"4":1,"5":1,"6":1,"7":3,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":2,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["avoid",{"1":{"6":1,"20":1}}],["advocate",{"1":{"44":1}}],["advanced",{"1":{"5":9}}],["adityaoberai",{"1":{"44":1}}],["aditya",{"1":{"44":2}}],["adam",{"1":{"33":18}}],["adjustments",{"1":{"40":1}}],["adjust",{"1":{"25":1}}],["added",{"1":{"17":1,"43":1}}],["adding",{"1":{"14":2,"41":1}}],["additional",{"1":{"1":2,"25":1,"34":1,"35":1,"37":1,"40":1,"42":2}}],["add",{"1":{"2":1,"10":3,"11":1,"15":1,"20":8,"22":1,"25":2,"30":1,"32":1,"40":4,"43":2}}],["assist",{"1":{"42":1}}],["ascending",{"1":{"40":1}}],["astro",{"1":{"40":1}}],["as",{"1":{"5":16,"7":2,"10":1,"15":1,"20":2,"21":2,"24":1,"25":9,"33":1,"34":2,"36":4,"37":3,"38":1,"39":2,"40":2,"41":1,"42":1,"43":3,"46":1,"47":1}}],["azure",{"1":{"2":2,"40":4}}],["api",{"1":{"40":4}}],["apart",{"1":{"2":1}}],["apple",{"1":{"40":4}}],["applied",{"1":{"25":2,"29":1}}],["application",{"1":{"1":1,"48":1}}],["apply",{"1":{"19":1}}],["appearance",{"1":{"55":2}}],["appear",{"1":{"7":1,"11":1,"19":1,"25":1,"29":1,"35":1}}],["appears",{"1":{"0":1}}],["appwrite",{"1":{"0":1,"1":3,"2":2,"3":1,"4":1,"5":2,"6":3,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":2,"16":1,"17":1,"18":1,"19":1,"20":3,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":4,"34":5,"35":1,"36":3,"37":3,"38":1,"39":2,"40":6,"41":2,"42":1,"43":7,"44":29,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":1,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["aa",{"1":{"2":75,"37":1}}],["achintya",{"1":{"44":2}}],["academic",{"1":{"40":1}}],["access",{"1":{"41":1,"48":1}}],["accessibile",{"1":{"44":1}}],["accessibility",{"1":{"37":1,"44":1}}],["accessible",{"1":{"25":1}}],["accepted",{"1":{"17":9}}],["according",{"1":{"21":1,"36":1}}],["active",{"1":{"14":1}}],["activity",{"1":{"14":3}}],["actions",{"1":{"1":15,"11":1,"29":1,"37":1}}],["action",{"0":{"0":1},"1":{"0":17,"1":133,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":7,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":3,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["across",{"1":{"1":1,"37":1,"41":1,"50":1,"57":1}}],["attach",{"1":{"54":1}}],["attachment",{"1":{"7":1,"10":1}}],["attribute",{"1":{"15":2,"22":1,"25":1,"30":1,"32":1}}],["attention",{"1":{"11":1,"20":1}}],["at",{"1":{"1":1,"22":1,"25":9,"30":1,"32":1,"40":2,"44":18}}],["armannik",{"1":{"44":1}}],["arman",{"1":{"44":1}}],["archive",{"1":{"40":1}}],["array",{"1":{"22":2}}],["arrows",{"1":{"55":1}}],["arrow",{"1":{"4":1,"6":11,"14":4,"25":5,"27":3,"40":18}}],["articles",{"1":{"25":1,"44":2}}],["article",{"1":{"21":4}}],["aria",{"1":{"1":50,"2":8,"4":2,"5":6,"7":4,"8":18,"9":5,"10":4,"11":15,"12":4,"14":4,"15":10,"16":39,"17":16,"18":2,"20":18,"25":45,"27":6,"29":10,"33":69,"34":8,"35":4,"47":7,"48":6,"49":12}}],["areas",{"1":{"19":1,"48":1}}],["are",{"1":{"1":1,"2":4,"4":1,"5":16,"7":1,"8":1,"11":2,"15":1,"20":3,"21":2,"22":2,"24":1,"25":5,"29":1,"30":2,"31":1,"32":4,"33":2,"34":3,"36":2,"37":2,"40":5,"42":3,"55":1,"59":1}}],["algolia",{"1":{"40":4}}],["along",{"1":{"39":1}}],["align",{"1":{"35":5,"53":7,"57":5}}],["aligned",{"1":{"22":2,"30":2,"32":2,"40":2}}],["alignments",{"1":{"6":1,"53":2}}],["alignment",{"1":{"6":1,"53":1}}],["always",{"1":{"14":1,"44":1}}],["alt",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"40":9,"44":1}}],["allowed",{"1":{"15":1,"22":1,"30":1,"32":1}}],["allows",{"1":{"13":1,"14":1,"17":1,"25":1,"41":1,"49":1}}],["allow",{"1":{"5":16,"6":1,"10":7,"11":1,"21":3,"22":3,"29":1,"30":3,"32":3,"33":1,"34":1}}],["all",{"1":{"0":1,"1":1,"2":1,"3":7,"4":1,"5":1,"6":1,"7":1,"8":10,"9":1,"10":1,"11":1,"12":1,"13":2,"14":2,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":4,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":2,"41":4,"42":1,"43":1,"44":2,"45":1,"46":2,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":4,"58":1,"59":1}}],["alerts",{"1":{"1":8,"36":1,"37":4,"39":2}}],["alert",{"0":{"1":1},"1":{"0":2,"1":254,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["any",{"1":{"45":1}}],["announcing",{"1":{"44":1}}],["annotation",{"1":{"40":1}}],["angular",{"1":{"40":4}}],["anonymous",{"1":{"40":1}}],["another",{"1":{"20":1}}],["an",{"1":{"0":1,"2":4,"6":1,"7":3,"10":1,"11":1,"14":1,"15":2,"16":1,"17":1,"20":2,"22":1,"23":1,"24":2,"25":9,"27":1,"29":1,"31":1,"32":1,"34":3,"39":1,"40":1,"43":1,"46":2,"53":1,"54":1,"59":1}}],["android",{"1":{"40":4}}],["and",{"1":{"0":1,"1":4,"2":4,"6":1,"7":1,"11":2,"14":1,"17":10,"19":1,"20":6,"21":3,"22":2,"23":1,"25":2,"28":1,"29":1,"30":2,"32":2,"33":3,"34":7,"35":1,"36":5,"37":5,"39":4,"40":5,"41":7,"42":4,"43":1,"44":9,"45":2,"46":2,"47":1,"50":1,"53":1,"55":1,"57":1,"59":1}}],["a",{"1":{"0":2,"1":53,"2":8,"3":4,"4":5,"5":27,"6":4,"7":9,"8":4,"10":1,"11":4,"13":2,"14":11,"15":5,"16":2,"17":24,"18":4,"19":4,"20":11,"21":5,"22":7,"23":4,"24":4,"25":26,"26":2,"27":7,"28":2,"29":1,"30":9,"31":5,"32":8,"33":13,"34":7,"35":2,"36":2,"37":2,"38":2,"39":3,"40":6,"41":2,"42":7,"43":1,"44":1,"45":3,"46":4,"48":15,"49":6,"55":1}}],["lead",{"1":{"44":2}}],["learn",{"1":{"38":1}}],["legibility",{"1":{"22":1,"30":1,"32":1,"40":1}}],["letter",{"1":{"20":1}}],["letters",{"1":{"2":3}}],["level",{"1":{"8":3,"11":4,"17":3,"37":1,"42":58,"47":1}}],["left",{"1":{"8":2,"14":3,"20":2,"40":7,"49":1,"54":1}}],["less",{"1":{"2":1,"40":1}}],["library",{"1":{"40":2,"41":1,"43":4}}],["like",{"1":{"23":1,"33":1}}],["lightning",{"1":{"10":3,"12":1,"40":1}}],["light",{"1":{"8":3,"25":2,"37":1,"38":1,"40":1,"44":1,"58":3}}],["linux",{"1":{"40":4}}],["lines",{"1":{"4":1,"22":1,"25":1,"30":1,"32":1,"40":2}}],["line",{"1":{"4":6,"5":2,"12":4,"13":1,"16":2,"22":2,"25":22,"29":1,"30":2,"32":2,"33":9,"40":4,"53":1,"57":12}}],["linked",{"1":{"42":1}}],["linkedin",{"1":{"40":4}}],["links",{"1":{"33":2,"42":3}}],["link",{"1":{"4":1,"7":1,"20":1,"25":2,"27":5,"40":1,"42":5,"43":2}}],["li",{"1":{"2":40,"3":4,"5":18,"6":32,"8":16,"10":18,"11":4,"12":6,"13":18,"14":8,"15":12,"16":12,"17":4,"20":8,"25":60,"27":18,"46":12,"47":4,"48":10,"49":16}}],["lists",{"1":{"6":2,"21":2,"42":1}}],["list",{"0":{"3":1,"6":1,"27":1},"1":{"0":3,"1":3,"2":4,"3":24,"4":4,"5":21,"6":38,"7":4,"8":3,"9":3,"10":3,"11":7,"12":3,"13":3,"14":6,"15":15,"16":7,"17":7,"18":3,"19":3,"20":9,"21":3,"22":4,"23":3,"24":3,"25":49,"26":4,"27":55,"28":4,"29":3,"30":5,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":6,"41":3,"42":3,"43":3,"44":3,"45":3,"46":3,"47":6,"48":9,"49":4,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["lt",{"1":{"0":24,"1":500,"2":131,"3":34,"4":46,"5":156,"6":208,"7":21,"8":136,"9":72,"10":121,"11":153,"12":88,"13":60,"14":36,"15":53,"16":144,"17":128,"18":28,"19":12,"20":96,"21":14,"22":17,"23":2,"24":40,"25":544,"26":6,"27":62,"28":4,"29":46,"30":7,"31":36,"32":7,"33":835,"34":52,"35":24,"36":8,"37":2,"38":6,"39":8,"41":12,"42":36,"43":4,"44":16,"45":4,"46":26,"47":38,"48":58,"49":64,"50":2,"51":16,"52":2,"53":8,"54":4,"55":3,"56":10,"57":10,"59":6}}],["lopes",{"1":{"44":1}}],["lohanidamodar",{"1":{"44":1}}],["lohani",{"1":{"44":1}}],["logout",{"1":{"40":2}}],["logs",{"1":{"4":1}}],["look",{"1":{"36":1,"39":1}}],["lorem",{"1":{"33":3}}],["long",{"1":{"20":1,"29":3}}],["lot",{"1":{"20":1}}],["load",{"1":{"14":1}}],["loading",{"1":{"9":1}}],["loaders",{"1":{"28":1}}],["loader",{"0":{"9":1,"28":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":3,"9":11,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":5,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":3,"28":10,"29":3,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["local",{"1":{"54":1}}],["location",{"1":{"17":1,"40":1}}],["located",{"1":{"0":2}}],["lock",{"1":{"8":3,"40":2}}],["lowercase",{"1":{"2":1}}],["layers",{"1":{"44":1}}],["layered",{"1":{"39":1}}],["layout",{"0":{"45":1,"46":1,"47":1,"48":1,"49":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":2,"36":1,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":2,"46":3,"47":2,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["landing",{"1":{"20":1}}],["language",{"1":{"1":1,"38":2,"41":2}}],["larger",{"1":{"41":4}}],["large",{"1":{"2":11,"13":3,"20":5,"22":5,"30":4,"32":4,"36":3,"39":8,"41":5,"46":1,"49":1}}],["labels",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1,"42":1}}],["label",{"0":{"10":1},"1":{"0":1,"1":16,"2":5,"3":1,"4":1,"5":8,"6":5,"7":3,"8":7,"9":2,"10":21,"11":30,"12":1,"13":1,"14":3,"15":5,"16":23,"17":6,"18":2,"19":1,"20":10,"21":7,"22":3,"23":1,"24":2,"25":131,"26":1,"27":1,"28":1,"29":6,"30":3,"31":1,"32":3,"33":37,"34":2,"35":2,"36":1,"37":1,"38":1,"39":1,"40":4,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":4,"48":1,"49":11,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["f02e65",{"1":{"44":2}}],["family",{"1":{"57":3}}],["fallbacks",{"1":{"57":2}}],["facebook",{"1":{"40":4}}],["fast",{"1":{"40":1}}],["failed",{"1":{"9":1,"16":3,"31":6,"34":1}}],["features",{"1":{"35":1,"44":1}}],["few",{"1":{"25":1,"31":1}}],["feedback",{"1":{"1":15,"11":3,"25":2}}],["frontend",{"1":{"44":2}}],["from",{"1":{"2":1,"6":1,"22":5,"25":1,"30":3,"33":1}}],["framework",{"1":{"44":1}}],["friendly",{"1":{"44":1}}],["free",{"1":{"10":6}}],["fux",{"1":{"44":1}}],["fun",{"1":{"44":1}}],["functions",{"1":{"44":1,"50":1}}],["functionality",{"1":{"25":1}}],["function",{"1":{"4":6,"25":9}}],["fully",{"1":{"44":2}}],["full",{"1":{"1":10,"5":2,"6":2,"12":1,"16":2,"17":3,"25":18,"44":1,"53":2,"57":2}}],["fogelito",{"1":{"44":1}}],["fogel",{"1":{"44":1}}],["font",{"1":{"42":3,"57":21}}],["fonts",{"1":{"42":1}}],["football",{"1":{"25":3}}],["footer",{"1":{"11":6}}],["follow",{"1":{"43":1}}],["follows",{"1":{"37":1}}],["following",{"1":{"15":1,"22":1,"24":1,"29":1,"30":1,"32":1,"43":2}}],["folder",{"1":{"12":1,"40":5}}],["focus",{"1":{"10":7,"21":10,"35":1,"55":1}}],["focused",{"1":{"4":1}}],["founder",{"1":{"44":1}}],["foundations",{"0":{"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["four",{"1":{"2":2,"6":1,"8":1,"14":1,"20":1}}],["forward",{"1":{"40":1}}],["foreach",{"1":{"22":2}}],["for",{"1":{"1":15,"2":2,"4":1,"6":1,"10":6,"11":5,"13":1,"14":1,"16":6,"20":2,"21":3,"22":1,"24":1,"25":5,"30":1,"31":1,"32":2,"33":1,"34":7,"36":1,"37":7,"38":1,"39":1,"40":1,"41":2,"42":8,"43":1,"44":6,"52":1,"54":1}}],["forms",{"1":{"25":1}}],["form",{"1":{"1":1,"5":5,"11":17,"25":71,"44":1}}],["flutter",{"1":{"40":4}}],["flag",{"1":{"40":1}}],["flags",{"1":{"10":6}}],["flat",{"1":{"39":1}}],["float",{"1":{"35":1,"36":1}}],["floating",{"1":{"0":1,"39":4}}],["floyd",{"1":{"17":6}}],["flexbox",{"1":{"53":1}}],["flex",{"1":{"0":2,"1":20,"4":1,"6":5,"8":12,"9":7,"10":35,"11":8,"12":13,"17":10,"18":1,"19":4,"21":2,"25":11,"33":23,"44":2,"47":2,"53":31}}],["fit",{"1":{"42":1,"46":1,"49":1}}],["firefox",{"1":{"40":4,"55":1}}],["first",{"1":{"20":1,"21":1,"22":1,"30":1,"32":1,"33":19,"40":2}}],["firstname",{"1":{"4":6}}],["figma",{"1":{"40":4}}],["finger",{"1":{"40":1}}],["find",{"1":{"25":3,"49":2}}],["finished",{"1":{"16":2}}],["filter",{"1":{"40":2}}],["film",{"1":{"40":1}}],["films",{"1":{"3":6}}],["filled",{"1":{"46":1}}],["fill",{"1":{"13":1}}],["filename",{"1":{"33":9}}],["file1",{"1":{"16":6}}],["files",{"1":{"16":1,"17":9,"40":1,"43":1}}],["file",{"0":{"7":1,"17":1},"1":{"0":2,"1":2,"2":3,"3":2,"4":2,"5":2,"6":3,"7":18,"8":3,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":16,"17":70,"18":3,"19":2,"20":2,"21":4,"22":2,"23":3,"24":2,"25":9,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":3,"44":3,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["fixed",{"1":{"54":2}}],["fix",{"1":{"1":1,"25":1}}],["five",{"1":{"1":1,"2":2,"5":1,"11":1,"33":1}}],["fields",{"1":{"20":2,"25":3,"36":1,"55":2}}],["field",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":20,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pxtorem",{"1":{"50":46,"53":50,"54":20,"57":4}}],["python",{"1":{"40":4}}],["phaus",{"1":{"44":1}}],["philipp",{"1":{"44":1}}],["php",{"1":{"40":4}}],["photograph",{"1":{"40":1}}],["phone",{"1":{"40":4}}],["put",{"1":{"41":1}}],["puzzle",{"1":{"40":1}}],["purple",{"1":{"37":1}}],["purpose",{"1":{"1":2,"20":1,"22":1,"30":1,"32":1}}],["plus",{"1":{"20":2,"33":1,"40":3,"47":1}}],["please",{"1":{"11":1,"26":3}}],["playingball",{"1":{"25":3}}],["play",{"1":{"21":1,"40":2}}],["placed",{"1":{"20":1}}],["placeholder",{"1":{"11":4,"25":31,"55":2}}],["placement",{"1":{"6":2,"34":2}}],["plan",{"1":{"10":13}}],["pngs",{"1":{"17":9}}],["png",{"1":{"7":1,"17":6,"33":9}}],["podio",{"1":{"40":4}}],["pound",{"1":{"40":1}}],["popup",{"1":{"15":2,"17":3,"25":3,"35":4}}],["popovers",{"1":{"36":1,"39":2}}],["popover",{"1":{"6":1,"18":1}}],["posts",{"1":{"25":1}}],["possible",{"1":{"15":1,"24":1,"32":1}}],["positions",{"1":{"8":2}}],["position",{"0":{"54":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":2,"54":20,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pointer",{"1":{"10":7,"33":2,"52":3}}],["pixels",{"1":{"50":1}}],["pineappleionic",{"1":{"44":1}}],["pinterest",{"1":{"40":4}}],["pink",{"1":{"2":3,"17":6,"20":1,"37":4,"38":2,"41":1,"43":10,"44":9,"51":3}}],["pie",{"1":{"40":1,"48":1}}],["picture",{"1":{"2":1}}],["people",{"1":{"44":1}}],["pet",{"1":{"25":1}}],["pets",{"1":{"25":1}}],["pencil",{"1":{"2":1,"34":1,"40":2}}],["pending",{"1":{"2":1,"9":1,"16":3,"31":6}}],["perception",{"1":{"42":1}}],["perceived",{"1":{"42":1}}],["percent",{"1":{"4":1,"10":6,"53":7}}],["perform",{"1":{"20":1}}],["performed",{"1":{"1":1}}],["perspective",{"1":{"40":4}}],["personal",{"1":{"10":3}}],["person",{"1":{"2":1}}],["persist",{"1":{"1":1}}],["p",{"1":{"1":40,"3":4,"5":22,"7":2,"8":6,"9":7,"10":20,"11":2,"12":8,"16":6,"17":8,"25":22,"26":2,"27":4,"29":2,"33":28,"35":2,"38":8,"39":4,"41":12,"42":12,"45":2,"52":2,"54":2,"56":10,"57":8,"59":4}}],["prioritize",{"1":{"44":1}}],["priority",{"1":{"39":1}}],["printer",{"1":{"40":1}}],["print",{"1":{"40":1}}],["principal",{"1":{"20":1}}],["primary",{"1":{"20":7,"37":8,"44":1}}],["privacy",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["practice",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"49":1,"55":1}}],["prev",{"1":{"49":5}}],["preview",{"0":{"7":1},"1":{"0":2,"1":21,"2":7,"3":2,"4":3,"5":3,"6":5,"7":17,"8":4,"9":6,"10":3,"11":4,"12":3,"13":4,"14":2,"15":4,"16":3,"17":4,"18":2,"19":3,"20":5,"21":3,"22":4,"23":2,"24":4,"25":16,"26":2,"27":4,"28":3,"29":4,"30":4,"31":2,"32":4,"33":8,"34":3,"35":2,"36":5,"37":1,"38":1,"39":2,"40":1,"41":1,"42":5,"43":1,"44":1,"45":2,"46":2,"47":2,"48":2,"49":2,"50":1,"51":2,"52":1,"53":2,"54":1,"55":2,"56":2,"57":2,"58":1,"59":1}}],["precia",{"1":{"44":1}}],["preferred",{"1":{"44":2}}],["preserve",{"1":{"42":1}}],["presented",{"1":{"50":1}}],["presentation",{"1":{"40":2}}],["present",{"1":{"1":1}}],["press",{"1":{"26":3}}],["pre",{"1":{"4":12}}],["properties",{"1":{"51":2,"52":1,"56":1,"58":1,"59":1}}],["project",{"1":{"43":3}}],["projects",{"1":{"10":6}}],["product",{"1":{"40":1,"42":1,"44":1}}],["products",{"1":{"37":1,"44":2,"50":1,"57":1}}],["processing",{"1":{"31":6,"34":1}}],["process",{"1":{"31":1}}],["pro",{"1":{"10":3}}],["problem",{"1":{"1":1,"53":1}}],["provides",{"1":{"25":2}}],["provide",{"1":{"1":19,"9":21,"11":3,"25":3,"34":2,"35":1,"42":3,"48":1}}],["profiles",{"1":{"18":1}}],["profile",{"0":{"18":1},"1":{"0":1,"1":1,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":2,"18":15,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["progressbar",{"1":{"16":7}}],["progressively",{"1":{"5":16}}],["progress",{"0":{"12":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":2,"12":24,"13":2,"14":1,"15":1,"16":16,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["package",{"1":{"43":2}}],["paypal",{"1":{"40":4}}],["pangea",{"1":{"40":4}}],["panels",{"1":{"4":1}}],["panel",{"0":{"4":1},"1":{"0":1,"1":1,"2":1,"3":2,"4":10,"5":2,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["pause",{"1":{"40":1}}],["paper",{"1":{"40":2}}],["palette",{"1":{"37":3}}],["pair",{"1":{"20":1}}],["pages",{"1":{"20":1,"49":3}}],["page",{"1":{"20":1,"42":1,"49":9}}],["pagination",{"0":{"49":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":19,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["parnasa",{"1":{"44":1}}],["parhi",{"1":{"44":1}}],["parent",{"1":{"39":1}}],["parameters",{"1":{"25":1,"46":2}}],["paragraphs",{"1":{"42":1}}],["paragraph",{"1":{"5":3}}],["part",{"1":{"20":1,"23":3,"36":1,"41":1}}],["partials",{"1":{"38":1}}],["partial",{"1":{"17":1,"35":2,"38":16,"41":13}}],["parts",{"1":{"15":1}}],["passed",{"1":{"25":9}}],["passwords",{"1":{"25":1}}],["password",{"1":{"11":5,"25":7}}],["passion",{"1":{"10":3}}],["paddings",{"1":{"50":1}}],["padding",{"1":{"5":1,"9":7,"10":9,"17":3,"18":1,"25":9,"29":1,"33":4,"41":15,"50":67}}],["patronizing",{"1":{"1":1}}],["h1",{"1":{"42":2}}],["hsl",{"1":{"37":3,"38":4,"51":8,"53":6}}],["hunt",{"1":{"40":1}}],["hustle",{"1":{"33":18}}],["human",{"1":{"1":1}}],["h3",{"1":{"12":8,"42":2}}],["h2",{"1":{"8":6,"25":2,"42":2,"47":2}}],["h5",{"1":{"3":4,"17":6,"42":4}}],["href",{"1":{"3":2,"7":2,"14":4,"25":2,"27":1,"33":3,"34":1,"43":2,"48":6,"49":3}}],["hierarchy",{"1":{"39":1,"42":1}}],["hiding",{"1":{"29":1}}],["hides",{"1":{"56":1,"58":1}}],["hide",{"1":{"5":16,"11":1,"14":1,"25":10,"33":14,"38":1,"49":1,"59":4}}],["hidden",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":3,"15":6,"16":8,"17":11,"18":1,"20":9,"25":30,"27":6,"29":9,"33":40,"34":8,"35":3,"47":4,"48":6,"49":2,"55":1,"57":3,"59":2}}],["high",{"1":{"2":1}}],["https",{"1":{"2":1,"7":1,"33":9,"43":2}}],["html5",{"1":{"40":4}}],["html",{"1":{"0":1,"1":20,"2":5,"3":1,"4":2,"5":2,"6":3,"7":1,"8":2,"9":5,"10":2,"11":3,"12":2,"13":3,"14":1,"15":3,"16":2,"17":3,"18":1,"19":2,"20":4,"21":2,"22":3,"23":1,"24":3,"25":15,"26":1,"27":3,"28":2,"29":3,"30":3,"31":1,"32":3,"33":7,"34":2,"35":1,"36":4,"39":1,"42":5,"43":1,"45":1,"46":1,"47":1,"48":1,"49":1,"51":1,"53":1,"55":1,"56":1,"57":1}}],["hausleiter",{"1":{"44":1}}],["hardiksachan",{"1":{"44":1}}],["hardik",{"1":{"44":1}}],["happy",{"1":{"40":1}}],["happen",{"1":{"5":9}}],["hand",{"1":{"21":1,"40":1}}],["have",{"1":{"2":4,"6":1,"20":2,"22":1,"30":1,"32":1,"33":1,"34":1,"44":1,"52":2}}],["hashtag",{"1":{"40":1}}],["has",{"1":{"1":1,"20":1,"22":1,"30":1,"32":1,"34":2,"38":1}}],["heart",{"1":{"40":1}}],["head",{"1":{"33":2,"43":1}}],["headings",{"1":{"42":5}}],["heading",{"1":{"8":6,"11":4,"17":3,"25":2,"33":30,"34":1,"42":41,"47":1,"57":2}}],["headers",{"1":{"5":16,"42":1}}],["header",{"0":{"47":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":4,"5":1,"6":1,"7":1,"8":19,"9":1,"10":1,"11":20,"12":1,"13":1,"14":1,"15":1,"16":9,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":2,"47":21,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["heroicons",{"1":{"40":1}}],["here",{"1":{"17":12,"25":2,"41":1}}],["heght",{"1":{"33":1}}],["height",{"1":{"10":12,"25":10,"29":1,"33":18,"53":7,"57":11}}],["hello",{"1":{"4":6,"16":18}}],["helps",{"1":{"37":1}}],["helper",{"1":{"17":1,"25":14}}],["help",{"1":{"1":1,"6":1,"34":1,"49":1,"51":1}}],["hold",{"1":{"45":1}}],["hover",{"1":{"15":1,"17":2,"29":1,"35":1}}],["horizontally",{"1":{"33":1}}],["horizontal",{"1":{"14":1,"33":11,"40":3}}],["how",{"1":{"1":1,"25":1,"38":1,"53":1}}],["home",{"0":{"44":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["h4",{"1":{"1":10,"10":6,"11":8,"16":4,"42":4}}],["h6",{"1":{"1":30,"42":6}}],["guide",{"1":{"44":1}}],["guarantees",{"1":{"42":1}}],["google",{"1":{"40":4}}],["globe",{"1":{"40":2}}],["global",{"1":{"38":2}}],["g",{"1":{"34":1,"39":2,"44":1}}],["gmail",{"1":{"25":8}}],["gt",{"1":{"11":1,"33":2,"43":1}}],["gif",{"1":{"44":1}}],["gift",{"1":{"40":1}}],["git",{"1":{"40":6,"44":2}}],["gitlab",{"1":{"2":2,"40":4}}],["github",{"1":{"2":2,"40":4,"44":3}}],["give",{"1":{"1":1}}],["growing",{"1":{"44":1}}],["grouping",{"1":{"27":1}}],["group",{"1":{"2":27,"21":1,"40":1,"45":1,"48":1}}],["groups",{"1":{"2":3}}],["green",{"1":{"2":7,"34":1,"37":2}}],["graphql",{"1":{"40":1}}],["graph",{"1":{"12":4}}],["graphical",{"1":{"2":1}}],["grayscale",{"1":{"40":1}}],["gray",{"1":{"2":1,"10":3,"25":4,"34":1,"40":2,"51":3}}],["grid",{"0":{"8":1,"46":1,"47":1},"1":{"0":3,"1":18,"2":3,"3":3,"4":13,"5":3,"6":5,"7":4,"8":35,"9":4,"10":6,"11":3,"12":3,"13":3,"14":3,"15":11,"16":3,"17":3,"18":3,"19":3,"20":3,"21":3,"22":3,"23":3,"24":3,"25":3,"26":3,"27":3,"28":3,"29":3,"30":3,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":5,"41":3,"42":4,"43":3,"44":3,"45":4,"46":21,"47":26,"48":4,"49":3,"50":3,"51":3,"52":3,"53":7,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["gewenyu99",{"1":{"44":1}}],["ge",{"1":{"44":1}}],["getelementsbyclassname",{"1":{"22":2}}],["get",{"1":{"21":1,"44":1,"46":1}}],["getting",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["germany",{"1":{"10":4}}],["generic",{"1":{"1":1}}],["general",{"1":{"1":1,"34":1,"40":1}}],["generated",{"1":{"1":2}}],["gap",{"1":{"0":2,"1":5,"4":1,"8":10,"9":7,"10":19,"11":8,"12":13,"17":3,"18":1,"19":4,"21":2,"25":5,"33":13,"44":2,"46":3,"47":1,"53":75}}],["i",{"1":{"44":1,"56":15}}],["io",{"1":{"43":5,"44":6}}],["ios",{"1":{"40":4}}],["ionic",{"1":{"40":1}}],["ipad",{"1":{"40":1}}],["ipsum",{"1":{"33":3}}],["illustration",{"1":{"33":9}}],["illustrations",{"1":{"11":1,"21":1}}],["identification",{"1":{"40":1}}],["identity",{"1":{"37":1}}],["ids",{"1":{"23":1}}],["id",{"1":{"11":4,"18":3,"25":2,"33":16,"34":1,"35":7}}],["its",{"1":{"20":1,"22":1,"30":1,"32":1,"53":1}}],["it",{"1":{"2":1,"7":1,"14":1,"20":1,"33":10,"36":1,"42":1,"43":2,"44":1,"45":1}}],["items",{"1":{"8":2,"14":2,"15":1,"22":3,"24":1,"25":2,"27":3,"36":1,"46":1,"53":4}}],["item",{"0":{"8":1},"1":{"0":1,"1":1,"2":21,"3":6,"4":1,"5":24,"6":67,"7":2,"8":28,"9":2,"10":3,"11":3,"12":1,"13":39,"14":7,"15":9,"16":9,"17":1,"18":1,"19":1,"20":14,"21":1,"22":2,"23":1,"24":1,"25":43,"26":1,"27":41,"28":1,"29":1,"30":5,"31":1,"32":4,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":7,"47":3,"48":24,"49":9,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["important",{"1":{"50":48,"53":7,"54":1,"56":5,"57":9,"59":8}}],["import",{"1":{"43":2,"44":1}}],["importing",{"1":{"43":1}}],["imply",{"1":{"22":1}}],["implementation",{"1":{"38":1,"41":1}}],["implement",{"1":{"22":3}}],["img",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["images",{"1":{"21":1}}],["image",{"1":{"1":5,"2":2,"7":6,"16":8,"17":5,"33":36}}],["if",{"1":{"1":1,"5":9,"6":2,"14":3,"21":1,"22":1,"30":1,"32":2,"33":1,"34":2,"40":2,"42":1}}],["icon",{"1":{"1":50,"2":10,"4":2,"5":12,"6":1,"7":2,"8":13,"9":5,"10":4,"11":12,"12":4,"14":2,"15":11,"16":16,"17":13,"18":1,"20":15,"25":29,"27":7,"29":5,"31":9,"33":62,"34":11,"35":3,"36":1,"40":615,"47":4,"48":6,"49":4,"51":8,"57":2}}],["icons",{"0":{"40":1},"1":{"0":1,"1":1,"2":3,"3":1,"4":1,"5":1,"6":4,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":1,"17":1,"18":1,"19":1,"20":5,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":5,"35":1,"36":1,"37":1,"38":1,"39":2,"40":10,"41":2,"42":1,"43":5,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["isn",{"1":{"15":1,"22":1,"30":1,"32":1}}],["is",{"1":{"0":6,"1":169,"2":52,"4":3,"6":23,"7":5,"8":2,"9":7,"10":16,"11":30,"12":2,"13":4,"14":7,"15":8,"16":6,"17":23,"20":23,"21":6,"22":9,"24":7,"25":56,"27":1,"28":2,"29":11,"30":4,"31":10,"32":4,"33":97,"34":11,"35":4,"36":1,"37":3,"38":1,"39":2,"40":1,"41":1,"42":4,"43":1,"44":8,"45":1,"47":3,"48":1,"49":12,"50":1,"53":1,"55":1,"56":10}}],["infinite",{"1":{"41":2}}],["informative",{"1":{"34":4,"37":1}}],["information",{"1":{"1":4,"5":16,"11":1,"25":6,"34":4,"35":1,"37":6,"42":1,"49":1}}],["inform",{"1":{"1":1,"34":1}}],["info",{"1":{"0":1,"1":26,"17":11,"18":4,"24":3,"25":7,"34":8,"35":2,"37":1,"40":1,"51":3}}],["inbox",{"1":{"40":2}}],["invalid",{"1":{"25":1}}],["installing",{"1":{"43":1}}],["install",{"1":{"43":3,"44":1}}],["instagram",{"1":{"40":4}}],["instructions",{"1":{"25":1}}],["inset",{"1":{"25":13,"54":77}}],["inside",{"1":{"4":1,"20":1,"21":1,"24":1,"33":1,"38":1}}],["integrate",{"1":{"44":1}}],["internal",{"1":{"44":1}}],["interfaces",{"1":{"43":1,"44":2,"45":1}}],["interface",{"1":{"35":1}}],["interact",{"1":{"25":2,"29":1}}],["interacts",{"1":{"20":1}}],["interacting",{"1":{"11":1}}],["interactive",{"1":{"8":9,"18":2,"29":19,"33":9,"34":12}}],["into",{"1":{"24":1,"25":3,"40":1,"43":1,"45":1}}],["index",{"1":{"54":13}}],["independently",{"1":{"32":1}}],["indeterminate",{"1":{"22":12}}],["indication",{"1":{"25":2}}],["indicating",{"1":{"24":1}}],["indicates",{"1":{"31":1,"39":1}}],["indicate",{"1":{"23":1,"28":1,"37":1}}],["india",{"1":{"10":4}}],["initial",{"1":{"57":2}}],["initialize",{"1":{"20":1}}],["initials",{"1":{"2":2}}],["inner",{"1":{"15":1,"33":1}}],["innovative",{"1":{"3":6}}],["including",{"1":{"53":1}}],["include",{"1":{"11":1,"21":2,"43":3,"57":5}}],["incoming",{"1":{"40":1}}],["incorrect",{"1":{"25":2}}],["incorporate",{"1":{"24":1}}],["inconsistent",{"1":{"2":1}}],["increase",{"1":{"2":1,"20":3}}],["in",{"1":{"1":6,"2":5,"5":1,"6":4,"7":3,"11":1,"14":3,"15":1,"20":10,"21":3,"22":3,"24":1,"25":8,"27":3,"28":1,"29":1,"30":3,"32":4,"33":5,"34":4,"35":1,"36":3,"37":5,"38":2,"39":2,"40":7,"41":5,"42":1,"43":3,"44":2,"46":2,"47":7,"48":1,"49":1,"50":1,"51":1,"53":1}}],["input",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":10,"11":6,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":3,"21":3,"22":13,"23":1,"24":2,"25":81,"26":2,"27":1,"28":1,"29":1,"30":8,"31":1,"32":8,"33":3,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":10,"56":1,"57":1,"58":1,"59":1}}],["inputs",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":4,"56":2,"57":1,"58":1,"59":1}}],["inline",{"0":{"9":1,"23":1,"24":1},"1":{"0":4,"1":7,"2":3,"3":3,"4":4,"5":4,"6":13,"7":3,"8":4,"9":5,"10":13,"11":6,"12":3,"13":3,"14":3,"15":3,"16":4,"17":18,"18":4,"19":3,"20":3,"21":3,"22":4,"23":11,"24":18,"25":17,"26":3,"27":3,"28":3,"29":4,"30":3,"31":3,"32":3,"33":14,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":7,"43":3,"44":5,"45":3,"46":3,"47":4,"48":3,"49":3,"50":57,"51":3,"52":3,"53":46,"54":42,"55":3,"56":3,"57":3,"58":3,"59":3}}],["dynamic",{"1":{"46":2}}],["during",{"1":{"42":1,"50":1}}],["duration",{"1":{"33":12}}],["duplicate",{"1":{"8":3,"11":1,"18":1,"20":1,"25":1,"29":4,"33":9,"34":4,"35":2,"40":2}}],["d",{"1":{"25":1}}],["drph4nt0m",{"1":{"44":1}}],["dribbble",{"1":{"40":4}}],["drag",{"1":{"17":9}}],["draw",{"1":{"11":1}}],["dropbox",{"1":{"40":4}}],["dropdown",{"1":{"25":3}}],["drop",{"0":{"6":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":2,"6":79,"7":2,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":26,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":15,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["doesn",{"1":{"42":1,"49":1}}],["dotnet",{"1":{"40":4}}],["dots",{"1":{"33":11,"40":3}}],["docker",{"1":{"40":4}}],["documentation",{"1":{"11":1,"21":2,"44":1}}],["document",{"1":{"7":1,"16":1,"17":2,"22":2,"33":12,"40":8,"48":1}}],["documents",{"1":{"0":3,"25":3}}],["dowm",{"1":{"40":1}}],["download",{"1":{"20":1,"40":4}}],["down",{"1":{"5":6,"16":2,"25":9,"40":7}}],["dollar",{"1":{"40":1}}],["double",{"1":{"40":4}}],["doing",{"1":{"24":1}}],["don",{"1":{"1":1,"2":2,"6":1,"20":1,"22":1,"30":1,"32":1,"34":4,"36":1,"39":1,"40":1,"42":1,"49":1}}],["done",{"1":{"1":1}}],["do",{"1":{"1":1,"2":4,"6":2,"20":1,"22":2,"30":2,"32":2,"34":2,"36":2,"39":2,"40":3,"42":2,"44":1,"49":1}}],["damodar",{"1":{"44":1}}],["dart",{"1":{"40":4}}],["dark",{"0":{"38":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":3,"38":15,"39":2,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":6,"59":1}}],["dailymotion",{"1":{"40":4}}],["date",{"1":{"33":3}}],["databases",{"1":{"47":3}}],["database",{"1":{"40":1,"44":1,"47":3}}],["data",{"1":{"4":3,"25":1,"33":83,"44":2,"49":1}}],["dashed",{"1":{"17":3,"21":4}}],["danger",{"1":{"1":6,"9":1,"12":2,"16":1,"17":1,"25":1,"34":3,"37":7,"51":3}}],["decoration",{"1":{"57":1}}],["declared",{"1":{"38":1}}],["devrel",{"1":{"44":1}}],["develop",{"1":{"44":1}}],["developer",{"1":{"44":6}}],["dev",{"1":{"44":2}}],["device",{"1":{"40":3,"41":1}}],["devices",{"1":{"14":1}}],["determine",{"1":{"42":1}}],["details",{"1":{"5":12,"18":1,"34":1}}],["deno",{"1":{"40":4}}],["demo",{"1":{"21":1}}],["deletion",{"1":{"11":1}}],["delete",{"1":{"0":3,"21":1,"25":2,"33":7,"44":2}}],["deselect",{"1":{"33":1}}],["designer",{"1":{"44":1}}],["designed",{"1":{"36":2,"44":1}}],["design",{"1":{"20":1,"37":3,"38":2,"41":2,"43":6,"44":13}}],["desired",{"1":{"5":16}}],["desktops",{"1":{"56":3}}],["desktop",{"1":{"17":6,"33":36,"40":1,"47":1,"49":1,"53":1,"56":7}}],["descending",{"1":{"40":1}}],["desc",{"1":{"3":3}}],["description",{"1":{"1":46,"3":1,"5":9,"18":3}}],["definition",{"1":{"53":1}}],["defines",{"1":{"46":1}}],["define",{"1":{"3":2,"47":5,"50":1,"54":2,"57":1}}],["default",{"1":{"1":31,"2":2,"17":1,"20":2,"21":1,"25":4,"31":1,"33":2,"34":4,"38":1,"44":1,"54":1}}],["depending",{"1":{"1":1,"34":2,"56":1,"58":1}}],["difference",{"1":{"55":1}}],["differentiate",{"1":{"34":1}}],["different",{"1":{"2":4,"25":1,"31":1,"34":1,"36":1,"41":1,"48":1}}],["dittmann",{"1":{"44":1}}],["direction",{"1":{"53":3,"54":5,"57":2}}],["directions",{"1":{"33":6}}],["directly",{"1":{"42":1}}],["directory",{"1":{"40":1,"43":1}}],["directors",{"1":{"33":6}}],["dialogue",{"1":{"25":1}}],["dialog6",{"1":{"11":1}}],["dialog5",{"1":{"11":1}}],["dialog4",{"1":{"11":1}}],["dialog",{"1":{"11":14}}],["disqus",{"1":{"40":4}}],["distance",{"1":{"39":1}}],["distract",{"1":{"34":2}}],["discord",{"1":{"40":4,"44":3}}],["discoverable",{"1":{"25":1}}],["disclose",{"1":{"5":15}}],["disabling",{"1":{"22":1}}],["disable",{"1":{"15":1,"22":1,"30":1,"32":1}}],["disabled",{"1":{"4":1,"8":13,"10":5,"13":3,"14":1,"15":4,"22":5,"24":2,"25":9,"30":4,"32":4,"34":2,"37":1,"49":2,"51":3}}],["dismissed",{"1":{"1":1,"11":1}}],["displays",{"1":{"16":2,"25":1,"26":1}}],["displayed",{"1":{"2":1,"15":1,"29":2,"53":1}}],["display",{"0":{"53":1},"1":{"0":1,"1":2,"2":3,"3":1,"4":2,"5":18,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":2,"16":1,"17":4,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":2,"53":13,"54":2,"55":1,"56":6,"57":4,"58":5,"59":2}}],["divides",{"1":{"45":1}}],["div",{"1":{"0":4,"1":120,"2":70,"3":4,"4":14,"5":38,"6":46,"7":10,"8":56,"9":20,"10":24,"11":40,"12":24,"14":2,"15":6,"16":36,"17":30,"18":8,"19":12,"25":76,"28":4,"29":16,"31":12,"33":136,"34":12,"36":8,"37":1,"39":4,"44":6,"45":2,"46":12,"47":6,"48":6,"50":2,"51":16,"53":8,"57":2,"59":2}}],["tglide",{"1":{"44":1}}],["tumbler",{"1":{"40":2}}],["tumbir",{"1":{"40":2}}],["turning",{"1":{"32":1}}],["twitter",{"1":{"40":4}}],["twitch",{"1":{"40":4}}],["twilio",{"1":{"40":1}}],["two",{"1":{"1":1,"2":1,"5":3,"13":1,"15":1,"20":1,"21":1,"25":5,"27":1,"29":1,"32":1,"33":1,"35":1,"39":2,"42":2,"55":1}}],["td",{"1":{"33":152,"44":4}}],["tbody",{"1":{"33":20}}],["try",{"1":{"44":1}}],["truth",{"1":{"44":1}}],["truck",{"1":{"40":1}}],["true",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":2,"15":6,"16":8,"17":11,"18":1,"20":9,"22":4,"25":30,"27":6,"29":5,"30":3,"32":3,"33":37,"34":8,"35":3,"47":4,"48":6,"49":2}}],["trending",{"1":{"40":2}}],["tr",{"1":{"33":42}}],["tradeshift",{"1":{"40":4}}],["transform",{"1":{"57":1}}],["translated",{"1":{"40":1,"50":1,"54":1}}],["translate",{"1":{"40":1}}],["transparent",{"1":{"11":1,"40":1}}],["trailing",{"1":{"25":1}}],["trash",{"1":{"20":1,"33":7,"40":1}}],["trim",{"1":{"3":2,"9":7,"17":2,"25":5,"29":1,"33":1,"47":1,"57":6}}],["t",{"1":{"1":1,"2":2,"6":2,"15":1,"20":1,"22":2,"25":5,"30":2,"32":2,"34":4,"36":1,"39":1,"40":1,"42":2,"49":2}}],["tiktok",{"1":{"40":4}}],["ticket",{"1":{"40":1}}],["time",{"1":{"33":22}}],["times",{"1":{"3":6}}],["tips",{"1":{"1":1,"2":1,"20":1,"34":1,"36":1,"44":1,"49":1}}],["title",{"1":{"1":36,"3":8,"5":3,"11":18,"16":4,"17":5,"33":85,"44":2}}],["telegram",{"1":{"40":4}}],["telesign",{"1":{"40":1}}],["technology",{"1":{"40":1}}],["terminal",{"1":{"40":1}}],["terms",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["template",{"1":{"40":1,"53":1}}],["team",{"1":{"2":1,"18":1,"44":1}}],["textfield",{"1":{"55":1}}],["texts",{"1":{"42":1}}],["textmagic",{"1":{"40":1}}],["textareas",{"1":{"29":1}}],["textarea",{"1":{"25":6,"29":2}}],["text",{"0":{"57":1},"1":{"0":6,"1":92,"2":3,"3":3,"4":4,"5":15,"6":57,"7":1,"8":15,"9":13,"10":14,"11":32,"12":19,"13":10,"14":5,"15":1,"16":9,"17":14,"18":6,"19":1,"20":30,"21":11,"22":2,"23":3,"24":14,"25":108,"26":2,"27":12,"28":1,"29":37,"30":2,"31":7,"32":2,"33":123,"34":12,"35":5,"36":1,"37":7,"38":1,"39":3,"40":5,"41":1,"42":35,"43":1,"44":1,"45":2,"46":1,"47":3,"48":7,"49":18,"50":1,"51":26,"52":3,"53":1,"54":2,"55":1,"56":2,"57":25,"58":2,"59":4}}],["typically",{"1":{"2":1,"25":1,"34":2}}],["typical",{"1":{"1":15}}],["typescript",{"1":{"40":1}}],["types",{"1":{"1":2,"2":2,"7":2,"20":2,"25":3,"27":2,"39":2}}],["type",{"1":{"0":1,"1":8,"2":6,"3":1,"4":1,"5":8,"6":6,"7":2,"8":2,"10":9,"11":9,"13":3,"14":2,"15":3,"16":3,"17":4,"18":2,"19":1,"20":3,"21":5,"22":14,"23":1,"24":2,"25":48,"26":1,"27":2,"28":1,"29":2,"30":9,"31":3,"32":10,"33":27,"34":3,"35":2,"37":1,"39":1,"45":1,"46":1,"47":5,"48":1,"49":1,"55":2}}],["typography",{"0":{"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":2,"42":5,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["thomas",{"1":{"44":1}}],["those",{"1":{"44":1}}],["thumb",{"1":{"40":2}}],["thumbnail",{"1":{"7":1}}],["th",{"1":{"33":58}}],["through",{"1":{"49":1,"51":1}}],["throughout",{"1":{"33":1,"36":1}}],["three",{"1":{"2":1,"5":3,"6":1,"11":1,"18":1,"22":1,"30":1,"32":1,"33":1,"41":1,"46":1}}],["think",{"1":{"6":1}}],["this",{"1":{"1":50,"5":9,"14":1,"21":2,"25":22,"26":1,"29":4,"34":6,"37":1,"38":1,"42":1,"52":2}}],["than",{"1":{"2":1,"14":1,"25":1,"40":1,"41":1}}],["that",{"1":{"0":1,"1":2,"2":2,"5":16,"11":2,"14":1,"15":2,"20":1,"23":1,"25":15,"28":1,"33":1,"34":3,"36":2,"39":2,"42":2,"46":1,"49":1}}],["these",{"1":{"34":1,"44":1}}],["their",{"1":{"34":2,"39":1}}],["thead",{"1":{"33":55}}],["there",{"1":{"2":1,"7":1,"8":1,"14":1,"20":1,"22":2,"25":5,"30":2,"31":1,"32":2,"40":2,"41":1,"42":1,"44":1}}],["them",{"1":{"1":1,"36":1,"40":2,"41":1}}],["theme",{"0":{"38":1,"58":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":3,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":17,"39":3,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":3,"58":6,"59":3}}],["they",{"1":{"1":3,"5":16,"6":2,"11":1,"20":1,"22":1,"25":1,"32":1,"33":1,"40":1,"49":1}}],["the",{"1":{"0":8,"1":110,"2":4,"3":6,"4":1,"5":1,"6":8,"7":1,"8":1,"11":7,"14":9,"15":3,"16":2,"19":1,"20":8,"21":5,"22":8,"24":4,"25":21,"27":1,"29":8,"30":6,"31":1,"32":5,"33":10,"34":16,"35":8,"36":6,"37":5,"38":2,"39":6,"40":10,"41":4,"42":9,"43":8,"44":5,"46":2,"50":7,"51":1,"53":24,"54":11,"55":4,"56":2,"57":17,"58":1,"59":1}}],["torstendittmann",{"1":{"44":1}}],["torsten",{"1":{"44":1}}],["too",{"1":{"36":1}}],["tooling",{"1":{"44":1}}],["tool",{"1":{"0":1}}],["tooltips",{"1":{"35":2,"36":1}}],["tooltip",{"0":{"35":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":9,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":10,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":19,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["totally",{"1":{"10":3}}],["to",{"1":{"1":90,"2":4,"4":5,"5":32,"6":3,"8":2,"10":3,"11":5,"13":3,"14":3,"15":2,"17":11,"19":1,"20":7,"21":7,"22":10,"23":1,"25":27,"26":3,"28":3,"29":3,"30":7,"32":8,"33":4,"34":17,"35":1,"36":6,"37":2,"38":5,"39":3,"40":6,"41":2,"42":7,"43":3,"44":3,"45":1,"48":1,"49":4,"50":1,"51":2,"53":1,"55":1}}],["top",{"1":{"0":1,"4":3,"8":2,"11":1,"12":4,"19":3,"29":2,"33":1,"54":3}}],["toggle",{"0":{"15":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":34,"16":4,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":7,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tax",{"1":{"40":1}}],["tappable",{"1":{"34":1}}],["take",{"1":{"22":1,"54":1}}],["taken",{"1":{"11":1}}],["tall",{"1":{"20":1}}],["task",{"1":{"1":2,"34":3}}],["tab",{"1":{"14":1,"21":1,"33":1}}],["tabs",{"0":{"13":1,"14":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":3,"13":35,"14":29,"15":3,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["tablets",{"1":{"56":9}}],["tablet",{"1":{"56":2}}],["tables",{"1":{"33":5,"36":1,"39":2}}],["table",{"0":{"33":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":211,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tags",{"1":{"11":1,"21":1,"25":6,"34":10,"36":1,"42":1}}],["tag",{"0":{"24":1,"34":1},"1":{"0":3,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":6,"9":2,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":4,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":3,"24":16,"25":7,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":18,"34":23,"35":5,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":3,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["rtl",{"1":{"57":2}}],["richards",{"1":{"44":1}}],["right",{"1":{"8":2,"14":3,"20":1,"27":3,"40":7,"49":1,"54":1,"57":2}}],["rights",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rr",{"1":{"44":4}}],["rss",{"1":{"40":1}}],["run",{"1":{"43":1}}],["runtime",{"1":{"25":9}}],["rule",{"1":{"41":1}}],["ruby",{"1":{"40":4}}],["rupee",{"1":{"40":1}}],["ronald",{"1":{"44":2}}],["rowgroup",{"1":{"33":1}}],["rowheader",{"1":{"33":1}}],["rows",{"1":{"33":3,"46":1}}],["row",{"1":{"33":34,"53":33}}],["rounded",{"1":{"19":1,"20":1,"36":1}}],["role",{"1":{"15":2,"16":7,"17":3,"25":7,"33":27,"35":3}}],["rana",{"1":{"44":1}}],["range",{"1":{"41":1}}],["ranges",{"1":{"41":1}}],["rahul",{"1":{"44":1}}],["raw",{"1":{"4":3}}],["radio",{"0":{"30":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":10,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":22,"31":2,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["radius",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":19,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":7,"18":2,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":24,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rem",{"1":{"50":1}}],["remove",{"1":{"17":2,"20":1,"25":2,"33":2,"40":3,"55":2}}],["rel",{"1":{"43":2}}],["relationship",{"1":{"40":1}}],["relation",{"1":{"40":1}}],["relative",{"1":{"39":1,"54":2}}],["related",{"1":{"1":1,"21":1,"22":1,"24":1,"27":1}}],["reusable",{"1":{"43":1,"44":2}}],["regular",{"1":{"42":6}}],["region",{"1":{"10":1}}],["react",{"1":{"40":4}}],["ready",{"1":{"31":3}}],["read",{"1":{"25":1,"44":3}}],["readonly",{"1":{"25":3}}],["readability",{"1":{"20":2}}],["readable",{"1":{"1":1}}],["rewind",{"1":{"40":1}}],["replay",{"1":{"40":1}}],["report",{"1":{"40":1}}],["represent",{"1":{"37":1}}],["representation",{"1":{"2":1,"7":2,"10":1,"40":1}}],["representing",{"1":{"0":1,"2":1,"4":1,"5":1,"6":1,"7":1,"8":1,"11":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"23":1,"24":1,"26":1,"27":1,"28":1,"29":1,"31":1,"32":1,"33":1,"34":1,"35":1,"45":1,"46":1,"48":1,"49":1}}],["refund",{"1":{"40":1}}],["refresh",{"1":{"33":14,"40":1}}],["refer",{"1":{"11":1,"30":1,"32":1}}],["reveal",{"1":{"5":16}}],["receipt",{"1":{"40":2}}],["recently",{"1":{"1":1}}],["recognition",{"1":{"6":1,"20":2}}],["recognizable",{"1":{"2":2}}],["recommended",{"1":{"14":1}}],["recommend",{"1":{"6":1,"20":1,"22":1,"34":2,"39":1,"40":1,"42":1}}],["reddit",{"1":{"40":4}}],["reduces",{"1":{"14":1}}],["red",{"1":{"2":3,"34":1,"37":2}}],["required",{"1":{"1":1,"25":3,"34":1}}],["resolutions",{"1":{"41":2}}],["reserved",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["resets",{"1":{"44":1}}],["reset",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":7,"56":2,"57":1,"58":1,"59":1}}],["responsive",{"0":{"41":1,"56":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":3,"41":7,"42":3,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":3,"56":5,"57":3,"58":2,"59":2}}],["bg",{"1":{"38":6}}],["but",{"1":{"40":1,"50":1}}],["buttons",{"1":{"1":20,"11":3,"20":15,"21":2,"24":3,"25":20,"26":3,"29":9,"30":5,"32":1,"33":2,"36":2,"55":2}}],["button",{"0":{"15":1,"20":1,"30":1},"1":{"0":9,"1":183,"2":3,"3":7,"4":9,"5":18,"6":95,"7":3,"8":5,"9":45,"10":5,"11":78,"12":3,"13":32,"14":18,"15":40,"16":34,"17":28,"18":6,"19":4,"20":102,"21":4,"22":3,"23":3,"24":28,"25":92,"26":3,"27":8,"28":3,"29":22,"30":8,"31":4,"32":3,"33":109,"34":7,"35":9,"36":3,"37":3,"38":3,"39":3,"40":4,"41":3,"42":3,"43":3,"44":4,"45":3,"46":3,"47":23,"48":9,"49":27,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["build",{"1":{"44":3}}],["building",{"1":{"40":1,"43":2,"44":4}}],["built",{"1":{"38":1}}],["bulb",{"1":{"40":1}}],["bradley",{"1":{"44":1}}],["branch",{"1":{"40":1}}],["brandon",{"1":{"44":1}}],["brand",{"1":{"37":3}}],["briefcase",{"1":{"40":1}}],["browser",{"1":{"33":1,"44":1,"57":2}}],["breaks",{"1":{"57":1}}],["break3open",{"1":{"41":1}}],["break2open",{"1":{"41":1}}],["break2",{"1":{"41":1}}],["break1",{"1":{"41":1}}],["breakpoints",{"1":{"41":3}}],["break",{"1":{"29":2,"33":9,"49":1,"57":7}}],["br",{"1":{"15":1,"22":1,"25":40,"55":1}}],["bishwajeet",{"1":{"44":1}}],["bitly",{"1":{"40":4}}],["bitbucket",{"1":{"2":2,"40":5}}],["bigger",{"1":{"36":1}}],["big",{"1":{"11":4,"13":1,"20":2,"47":1}}],["b",{"1":{"10":6}}],["blurs",{"1":{"39":1}}],["blue",{"1":{"2":7,"24":1,"34":1,"37":2}}],["blog",{"1":{"25":1}}],["block",{"1":{"3":2,"4":1,"5":6,"6":11,"8":6,"10":9,"16":3,"17":1,"25":21,"26":1,"27":2,"29":1,"33":2,"35":1,"39":2,"45":1,"50":67,"53":19,"54":38,"57":2,"58":2}}],["basis",{"1":{"53":15}}],["baseball",{"1":{"25":3}}],["baseline",{"1":{"8":3,"12":8,"25":2,"53":2}}],["based",{"1":{"1":2,"38":1,"51":1}}],["bačo",{"1":{"44":1}}],["bag",{"1":{"40":1}}],["bangladesh",{"1":{"40":1}}],["ban",{"1":{"40":1}}],["bandwidth",{"1":{"12":6}}],["badge",{"1":{"40":1}}],["backspace",{"1":{"40":1}}],["background",{"1":{"37":1,"38":2}}],["ball",{"1":{"25":4}}],["bar",{"0":{"0":1,"12":1},"1":{"0":17,"1":3,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":3,"12":27,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["by",{"1":{"1":1,"8":1,"14":1,"19":1,"20":3,"24":1,"33":1,"39":1,"41":1,"43":1,"53":1,"54":1,"59":1}}],["behance",{"1":{"40":4}}],["behavior",{"1":{"33":1}}],["behave",{"1":{"13":1,"47":1}}],["beaker",{"1":{"40":1}}],["beneath",{"1":{"39":1}}],["being",{"1":{"38":1,"50":1}}],["better",{"1":{"44":1}}],["beta",{"1":{"34":3}}],["between",{"1":{"11":4,"12":8,"13":2,"14":1,"15":1,"22":1,"30":1,"32":2,"34":1,"39":4,"40":2,"41":1,"53":3,"55":1}}],["begin",{"1":{"27":2}}],["bessiecooper",{"1":{"25":7}}],["bessie",{"1":{"25":4}}],["best",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"44":1,"49":1,"55":1}}],["before",{"1":{"11":1}}],["bell",{"1":{"10":1,"40":1,"48":1}}],["below",{"1":{"6":1,"15":1,"25":1,"35":1,"37":1,"39":1,"40":1,"41":1,"43":1,"55":1,"59":1}}],["been",{"1":{"1":1,"34":1,"44":1}}],["be",{"1":{"1":4,"2":3,"11":2,"14":3,"20":2,"21":2,"22":2,"23":2,"25":11,"29":2,"30":3,"32":3,"33":2,"34":4,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"42":3,"43":1,"46":1,"54":1}}],["boards",{"1":{"40":1,"47":1}}],["bookmark",{"1":{"40":2}}],["book",{"1":{"40":1}}],["bolt",{"1":{"10":3,"12":1,"40":1}}],["bold",{"1":{"10":3,"12":4,"25":1,"42":2,"57":5}}],["bottom",{"1":{"8":2,"11":1,"15":2,"19":3,"35":3,"48":1,"54":1}}],["both",{"1":{"1":1,"15":1,"37":1}}],["body",{"1":{"1":1,"10":3,"12":4,"17":3,"25":1,"33":1,"42":25,"58":1}}],["boxes",{"1":{"9":2,"16":1,"17":1,"19":6}}],["box",{"0":{"16":1,"17":1,"19":1,"46":1,"50":1},"1":{"0":5,"1":15,"2":5,"3":5,"4":5,"5":5,"6":7,"7":5,"8":7,"9":19,"10":6,"11":5,"12":5,"13":5,"14":5,"15":6,"16":46,"17":45,"18":6,"19":30,"20":6,"21":5,"22":5,"23":5,"24":5,"25":5,"26":8,"27":5,"28":5,"29":5,"30":5,"31":5,"32":5,"33":5,"34":5,"35":5,"36":5,"37":5,"38":5,"39":7,"40":9,"41":5,"42":6,"43":5,"44":5,"45":6,"46":11,"47":6,"48":5,"49":6,"50":9,"51":6,"52":5,"53":11,"54":5,"55":5,"56":5,"57":7,"58":5,"59":6}}],["borders",{"1":{"21":3,"50":1}}],["border",{"0":{"36":1},"1":{"0":1,"1":1,"2":5,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":3,"10":19,"11":3,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":2,"19":3,"20":1,"21":3,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":22,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":13,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["slack",{"1":{"40":4}}],["skype",{"1":{"40":4}}],["svelte",{"1":{"40":1}}],["svg",{"1":{"10":6,"25":2,"40":1}}],["swift",{"1":{"40":4}}],["switches",{"1":{"22":1,"32":7,"36":1}}],["switch",{"0":{"32":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":3,"14":2,"15":2,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":2,"32":15,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["swatch",{"1":{"40":1}}],["square",{"1":{"40":1}}],["symbol",{"1":{"40":1}}],["system",{"1":{"1":2,"34":1,"37":2,"42":1,"43":1,"44":3,"51":1}}],["sm",{"1":{"40":6}}],["small",{"1":{"1":10,"2":18,"8":1,"10":19,"11":10,"22":5,"25":6,"28":2,"30":4,"32":4,"34":1,"36":7,"39":7,"41":9,"46":3,"47":6,"57":12}}],["same",{"1":{"50":6,"53":23,"54":10,"57":17}}],["sachan",{"1":{"44":1}}],["salesforce",{"1":{"40":4}}],["safari",{"1":{"40":4,"55":1}}],["safe",{"1":{"8":3}}],["save",{"1":{"40":2}}],["sad",{"1":{"40":1}}],["sass",{"1":{"38":3,"41":2}}],["sandler",{"1":{"33":18}}],["solve",{"1":{"53":1}}],["solid",{"1":{"21":2,"53":6}}],["software",{"1":{"44":9}}],["soften",{"1":{"36":2}}],["source",{"1":{"43":1,"44":6}}],["social",{"1":{"40":1}}],["sort",{"1":{"40":2}}],["sorry",{"1":{"25":3}}],["so",{"1":{"20":1,"22":1,"30":1,"32":1,"34":2}}],["sometimes",{"1":{"25":1}}],["something",{"1":{"1":1,"21":1,"28":1}}],["some",{"1":{"1":45,"21":6,"24":1,"41":1,"59":2}}],["spotify",{"1":{"40":4}}],["spin",{"1":{"40":1}}],["speakerphone",{"1":{"40":1}}],["special",{"1":{"21":1,"37":1,"41":1}}],["specific",{"1":{"16":1,"17":1,"20":1,"36":1,"37":1}}],["sparkles",{"1":{"40":1}}],["spacing",{"1":{"19":1,"53":1}}],["space",{"1":{"11":4,"12":8,"14":2,"22":2,"30":1,"32":1,"40":3,"53":3,"57":5}}],["span",{"1":{"0":14,"1":150,"2":10,"3":12,"4":8,"5":36,"6":48,"7":4,"8":42,"9":38,"10":10,"11":34,"12":32,"13":18,"14":12,"15":16,"16":42,"17":60,"18":18,"20":50,"21":4,"24":32,"25":134,"27":30,"29":18,"31":24,"33":290,"34":34,"35":16,"44":2,"47":14,"48":24,"49":28}}],["snippets",{"1":{"13":1,"23":2,"37":1,"42":1}}],["schofield",{"1":{"44":1}}],["scissors",{"1":{"40":1}}],["scss",{"1":{"38":5,"41":6,"50":2,"53":1,"54":1,"57":1}}],["scannable",{"1":{"45":1}}],["scanning",{"1":{"34":2,"42":1}}],["scale",{"1":{"10":3,"40":3,"42":1}}],["scenarios",{"1":{"14":1}}],["script",{"1":{"22":4}}],["scrim",{"1":{"11":1}}],["screen",{"1":{"14":1,"20":1,"33":1,"41":5,"46":3,"47":5,"53":1,"56":1}}],["screens",{"1":{"8":1,"10":1,"41":15,"46":4,"47":2}}],["scrolling",{"1":{"14":1,"33":1}}],["scroll",{"1":{"4":3,"14":7,"33":9}}],["shimonewman",{"1":{"44":1}}],["shimon",{"1":{"44":1}}],["shield",{"1":{"8":3,"40":2}}],["shmuel",{"1":{"44":1}}],["shechter",{"1":{"44":1}}],["share",{"1":{"40":1}}],["sharp",{"1":{"36":1}}],["shades",{"1":{"37":2}}],["shadows",{"1":{"39":3}}],["shadow",{"1":{"17":3,"39":14}}],["shrink",{"1":{"17":2,"25":2,"53":3}}],["shopping",{"1":{"40":2}}],["shortcuts",{"1":{"26":2}}],["short",{"1":{"20":1,"34":2}}],["shows",{"1":{"18":1,"55":1,"56":1,"58":1}}],["showmodal",{"1":{"11":1}}],["shown",{"1":{"2":1,"15":1,"40":1,"41":1}}],["show",{"1":{"1":1,"11":4,"14":2,"21":1,"25":4,"29":1,"33":2,"38":1,"39":2,"49":2}}],["should",{"1":{"1":2,"14":4,"20":1,"21":1,"22":3,"25":2,"30":3,"32":3,"33":3,"39":1,"40":2}}],["sun",{"1":{"40":1}}],["surface",{"1":{"39":2}}],["surfaces",{"1":{"39":1}}],["suresh",{"1":{"44":1}}],["sure",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1}}],["support",{"1":{"38":1,"40":1,"42":1,"44":2}}],["such",{"1":{"20":1,"36":4,"37":1,"39":2}}],["successfully",{"1":{"1":1,"34":1}}],["success",{"1":{"1":6,"9":3,"16":1,"25":6,"34":6,"37":8,"51":3}}],["subtle",{"1":{"42":1}}],["subset",{"1":{"40":1}}],["sub",{"1":{"8":9}}],["subheading",{"1":{"5":9}}],["summary",{"1":{"5":12}}],["src",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["s",{"1":{"2":3,"11":1,"20":1,"29":1,"33":1,"34":1,"37":2,"43":1,"44":3,"54":1,"55":1,"59":1}}],["sizing",{"1":{"53":2}}],["sizes",{"1":{"2":5,"11":2,"13":1,"20":2,"22":2,"30":2,"32":2,"36":3,"41":3,"42":3,"46":1}}],["size",{"1":{"1":15,"2":25,"6":5,"8":2,"9":4,"10":2,"12":4,"17":15,"20":6,"22":2,"25":2,"30":5,"32":2,"33":21,"36":1,"41":2,"42":1,"46":8,"53":48,"56":1,"57":12}}],["singh",{"1":{"44":1}}],["single",{"1":{"13":1,"14":1,"21":1,"22":1,"30":3,"32":2,"40":1,"49":1}}],["simple",{"1":{"34":2,"44":1}}],["simplify",{"1":{"8":1}}],["six",{"1":{"14":1,"16":1,"51":1}}],["sidebar",{"1":{"36":1,"48":2}}],["side",{"1":{"0":4,"14":2,"48":4}}],["stnguyen90",{"1":{"44":1}}],["steven",{"1":{"44":1}}],["steps",{"1":{"43":1}}],["stop",{"1":{"40":1}}],["storage",{"1":{"12":3,"44":1}}],["still",{"1":{"28":1}}],["sticky",{"1":{"1":43,"33":5,"54":9}}],["stripe",{"1":{"40":4}}],["string",{"1":{"2":1}}],["stretch",{"1":{"9":7,"13":5,"53":1}}],["strong",{"1":{"6":1,"20":1,"42":1}}],["stylesheet",{"1":{"43":2}}],["styles",{"1":{"21":2,"33":5,"44":1,"54":2,"55":1}}],["style",{"1":{"1":15,"6":12,"8":1,"9":9,"10":10,"11":2,"12":4,"14":1,"16":7,"17":5,"20":1,"25":11,"29":1,"33":29,"34":1,"36":4,"37":2,"38":6,"39":2,"41":12,"42":4,"46":1,"54":2}}],["stays",{"1":{"50":6,"53":23,"54":10,"57":17}}],["star",{"1":{"40":1}}],["stars",{"1":{"33":12}}],["start",{"1":{"0":4,"3":2,"4":1,"5":6,"6":12,"8":21,"10":12,"11":3,"14":2,"16":3,"17":8,"18":1,"25":19,"26":1,"27":2,"29":2,"33":5,"35":1,"39":2,"43":1,"45":1,"50":74,"53":10,"54":38,"57":3}}],["started",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["standard",{"1":{"39":1}}],["standalone",{"1":{"1":23}}],["stand",{"1":{"20":1}}],["stack",{"1":{"19":1,"44":1}}],["static",{"1":{"34":1,"54":2}}],["state",{"1":{"11":1,"16":1,"17":1,"21":2,"22":3,"24":2,"25":2,"31":2,"34":1}}],["states",{"1":{"1":2,"15":2,"21":1,"22":1,"25":2,"30":1,"31":2,"32":2,"51":2}}],["status",{"0":{"31":1},"1":{"0":1,"1":2,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":2,"31":22,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["self",{"1":{"53":3}}],["selector",{"1":{"40":1,"58":1}}],["selectors",{"1":{"30":1,"32":1,"37":1}}],["selecting",{"1":{"30":1}}],["selection",{"1":{"0":3,"30":1}}],["select",{"1":{"5":9,"6":1,"17":1,"22":3,"25":16,"30":1,"33":2}}],["selected",{"1":{"0":3,"14":1,"15":3,"30":1,"33":1,"34":1,"37":2,"47":1,"48":1,"58":1}}],["semantics",{"1":{"42":1}}],["semibold",{"1":{"42":6}}],["semi",{"1":{"11":1}}],["server",{"1":{"40":1}}],["services",{"1":{"8":9}}],["serious",{"1":{"36":1}}],["send",{"1":{"40":1}}],["sensitive",{"1":{"25":1}}],["sentences",{"1":{"20":1}}],["sent",{"1":{"1":45}}],["set",{"1":{"22":2,"25":9,"30":1,"32":1,"35":10,"51":1}}],["settings",{"1":{"14":3}}],["see",{"1":{"21":2,"55":1}}],["sessions",{"1":{"14":3}}],["separator",{"1":{"18":1,"25":4}}],["separate",{"1":{"11":3}}],["seperate",{"1":{"11":1}}],["seperators",{"1":{"37":1}}],["seperator",{"1":{"3":1}}],["sep",{"1":{"3":3,"18":2,"53":3}}],["secret",{"1":{"25":9,"35":10}}],["secure",{"1":{"8":3}}],["sections",{"1":{"13":2,"14":1,"45":1}}],["section",{"1":{"0":2,"1":40,"4":2,"6":26,"12":8,"13":1,"16":4,"21":1,"25":12,"33":2,"43":1,"48":6,"54":2}}],["secondary",{"0":{"13":1},"1":{"0":2,"1":21,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":1,"9":8,"10":1,"11":5,"12":2,"13":31,"14":2,"15":1,"16":1,"17":4,"18":1,"19":1,"20":16,"21":1,"22":1,"23":1,"24":4,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":2,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["search",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":14,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["kind",{"1":{"45":1}}],["kingdom",{"1":{"10":1}}],["kodumbeats",{"1":{"44":1}}],["kotlin",{"1":{"40":4}}],["kristin",{"1":{"44":4}}],["kb",{"1":{"33":27}}],["kbd",{"1":{"26":7}}],["keys",{"1":{"25":9,"35":10}}],["keyword",{"1":{"23":3}}],["key",{"1":{"21":1,"40":1}}],["keyboared",{"1":{"21":1}}],["keyboard",{"0":{"26":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":6,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["keeping",{"1":{"20":1}}],["keep",{"1":{"2":1,"20":1,"34":2,"36":1,"49":1}}],["k",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],[">",{"1":{"0":26,"1":521,"2":137,"3":36,"4":49,"5":159,"6":212,"7":23,"8":139,"9":78,"10":124,"11":156,"12":91,"13":64,"14":38,"15":57,"16":147,"17":132,"18":30,"19":15,"20":101,"21":17,"22":21,"23":4,"24":44,"25":560,"26":8,"27":66,"28":7,"29":50,"30":11,"31":38,"32":11,"33":841,"34":55,"35":26,"36":13,"37":3,"38":7,"39":10,"40":1,"41":13,"42":41,"43":5,"44":19,"45":6,"46":28,"47":40,"48":60,"49":66,"50":4,"51":18,"52":4,"53":10,"54":6,"55":5,"56":12,"57":12,"58":1,"59":8}}],["+2",{"1":{"2":12}}],["+",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":4,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cdn",{"1":{"43":1}}],["cpp",{"1":{"40":4}}],["css3",{"1":{"40":4}}],["css",{"1":{"37":2,"38":3,"41":2,"43":3,"44":4,"46":2,"50":1,"53":2,"54":1,"57":1}}],["circular",{"1":{"36":3}}],["circle",{"1":{"9":3,"17":1,"25":2,"27":3,"34":2,"40":13}}],["cell",{"1":{"33":15}}],["centered",{"1":{"40":1}}],["center",{"1":{"1":5,"2":1,"6":4,"9":7,"10":7,"11":7,"15":2,"17":11,"19":4,"22":2,"25":7,"30":2,"32":2,"33":12,"35":4,"40":3,"44":2,"47":1,"53":6,"57":2}}],["c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["cube",{"1":{"40":2}}],["custom",{"1":{"25":7,"46":1}}],["currency",{"1":{"40":6}}],["current",{"1":{"31":1}}],["currently",{"1":{"11":1,"34":1}}],["cursor",{"0":{"52":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":8,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":9,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["credit",{"1":{"40":1}}],["creation",{"1":{"11":1}}],["created",{"1":{"33":22,"44":1}}],["create",{"1":{"4":1,"21":2,"23":1,"25":1,"33":3,"37":1,"39":2,"44":3,"45":1,"47":3}}],["cross",{"1":{"1":5,"6":2,"8":3,"9":7,"10":1,"11":7,"12":8,"17":5,"18":1,"19":4,"25":7,"33":14,"44":2,"47":1,"53":7}}],["christyjacob4",{"1":{"44":1}}],["christy",{"1":{"44":1}}],["chrome",{"1":{"40":2,"55":1}}],["chip",{"1":{"40":1}}],["child",{"1":{"1":5,"10":1,"18":1,"33":2,"47":1,"53":3}}],["choose",{"1":{"17":9,"25":1,"34":2}}],["choice",{"1":{"5":12}}],["chat",{"1":{"40":3}}],["chart",{"1":{"12":2,"40":5,"48":1}}],["change",{"1":{"1":1,"25":1,"33":1}}],["chenparnasa",{"1":{"44":1}}],["chen",{"1":{"44":1}}],["chevron",{"1":{"40":4}}],["cheveron",{"1":{"5":6,"14":2,"16":2,"20":2,"25":9,"40":4,"49":2}}],["checked",{"1":{"22":2,"30":3,"32":3}}],["check",{"1":{"8":3,"9":2,"16":1,"21":1,"25":1,"27":3,"34":1,"40":5,"51":8}}],["checkboxes",{"1":{"5":2,"6":2,"22":6,"30":1,"36":1}}],["checkbox",{"0":{"22":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":5,"22":17,"23":2,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":8,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cart",{"1":{"40":1}}],["cards",{"1":{"8":1,"10":2,"21":4,"36":1,"39":2}}],["card",{"0":{"10":1,"21":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":5,"9":3,"10":31,"11":3,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":3,"19":2,"20":3,"21":18,"22":3,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":4,"34":2,"35":2,"36":6,"37":2,"38":2,"39":4,"40":3,"41":2,"42":2,"43":2,"44":3,"45":2,"46":26,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":3,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["cash",{"1":{"40":1}}],["case",{"1":{"20":1,"25":3,"33":1}}],["cases",{"1":{"6":1,"7":2,"20":1,"24":1,"27":2,"41":2}}],["camera",{"1":{"40":2}}],["cameron",{"1":{"3":6}}],["calendar",{"1":{"40":1}}],["calculator",{"1":{"40":1}}],["call",{"1":{"1":31,"20":2,"40":1}}],["cake",{"1":{"40":1}}],["capitalize",{"1":{"57":2}}],["cap",{"1":{"40":1}}],["categories",{"1":{"34":1}}],["canada",{"1":{"10":4}}],["cannot",{"1":{"2":1}}],["can",{"1":{"1":4,"2":5,"5":1,"6":2,"11":2,"14":3,"20":2,"21":3,"23":2,"25":4,"29":2,"30":1,"32":1,"33":1,"37":1,"41":1,"42":2,"45":1,"46":2,"54":3}}],["cancel",{"1":{"0":3,"16":2,"20":1}}],["clip",{"1":{"40":1}}],["clipboard",{"1":{"40":4}}],["clickability",{"1":{"42":1}}],["clickable",{"0":{"3":1},"1":{"0":1,"1":1,"2":2,"3":22,"4":2,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["click",{"1":{"40":1,"49":1}}],["clicking",{"1":{"15":1,"22":1,"30":1,"32":1}}],["clamp",{"1":{"57":1}}],["clarify",{"1":{"34":1}}],["class=",{"1":{"33":2}}],["classes",{"1":{"6":1,"38":2,"51":2,"54":2,"59":1}}],["class",{"1":{"0":14,"1":251,"2":73,"3":18,"4":19,"5":78,"6":108,"7":12,"8":64,"9":36,"10":51,"11":80,"12":41,"13":35,"14":22,"15":31,"16":76,"17":67,"18":17,"19":9,"20":52,"21":11,"22":9,"23":3,"24":23,"25":256,"26":5,"27":34,"28":4,"29":27,"30":4,"31":22,"32":11,"33":427,"34":29,"35":15,"36":4,"38":2,"39":4,"40":2,"42":18,"44":6,"45":4,"46":9,"47":20,"48":31,"49":34,"50":3,"51":10,"52":3,"53":6,"54":5,"55":4,"56":6,"57":5,"59":4}}],["cloud",{"1":{"40":3}}],["clock",{"1":{"9":2,"40":1}}],["closed",{"1":{"8":3,"40":1}}],["close",{"1":{"1":15,"11":6,"16":2}}],["clear",{"1":{"5":9,"25":9,"42":1}}],["codingsamurai",{"1":{"44":1}}],["code",{"0":{"4":1,"23":1},"1":{"0":2,"1":2,"2":2,"3":3,"4":27,"5":3,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":3,"23":15,"24":3,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":2,"39":2,"40":8,"41":4,"42":12,"43":3,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":4,"58":2,"59":2}}],["cog",{"1":{"40":1,"48":1}}],["cognitive",{"1":{"14":1}}],["count",{"1":{"25":3}}],["counter",{"1":{"25":12}}],["country",{"1":{"10":6}}],["couldn",{"1":{"25":3}}],["cooper",{"1":{"25":3}}],["cope",{"1":{"44":1}}],["copied",{"1":{"23":1}}],["copying",{"1":{"29":1}}],["copy",{"1":{"11":1,"18":1,"25":3,"29":4,"33":3,"34":2,"40":1,"43":1}}],["community",{"1":{"44":1}}],["commit",{"1":{"40":1,"44":2}}],["command",{"1":{"40":1,"43":1}}],["common",{"1":{"29":1,"40":1}}],["commonly",{"1":{"20":1,"32":1}}],["com",{"1":{"25":14,"43":2}}],["compilation",{"1":{"50":1}}],["compiled",{"1":{"38":1,"41":1,"50":1,"53":1,"57":1}}],["compliment",{"1":{"42":1}}],["complete",{"1":{"8":4,"20":1,"28":1,"31":6}}],["completed",{"1":{"1":1,"34":1}}],["complex",{"1":{"8":1,"11":3,"21":1}}],["component",{"1":{"20":1,"36":1,"39":1}}],["components",{"0":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":4,"6":4,"7":2,"8":2,"9":2,"10":2,"11":4,"12":2,"13":4,"14":4,"15":3,"16":4,"17":4,"18":4,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":1,"31":2,"32":1,"33":3,"34":1,"35":3,"36":4,"37":2,"38":2,"39":5,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["computer",{"1":{"40":1}}],["compute",{"1":{"12":3}}],["core",{"1":{"44":1}}],["corner",{"1":{"36":2}}],["corners",{"1":{"19":1,"20":1,"36":2}}],["correct",{"1":{"25":1}}],["correctly",{"1":{"20":1,"22":1,"30":1,"32":1}}],["cover",{"1":{"17":6}}],["configured",{"1":{"54":1}}],["confused",{"1":{"42":1}}],["confusion",{"1":{"6":1}}],["convey",{"1":{"34":2,"51":1}}],["conduct",{"1":{"25":1}}],["conjunction",{"1":{"20":1}}],["consist",{"1":{"5":1,"6":1,"11":1,"13":1,"14":1,"16":1,"17":1,"18":1,"33":1,"35":1}}],["consistency",{"1":{"2":1,"20":1}}],["consistent",{"1":{"1":1,"37":1,"43":1,"44":3,"50":1,"51":1,"57":1}}],["console",{"1":{"1":2,"2":1,"5":1,"6":2,"11":1,"15":1,"20":1,"21":1,"27":1,"33":3,"34":4,"36":1,"37":2,"39":1,"41":1,"51":1,"53":1}}],["contributing",{"1":{"44":1}}],["controls",{"1":{"53":1}}],["controlled",{"1":{"32":1,"59":1}}],["control",{"1":{"6":1,"37":1,"53":1}}],["contrast",{"1":{"2":1,"39":3}}],["contains",{"1":{"29":1,"31":1,"37":1}}],["containing",{"1":{"25":1,"49":1}}],["contain",{"1":{"1":1,"5":1,"6":1}}],["containers",{"1":{"11":1}}],["container",{"0":{"45":1},"1":{"0":2,"1":1,"2":1,"3":3,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":5,"13":2,"14":1,"15":1,"16":1,"17":2,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":11,"46":4,"47":4,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":2}}],["context",{"1":{"1":2,"34":4,"42":1}}],["contextual",{"1":{"1":15,"9":21,"11":3,"17":3,"25":1}}],["contents",{"1":{"47":1,"53":5}}],["content",{"1":{"0":2,"1":21,"4":1,"5":27,"7":6,"10":1,"11":7,"13":1,"14":1,"16":4,"19":1,"21":1,"25":1,"27":1,"29":1,"33":1,"34":1,"41":1,"45":3,"49":1,"53":5,"57":2}}],["colours",{"1":{"34":1}}],["colored",{"1":{"2":1}}],["color",{"1":{"2":27,"8":9,"9":5,"10":3,"11":1,"12":2,"16":1,"17":1,"24":2,"25":10,"37":56,"38":24,"40":4,"44":1,"51":32,"53":6}}],["colors",{"0":{"37":1,"51":1},"1":{"0":2,"1":2,"2":4,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":3,"37":12,"38":3,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":3,"51":9,"52":3,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["collaborating",{"1":{"44":1}}],["collaboration",{"1":{"44":1}}],["collaborate",{"1":{"44":4}}],["collapsibles",{"1":{"5":17}}],["collapsible",{"0":{"5":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":45,"6":2,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["collection",{"1":{"33":22,"40":1}}],["col",{"1":{"33":153,"44":2,"47":8}}],["columnheader",{"1":{"33":5}}],["columns",{"1":{"24":1,"33":2,"47":4,"53":2}}],["column",{"1":{"18":3,"33":4,"47":8,"53":24}}],["ctrl",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}]],"serializationVersion":2} \ No newline at end of file diff --git a/apps/pink/src/pages/components/label-card.mdx b/apps/pink/src/pages/components/label-card.mdx index afdc9145e1..633a0dd93a 100644 --- a/apps/pink/src/pages/components/label-card.mdx +++ b/apps/pink/src/pages/components/label-card.mdx @@ -69,7 +69,7 @@ description: A representation of content uploaded as an attachment.
    -

    Netherlands

    +

    UK

    • @@ -78,7 +78,7 @@ description: A representation of content uploaded as an attachment.
    -

    Netherlands

    +

    Canada

    @@ -87,7 +87,7 @@ description: A representation of content uploaded as an attachment.
    -

    Netherlands

    +

    US

    @@ -96,7 +96,7 @@ description: A representation of content uploaded as an attachment.
    -

    Netherlands

    +

    Germany

    @@ -105,16 +105,7 @@ description: A representation of content uploaded as an attachment.
    -

    Netherlands

    -
    - - -
  • -
    • diff --git a/package-lock.json b/package-lock.json index b06fd8bcee..53a5c84918 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,8 +29,8 @@ "license": "ISC", "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "*", - "@appwrite.io/pink-icons": "*", + "@appwrite.io/pink": "0.1.0-next.9", + "@appwrite.io/pink-icons": "0.1.0-next.9", "vite-plugin-handlebars": "^1.6.0" } }, @@ -55,8 +55,8 @@ }, "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "*", - "@appwrite.io/pink-icons": "*", + "@appwrite.io/pink": "0.1.0-next.9", + "@appwrite.io/pink-icons": "0.1.0-next.9", "@types/prismjs": "^1.26.0", "glob": "^8.0.3", "sass": "^1.57.1" @@ -2881,6 +2881,15 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.30.tgz", "integrity": "sha512-sqm9g7mHlPY/43fcSNrCYfOeX9zkTTK+euO5E6+CVijSMm5tTjkVdwdqRkY3ljjIAf8679vps5jKUoJBCLsMDA==" }, + "node_modules/@types/jsonfile": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@types/jsonfile/-/jsonfile-6.1.1.tgz", + "integrity": "sha512-GSgiRCVeapDN+3pqA35IkQwasaCh/0YFH5dEF6S88iDvEn901DjOeH3/QPY+XYP1DFzDZPvIvfeEgk+7br5png==", + "dev": true, + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/mdast": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz", @@ -3068,9 +3077,9 @@ "dev": true }, "node_modules/acorn": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz", - "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==", + "version": "8.10.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", + "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==", "bin": { "acorn": "bin/acorn" }, @@ -3244,6 +3253,12 @@ "integrity": "sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg==", "dev": true }, + "node_modules/any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true + }, "node_modules/anymatch": { "version": "3.1.3", "devOptional": true, @@ -3593,6 +3608,33 @@ "node": ">= 4.5.0" } }, + "node_modules/auto-config-loader": { + "version": "1.7.4", + "resolved": "https://registry.npmjs.org/auto-config-loader/-/auto-config-loader-1.7.4.tgz", + "integrity": "sha512-lx+kW0YFck2+sACl2wOhJUua298aC3/xz7TEYjMgHrtSlhXIR8vDun4kuYaa1BJbK5IgjwfN+6uswAkcimVC0w==", + "dev": true, + "dependencies": { + "ini": "^4.1.1", + "jiti": "^1.18.2", + "jsonc-eslint-parser": "^2.3.0", + "lodash.merge": "^4.6.2", + "sucrase": "^3.32.0", + "toml-eslint-parser": "^0.6.0", + "yaml-eslint-parser": "^1.2.2" + }, + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/auto-config-loader/node_modules/ini": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.1.tgz", + "integrity": "sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==", + "dev": true, + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, "node_modules/available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -5976,6 +6018,35 @@ "node": ">=0.8.0" } }, + "node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/espree": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", + "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==", + "dev": true, + "dependencies": { + "acorn": "^8.9.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^3.4.1" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", @@ -8268,6 +8339,15 @@ "regenerator-runtime": "^0.13.3" } }, + "node_modules/jiti": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz", + "integrity": "sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==", + "dev": true, + "bin": { + "jiti": "bin/jiti.js" + } + }, "node_modules/jpeg-js": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.4.tgz", @@ -8329,6 +8409,24 @@ "node": ">=6" } }, + "node_modules/jsonc-eslint-parser": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/jsonc-eslint-parser/-/jsonc-eslint-parser-2.3.0.tgz", + "integrity": "sha512-9xZPKVYp9DxnM3sd1yAsh/d59iIaswDkai8oTxbursfKYbg/ibjX0IzFt35+VZ8iEW453TVTXztnRvYUQlAfUQ==", + "dev": true, + "dependencies": { + "acorn": "^8.5.0", + "eslint-visitor-keys": "^3.0.0", + "espree": "^9.0.0", + "semver": "^7.3.5" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ota-meshi" + } + }, "node_modules/jsonc-parser": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-2.3.1.tgz", @@ -8477,6 +8575,12 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, "node_modules/lodash.startcase": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/lodash.startcase/-/lodash.startcase-4.4.0.tgz", @@ -10103,6 +10207,17 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, + "node_modules/mz": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, + "dependencies": { + "any-promise": "^1.0.0", + "object-assign": "^4.0.1", + "thenify-all": "^1.0.0" + } + }, "node_modules/nan": { "version": "2.17.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz", @@ -10378,6 +10493,15 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-copy": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz", @@ -10987,6 +11111,15 @@ "node": ">=6" } }, + "node_modules/pirates": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", + "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, "node_modules/pixelmatch": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-4.0.2.tgz", @@ -13613,6 +13746,71 @@ "node": ">=8" } }, + "node_modules/sucrase": { + "version": "3.34.0", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", + "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==", + "dev": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.2", + "commander": "^4.0.0", + "glob": "7.1.6", + "lines-and-columns": "^1.1.6", + "mz": "^2.7.0", + "pirates": "^4.0.1", + "ts-interface-checker": "^0.1.9" + }, + "bin": { + "sucrase": "bin/sucrase", + "sucrase-node": "bin/sucrase-node" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/sucrase/node_modules/@jridgewell/gen-mapping": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", + "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", + "dev": true, + "dependencies": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/sucrase/node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/sucrase/node_modules/glob": { + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/suf-log": { "version": "2.5.3", "resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz", @@ -14267,6 +14465,27 @@ "resolved": "https://registry.npmjs.org/the-new-css-reset/-/the-new-css-reset-1.8.2.tgz", "integrity": "sha512-qM5W+nEI8EqR7NUmO3+rO210uPTb+1Ne4PB/a4cnJcA2heFnMTX5baYZw0U7IsoLsE+/htaz8Wr5qxZGFIzsFA==" }, + "node_modules/thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, + "dependencies": { + "any-promise": "^1.0.0" + } + }, + "node_modules/thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, + "dependencies": { + "thenify": ">= 3.1.0 < 4" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", @@ -14448,6 +14667,21 @@ "node": ">=0.10.0" } }, + "node_modules/toml-eslint-parser": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/toml-eslint-parser/-/toml-eslint-parser-0.6.0.tgz", + "integrity": "sha512-aTmQa0RFb+2URe8IZOfo/oxt3b5rlXlpG9xE+6FmeI8immCGLnZYvKVxbnCYJx4bIKIaEwl0BnCDhwO70yeWSA==", + "dev": true, + "dependencies": { + "eslint-visitor-keys": "^3.0.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ota-meshi" + } + }, "node_modules/totalist": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.0.tgz", @@ -14483,6 +14717,12 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/ts-interface-checker": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true + }, "node_modules/tsconfig-resolver": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/tsconfig-resolver/-/tsconfig-resolver-3.0.1.tgz", @@ -16133,6 +16373,32 @@ "node": ">= 6" } }, + "node_modules/yaml-eslint-parser": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-1.2.2.tgz", + "integrity": "sha512-pEwzfsKbTrB8G3xc/sN7aw1v6A6c/pKxLAkjclnAyo5g5qOh6eL9WGu0o3cSDQZKrTNk4KL4lQSwZW+nBkANEg==", + "dev": true, + "dependencies": { + "eslint-visitor-keys": "^3.0.0", + "lodash": "^4.17.21", + "yaml": "^2.0.0" + }, + "engines": { + "node": "^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ota-meshi" + } + }, + "node_modules/yaml-eslint-parser/node_modules/yaml": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz", + "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==", + "dev": true, + "engines": { + "node": ">= 14" + } + }, "node_modules/yargs": { "version": "16.2.0", "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", @@ -16248,19 +16514,226 @@ }, "packages/icons": { "name": "@appwrite.io/pink-icons", - "version": "0.0.6-rc.14", + "version": "0.1.0-next.9", "license": "ISC", "devDependencies": { "oslllo-svg-fixer": "^2.2.0", - "svgtofont": "^3.22.0" + "svgtofont": "^4.0.0" + } + }, + "packages/icons/node_modules/@types/fs-extra": { + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-11.0.1.tgz", + "integrity": "sha512-MxObHvNl4A69ofaTRU8DFqvgzzv8s9yRtaPPm5gud9HDNvpB3GPQFvNuTWAI59B9huVGV5jXYJwbCsmBsOGYWA==", + "dev": true, + "dependencies": { + "@types/jsonfile": "*", + "@types/node": "*" + } + }, + "packages/icons/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "packages/icons/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "packages/icons/node_modules/cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dev": true, + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "packages/icons/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "packages/icons/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "packages/icons/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, + "packages/icons/node_modules/fs-extra": { + "version": "11.1.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz", + "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=14.14" + } + }, + "packages/icons/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "packages/icons/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "packages/icons/node_modules/svgtofont": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/svgtofont/-/svgtofont-4.0.0.tgz", + "integrity": "sha512-8K0e/4BcJRhBcmQ9d5O5GC7WdNW0sLi7G1egvnzvPi5orICAcAQg/SF3n03DYMLkAGXhJ+UsKfJnC8ovv8/xiw==", + "dev": true, + "dependencies": { + "@types/cheerio": "~0.22.31", + "@types/ejs": "~3.1.0", + "@types/fs-extra": "^11.0.1", + "@types/svg2ttf": "~5.0.1", + "@types/svgicons2svgfont": "~10.0.1", + "@types/ttf2eot": "~2.0.0", + "@types/ttf2woff": "~2.0.2", + "@types/ttf2woff2": "~2.0.0", + "auto-config-loader": "^1.7.4", + "cheerio": "~1.0.0-rc.12", + "colors-cli": "~1.0.28", + "copy-template-dir": "~1.4.0", + "del": "~6.1.0", + "ejs": "~3.1.6", + "fs-extra": "~11.1.0", + "image2uri": "~1.0.5", + "move-file": "~2.1.0", + "svg2ttf": "~6.0.3", + "svgicons2svgfont": "~12.0.0", + "svgo": "~3.0.0", + "ttf2eot": "~3.1.0", + "ttf2woff": "~3.0.0", + "ttf2woff2": "~5.0.0", + "yargs": "~17.7.1" + }, + "bin": { + "svgtofont": "lib/cli.js" + }, + "engines": { + "node": ">=16.0.0" + }, + "funding": { + "url": "https://jaywcjlove.github.io/sponsor.html" + } + }, + "packages/icons/node_modules/ttf2woff2": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/ttf2woff2/-/ttf2woff2-5.0.0.tgz", + "integrity": "sha512-FplhShJd3rT8JGa8N04YWQuP7xRvwr9AIq+9/z5O/5ubqNiCADshKl8v51zJDFkhDVcYpdUqUpm7T4M53Z2JoQ==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "bindings": "^1.5.0", + "bufferstreams": "^3.0.0", + "nan": "^2.14.2", + "node-gyp": "^9.0.0" + }, + "bin": { + "ttf2woff2": "bin/ttf2woff2.js" + }, + "engines": { + "node": ">=14" + } + }, + "packages/icons/node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "packages/icons/node_modules/yargs": { + "version": "17.7.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "dev": true, + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" } }, "packages/ui": { "name": "@appwrite.io/pink", - "version": "0.0.6-rc.14", + "version": "0.1.0-next.9", "license": "ISC", "dependencies": { - "@appwrite.io/pink-icons": "*", + "@appwrite.io/pink-icons": "0.1.0-next.9", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.7.3" }, diff --git a/package.json b/package.json index 71f0b5e86e..b9fcd0d779 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,12 @@ "test": "turbo run test", "format": "turbo run format", "clean": "turbo run clean && rm -rf node_modules", + "pre": "", + "bump": "changeset", + "bump-patch": "", + "bump-minor": "", + "bump-major": "", + "version": "changeset version", "release": "npm run build && changeset publish" }, "devDependencies": { diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 6dacb48f04..1598a33e22 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,7 +1,65 @@ # @appwrite.io/pink-icons -## 0.0.7-sl10.0 +## 0.1.0-next.9 + +### Minor Changes + +- ccbfc7e2: Add bun icon + +## 0.1.0-next.8 + +### Patch Changes + +- fixes for 1.4.x release + +## 0.1.0-next.7 + +### Minor Changes + +- 4cb0e109: Fix avatar icons + +## 0.1.0-next.6 + +### Minor Changes + +- b1d391f6: Fix switch button + +## 0.1.0-next.5 + +### Minor Changes + +- 05f6f7e: Changes for 1.4 from other branch + +## 0.1.0-next.4 + +### Minor Changes + +- dcf463b: Fix: font cropping + +## 0.1.0-next.3 + +### Patch Changes + +- fix desync issue + +## 0.1.0-next.2 + +### Minor Changes + +- 805af37e: add divider + +### Patch Changes + +- Fix desynced icons + +## 0.0.7-next.1 + +### Patch Changes + +- 2d6f1b5: patch + +## 0.0.7-next.0 ### Patch Changes -- patch bump +- pre-release patch diff --git a/packages/icons/package.json b/packages/icons/package.json index 7cb8bf18af..ef25a15d06 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink-icons", - "version": "0.0.7-sl10.0", + "version": "0.1.0-next.9", "description": "", "type": "module", "scripts": { @@ -13,7 +13,7 @@ "license": "ISC", "devDependencies": { "oslllo-svg-fixer": "^2.2.0", - "svgtofont": "^3.22.0" + "svgtofont": "^4.0.0" }, "main": "dist/icon.css", "style": "dist/icon.css", diff --git a/packages/icons/scripts.js b/packages/icons/scripts.js index 64083688d3..6a9a1a1661 100644 --- a/packages/icons/scripts.js +++ b/packages/icons/scripts.js @@ -26,7 +26,8 @@ export const generateIcons = async () => { generateInfoData: true, svgoOptions: { full: false - } + }, + useCSSVars: true }); } diff --git a/packages/icons/svg/academic-cap.svg b/packages/icons/svg/academic-cap.svg index 03653588ce..9a322db173 100644 --- a/packages/icons/svg/academic-cap.svg +++ b/packages/icons/svg/academic-cap.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/adjustments.svg b/packages/icons/svg/adjustments.svg index ac34aa5476..d3cb4600f7 100644 --- a/packages/icons/svg/adjustments.svg +++ b/packages/icons/svg/adjustments.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/akamai.svg b/packages/icons/svg/akamai.svg new file mode 100644 index 0000000000..146dd23263 --- /dev/null +++ b/packages/icons/svg/akamai.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/algolia.svg b/packages/icons/svg/algolia.svg new file mode 100644 index 0000000000..f43c01353f --- /dev/null +++ b/packages/icons/svg/algolia.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/amazon.svg b/packages/icons/svg/amazon.svg index bc2a101640..9366be9d34 100644 --- a/packages/icons/svg/amazon.svg +++ b/packages/icons/svg/amazon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/android.svg b/packages/icons/svg/android.svg index 52f0f2d7b3..f0c682c84d 100644 --- a/packages/icons/svg/android.svg +++ b/packages/icons/svg/android.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/angular.svg b/packages/icons/svg/angular.svg index efc0f8f1cd..260dafb38e 100644 --- a/packages/icons/svg/angular.svg +++ b/packages/icons/svg/angular.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/annotation.svg b/packages/icons/svg/annotation.svg index cf8379164e..e031fca9e3 100644 --- a/packages/icons/svg/annotation.svg +++ b/packages/icons/svg/annotation.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/anonymous.svg b/packages/icons/svg/anonymous.svg index 31ef791001..14374e8c11 100644 --- a/packages/icons/svg/anonymous.svg +++ b/packages/icons/svg/anonymous.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/api.svg b/packages/icons/svg/api.svg new file mode 100644 index 0000000000..aaeb90b721 --- /dev/null +++ b/packages/icons/svg/api.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/apple.svg b/packages/icons/svg/apple.svg index 5c62b0e2fc..a42babf5e5 100644 --- a/packages/icons/svg/apple.svg +++ b/packages/icons/svg/apple.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/appwrite.svg b/packages/icons/svg/appwrite.svg new file mode 100644 index 0000000000..f8f675e36a --- /dev/null +++ b/packages/icons/svg/appwrite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/archive.svg b/packages/icons/svg/archive.svg index f8f701804a..bf5647ed26 100644 --- a/packages/icons/svg/archive.svg +++ b/packages/icons/svg/archive.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-circle-down.svg b/packages/icons/svg/arrow-circle-down.svg index 31c23f74a6..8bc834a252 100644 --- a/packages/icons/svg/arrow-circle-down.svg +++ b/packages/icons/svg/arrow-circle-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-circle-left.svg b/packages/icons/svg/arrow-circle-left.svg index 0f2eee185c..f6c420a24e 100644 --- a/packages/icons/svg/arrow-circle-left.svg +++ b/packages/icons/svg/arrow-circle-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-circle-right.svg b/packages/icons/svg/arrow-circle-right.svg index 855378a409..0ef3413459 100644 --- a/packages/icons/svg/arrow-circle-right.svg +++ b/packages/icons/svg/arrow-circle-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-circle-up.svg b/packages/icons/svg/arrow-circle-up.svg index 6de4676e08..eaf0572e90 100644 --- a/packages/icons/svg/arrow-circle-up.svg +++ b/packages/icons/svg/arrow-circle-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-down.svg b/packages/icons/svg/arrow-down.svg index 2a5c6c7636..a112b19b1f 100644 --- a/packages/icons/svg/arrow-down.svg +++ b/packages/icons/svg/arrow-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-expand.svg b/packages/icons/svg/arrow-expand.svg index 061187d687..8ec3b62b5f 100644 --- a/packages/icons/svg/arrow-expand.svg +++ b/packages/icons/svg/arrow-expand.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-left.svg b/packages/icons/svg/arrow-left.svg index 8d11a6c102..086b46cd6c 100644 --- a/packages/icons/svg/arrow-left.svg +++ b/packages/icons/svg/arrow-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-narrow-down.svg b/packages/icons/svg/arrow-narrow-down.svg index f273c9c3ce..b0e81ac8f4 100644 --- a/packages/icons/svg/arrow-narrow-down.svg +++ b/packages/icons/svg/arrow-narrow-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-narrow-left.svg b/packages/icons/svg/arrow-narrow-left.svg index 4e08f495de..9823014d34 100644 --- a/packages/icons/svg/arrow-narrow-left.svg +++ b/packages/icons/svg/arrow-narrow-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-narrow-right.svg b/packages/icons/svg/arrow-narrow-right.svg index fc35df7a9f..edd589f8ba 100644 --- a/packages/icons/svg/arrow-narrow-right.svg +++ b/packages/icons/svg/arrow-narrow-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-narrow-up.svg b/packages/icons/svg/arrow-narrow-up.svg index ada4152e54..0a5b547ef5 100644 --- a/packages/icons/svg/arrow-narrow-up.svg +++ b/packages/icons/svg/arrow-narrow-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-right.svg b/packages/icons/svg/arrow-right.svg index bdd3b006ec..df46c99ef4 100644 --- a/packages/icons/svg/arrow-right.svg +++ b/packages/icons/svg/arrow-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-sm-down.svg b/packages/icons/svg/arrow-sm-down.svg index 2fb3f4baa5..08af64de8a 100644 --- a/packages/icons/svg/arrow-sm-down.svg +++ b/packages/icons/svg/arrow-sm-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-sm-left.svg b/packages/icons/svg/arrow-sm-left.svg index a4c6a76020..c58cf69d9a 100644 --- a/packages/icons/svg/arrow-sm-left.svg +++ b/packages/icons/svg/arrow-sm-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-sm-right.svg b/packages/icons/svg/arrow-sm-right.svg index 61f3472638..ac7a1c562d 100644 --- a/packages/icons/svg/arrow-sm-right.svg +++ b/packages/icons/svg/arrow-sm-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-sm-up.svg b/packages/icons/svg/arrow-sm-up.svg index f55c4677b9..da50a42f09 100644 --- a/packages/icons/svg/arrow-sm-up.svg +++ b/packages/icons/svg/arrow-sm-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-up.svg b/packages/icons/svg/arrow-up.svg index b35aa435de..6a4c2af246 100644 --- a/packages/icons/svg/arrow-up.svg +++ b/packages/icons/svg/arrow-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/astro.svg b/packages/icons/svg/astro.svg new file mode 100644 index 0000000000..4c34b7e85f --- /dev/null +++ b/packages/icons/svg/astro.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/at-symbol.svg b/packages/icons/svg/at-symbol.svg index dbd04c73f2..6ccab6fe21 100644 --- a/packages/icons/svg/at-symbol.svg +++ b/packages/icons/svg/at-symbol.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/auth0.svg b/packages/icons/svg/auth0.svg index 6f332753b9..70ac3602d5 100644 --- a/packages/icons/svg/auth0.svg +++ b/packages/icons/svg/auth0.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/autodesk.svg b/packages/icons/svg/autodesk.svg index 53287fd29a..7121e4ab69 100644 --- a/packages/icons/svg/autodesk.svg +++ b/packages/icons/svg/autodesk.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/azure.svg b/packages/icons/svg/azure.svg index 7d8760866e..35a069810a 100644 --- a/packages/icons/svg/azure.svg +++ b/packages/icons/svg/azure.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/backspace.svg b/packages/icons/svg/backspace.svg index 07b671bd14..4a19a3ac5d 100644 --- a/packages/icons/svg/backspace.svg +++ b/packages/icons/svg/backspace.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/badge-check.svg b/packages/icons/svg/badge-check.svg index 27c1de1157..ac60917053 100644 --- a/packages/icons/svg/badge-check.svg +++ b/packages/icons/svg/badge-check.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/ban.svg b/packages/icons/svg/ban.svg index 0ea17dd035..5ef6f70b4e 100644 --- a/packages/icons/svg/ban.svg +++ b/packages/icons/svg/ban.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/beaker.svg b/packages/icons/svg/beaker.svg index 0dc2e5f33f..aa173bcb1b 100644 --- a/packages/icons/svg/beaker.svg +++ b/packages/icons/svg/beaker.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/behance.svg b/packages/icons/svg/behance.svg index 5823e24ead..27b92213c8 100644 --- a/packages/icons/svg/behance.svg +++ b/packages/icons/svg/behance.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/bell.svg b/packages/icons/svg/bell.svg index 189f5eaa4f..7f21cd0769 100644 --- a/packages/icons/svg/bell.svg +++ b/packages/icons/svg/bell.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/bitBucket.svg b/packages/icons/svg/bitBucket.svg index d2624fd1bd..77f826741c 100644 --- a/packages/icons/svg/bitBucket.svg +++ b/packages/icons/svg/bitBucket.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/bitly.svg b/packages/icons/svg/bitly.svg index 26c7a43e46..7b845f2fdb 100644 --- a/packages/icons/svg/bitly.svg +++ b/packages/icons/svg/bitly.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/book-open.svg b/packages/icons/svg/book-open.svg index bc245b1cd7..f6150a3086 100644 --- a/packages/icons/svg/book-open.svg +++ b/packages/icons/svg/book-open.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/bookmark-alt.svg b/packages/icons/svg/bookmark-alt.svg index b2edeaf85b..4da5a5bff5 100644 --- a/packages/icons/svg/bookmark-alt.svg +++ b/packages/icons/svg/bookmark-alt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/bookmark.svg b/packages/icons/svg/bookmark.svg index af02e951e0..28b17d164b 100644 --- a/packages/icons/svg/bookmark.svg +++ b/packages/icons/svg/bookmark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/box.svg b/packages/icons/svg/box.svg index 51cd0841fc..3c52706373 100644 --- a/packages/icons/svg/box.svg +++ b/packages/icons/svg/box.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/briefcase.svg b/packages/icons/svg/briefcase.svg index c189908d75..276e11c0a3 100644 --- a/packages/icons/svg/briefcase.svg +++ b/packages/icons/svg/briefcase.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/bun-sh.svg b/packages/icons/svg/bun-sh.svg new file mode 100644 index 0000000000..226980126b --- /dev/null +++ b/packages/icons/svg/bun-sh.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/cake.svg b/packages/icons/svg/cake.svg index 1fe3d8f289..80543d4411 100644 --- a/packages/icons/svg/cake.svg +++ b/packages/icons/svg/cake.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/calculator.svg b/packages/icons/svg/calculator.svg index 9587a3f056..c85bd4c0ac 100644 --- a/packages/icons/svg/calculator.svg +++ b/packages/icons/svg/calculator.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/calendar.svg b/packages/icons/svg/calendar.svg index 6d24af0dd8..ef31fa39bc 100644 --- a/packages/icons/svg/calendar.svg +++ b/packages/icons/svg/calendar.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/camera.svg b/packages/icons/svg/camera.svg index a118d7bb32..6f53cccae2 100644 --- a/packages/icons/svg/camera.svg +++ b/packages/icons/svg/camera.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cash.svg b/packages/icons/svg/cash.svg index 36c3d32cda..f67f4f8115 100644 --- a/packages/icons/svg/cash.svg +++ b/packages/icons/svg/cash.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chart-bar.svg b/packages/icons/svg/chart-bar.svg index 0d3d983d50..79d150d16b 100644 --- a/packages/icons/svg/chart-bar.svg +++ b/packages/icons/svg/chart-bar.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chart-pie.svg b/packages/icons/svg/chart-pie.svg index 3a1293ed8c..ed37c4d8fd 100644 --- a/packages/icons/svg/chart-pie.svg +++ b/packages/icons/svg/chart-pie.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chart-square-bar.svg b/packages/icons/svg/chart-square-bar.svg index 0f4d3c7e6d..daf31e071b 100644 --- a/packages/icons/svg/chart-square-bar.svg +++ b/packages/icons/svg/chart-square-bar.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chat-alt-2.svg b/packages/icons/svg/chat-alt-2.svg index b6850a790c..b5777a2b0c 100644 --- a/packages/icons/svg/chat-alt-2.svg +++ b/packages/icons/svg/chat-alt-2.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chat-alt.svg b/packages/icons/svg/chat-alt.svg index 2cfce26b3b..7f2e73f8e9 100644 --- a/packages/icons/svg/chat-alt.svg +++ b/packages/icons/svg/chat-alt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chat.svg b/packages/icons/svg/chat.svg index 28b2c8c1de..e41a147aae 100644 --- a/packages/icons/svg/chat.svg +++ b/packages/icons/svg/chat.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/check-circle.svg b/packages/icons/svg/check-circle.svg index b093e55fed..dd89aadacb 100644 --- a/packages/icons/svg/check-circle.svg +++ b/packages/icons/svg/check-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/check.svg b/packages/icons/svg/check.svg index e05a46d351..b3935071f1 100644 --- a/packages/icons/svg/check.svg +++ b/packages/icons/svg/check.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cheveron-down.svg b/packages/icons/svg/cheveron-down.svg index 013f5f8493..2f186c70ef 100644 --- a/packages/icons/svg/cheveron-down.svg +++ b/packages/icons/svg/cheveron-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cheveron-left.svg b/packages/icons/svg/cheveron-left.svg index 3d88a84d2b..571c91f0f9 100644 --- a/packages/icons/svg/cheveron-left.svg +++ b/packages/icons/svg/cheveron-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cheveron-right.svg b/packages/icons/svg/cheveron-right.svg index 4755cdce7d..e397eaa141 100644 --- a/packages/icons/svg/cheveron-right.svg +++ b/packages/icons/svg/cheveron-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cheveron-up.svg b/packages/icons/svg/cheveron-up.svg index 30c8aa1c74..924db25028 100644 --- a/packages/icons/svg/cheveron-up.svg +++ b/packages/icons/svg/cheveron-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chevron-double-down.svg b/packages/icons/svg/chevron-double-down.svg index effc80d6cf..62fba2ff09 100644 --- a/packages/icons/svg/chevron-double-down.svg +++ b/packages/icons/svg/chevron-double-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chevron-double-left.svg b/packages/icons/svg/chevron-double-left.svg index f465892771..4c8f387013 100644 --- a/packages/icons/svg/chevron-double-left.svg +++ b/packages/icons/svg/chevron-double-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chevron-double-right.svg b/packages/icons/svg/chevron-double-right.svg index 233f73b7cc..764b932016 100644 --- a/packages/icons/svg/chevron-double-right.svg +++ b/packages/icons/svg/chevron-double-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chevron-double-up.svg b/packages/icons/svg/chevron-double-up.svg index 6f59ed4489..331e886dd3 100644 --- a/packages/icons/svg/chevron-double-up.svg +++ b/packages/icons/svg/chevron-double-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chip.svg b/packages/icons/svg/chip.svg index b91c448271..8263404f1f 100644 --- a/packages/icons/svg/chip.svg +++ b/packages/icons/svg/chip.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/clipboard-arrow.svg b/packages/icons/svg/clipboard-arrow.svg index a6e5cec040..c1252acfe6 100644 --- a/packages/icons/svg/clipboard-arrow.svg +++ b/packages/icons/svg/clipboard-arrow.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/clipboard-check.svg b/packages/icons/svg/clipboard-check.svg index a8a63fac1f..8f12877d42 100644 --- a/packages/icons/svg/clipboard-check.svg +++ b/packages/icons/svg/clipboard-check.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/clipboard-copy.svg b/packages/icons/svg/clipboard-copy.svg index e0906b19e5..fbe0e0ba6c 100644 --- a/packages/icons/svg/clipboard-copy.svg +++ b/packages/icons/svg/clipboard-copy.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/clipboard-list.svg b/packages/icons/svg/clipboard-list.svg index cb2dd9c481..6fc191ea26 100644 --- a/packages/icons/svg/clipboard-list.svg +++ b/packages/icons/svg/clipboard-list.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/clock.svg b/packages/icons/svg/clock.svg index 2ceb0ee81b..87726a2a70 100644 --- a/packages/icons/svg/clock.svg +++ b/packages/icons/svg/clock.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cloud-download.svg b/packages/icons/svg/cloud-download.svg index 08c5340a89..cda8397fa5 100644 --- a/packages/icons/svg/cloud-download.svg +++ b/packages/icons/svg/cloud-download.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cloud-upload.svg b/packages/icons/svg/cloud-upload.svg index 9b1beda876..b2dc342149 100644 --- a/packages/icons/svg/cloud-upload.svg +++ b/packages/icons/svg/cloud-upload.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cloud.svg b/packages/icons/svg/cloud.svg index ee070a49fd..a0e3e11825 100644 --- a/packages/icons/svg/cloud.svg +++ b/packages/icons/svg/cloud.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/code.svg b/packages/icons/svg/code.svg index eb45225be3..71a10d3ea4 100644 --- a/packages/icons/svg/code.svg +++ b/packages/icons/svg/code.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cog.svg b/packages/icons/svg/cog.svg index e176496825..c80e146eb4 100644 --- a/packages/icons/svg/cog.svg +++ b/packages/icons/svg/cog.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/collection.svg b/packages/icons/svg/collection.svg index 67559ca1f5..ace705636d 100644 --- a/packages/icons/svg/collection.svg +++ b/packages/icons/svg/collection.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/color-swatch.svg b/packages/icons/svg/color-swatch.svg index f78e1bfa3b..537970ef97 100644 --- a/packages/icons/svg/color-swatch.svg +++ b/packages/icons/svg/color-swatch.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cpp.svg b/packages/icons/svg/cpp.svg index eaca061bdf..7cd91508fb 100644 --- a/packages/icons/svg/cpp.svg +++ b/packages/icons/svg/cpp.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/credit-card.svg b/packages/icons/svg/credit-card.svg index a2f4dc50ca..c66136eeaa 100644 --- a/packages/icons/svg/credit-card.svg +++ b/packages/icons/svg/credit-card.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/css3.svg b/packages/icons/svg/css3.svg index 6d990c6c25..3c646a4cd7 100644 --- a/packages/icons/svg/css3.svg +++ b/packages/icons/svg/css3.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cube-transparent.svg b/packages/icons/svg/cube-transparent.svg index 6def24a8e8..a25fcdf82a 100644 --- a/packages/icons/svg/cube-transparent.svg +++ b/packages/icons/svg/cube-transparent.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cube.svg b/packages/icons/svg/cube.svg index 7632bfaa47..e6af81d68e 100644 --- a/packages/icons/svg/cube.svg +++ b/packages/icons/svg/cube.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/currency-bangladesh.svg b/packages/icons/svg/currency-bangladesh.svg index 32abb2500b..5f80d9d671 100644 --- a/packages/icons/svg/currency-bangladesh.svg +++ b/packages/icons/svg/currency-bangladesh.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/currency-dollar.svg b/packages/icons/svg/currency-dollar.svg index 171a5462dc..cb1a5ff935 100644 --- a/packages/icons/svg/currency-dollar.svg +++ b/packages/icons/svg/currency-dollar.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/currency-euro.svg b/packages/icons/svg/currency-euro.svg index 4e07778f6e..a0d2fde1d7 100644 --- a/packages/icons/svg/currency-euro.svg +++ b/packages/icons/svg/currency-euro.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/currency-pound.svg b/packages/icons/svg/currency-pound.svg index 1d493980c0..db31e105e7 100644 --- a/packages/icons/svg/currency-pound.svg +++ b/packages/icons/svg/currency-pound.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/currency-rupee.svg b/packages/icons/svg/currency-rupee.svg index a6015c2773..0fb49c2904 100644 --- a/packages/icons/svg/currency-rupee.svg +++ b/packages/icons/svg/currency-rupee.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/currency-yen.svg b/packages/icons/svg/currency-yen.svg index bdef40e4ef..c64cd5b08a 100644 --- a/packages/icons/svg/currency-yen.svg +++ b/packages/icons/svg/currency-yen.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cursor-click.svg b/packages/icons/svg/cursor-click.svg index f59045bab5..6588069b96 100644 --- a/packages/icons/svg/cursor-click.svg +++ b/packages/icons/svg/cursor-click.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dailymotion.svg b/packages/icons/svg/dailymotion.svg index 186580e839..ebbea78f71 100644 --- a/packages/icons/svg/dailymotion.svg +++ b/packages/icons/svg/dailymotion.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dart.svg b/packages/icons/svg/dart.svg index 858fa7f948..b54b00ad36 100644 --- a/packages/icons/svg/dart.svg +++ b/packages/icons/svg/dart.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/database.svg b/packages/icons/svg/database.svg index edbedef549..09c17e5ebe 100644 --- a/packages/icons/svg/database.svg +++ b/packages/icons/svg/database.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/deno.svg b/packages/icons/svg/deno.svg index 2beeb40959..f86f39bca6 100644 --- a/packages/icons/svg/deno.svg +++ b/packages/icons/svg/deno.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/desktop-computer.svg b/packages/icons/svg/desktop-computer.svg index f3ea349e71..dbfc8ceecf 100644 --- a/packages/icons/svg/desktop-computer.svg +++ b/packages/icons/svg/desktop-computer.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/device-ipad.svg b/packages/icons/svg/device-ipad.svg index 40f59c9414..11fd115d30 100644 --- a/packages/icons/svg/device-ipad.svg +++ b/packages/icons/svg/device-ipad.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/device-mobile.svg b/packages/icons/svg/device-mobile.svg index d760958802..7ada51781d 100644 --- a/packages/icons/svg/device-mobile.svg +++ b/packages/icons/svg/device-mobile.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/discord.svg b/packages/icons/svg/discord.svg index 1a5f6a7df6..4a8f72b183 100644 --- a/packages/icons/svg/discord.svg +++ b/packages/icons/svg/discord.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/disqus.svg b/packages/icons/svg/disqus.svg index f79c4c21a0..c92bd8a050 100644 --- a/packages/icons/svg/disqus.svg +++ b/packages/icons/svg/disqus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/docker.svg b/packages/icons/svg/docker.svg index 7ff5a97dfb..4238ae2ded 100644 --- a/packages/icons/svg/docker.svg +++ b/packages/icons/svg/docker.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document-add.svg b/packages/icons/svg/document-add.svg index effd70fa00..c3c2881655 100644 --- a/packages/icons/svg/document-add.svg +++ b/packages/icons/svg/document-add.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document-download.svg b/packages/icons/svg/document-download.svg index 3f40428a5c..88a6fe15b8 100644 --- a/packages/icons/svg/document-download.svg +++ b/packages/icons/svg/document-download.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document-duplicate.svg b/packages/icons/svg/document-duplicate.svg index 362451ac84..78f8c9684d 100644 --- a/packages/icons/svg/document-duplicate.svg +++ b/packages/icons/svg/document-duplicate.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document-remove.svg b/packages/icons/svg/document-remove.svg index a540da8ee0..5587a4c9d0 100644 --- a/packages/icons/svg/document-remove.svg +++ b/packages/icons/svg/document-remove.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document-report.svg b/packages/icons/svg/document-report.svg index d9e05a28d2..54bc3ec0f5 100644 --- a/packages/icons/svg/document-report.svg +++ b/packages/icons/svg/document-report.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document-search.svg b/packages/icons/svg/document-search.svg index 24964c9ae2..def1a5187b 100644 --- a/packages/icons/svg/document-search.svg +++ b/packages/icons/svg/document-search.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document-text.svg b/packages/icons/svg/document-text.svg index 9d71c75313..f7b9cb6e99 100644 --- a/packages/icons/svg/document-text.svg +++ b/packages/icons/svg/document-text.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document.svg b/packages/icons/svg/document.svg index 0257810b2c..13dc121bd9 100644 --- a/packages/icons/svg/document.svg +++ b/packages/icons/svg/document.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dotnet.svg b/packages/icons/svg/dotnet.svg index b64f601d0d..8711f4e1ca 100644 --- a/packages/icons/svg/dotnet.svg +++ b/packages/icons/svg/dotnet.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dots-circle-horizontal.svg b/packages/icons/svg/dots-circle-horizontal.svg index dad73dff39..d795f4d3bd 100644 --- a/packages/icons/svg/dots-circle-horizontal.svg +++ b/packages/icons/svg/dots-circle-horizontal.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dots-horizontal.svg b/packages/icons/svg/dots-horizontal.svg index b7ffecc397..c443a85033 100644 --- a/packages/icons/svg/dots-horizontal.svg +++ b/packages/icons/svg/dots-horizontal.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dots-vertical.svg b/packages/icons/svg/dots-vertical.svg index 045e1d2254..8b714a75a3 100644 --- a/packages/icons/svg/dots-vertical.svg +++ b/packages/icons/svg/dots-vertical.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/download.svg b/packages/icons/svg/download.svg index 36043e5613..07c0516f65 100644 --- a/packages/icons/svg/download.svg +++ b/packages/icons/svg/download.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dribbble.svg b/packages/icons/svg/dribbble.svg index b894da7e09..43c7835bfc 100644 --- a/packages/icons/svg/dribbble.svg +++ b/packages/icons/svg/dribbble.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dropbox.svg b/packages/icons/svg/dropbox.svg index f5e33d992a..09cb5606b2 100644 --- a/packages/icons/svg/dropbox.svg +++ b/packages/icons/svg/dropbox.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/duplicate.svg b/packages/icons/svg/duplicate.svg index 5c7cd586b3..d29f79003d 100644 --- a/packages/icons/svg/duplicate.svg +++ b/packages/icons/svg/duplicate.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/emoji-happy.svg b/packages/icons/svg/emoji-happy.svg index 0f29752300..4697ac7b83 100644 --- a/packages/icons/svg/emoji-happy.svg +++ b/packages/icons/svg/emoji-happy.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/emoji-sad.svg b/packages/icons/svg/emoji-sad.svg index ae6bd7fc03..4de195e38e 100644 --- a/packages/icons/svg/emoji-sad.svg +++ b/packages/icons/svg/emoji-sad.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/etsy.svg b/packages/icons/svg/etsy.svg index 458024b16e..80603d8426 100644 --- a/packages/icons/svg/etsy.svg +++ b/packages/icons/svg/etsy.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/exclamation-circle.svg b/packages/icons/svg/exclamation-circle.svg index 8a6d4a83cc..793c7353c6 100644 --- a/packages/icons/svg/exclamation-circle.svg +++ b/packages/icons/svg/exclamation-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/exclamation.svg b/packages/icons/svg/exclamation.svg index 7e6aea22c3..e9fb190d09 100644 --- a/packages/icons/svg/exclamation.svg +++ b/packages/icons/svg/exclamation.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/external-link.svg b/packages/icons/svg/external-link.svg index 751e8cc85f..05bc04370b 100644 --- a/packages/icons/svg/external-link.svg +++ b/packages/icons/svg/external-link.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/eye-off.svg b/packages/icons/svg/eye-off.svg index f14e7d2546..9be39d982b 100644 --- a/packages/icons/svg/eye-off.svg +++ b/packages/icons/svg/eye-off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/eye.svg b/packages/icons/svg/eye.svg index fe018071e6..03c0260222 100644 --- a/packages/icons/svg/eye.svg +++ b/packages/icons/svg/eye.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/facebook.svg b/packages/icons/svg/facebook.svg index 5136b2dfc3..2ae585c940 100644 --- a/packages/icons/svg/facebook.svg +++ b/packages/icons/svg/facebook.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/fast-forward.svg b/packages/icons/svg/fast-forward.svg index aa283fb85d..87e88f634a 100644 --- a/packages/icons/svg/fast-forward.svg +++ b/packages/icons/svg/fast-forward.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/figma.svg b/packages/icons/svg/figma.svg index 7e5763d935..91f4b5534c 100644 --- a/packages/icons/svg/figma.svg +++ b/packages/icons/svg/figma.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/film.svg b/packages/icons/svg/film.svg index 79c6362d05..8cf85bd7f5 100644 --- a/packages/icons/svg/film.svg +++ b/packages/icons/svg/film.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/filter-line.svg b/packages/icons/svg/filter-line.svg index d0cf8aed36..81efd54eaf 100644 --- a/packages/icons/svg/filter-line.svg +++ b/packages/icons/svg/filter-line.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/filter.svg b/packages/icons/svg/filter.svg index 2ac3080edc..54702cb794 100644 --- a/packages/icons/svg/filter.svg +++ b/packages/icons/svg/filter.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/finger-print.svg b/packages/icons/svg/finger-print.svg index ec2b5041c8..04c1a3a271 100644 --- a/packages/icons/svg/finger-print.svg +++ b/packages/icons/svg/finger-print.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/fire.svg b/packages/icons/svg/fire.svg index d0c50c2c5a..55fe0b0bdf 100644 --- a/packages/icons/svg/fire.svg +++ b/packages/icons/svg/fire.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/firefox.svg b/packages/icons/svg/firefox.svg index f0ba68e4f8..0ff1c46987 100644 --- a/packages/icons/svg/firefox.svg +++ b/packages/icons/svg/firefox.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/flag.svg b/packages/icons/svg/flag.svg index 17bf3a2615..8925768dd7 100644 --- a/packages/icons/svg/flag.svg +++ b/packages/icons/svg/flag.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/flutter.svg b/packages/icons/svg/flutter.svg index 89459da28a..35443912de 100644 --- a/packages/icons/svg/flutter.svg +++ b/packages/icons/svg/flutter.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/folder-add.svg b/packages/icons/svg/folder-add.svg index 779289e893..de41de6a8a 100644 --- a/packages/icons/svg/folder-add.svg +++ b/packages/icons/svg/folder-add.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/folder-download.svg b/packages/icons/svg/folder-download.svg index 7a34b5f866..dceb3da399 100644 --- a/packages/icons/svg/folder-download.svg +++ b/packages/icons/svg/folder-download.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/folder-open.svg b/packages/icons/svg/folder-open.svg index 53c9223bb2..64d1672322 100644 --- a/packages/icons/svg/folder-open.svg +++ b/packages/icons/svg/folder-open.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/folder-remove.svg b/packages/icons/svg/folder-remove.svg index ec2bef76ce..c46533a35d 100644 --- a/packages/icons/svg/folder-remove.svg +++ b/packages/icons/svg/folder-remove.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/folder.svg b/packages/icons/svg/folder.svg index 423340ada2..080825087e 100644 --- a/packages/icons/svg/folder.svg +++ b/packages/icons/svg/folder.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/gift.svg b/packages/icons/svg/gift.svg index 6a62af5aed..bf1a554c10 100644 --- a/packages/icons/svg/gift.svg +++ b/packages/icons/svg/gift.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/git-branch.svg b/packages/icons/svg/git-branch.svg index 4f6834c81a..d888b4ad07 100644 --- a/packages/icons/svg/git-branch.svg +++ b/packages/icons/svg/git-branch.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/git-commit.svg b/packages/icons/svg/git-commit.svg index a608e376d1..ed7ac4e239 100644 --- a/packages/icons/svg/git-commit.svg +++ b/packages/icons/svg/git-commit.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/git.svg b/packages/icons/svg/git.svg index 2e2cbee5e8..2747f1ae28 100644 --- a/packages/icons/svg/git.svg +++ b/packages/icons/svg/git.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/github.svg b/packages/icons/svg/github.svg index ca8095a9a3..8d32ec6caa 100644 --- a/packages/icons/svg/github.svg +++ b/packages/icons/svg/github.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/gitlab.svg b/packages/icons/svg/gitlab.svg index 720a635078..cf09ec35c0 100644 --- a/packages/icons/svg/gitlab.svg +++ b/packages/icons/svg/gitlab.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/globe-alt.svg b/packages/icons/svg/globe-alt.svg index a543e9b0dd..006974ac37 100644 --- a/packages/icons/svg/globe-alt.svg +++ b/packages/icons/svg/globe-alt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/globe.svg b/packages/icons/svg/globe.svg index cc8005b148..aeb7722c73 100644 --- a/packages/icons/svg/globe.svg +++ b/packages/icons/svg/globe.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/google.svg b/packages/icons/svg/google.svg index 6cd7b1b843..244a0cd34c 100644 --- a/packages/icons/svg/google.svg +++ b/packages/icons/svg/google.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/graphql.svg b/packages/icons/svg/graphql.svg new file mode 100644 index 0000000000..1cd235b60a --- /dev/null +++ b/packages/icons/svg/graphql.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/hand.svg b/packages/icons/svg/hand.svg index 63b82ffb9c..cf7ad1b921 100644 --- a/packages/icons/svg/hand.svg +++ b/packages/icons/svg/hand.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/hashtag.svg b/packages/icons/svg/hashtag.svg index aadae9ce51..be0ae1ea6c 100644 --- a/packages/icons/svg/hashtag.svg +++ b/packages/icons/svg/hashtag.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/heart.svg b/packages/icons/svg/heart.svg index 9a2ff35bbc..028a953460 100644 --- a/packages/icons/svg/heart.svg +++ b/packages/icons/svg/heart.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/home.svg b/packages/icons/svg/home.svg index b9119f977e..4c45b1a122 100644 --- a/packages/icons/svg/home.svg +++ b/packages/icons/svg/home.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/html5.svg b/packages/icons/svg/html5.svg index 7c24ce087d..da8876da5c 100644 --- a/packages/icons/svg/html5.svg +++ b/packages/icons/svg/html5.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/identification.svg b/packages/icons/svg/identification.svg index 4d80cf2501..be9aac0582 100644 --- a/packages/icons/svg/identification.svg +++ b/packages/icons/svg/identification.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/inbox-in.svg b/packages/icons/svg/inbox-in.svg index b8b5645393..e2a3bed0dd 100644 --- a/packages/icons/svg/inbox-in.svg +++ b/packages/icons/svg/inbox-in.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/inbox.svg b/packages/icons/svg/inbox.svg index 94e18c139b..f9485ff6e4 100644 --- a/packages/icons/svg/inbox.svg +++ b/packages/icons/svg/inbox.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/info.svg b/packages/icons/svg/info.svg index a8248369d7..85f3664c7e 100644 --- a/packages/icons/svg/info.svg +++ b/packages/icons/svg/info.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/instagram.svg b/packages/icons/svg/instagram.svg index d134ef81a7..24878c41cf 100644 --- a/packages/icons/svg/instagram.svg +++ b/packages/icons/svg/instagram.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/ionic.svg b/packages/icons/svg/ionic.svg new file mode 100644 index 0000000000..bc6b1fab41 --- /dev/null +++ b/packages/icons/svg/ionic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/ios.svg b/packages/icons/svg/ios.svg index 92aa10d08b..72d3f6fa35 100644 --- a/packages/icons/svg/ios.svg +++ b/packages/icons/svg/ios.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/java.svg b/packages/icons/svg/java.svg index 1bfdfb9a52..193fe55530 100644 --- a/packages/icons/svg/java.svg +++ b/packages/icons/svg/java.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/js.svg b/packages/icons/svg/js.svg index 468fd88fdc..f43d7e92b1 100644 --- a/packages/icons/svg/js.svg +++ b/packages/icons/svg/js.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/key.svg b/packages/icons/svg/key.svg index 50628f8254..ea30abb229 100644 --- a/packages/icons/svg/key.svg +++ b/packages/icons/svg/key.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/kotlin.svg b/packages/icons/svg/kotlin.svg index 7a30706ed3..f7721b934b 100644 --- a/packages/icons/svg/kotlin.svg +++ b/packages/icons/svg/kotlin.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/light-bulb.svg b/packages/icons/svg/light-bulb.svg index 741f448ebc..8e909889aa 100644 --- a/packages/icons/svg/light-bulb.svg +++ b/packages/icons/svg/light-bulb.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/lightning-bolt.svg b/packages/icons/svg/lightning-bolt.svg index fee2f21fdb..7504e626d4 100644 --- a/packages/icons/svg/lightning-bolt.svg +++ b/packages/icons/svg/lightning-bolt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/link.svg b/packages/icons/svg/link.svg index 8ccd850e40..e359b2b26c 100644 --- a/packages/icons/svg/link.svg +++ b/packages/icons/svg/link.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/linkedin.svg b/packages/icons/svg/linkedin.svg index f0c56dc412..bd68b837e8 100644 --- a/packages/icons/svg/linkedin.svg +++ b/packages/icons/svg/linkedin.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/linux.svg b/packages/icons/svg/linux.svg index 6956fddcb3..a3f6cbbeff 100644 --- a/packages/icons/svg/linux.svg +++ b/packages/icons/svg/linux.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/list.svg b/packages/icons/svg/list.svg index 05e32f3b62..81efd54eaf 100644 --- a/packages/icons/svg/list.svg +++ b/packages/icons/svg/list.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/location-marker.svg b/packages/icons/svg/location-marker.svg index 9008d765a6..4adbb62c11 100644 --- a/packages/icons/svg/location-marker.svg +++ b/packages/icons/svg/location-marker.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/lock-closed.svg b/packages/icons/svg/lock-closed.svg index a8c12ee9bb..79a648a3a3 100644 --- a/packages/icons/svg/lock-closed.svg +++ b/packages/icons/svg/lock-closed.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/lock-open.svg b/packages/icons/svg/lock-open.svg index d4fbf883d0..9f7f054fac 100644 --- a/packages/icons/svg/lock-open.svg +++ b/packages/icons/svg/lock-open.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/logout-left.svg b/packages/icons/svg/logout-left.svg index 57a554d818..c1eb890c11 100644 --- a/packages/icons/svg/logout-left.svg +++ b/packages/icons/svg/logout-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/logout-right.svg b/packages/icons/svg/logout-right.svg index c5d856f7be..a0186b5ff0 100644 --- a/packages/icons/svg/logout-right.svg +++ b/packages/icons/svg/logout-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/mail-open.svg b/packages/icons/svg/mail-open.svg index 464a906af1..bad0db7fa3 100644 --- a/packages/icons/svg/mail-open.svg +++ b/packages/icons/svg/mail-open.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/mail.svg b/packages/icons/svg/mail.svg index b032582655..6308205207 100644 --- a/packages/icons/svg/mail.svg +++ b/packages/icons/svg/mail.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/map.svg b/packages/icons/svg/map.svg index edebb2cb05..873014f088 100644 --- a/packages/icons/svg/map.svg +++ b/packages/icons/svg/map.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/md-library.svg b/packages/icons/svg/md-library.svg index 85786d0246..38ca5ce16e 100644 --- a/packages/icons/svg/md-library.svg +++ b/packages/icons/svg/md-library.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/medium.svg b/packages/icons/svg/medium.svg index 8c3e46e2bf..e5854bb88c 100644 --- a/packages/icons/svg/medium.svg +++ b/packages/icons/svg/medium.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/meilisearch.svg b/packages/icons/svg/meilisearch.svg new file mode 100644 index 0000000000..818995bf0f --- /dev/null +++ b/packages/icons/svg/meilisearch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/menu-alt-1.svg b/packages/icons/svg/menu-alt-1.svg index d432ebb6a9..7f8a6bc2ac 100644 --- a/packages/icons/svg/menu-alt-1.svg +++ b/packages/icons/svg/menu-alt-1.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/menu-alt-2.svg b/packages/icons/svg/menu-alt-2.svg index 548f9bfa3e..65ddece2ee 100644 --- a/packages/icons/svg/menu-alt-2.svg +++ b/packages/icons/svg/menu-alt-2.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/menu-alt-3.svg b/packages/icons/svg/menu-alt-3.svg index 4a4130d090..160444e629 100644 --- a/packages/icons/svg/menu-alt-3.svg +++ b/packages/icons/svg/menu-alt-3.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/menu-alt-4.svg b/packages/icons/svg/menu-alt-4.svg index 2133779e8e..37db1fc9be 100644 --- a/packages/icons/svg/menu-alt-4.svg +++ b/packages/icons/svg/menu-alt-4.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/menu.svg b/packages/icons/svg/menu.svg index c9e605428f..ce3b2d735c 100644 --- a/packages/icons/svg/menu.svg +++ b/packages/icons/svg/menu.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/microphone.svg b/packages/icons/svg/microphone.svg index 5e9a981907..21612bcab1 100644 --- a/packages/icons/svg/microphone.svg +++ b/packages/icons/svg/microphone.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/microsoft_edge.svg b/packages/icons/svg/microsoft_edge.svg index c9051b772f..5275335325 100644 --- a/packages/icons/svg/microsoft_edge.svg +++ b/packages/icons/svg/microsoft_edge.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/minus-circle.svg b/packages/icons/svg/minus-circle.svg index 6ef7fb2545..7d2d505efd 100644 --- a/packages/icons/svg/minus-circle.svg +++ b/packages/icons/svg/minus-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/minus-sm.svg b/packages/icons/svg/minus-sm.svg index 5a948a9cab..f5c27a729d 100644 --- a/packages/icons/svg/minus-sm.svg +++ b/packages/icons/svg/minus-sm.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/minus.svg b/packages/icons/svg/minus.svg index d591735ea7..673e130d31 100644 --- a/packages/icons/svg/minus.svg +++ b/packages/icons/svg/minus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/mode.svg b/packages/icons/svg/mode.svg new file mode 100644 index 0000000000..5dc51044e3 --- /dev/null +++ b/packages/icons/svg/mode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/moon.svg b/packages/icons/svg/moon.svg index b1a3121c9d..55e73fcfea 100644 --- a/packages/icons/svg/moon.svg +++ b/packages/icons/svg/moon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/msg91.svg b/packages/icons/svg/msg91.svg index dc95e0d3f5..12f7ad2ee4 100644 --- a/packages/icons/svg/msg91.svg +++ b/packages/icons/svg/msg91.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/music-note.svg b/packages/icons/svg/music-note.svg index b0826db6e7..dbfe09807c 100644 --- a/packages/icons/svg/music-note.svg +++ b/packages/icons/svg/music-note.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/newspaper.svg b/packages/icons/svg/newspaper.svg index 01f6b0e354..91131c8081 100644 --- a/packages/icons/svg/newspaper.svg +++ b/packages/icons/svg/newspaper.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/nextjs.svg b/packages/icons/svg/nextjs.svg new file mode 100644 index 0000000000..e14e810c42 --- /dev/null +++ b/packages/icons/svg/nextjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/node_js.svg b/packages/icons/svg/node_js.svg index 1c243bcf3c..d8ff84b4bf 100644 --- a/packages/icons/svg/node_js.svg +++ b/packages/icons/svg/node_js.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/notion.svg b/packages/icons/svg/notion.svg index 5502b70107..ebb24bfc5a 100644 --- a/packages/icons/svg/notion.svg +++ b/packages/icons/svg/notion.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/null.svg b/packages/icons/svg/null.svg index f100457275..3310d6968f 100644 --- a/packages/icons/svg/null.svg +++ b/packages/icons/svg/null.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/nuxt.svg b/packages/icons/svg/nuxt.svg new file mode 100644 index 0000000000..c8fd4e7b72 --- /dev/null +++ b/packages/icons/svg/nuxt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/office-building.svg b/packages/icons/svg/office-building.svg index 78510484dd..03a47d5c40 100644 --- a/packages/icons/svg/office-building.svg +++ b/packages/icons/svg/office-building.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/okta.svg b/packages/icons/svg/okta.svg index d22921b241..21d14b9b11 100644 --- a/packages/icons/svg/okta.svg +++ b/packages/icons/svg/okta.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/open-ai.svg b/packages/icons/svg/open-ai.svg new file mode 100644 index 0000000000..5518669492 --- /dev/null +++ b/packages/icons/svg/open-ai.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/openid.svg b/packages/icons/svg/openid.svg new file mode 100644 index 0000000000..749b69ec96 --- /dev/null +++ b/packages/icons/svg/openid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/opera.svg b/packages/icons/svg/opera.svg index 20fbc168e3..207fa081e6 100644 --- a/packages/icons/svg/opera.svg +++ b/packages/icons/svg/opera.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/pangea.svg b/packages/icons/svg/pangea.svg new file mode 100644 index 0000000000..c42934a061 --- /dev/null +++ b/packages/icons/svg/pangea.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/paper-airplane.svg b/packages/icons/svg/paper-airplane.svg index 54af7b8dcd..176b1c9cbc 100644 --- a/packages/icons/svg/paper-airplane.svg +++ b/packages/icons/svg/paper-airplane.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/paper-clip.svg b/packages/icons/svg/paper-clip.svg index c50e21a13b..cbb6511f74 100644 --- a/packages/icons/svg/paper-clip.svg +++ b/packages/icons/svg/paper-clip.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/pause.svg b/packages/icons/svg/pause.svg index 496bafebf5..4d481588b8 100644 --- a/packages/icons/svg/pause.svg +++ b/packages/icons/svg/pause.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/paypal.svg b/packages/icons/svg/paypal.svg index 58126d9cc0..fe232d440b 100644 --- a/packages/icons/svg/paypal.svg +++ b/packages/icons/svg/paypal.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/pencil-alt.svg b/packages/icons/svg/pencil-alt.svg index ed518852dd..7797f4f782 100644 --- a/packages/icons/svg/pencil-alt.svg +++ b/packages/icons/svg/pencil-alt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/pencil.svg b/packages/icons/svg/pencil.svg index 8287d9d11b..7aa926e36b 100644 --- a/packages/icons/svg/pencil.svg +++ b/packages/icons/svg/pencil.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/perspective-api.svg b/packages/icons/svg/perspective-api.svg new file mode 100644 index 0000000000..fdfe7f4970 --- /dev/null +++ b/packages/icons/svg/perspective-api.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/phone-incoming.svg b/packages/icons/svg/phone-incoming.svg index 87462a7144..51e116b2ec 100644 --- a/packages/icons/svg/phone-incoming.svg +++ b/packages/icons/svg/phone-incoming.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/phone-missed-call.svg b/packages/icons/svg/phone-missed-call.svg index ff4604c70e..03a9b83e3d 100644 --- a/packages/icons/svg/phone-missed-call.svg +++ b/packages/icons/svg/phone-missed-call.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/phone-outgoing.svg b/packages/icons/svg/phone-outgoing.svg index 56667066dd..796e032290 100644 --- a/packages/icons/svg/phone-outgoing.svg +++ b/packages/icons/svg/phone-outgoing.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/phone.svg b/packages/icons/svg/phone.svg index c459df452a..5e83f7cfda 100644 --- a/packages/icons/svg/phone.svg +++ b/packages/icons/svg/phone.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/photograph.svg b/packages/icons/svg/photograph.svg index 0cd3fa5dc8..6ad5f77d47 100644 --- a/packages/icons/svg/photograph.svg +++ b/packages/icons/svg/photograph.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/php.svg b/packages/icons/svg/php.svg index affa628275..b1bd4ce43e 100644 --- a/packages/icons/svg/php.svg +++ b/packages/icons/svg/php.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/pinterest.svg b/packages/icons/svg/pinterest.svg index 87796c9453..b078e7233b 100644 --- a/packages/icons/svg/pinterest.svg +++ b/packages/icons/svg/pinterest.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/play-button.svg b/packages/icons/svg/play-button.svg new file mode 100644 index 0000000000..be24f3ef63 --- /dev/null +++ b/packages/icons/svg/play-button.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/play.svg b/packages/icons/svg/play.svg index 0d3956f62e..c43bc621b6 100644 --- a/packages/icons/svg/play.svg +++ b/packages/icons/svg/play.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/plus-circle.svg b/packages/icons/svg/plus-circle.svg index b86faf7aa7..22c9c4977b 100644 --- a/packages/icons/svg/plus-circle.svg +++ b/packages/icons/svg/plus-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/plus-sm.svg b/packages/icons/svg/plus-sm.svg index 4a63828018..1a7893e189 100644 --- a/packages/icons/svg/plus-sm.svg +++ b/packages/icons/svg/plus-sm.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/plus.svg b/packages/icons/svg/plus.svg index e2fcf30fcd..49388e8811 100644 --- a/packages/icons/svg/plus.svg +++ b/packages/icons/svg/plus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/podio.svg b/packages/icons/svg/podio.svg index 018fde952f..b45f0284bc 100644 --- a/packages/icons/svg/podio.svg +++ b/packages/icons/svg/podio.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/presentation-chart-1.svg b/packages/icons/svg/presentation-chart-1.svg index 86a771e2e3..32a3ec7af4 100644 --- a/packages/icons/svg/presentation-chart-1.svg +++ b/packages/icons/svg/presentation-chart-1.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/presentation-chart-2.svg b/packages/icons/svg/presentation-chart-2.svg index 16cbca3203..445941f353 100644 --- a/packages/icons/svg/presentation-chart-2.svg +++ b/packages/icons/svg/presentation-chart-2.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/printer.svg b/packages/icons/svg/printer.svg index 506d61b79f..a5f0257b4f 100644 --- a/packages/icons/svg/printer.svg +++ b/packages/icons/svg/printer.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/product_hunt.svg b/packages/icons/svg/product_hunt.svg index 54136292ee..fabdbfc2c6 100644 --- a/packages/icons/svg/product_hunt.svg +++ b/packages/icons/svg/product_hunt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/puzzle.svg b/packages/icons/svg/puzzle.svg index fb2b425833..ab4b873b52 100644 --- a/packages/icons/svg/puzzle.svg +++ b/packages/icons/svg/puzzle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/python.svg b/packages/icons/svg/python.svg index 4aa8e4a155..2c73d88c00 100644 --- a/packages/icons/svg/python.svg +++ b/packages/icons/svg/python.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/qrcode.svg b/packages/icons/svg/qrcode.svg index 0753c6dd88..e05ff2258b 100644 --- a/packages/icons/svg/qrcode.svg +++ b/packages/icons/svg/qrcode.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/question-mark-circle.svg b/packages/icons/svg/question-mark-circle.svg index e6a0cecad6..1ac50ebbc9 100644 --- a/packages/icons/svg/question-mark-circle.svg +++ b/packages/icons/svg/question-mark-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/qwik.svg b/packages/icons/svg/qwik.svg new file mode 100644 index 0000000000..0da5501efd --- /dev/null +++ b/packages/icons/svg/qwik.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/react.svg b/packages/icons/svg/react.svg index e8a0aea676..fdebaf5188 100644 --- a/packages/icons/svg/react.svg +++ b/packages/icons/svg/react.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/receipt-refund.svg b/packages/icons/svg/receipt-refund.svg index 2350b0d9fb..ee9b9c68c7 100644 --- a/packages/icons/svg/receipt-refund.svg +++ b/packages/icons/svg/receipt-refund.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/receipt-tax.svg b/packages/icons/svg/receipt-tax.svg index 2be1b6b5a7..8e60645be2 100644 --- a/packages/icons/svg/receipt-tax.svg +++ b/packages/icons/svg/receipt-tax.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/reddit.svg b/packages/icons/svg/reddit.svg index 2f3f3db597..86999ca9e6 100644 --- a/packages/icons/svg/reddit.svg +++ b/packages/icons/svg/reddit.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/refresh.svg b/packages/icons/svg/refresh.svg index 8527bd3eb1..a2a7961bd5 100644 --- a/packages/icons/svg/refresh.svg +++ b/packages/icons/svg/refresh.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/relation.svg b/packages/icons/svg/relation.svg index b5572a72c5..ca6c970e0b 100644 --- a/packages/icons/svg/relation.svg +++ b/packages/icons/svg/relation.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/relationship.svg b/packages/icons/svg/relationship.svg index 9f985545e1..0dfc93145e 100644 --- a/packages/icons/svg/relationship.svg +++ b/packages/icons/svg/relationship.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/replay.svg b/packages/icons/svg/replay.svg index 6e0bac8f51..89a9da502f 100644 --- a/packages/icons/svg/replay.svg +++ b/packages/icons/svg/replay.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/rewind.svg b/packages/icons/svg/rewind.svg index 19eada0c2d..93dfdcf95d 100644 --- a/packages/icons/svg/rewind.svg +++ b/packages/icons/svg/rewind.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/rss.svg b/packages/icons/svg/rss.svg index 47fac0b8b8..69e980e2ef 100644 --- a/packages/icons/svg/rss.svg +++ b/packages/icons/svg/rss.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/ruby.svg b/packages/icons/svg/ruby.svg index 827078aea1..90b717130c 100644 --- a/packages/icons/svg/ruby.svg +++ b/packages/icons/svg/ruby.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/safari.svg b/packages/icons/svg/safari.svg index 3c209e411a..0bd7732a28 100644 --- a/packages/icons/svg/safari.svg +++ b/packages/icons/svg/safari.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/salesforce.svg b/packages/icons/svg/salesforce.svg index eddcc3f3ae..5f7538f7e9 100644 --- a/packages/icons/svg/salesforce.svg +++ b/packages/icons/svg/salesforce.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/save-as.svg b/packages/icons/svg/save-as.svg index 22cb1bdae2..da7ffcc86c 100644 --- a/packages/icons/svg/save-as.svg +++ b/packages/icons/svg/save-as.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/save.svg b/packages/icons/svg/save.svg index b928439a91..5fbdd0fe8f 100644 --- a/packages/icons/svg/save.svg +++ b/packages/icons/svg/save.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/scale.svg b/packages/icons/svg/scale.svg index 9ee6a1f31a..d890bfc8a1 100644 --- a/packages/icons/svg/scale.svg +++ b/packages/icons/svg/scale.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/scissors.svg b/packages/icons/svg/scissors.svg index 254c7863d0..019419371a 100644 --- a/packages/icons/svg/scissors.svg +++ b/packages/icons/svg/scissors.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/search-circle.svg b/packages/icons/svg/search-circle.svg index fa85a3c55b..4a3555fd27 100644 --- a/packages/icons/svg/search-circle.svg +++ b/packages/icons/svg/search-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/search.svg b/packages/icons/svg/search.svg index fa5104da45..fef610bc24 100644 --- a/packages/icons/svg/search.svg +++ b/packages/icons/svg/search.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/selector.svg b/packages/icons/svg/selector.svg index a3a8563190..a31defd550 100644 --- a/packages/icons/svg/selector.svg +++ b/packages/icons/svg/selector.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/send.svg b/packages/icons/svg/send.svg new file mode 100644 index 0000000000..63a0fecb7e --- /dev/null +++ b/packages/icons/svg/send.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/server.svg b/packages/icons/svg/server.svg index b262f276d9..3b4bf7547e 100644 --- a/packages/icons/svg/server.svg +++ b/packages/icons/svg/server.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/share.svg b/packages/icons/svg/share.svg index 90858d76b6..bf19e71621 100644 --- a/packages/icons/svg/share.svg +++ b/packages/icons/svg/share.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/shield-check.svg b/packages/icons/svg/shield-check.svg index f7e6547b02..97c8644107 100644 --- a/packages/icons/svg/shield-check.svg +++ b/packages/icons/svg/shield-check.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/shield-exclamation.svg b/packages/icons/svg/shield-exclamation.svg index c36619618c..3ca134ecc8 100644 --- a/packages/icons/svg/shield-exclamation.svg +++ b/packages/icons/svg/shield-exclamation.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/shopping-bag.svg b/packages/icons/svg/shopping-bag.svg index 2b6edacda6..12d12e74d4 100644 --- a/packages/icons/svg/shopping-bag.svg +++ b/packages/icons/svg/shopping-bag.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/shopping-cart.svg b/packages/icons/svg/shopping-cart.svg index b8ae181296..1db44e4c88 100644 --- a/packages/icons/svg/shopping-cart.svg +++ b/packages/icons/svg/shopping-cart.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/skype.svg b/packages/icons/svg/skype.svg index da36f9eb95..801b6a3198 100644 --- a/packages/icons/svg/skype.svg +++ b/packages/icons/svg/skype.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/slack.svg b/packages/icons/svg/slack.svg index bc10f0ec79..05d028d0e4 100644 --- a/packages/icons/svg/slack.svg +++ b/packages/icons/svg/slack.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/sort-ascending.svg b/packages/icons/svg/sort-ascending.svg index f99cdf79c8..6788e76069 100644 --- a/packages/icons/svg/sort-ascending.svg +++ b/packages/icons/svg/sort-ascending.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/sort-descending.svg b/packages/icons/svg/sort-descending.svg index b3ddd8d270..9af3471b55 100644 --- a/packages/icons/svg/sort-descending.svg +++ b/packages/icons/svg/sort-descending.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/sparkles.svg b/packages/icons/svg/sparkles.svg index 5d22079504..3114b62792 100644 --- a/packages/icons/svg/sparkles.svg +++ b/packages/icons/svg/sparkles.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/speakerphone.svg b/packages/icons/svg/speakerphone.svg index f2836a9ad3..86b9b15df8 100644 --- a/packages/icons/svg/speakerphone.svg +++ b/packages/icons/svg/speakerphone.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/spin.svg b/packages/icons/svg/spin.svg new file mode 100644 index 0000000000..d3273a72b7 --- /dev/null +++ b/packages/icons/svg/spin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/spotify.svg b/packages/icons/svg/spotify.svg index 57a85ea810..7249a1c94b 100644 --- a/packages/icons/svg/spotify.svg +++ b/packages/icons/svg/spotify.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/star.svg b/packages/icons/svg/star.svg index ee4866bde1..9ff8dc1fdc 100644 --- a/packages/icons/svg/star.svg +++ b/packages/icons/svg/star.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/status-offline.svg b/packages/icons/svg/status-offline.svg index 6ea2215e2c..58783871ed 100644 --- a/packages/icons/svg/status-offline.svg +++ b/packages/icons/svg/status-offline.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/status-online.svg b/packages/icons/svg/status-online.svg index 4833b676d8..dd875d1cf9 100644 --- a/packages/icons/svg/status-online.svg +++ b/packages/icons/svg/status-online.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/stop.svg b/packages/icons/svg/stop.svg index 0dee24885b..dc547d5e6c 100644 --- a/packages/icons/svg/stop.svg +++ b/packages/icons/svg/stop.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/stripe.svg b/packages/icons/svg/stripe.svg index c4df3ea472..adced8ce17 100644 --- a/packages/icons/svg/stripe.svg +++ b/packages/icons/svg/stripe.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/sun.svg b/packages/icons/svg/sun.svg index 4579b52202..da8c275220 100644 --- a/packages/icons/svg/sun.svg +++ b/packages/icons/svg/sun.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/support.svg b/packages/icons/svg/support.svg index 0a7a94abf4..e2c5c90e97 100644 --- a/packages/icons/svg/support.svg +++ b/packages/icons/svg/support.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/svelte.svg b/packages/icons/svg/svelte.svg new file mode 100644 index 0000000000..ba14cc9126 --- /dev/null +++ b/packages/icons/svg/svelte.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/swift.svg b/packages/icons/svg/swift.svg index 1970aa24c1..351591dc31 100644 --- a/packages/icons/svg/swift.svg +++ b/packages/icons/svg/swift.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/switch-horizontal.svg b/packages/icons/svg/switch-horizontal.svg index 80afde1d9c..cf42af952c 100644 --- a/packages/icons/svg/switch-horizontal.svg +++ b/packages/icons/svg/switch-horizontal.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/switch-vertical.svg b/packages/icons/svg/switch-vertical.svg index 52c7fc43e6..7088047e5f 100644 --- a/packages/icons/svg/switch-vertical.svg +++ b/packages/icons/svg/switch-vertical.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/table.svg b/packages/icons/svg/table.svg index 6d3024c774..5bd86b6fc7 100644 --- a/packages/icons/svg/table.svg +++ b/packages/icons/svg/table.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/tag.svg b/packages/icons/svg/tag.svg index 95fc03eb4a..261f05888d 100644 --- a/packages/icons/svg/tag.svg +++ b/packages/icons/svg/tag.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/telegram.svg b/packages/icons/svg/telegram.svg index 6b5b930437..55acff5a14 100644 --- a/packages/icons/svg/telegram.svg +++ b/packages/icons/svg/telegram.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/telesign.svg b/packages/icons/svg/telesign.svg index 7877bd0261..ce49928157 100644 --- a/packages/icons/svg/telesign.svg +++ b/packages/icons/svg/telesign.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/template.svg b/packages/icons/svg/template.svg index d95f504602..9bc959b93d 100644 --- a/packages/icons/svg/template.svg +++ b/packages/icons/svg/template.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/terminal.svg b/packages/icons/svg/terminal.svg index 57a22af4aa..539d0cd698 100644 --- a/packages/icons/svg/terminal.svg +++ b/packages/icons/svg/terminal.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/text.svg b/packages/icons/svg/text.svg index 4501caa073..169eb13ba6 100644 --- a/packages/icons/svg/text.svg +++ b/packages/icons/svg/text.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/textmagic.svg b/packages/icons/svg/textmagic.svg index 46f5a34991..a3db160d0d 100644 --- a/packages/icons/svg/textmagic.svg +++ b/packages/icons/svg/textmagic.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/thumb-dowm.svg b/packages/icons/svg/thumb-dowm.svg index 9fe2ca8472..25ecc9041e 100644 --- a/packages/icons/svg/thumb-dowm.svg +++ b/packages/icons/svg/thumb-dowm.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/thumb-up.svg b/packages/icons/svg/thumb-up.svg index c4c35d050e..b3d3802005 100644 --- a/packages/icons/svg/thumb-up.svg +++ b/packages/icons/svg/thumb-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/ticket.svg b/packages/icons/svg/ticket.svg index 124a5f90da..c05bfcec0a 100644 --- a/packages/icons/svg/ticket.svg +++ b/packages/icons/svg/ticket.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/tiktok.svg b/packages/icons/svg/tiktok.svg index c6d4248a69..085392ec57 100644 --- a/packages/icons/svg/tiktok.svg +++ b/packages/icons/svg/tiktok.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/toggle.svg b/packages/icons/svg/toggle.svg index bea95ca4b4..45b6816067 100644 --- a/packages/icons/svg/toggle.svg +++ b/packages/icons/svg/toggle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/tradeshift.svg b/packages/icons/svg/tradeshift.svg index 8aa941ce0a..9b280885bc 100644 --- a/packages/icons/svg/tradeshift.svg +++ b/packages/icons/svg/tradeshift.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/translate.svg b/packages/icons/svg/translate.svg index 2af2704a09..e4eed82f77 100644 --- a/packages/icons/svg/translate.svg +++ b/packages/icons/svg/translate.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/trash.svg b/packages/icons/svg/trash.svg index afb326508e..a0d8e3831f 100644 --- a/packages/icons/svg/trash.svg +++ b/packages/icons/svg/trash.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/trending-down.svg b/packages/icons/svg/trending-down.svg index c3fb54f1a1..65f941863b 100644 --- a/packages/icons/svg/trending-down.svg +++ b/packages/icons/svg/trending-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/trending-up.svg b/packages/icons/svg/trending-up.svg index d99591ac57..ea9dcf9a28 100644 --- a/packages/icons/svg/trending-up.svg +++ b/packages/icons/svg/trending-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/truck.svg b/packages/icons/svg/truck.svg index 1b990a8153..9a001257ce 100644 --- a/packages/icons/svg/truck.svg +++ b/packages/icons/svg/truck.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/tumbir.svg b/packages/icons/svg/tumbir.svg index 33a6a17f24..3571d874db 100644 --- a/packages/icons/svg/tumbir.svg +++ b/packages/icons/svg/tumbir.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/twilio.svg b/packages/icons/svg/twilio.svg index 0341d9f64f..ff270d6e42 100644 --- a/packages/icons/svg/twilio.svg +++ b/packages/icons/svg/twilio.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/twitch.svg b/packages/icons/svg/twitch.svg index cc372198f8..e154ea2ae7 100644 --- a/packages/icons/svg/twitch.svg +++ b/packages/icons/svg/twitch.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/twitter.svg b/packages/icons/svg/twitter.svg index a427360f73..79d72098ce 100644 --- a/packages/icons/svg/twitter.svg +++ b/packages/icons/svg/twitter.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/typescript.svg b/packages/icons/svg/typescript.svg new file mode 100644 index 0000000000..1bfce11af4 --- /dev/null +++ b/packages/icons/svg/typescript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/unity.svg b/packages/icons/svg/unity.svg index d9cc538626..7d7fcc1c3a 100644 --- a/packages/icons/svg/unity.svg +++ b/packages/icons/svg/unity.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/upload.svg b/packages/icons/svg/upload.svg index 023fc352f9..986e71e80b 100644 --- a/packages/icons/svg/upload.svg +++ b/packages/icons/svg/upload.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/user-add.svg b/packages/icons/svg/user-add.svg index e650d58bef..93539d9f5f 100644 --- a/packages/icons/svg/user-add.svg +++ b/packages/icons/svg/user-add.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/user-circle.svg b/packages/icons/svg/user-circle.svg index c315e1a922..bfbb2e1308 100644 --- a/packages/icons/svg/user-circle.svg +++ b/packages/icons/svg/user-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/user-group.svg b/packages/icons/svg/user-group.svg index 181829a441..e5f0ec49c7 100644 --- a/packages/icons/svg/user-group.svg +++ b/packages/icons/svg/user-group.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/user-remove.svg b/packages/icons/svg/user-remove.svg index fd056a8e28..7539e08b42 100644 --- a/packages/icons/svg/user-remove.svg +++ b/packages/icons/svg/user-remove.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/user.svg b/packages/icons/svg/user.svg index 5af915d822..df86099dba 100644 --- a/packages/icons/svg/user.svg +++ b/packages/icons/svg/user.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/users.svg b/packages/icons/svg/users.svg index 8aef2df103..d73360c4b5 100644 --- a/packages/icons/svg/users.svg +++ b/packages/icons/svg/users.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/variable.svg b/packages/icons/svg/variable.svg index d55d6f2aee..9a11430410 100644 --- a/packages/icons/svg/variable.svg +++ b/packages/icons/svg/variable.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/video-camera.svg b/packages/icons/svg/video-camera.svg index aff00ecf52..e5b10b1745 100644 --- a/packages/icons/svg/video-camera.svg +++ b/packages/icons/svg/video-camera.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/video.svg b/packages/icons/svg/video.svg new file mode 100644 index 0000000000..6741a85337 --- /dev/null +++ b/packages/icons/svg/video.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/view-boards.svg b/packages/icons/svg/view-boards.svg index 22a909f171..6276140efa 100644 --- a/packages/icons/svg/view-boards.svg +++ b/packages/icons/svg/view-boards.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/view-grid-add.svg b/packages/icons/svg/view-grid-add.svg index 475e28ca23..e156eca430 100644 --- a/packages/icons/svg/view-grid-add.svg +++ b/packages/icons/svg/view-grid-add.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/view-grid.svg b/packages/icons/svg/view-grid.svg index 0b2b1c9d66..d953e6ca1e 100644 --- a/packages/icons/svg/view-grid.svg +++ b/packages/icons/svg/view-grid.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/view-list.svg b/packages/icons/svg/view-list.svg index 6a082971d5..b79a136b25 100644 --- a/packages/icons/svg/view-list.svg +++ b/packages/icons/svg/view-list.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/vimeo.svg b/packages/icons/svg/vimeo.svg index 9dd257b80f..cc30d870d0 100644 --- a/packages/icons/svg/vimeo.svg +++ b/packages/icons/svg/vimeo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/vk.svg b/packages/icons/svg/vk.svg index 0ce47cc2a1..ebda071c92 100644 --- a/packages/icons/svg/vk.svg +++ b/packages/icons/svg/vk.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/volume-off.svg b/packages/icons/svg/volume-off.svg index fd7688a075..43a2c301d2 100644 --- a/packages/icons/svg/volume-off.svg +++ b/packages/icons/svg/volume-off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/volume-up.svg b/packages/icons/svg/volume-up.svg index be7436d46e..66197d9b64 100644 --- a/packages/icons/svg/volume-up.svg +++ b/packages/icons/svg/volume-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/vonage.svg b/packages/icons/svg/vonage.svg index 147c39fdbe..047c8903f4 100644 --- a/packages/icons/svg/vonage.svg +++ b/packages/icons/svg/vonage.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/vs_code.svg b/packages/icons/svg/vs_code.svg index 8824a876d8..d0bc8fed0a 100644 --- a/packages/icons/svg/vs_code.svg +++ b/packages/icons/svg/vs_code.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/whatsapp.svg b/packages/icons/svg/whatsapp.svg index e4ee9bdf3d..5889b3b914 100644 --- a/packages/icons/svg/whatsapp.svg +++ b/packages/icons/svg/whatsapp.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/wifi.svg b/packages/icons/svg/wifi.svg index e8980c793a..f16d9abe71 100644 --- a/packages/icons/svg/wifi.svg +++ b/packages/icons/svg/wifi.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/wordpress.svg b/packages/icons/svg/wordpress.svg index 39948d8879..b0d3c5aa56 100644 --- a/packages/icons/svg/wordpress.svg +++ b/packages/icons/svg/wordpress.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/x-circle.svg b/packages/icons/svg/x-circle.svg index d6eaf4e62b..aa3b0ecdbc 100644 --- a/packages/icons/svg/x-circle.svg +++ b/packages/icons/svg/x-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/x.svg b/packages/icons/svg/x.svg index c2bb8731ba..616f270a91 100644 --- a/packages/icons/svg/x.svg +++ b/packages/icons/svg/x.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/yahoo.svg b/packages/icons/svg/yahoo.svg index 887e2ec59b..0e712e10f1 100644 --- a/packages/icons/svg/yahoo.svg +++ b/packages/icons/svg/yahoo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/yandex.svg b/packages/icons/svg/yandex.svg index 88adfff71a..b132658a5e 100644 --- a/packages/icons/svg/yandex.svg +++ b/packages/icons/svg/yandex.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/ycombinator.svg b/packages/icons/svg/ycombinator.svg index 864e119f6d..ce271184af 100644 --- a/packages/icons/svg/ycombinator.svg +++ b/packages/icons/svg/ycombinator.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/youtube.svg b/packages/icons/svg/youtube.svg index d18c584e0d..65a570e182 100644 --- a/packages/icons/svg/youtube.svg +++ b/packages/icons/svg/youtube.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/zoom-in.svg b/packages/icons/svg/zoom-in.svg index 7e7531e4de..cf7e66f849 100644 --- a/packages/icons/svg/zoom-in.svg +++ b/packages/icons/svg/zoom-in.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/zoom-out.svg b/packages/icons/svg/zoom-out.svg index c88f876b21..f9f51d2f6b 100644 --- a/packages/icons/svg/zoom-out.svg +++ b/packages/icons/svg/zoom-out.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/zoom.svg b/packages/icons/svg/zoom.svg index 4d4c474e02..7a2bf5709f 100644 --- a/packages/icons/svg/zoom.svg +++ b/packages/icons/svg/zoom.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/templates/__variables.scss.template b/packages/icons/templates/__variables.scss.template deleted file mode 100644 index a9af3c012c..0000000000 --- a/packages/icons/templates/__variables.scss.template +++ /dev/null @@ -1 +0,0 @@ -{{cssToVars}} \ No newline at end of file diff --git a/packages/icons/templates/_{{filename}}.css.template b/packages/icons/templates/_{{filename}}.css.template index 4fb38f4e71..fd37b324d0 100644 --- a/packages/icons/templates/_{{filename}}.css.template +++ b/packages/icons/templates/_{{filename}}.css.template @@ -10,8 +10,7 @@ } [class^="{{prefix}}-"], [class*=" {{prefix}}-"] { - font-family: '{{fontname}}' !important; - font-size: {{fontSize}}; + font-family: '{{fontname}}' !important;{{fontSize}} font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/packages/icons/templates/_{{filename}}.scss.template b/packages/icons/templates/_{{filename}}.scss.template index 311cdba7aa..421d3ed253 100644 --- a/packages/icons/templates/_{{filename}}.scss.template +++ b/packages/icons/templates/_{{filename}}.scss.template @@ -8,8 +8,7 @@ } [class^="{{prefix}}-"], [class*=" {{prefix}}-"] { - font-family: '{{fontname}}' !important; - font-size: {{fontSize}}; + font-family: '{{fontname}}' !important;{{fontSize}} font-display: swap; font-style: normal; -webkit-font-smoothing: antialiased; diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 47140ce674..9387f74fbb 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,12 +1,104 @@ # @appwrite.io/pink -## 0.0.7-sl10.0 +## 0.1.0-next.9 + +### Minor Changes + +- ccbfc7e2: Add bun icon + +### Patch Changes + +- Updated dependencies [ccbfc7e2] + - @appwrite.io/pink-icons@0.1.0-next.9 + +## 0.1.0-next.8 + +### Patch Changes + +- fixes for 1.4.x release +- Updated dependencies + - @appwrite.io/pink-icons@0.1.0-next.8 + +## 0.1.0-next.7 + +### Minor Changes + +- 4cb0e109: Fix avatar icons + +### Patch Changes + +- Updated dependencies [4cb0e109] + - @appwrite.io/pink-icons@0.1.0-next.7 + +## 0.1.0-next.6 + +### Minor Changes + +- b1d391f6: Fix switch button + +### Patch Changes + +- Updated dependencies [b1d391f6] + - @appwrite.io/pink-icons@0.1.0-next.6 + +## 0.1.0-next.5 + +### Minor Changes + +- 05f6f7e: Changes for 1.4 from other branch + +### Patch Changes + +- Updated dependencies [05f6f7e] + - @appwrite.io/pink-icons@0.1.0-next.5 + +## 0.1.0-next.4 + +### Minor Changes + +- dcf463b: Fix: font cropping + +### Patch Changes + +- Updated dependencies [dcf463b] + - @appwrite.io/pink-icons@0.1.0-next.4 + +## 0.1.0-next.3 + +### Patch Changes + +- fix desync issue +- Updated dependencies + - @appwrite.io/pink-icons@0.1.0-next.3 + +## 0.1.0-next.2 + +### Minor Changes + +- 805af37e: add divider + +### Patch Changes + +- Fix desynced icons +- Updated dependencies +- Updated dependencies [805af37e] + - @appwrite.io/pink-icons@0.1.0-next.2 + +## 0.0.7-next.1 + +### Patch Changes + +- 2d6f1b5: patch +- Updated dependencies [2d6f1b5] + - @appwrite.io/pink-icons@0.0.7-next.1 + +## 0.0.7-next.0 ### Patch Changes -- patch bump +- pre-release patch - Updated dependencies - - @appwrite.io/pink-icons@0.0.7-sl10.0 + - @appwrite.io/pink-icons@0.0.7-next.0 ## 0.0.6 diff --git a/packages/ui/package.json b/packages/ui/package.json index a10ebed2eb..8be3c39a3d 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink", - "version": "0.0.7-sl10.0", + "version": "0.1.0-next.9", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -12,7 +12,7 @@ "author": "", "license": "ISC", "dependencies": { - "@appwrite.io/pink-icons": "0.0.7-sl10.0", + "@appwrite.io/pink-icons": "0.1.0-next.9", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.7.3" }, diff --git a/packages/ui/src/6-elements/_avatar.scss b/packages/ui/src/6-elements/_avatar.scss index a736ebf701..c4dc7e44a5 100644 --- a/packages/ui/src/6-elements/_avatar.scss +++ b/packages/ui/src/6-elements/_avatar.scss @@ -1,7 +1,7 @@ @use '../abstract' as *; .avatar { - --p-text-size: var(--text-size, var(--font-size-1)); + --p-text-size: var(--text-size, var(--font-size-3)); $default-size: pxToRem(40); --p-size: var(--size, #{$default-size} ); /* default is medium size */ --p-avatar-text-color: var(--p-avatar-text-color-default); diff --git a/packages/ui/src/6-elements/_divider.scss b/packages/ui/src/6-elements/_divider.scss new file mode 100644 index 0000000000..d8fd164e55 --- /dev/null +++ b/packages/ui/src/6-elements/_divider.scss @@ -0,0 +1,7 @@ +@use "../abstract" as *; + +.divider { + height: 1px; + width: calc(100% + 2rem); + background-color: hsl(var(--color-border)); +} diff --git a/packages/ui/src/6-elements/_index.scss b/packages/ui/src/6-elements/_index.scss index 01eddce250..dbb079aa27 100644 --- a/packages/ui/src/6-elements/_index.scss +++ b/packages/ui/src/6-elements/_index.scss @@ -13,4 +13,5 @@ @forward "container"; @forward "box"; @forward "loader"; -@forward "inline-code"; \ No newline at end of file +@forward "inline-code"; +@forward "divider"; diff --git a/packages/ui/src/6-elements/_table.scss b/packages/ui/src/6-elements/_table.scss index dcffc03d34..57cecae099 100644 --- a/packages/ui/src/6-elements/_table.scss +++ b/packages/ui/src/6-elements/_table.scss @@ -19,7 +19,7 @@ border-radius: var(--p-border-radius); box-shadow: 0 0 0 pxToRem(1) hsl(var(--color-border)), var(--shadow-small); inline-size: 100%; - line-height: 1; + line-height: 1.2; &-with-scroll { @include tableScroll; overflow:hidden; diff --git a/packages/ui/src/6-elements/form/_radio-and-checkbox.scss b/packages/ui/src/6-elements/form/_radio-and-checkbox.scss index b3148b2ab6..cb009bd46b 100644 --- a/packages/ui/src/6-elements/form/_radio-and-checkbox.scss +++ b/packages/ui/src/6-elements/form/_radio-and-checkbox.scss @@ -1,5 +1,4 @@ @use '../../abstract' as *; -@use '@appwrite.io/pink-icons/dist/variables' as icons; [type="checkbox"], [type="radio"] { @@ -127,7 +126,7 @@ &:where(:checked) { &::before { font-family: 'icon' !important; - content: icons.$icon-check; + content: var(--icon-check); vertical-align: middle; margin-bottom: calc(var(--p-size) / 8 * -1); font-size: var(--p-icon-size); diff --git a/packages/ui/src/6-elements/form/_switch.scss b/packages/ui/src/6-elements/form/_switch.scss index b17f736fee..fb702f8b3a 100644 --- a/packages/ui/src/6-elements/form/_switch.scss +++ b/packages/ui/src/6-elements/form/_switch.scss @@ -20,7 +20,7 @@ --p-bg-color-checked-disabled: var(--color-information-50); - all:unset; position:relative; display:inline-flex; box-sizing:border-box; + all:unset; position:relative; display:inline-flex; box-sizing:border-box; flex-shrink:0; inline-size:pxToRem(36); block-size:pxToRem(20); border-radius:var(--border-radius-medium); padding:pxToRem(2); background-color:hsl(var(--p-bg-color)); cursor:pointer; transition:var(--transition); diff --git a/packages/ui/src/7-components/_code-panel.scss b/packages/ui/src/7-components/_code-panel.scss index 1faa671dd9..0363ecb0b5 100644 --- a/packages/ui/src/7-components/_code-panel.scss +++ b/packages/ui/src/7-components/_code-panel.scss @@ -2,23 +2,23 @@ .code-panel { --p-code-panel-header: var(--color-neutral-5); + --p-code-panel-border-color: var(--color-neutral-30); --p-code-panel-content: var(--color-neutral-0); - --p-code-panel-text-color: var(--color-neutral-120); - --p-code-panel-border-color: var(--color-neutral-5); + --p-code-panel-text-color: var(--color-neutral-150); display: flex; flex-direction: column; block-size: 100%; flex-shrink: 0; overflow: hidden; - border: solid pxToRem(1) hsl(var(--p-code-panel-border-color)); + border: solid 1px hsl(var(--p-code-panel-border-color)); border-radius: var(--border-radius-xsmall); color: hsl(var(--p-code-panel-text-color)); &-header { display: flex; padding: pxToRem(16); - user-select: none; background-color: hsl(var(--p-code-panel-header)); + border-block-end: solid 1px hsl(var(--p-code-panel-border-color)); } &-content { flex: 1; @@ -26,11 +26,10 @@ overflow: auto; background-color: hsl(var(--p-code-panel-content)); } - #{$theme-dark} & { --p-code-panel-header: var(--color-neutral-200); + --p-code-panel-border-color: var(--transparent); --p-code-panel-content: var(--color-neutral-300); --p-code-panel-text-color: var(--color-neutral-5); - --p-code-panel-border-color: var(--transparent); } } diff --git a/packages/ui/src/7-components/_steps.scss b/packages/ui/src/7-components/_steps.scss index 6ca0c94709..bc672750a2 100644 --- a/packages/ui/src/7-components/_steps.scss +++ b/packages/ui/src/7-components/_steps.scss @@ -7,12 +7,13 @@ --p-step-bullet-sep-color: var(--color-neutral-50); + // Done step --p-step-bullet-icon-color-done: var(--color-neutral-0); --p-step-bullet-content-color-done: var(--color-neutral-50); --p-step-bullet-padding-color-done: var(--color-neutral-50); //--p-step-bullet-border-color-done: var(--color-neutral-50); - + // Current Step //--p-step-bullet-icon-color-current: var(--color-neutral-0); --p-step-bullet-content-color-current: var(--color-primary-100); //--p-step-bullet-padding-color-current:var(--color-neutral-0); @@ -75,6 +76,8 @@ min-block-size: 0; .steps-item-wrapper::after {display:none;} } + + &.is-disabled { opacity:0.38; } } &-sub { diff --git a/packages/ui/src/8-grids/_cover-frame.scss b/packages/ui/src/8-grids/_cover-frame.scss index 86fc712009..a4ee9f405e 100644 --- a/packages/ui/src/8-grids/_cover-frame.scss +++ b/packages/ui/src/8-grids/_cover-frame.scss @@ -1,12 +1,21 @@ @use '../abstract/index' as *; .cover-frame { + --p-cover-frame-bg-header: var(--transparent); + display:flex; flex-direction:column; block-size:100vh; block-size:100lvh; &-header { padding-inline:pxToRem(32); padding-block:pxToRem(20); border-block-end:solid pxToRem(1) hsl(var(--color-border)); + background-color: hsl(var(--p-cover-frame-bg-header)); } &-content { flex:1; padding:pxToRem(32); overflow:hidden; } + + /* state */ + &.is-color-header { + --p-cover-frame-bg-header:var(--color-neutral-0); + #{$theme-dark} & { --p-cover-frame-bg-header:var(--color-neutral-500); } + } } \ No newline at end of file diff --git a/packages/ui/src/8-grids/_grid-300px-1fr.scss b/packages/ui/src/8-grids/_grid-300px-1fr.scss new file mode 100644 index 0000000000..2ea2dcedee --- /dev/null +++ b/packages/ui/src/8-grids/_grid-300px-1fr.scss @@ -0,0 +1,10 @@ +@use '../abstract' as *; + +.grid-300px-1fr { + display: grid; + gap: pxToRem(32); + + @media #{$break3open} { + grid-template-columns: pxToRem(300) 1fr; + } +} \ No newline at end of file diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss index a730bd47e4..396ee6df12 100644 --- a/packages/ui/src/8-grids/_grid-with-side.scss +++ b/packages/ui/src/8-grids/_grid-with-side.scss @@ -42,6 +42,15 @@ .main-side { block-size:calc(100vh - var(--main-header-height)); } } } +/* no side */ +.is-fixed-alert-layout { + @media #{$break3open} { + display: flex; flex-direction:column; + block-size:100vh; block-size:100lvh; + max-block-size:100vh; max-block-size:100lvh; + .main-content { overflow:auto; flex:1; } + } +} .main-content { position:relative; display:flex; flex-direction:column; flex:1; /* z-index:1; */ diff --git a/packages/ui/src/8-grids/_index.scss b/packages/ui/src/8-grids/_index.scss index d807da4d40..c0e0e490da 100644 --- a/packages/ui/src/8-grids/_index.scss +++ b/packages/ui/src/8-grids/_index.scss @@ -4,6 +4,7 @@ @forward "grid-code"; @forward "grid-1-1"; @forward "grid-1-2"; +@forward "grid-300px-1fr"; @forward "grid-dashboard-1s-2m-6l"; @forward "wizard"; diff --git a/packages/ui/src/8-grids/_wizard.scss b/packages/ui/src/8-grids/_wizard.scss index f6d372452f..9140351bbd 100644 --- a/packages/ui/src/8-grids/_wizard.scss +++ b/packages/ui/src/8-grids/_wizard.scss @@ -41,6 +41,7 @@ background-color: hsl(var(--p-end-color)); } } + @media #{$break1} { display: grid; grid-template-rows: var(--p-header-height); @@ -75,6 +76,13 @@ &-side { grid-row:2; grid-column:2; } &-main { grid-row:2 / 4; grid-column:4; } &-media { grid-row:3; grid-column:1 / 3; } + + /* full layout */ + &.is-full-center-layout { + .wizard-container { + grid-column:2 / 5; padding-inline:pxToRem(32); + } + } } diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss index 6997c95208..92daa9229b 100644 --- a/packages/ui/src/_9-utilities.scss +++ b/packages/ui/src/_9-utilities.scss @@ -26,17 +26,17 @@ .u-text-center { text-align:center!important; } .u-text-end { text-align:end!important; } .u-line-height-0-7 { line-height:0.7!important; } -.u-line-height-1 { line-height:1!important; } -.u-line-height-1-25 { line-height:1.25!important; } -.u-line-height-1-5 { line-height:1.5!important; } -.u-line-height-2 { line-height:2!important; } -.u-break-word { @include break-word; white-space:initial; } -.u-break-all { @include break-all; white-space:initial; } +.u-line-height-1 { line-height:1; } +.u-line-height-1-25 { line-height:1.25; } +.u-line-height-1-5 { line-height:1.5; } +.u-line-height-2 { line-height:2; } .u-trim { @include trim; } .u-trim-1 { @include trim(1); } .u-trim-2 { @include trim(2); } .u-trim-3 { @include trim(3); } -.u-trim-start { @include trim; direction:rtl!important; text-align:left!important; } +.u-trim-start { @include trim; direction:rtl; text-align:left; } +.u-break-word { @include break-word; white-space:initial; } +.u-break-all { @include break-all; white-space:initial; } .u-un-break-text { white-space:nowrap!important; } .u-capitalize { text-transform:capitalize!important; } .u-icon-small { font-size:var(--icon-size-small)!important; } @@ -176,7 +176,9 @@ .u-flex-shrink-0 { flex-shrink:0!important; } .u-flex-basis-auto { flex-basis:auto!important; } -.u-grid-columns-auto-1fr { grid-template-columns:auto 1fr!important; } +.u-grid-columns-auto-1fr { display:grid; grid-template-columns:auto 1fr; } +.u-grid-cols-2 { display:grid; grid-template-columns:1fr 1fr; } +.u-grid-equal-row-size { display:grid; grid-auto-rows:1fr; align-items:center; } .u-width-fit-content { inline-size:fit-content!important; } .u-width-full-line { inline-size:100%!important; } @@ -252,9 +254,12 @@ .u-padding-block-8 { padding-block:pxToRem(8)!important; } .u-padding-block-12 { padding-block:pxToRem(12)!important; } +.u-padding-block-16 { padding-block:pxToRem(16)!important; } .u-padding-block-start-16 { padding-block-start:pxToRem(16)!important; } .u-padding-block-start-20 { padding-block-start:pxToRem(20)!important; } +.u-padding-block-start-28 { padding-block-start:pxToRem(28)!important; } +.u-padding-block-start-48 { padding-block-start:pxToRem(48)!important; } .u-padding-block-end-32 { padding-block-end:pxToRem(32)!important; } .u-padding-block-end-56 { padding-block-end:pxToRem(56)!important; }