@amboss/design-system 0.26.10 → 1.0.0-canary-1

package/README.md

@@ -27,96 +27,88 @@ To build storybook run `npm run build-storybook`
 - Add `skip-release` label to skip the release
 - If you want your commit to skip ci, add "[skip ci]" to your commit message.
 
-## Overview
+### Codebase Overview
 
-1. [Tech stack](#tech-stack)
-2. [Folder structure](#folder-structure)
-3. [Build](#build)
-4. [\*.d.ts for styles](#dts-for-styles)
-5. [Tokens, styles and theming](#tokens-styles-and-theming)
-6. [Assets](#assets)
-7. [Media queries](#media-queries)
+**1. [Tech stack](#tech-stack)**<br/>
+**2. [Linting](#linting)**<br/>
+**3. [Folder structure](#folder-structure)**<br/>
+**4. [Build](#build)**<br/>
+**5. [Tokens, styles and theming](#tokens-styles-and-theming)**<br/>
+**6. [Assets](#assets)**<br/>
+**7. [Media queries](#media-queries)**<br/>
 
-### Tech stack
+## Tech stack
 
-Code: **typescript + scss**
+- Code: **typescript**
+- Styles: **emotion.js**
+- Framework: **react**
+- Bundler: **webpack**
+- Environment: **storybook**
+- Tokens: **[style-dictionary](https://github.com/amzn/style-dictionary)**
+- Testing: **jest + react testing library**
 
-Framework: **react**
+## Linting
 
-Bundler: **webpack**
+As for linting and formatting, you can configure your editor to automatically lint and format your code on save. For this purpose, we're using [Prettier](https://prettier.io/) and [ESLint](https://eslint.org/). If you need to do it manually, you can run:
 
-Environment: **storybook**
-
-Tokens: **[style-dictionary](https://github.com/amzn/style-dictionary)**
+```sh
+npm run lint
+```
 
-Testing: **jest + react testing library**
+> This command is also run as a **pre-push hook** and in the pipeline.
 
-### Folder structure
+## Folder structure
 
-<pre>
+```
 |-- .storybook
-   |-- components
-       |-- ColorGrid.tsx
-       |-- SizeGrid.tsx
-   |-- main.js
-   |-- preview.js
+    |-- components
+        |-- ColorGrid.tsx
+        |-- SizeGrid.tsx
+    |-- main.js
+    |-- preview.js
 |-- assets
-   |-- fonts
-      |-- Lato.woff
-|-- build    (autogenerated)
-|-- build-tokens    (autogenerated)
-     |-- _assets_fonts.scss
-     |-- _variables.scss
-     |-- _theme.scss
-     |-- _colors.json
-     |-- _theme.json
+    |-- fonts
+        |-- Lato.woff
+|-- build (autogenerated)
+|-- build-tokens (autogenerated)
+    |-- assets
+        |-- icons.json
+        |-- icons16.json
+    |-- _colors.json
+    |-- _sizes.json
+    |-- visualConfig.ts
 |-- docs
-   |-- Design-principles.mdx
+    |-- Design-principles.mdx
+|-- static
+    |-- image-for-storybook.png
 |-- tokens
-    |-- themes
-        |-- dark.json
-        |-- light.json
-    |-- assets.json
-    |-- colors.json
+    |-- themes
+        |-- dark.json
+        |-- light.json
+    |-- assets.json
+    |-- colors.json
 |-- src
-   |-- components
-      |-- Button
-          |-- Button.tsx
-          |-- Button.scss
-          |-- Button.scss.d.ts    (autogenerated)
-          |-- Button.stories.tsx
-          |-- Button.test.tsx
-   |-- shared
-       |-- _fonts.scss
-   |-- types
-	   |-- index.ts
-   |-- index.ts
-
-</pre>
-
-### Build
-
-There are 3 stages of a build.
-
-1. Generate type definitions for styles
-2. Generate variables and mixins for tokens
-3. Bundle all exported components
-
-#### Generate type definitions for styles
-
-Files like `Button.scss.d.ts` are autogenerated, and they are added to .gitignore.
-
-Type definitions are generating automatically:
+    |-- index.ts
+    |-- components
+        |-- Button
+            |-- Button.tsx
+            |-- Button.stories.tsx
+            |-- Button.test.tsx
+    |-- shared
+        -- mediaQueries.ts
+    |-- types
+        |-- index.ts
+```
 
-- in watch mode while `npm run start` is running
-- after npm install
-- before build
+## Build
 
-You can generate \*d.ts manually using `npm run type-styles` and `npm run type-styles:watch`
+There are 3 stages of a build.
 
-[Why we need \*.d.ts for styles?](#dts-for-styles)
+1. Generate variables, theme values and assets from tokens
+2. Build all exported components with babel (preset-react, preset-typescript)
+2. Bundle all built components with webpack
 
-#### Generate variables and mixins from tokens
+### Generate variables, theme values and assets from tokens
 
 In order to structure our tokens we use **[style-dictionary](https://github.com/amzn/style-dictionary)**.
 This tool is used for creation a content of `./build-tokens` folder where we keep all the scss variables and mixins.
@@ -130,155 +122,121 @@ New variables and mixins gets generated automaticaly:
 You can generate tokens manually using `npm run tokens` and `npm run tokens:watch`
 
 We use tokens to control the most atomic values in styles and themes.
+
 How does it work?
+
 We have a set of .json files that are located in `./tokens` folder, and we have a `style-dictionary` as a tool for converting .json in to various formats.
+
 For example:
-We have a file - `./tokens/colors.json` that gets converted into `./build-tokens/_variables.scss` and `./build-tokens/_colors.json`.
-`_variables.scss` is directly imported in other `.scss` files.
+
+We have a file - `./tokens/colors.json` that gets converted into part of `./build-tokens/visualConfig.ts` and `./build-tokens/_colors.json`.
+
+`visualConfig.ts` is used later as a source for emotion.js theme.
+
 `_colors.json` is imported inside `./.storybook/components/ColorGrid.tsx` in order to present in storybook all the colors we currently have.
 
-The configuration for `style-dictionary` is inside `./style-dictionary.config.json`. In this config we use 2 custom formatters and 1 custom filter, all of them defined in `./style-dictionary.build.js`.
+The configuration for `style-dictionary` is inside `./style-dictionary/style-dictionary.config.json`. In this config we use some custom transforms, filters and formatters, all of them defined in `./style-dictionary/style-dictionary.build.js`.
 
-**custom/format/scss** - a formatter that is used for generation a .json files for tokens like colors, size, weight and so on. These .json files are imported in storybook for presentation.
-**custom/format/theme-scss** - a formatter that is used for generation a `_theme.scss` that contains a `@theme` mixin.
-**custom/filter/only-vars** - a filter for excluding theme and assets from processing them as variables.
+**custom/format/emotion-visual-config** - a formatter that generates visualConfig.ts that contains all variables and themed values.
+
+**custom/filter/emotion-build-tokens** - a filter for all token categories that should go to visutal config.
+
+**custom/format/json** - a formatter for generation .json files per category. This formatter also add `isUsed` flag to according token.
+
+**custom/format/sub-theme-types** - a formatter that generates type definitions for sub-themes.
+
+**custom/assets/svg** - a transformer that adds a path name to dictionary of svg icons.
 
 [More about tokens, themes and styles.](#tokens-styles-and-theming)
 
-#### Bundle all exported components
+### Bundle all exported components
 
 Before publish the design system for npm we run `npm run build` that bundles everything that is exported from `./src/index.ts`.
 
-We use webpack + typescript for bundling. For all `/\.ts(x?)$/` files webpack uses a ts-loader as a rule which is implicitly using `tsconfig.json`.
+We use webpack + babel for bundling. For all `/\.ts(x?)$/` files webpack uses a babel-loader as a rule which is implicitly using `tsconfig.json` and `.babelrc`.
 
-For styles we use sass-loader + css-loader with enabled modules for namespacing all css selectors.
+For styles we use emotion.js.
 
 What in the bundle?
 
-- JS code that is compiled from typescript
-- css rules that are namespaced using css-loader
+- JS code that is compiled from .tsx files (includes common components and emotion.js styled components)
 - I svg icons that are inlined
 
 fonts that are base64-ed currently taken off the build
 
-### .d.ts for styles
-
-We use type definitions for style in order to improve quality of a product overall. One example:
+## Tokens, styles and theming
 
-```js
-import styles from "./button.scss";
+Currently, we have 4 types of tokens:
 
-type ButtonProps = {
-  size: "s" | "m" | "l",
-};
+- atomic values, like colors, sizes, shadows.
+- font assets, that are basically base64 of font files. (not used in production)
+- theme values, that are referencing atomic different atomic values
+- svg icon assets, that are inlined to a json file
 
-export const Button = ({ size }: ButtonProps) => (
-  <button className={styles[size]} />
-);
-```
+As we use Emotion.js all tokenized values are accessible via theme provider. <br />
 
-Here with type definitions we are sure that `button.scss` contain all 3 classes (.s, .m, and .l). Otherwise, it won't compile.
+Basically during the build phase we generate big objects of variables and themed values for each theme (currently light and dark). <br />
 
-### Tokens, styles and theming
+We call this object `ambossVisualConfiguration`.
 
-Currently, we have 3 types of tokens:
+Particular themes from ambossVisualConfiguration has to be imported and passed to the theme provider at the consumer side.<br />
 
-- atomic values, like colors, sizes, shadows.
-- font assets, that are basically base64 of font files.
-- theme values, that are referencing atomic different atomic values
-- svg icon assets, that are inlined to a json file
+<br />
+Atomic values are straight forward and simply converted to `variables`.
 
-Atomic values and font assets are straight forward and simply converted to scss variables.
-After build all atomic values can't be imported as `@import "build-tokens/variables";`
-Fonts are imported inside `./src/shared/_fonts` and never used directly (it doesn't make sense).
-In the application simply `@import "src/shared/fonts";`.
+After build all atomic values are passed to `theme.variables` by emotion.
 
-Theme values are little more complex. When theme token is precessed we generate several entities. All of them are located in `./build-tokens/_theme.scss`
+Example:
+```
+const StyledContainer - styled.div(
+  ({ theme }) => ({
+    marginTop: theme.variables.size.spacing.s
+  })
+);
+```
 
-1. A number of scss-maps with all the theme variables for each theme.
-2. A `@theme` mixin, that include all themes.
-3. A list of scss variables with the name of entries in the maps (see point 1). This is just for IDE auto-complition.
+Theme tokens are little more complex. We generate separate VisualConfig for each theme, but together with that we generate type definition that describe any of the themes. This enables developers not care about current theme and how many themes are there.
 
-As the result developers are free to use a `@theme` mixin for particular css properties with no worries about active theme and amount of themes.
+After build all themes values are passed to `theme.values` by emotion.
 
 Example:
 
-```scss
-@import "build-tokens/theme";
-@import "build-tokens/variables";
-@import "src/shared/fonts";
-
-.primary {
-  @include theme("color", $theme-color-text-primary);
-  font-family: $Lato;
-  margin: 0;
-}
-
-.secondary {
-  @include theme("color", $theme-color-text-secondary);
-}
-
-.s {
-  font-size: $size-font-text-s;
-  line-height: $size-line-height-text-s;
-}
-
-.m {
-  font-size: $size-font-text-m;
-  line-height: $size-line-height-text-m;
-}
-
-.normal {
-  font-weight: $weight-normal;
-}
-
-.bold {
-  font-weight: $weight-bold;
-}
 ```
+const StyledContainer - styled.div(
+  ({ theme }) => ({
+    backgroundColor: theme.values.color.background.layer_2
+  })
+);
+```
+
+Sub-themes are folowing the same concept as themes. Developer can fully rely on `theme.values` object. As long as component in runtime is wrapped in `SubThemeProvider` and it's tokens listed in "tokens/themes/sub-themes/...", all values will be set correctly and automaticaly.
+
+> Note that not all tokens are enabled in sub-themes. Make sure to add missing ones to "tokens/themes/sub-themes/...".
+
+> Components that has "Sub-themed" badge are already in.
 
-### Assets
+## Assets
 
 - assets are defined in `tokens/assets.json`
 - with the help from style-dictionary we create a json file with tokens (`/build-tokens/assets/`)
 - those json files supposed to be imported in the ts module (see Icons.tsx)
 - in order to secure `d.ts` filed in the build we "manually" copy asset jsons on the `postbuild` phase (see package.json)
 
-### Media queries
+## Media queries
 
 There is an API for media-query related props: an array of 3 elements [small, medium, large], for respective screen sizes.
-for example `<Box space=["xs", "xl", "xxl"] />` will set `xs` for small screens, `xl` for medium screens and `xxl` for large.
+
+For example `<Box space=["xs", "xl", "xxl"] />` will set `xs` for small screens, `xl` for medium screens and `xxl` for large.
 
 Basically, if you see a type of `MQ<Whatever>` you can provide an array of 3 `Whatever`s.
 
 In order to add a media query support to your components:
 
-> mq mixin from media-queries module will create a set of media-query selectors.
-
-```scss
-@import "src/shared/media-queries";
-
-@include mq(".align-left") {
-  text-align: left;
-}
-
-@include mq(".align-right") {
-  text-align: right;
-}
-
-@include mq(".align-center") {
-  text-align: center;
-}
-```
-
-> import getMediaQueryClasses from mediaQueries module to create classnames compatible with mixin above.
-> note that third parameter is a prefix to classname.
-
 ```ts
-import cn from "classnames";
+import React from "react";
 
-import { getMediaQueryClasses } from "../../shared/mediaQueries";
-import styles from "./Box.scss";
+import styled from "@emotion/styled";
+import { mq } from "../../shared/mediaQueries";
 
 type TextAlignment = "left" | "center" | "right";
 
@@ -286,9 +244,14 @@ type BoxProps = {
   alignText: TextAlignment | MQ<TextAlignment>;
 };
 
-export const Box = ({ alignText }: BoxProps) => (
-  <button
-    className={cn(...getMediaQueryClasses(alignText, styles, "align-"))}
-  />
+export const Box = styled.div<BoxProps>(
+  ({ alignText = "left" }) =>
+    mq({
+      textAlign: [
+        alignText,
+        { left: "left", right: "right", center: "center" },
+      ],
+    })
 );
 ```
+

package/build/build-tokens/assets/icons.json

@@ -10,32 +10,38 @@
   "bell": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-bell\"><path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"></path><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"></path></svg>",
   "book": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-book\"><path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"></path><path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"></path></svg>",
   "book-open": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-book-open\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"></path><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"></path></svg>",
+  "bookmark": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19 21L12 16L5 21V5C5 3.89543 5.89543 3 7 3H17C18.1046 3 19 3.89543 19 5V21Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
   "box": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-box\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"></path><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"></polyline><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"></line></svg>",
   "bubble": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 3H6c-1.1 0-2 .9-2 2v5l-3 2 3 2v5c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/></svg>",
   "bubble-check": "<svg width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M2.803 12l1.752 1.168c.278.186.445.499.445.832v5c0 .552.449 1 1 1h14a1 1 0 001-1V5c0-.551-.448-1-1-1H6c-.551 0-1 .449-1 1v5c0 .334-.167.646-.445.832L2.803 12zM20 22H6c-1.654 0-3-1.345-3-3v-4.464L.446 12.832a1 1 0 010-1.664L3 9.465V5c0-1.654 1.346-3 3-3h14c1.655 0 3 1.346 3 3v14c0 1.655-1.345 3-3 3z\" stroke=\"none\"/>\n  <path d=\"M17 9l-6 6-2.5-2.5\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
+  "bubble-image": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M15.9 7.7a1.301 1.301 0 0 1 0 2.6A1.302 1.302 0 0 1 14.6 9c0-.717.583-1.3 1.3-1.3Zm0 4.6c1.82 0 3.3-1.48 3.3-3.3 0-1.82-1.48-3.3-3.3-3.3A3.304 3.304 0 0 0 12.6 9c0 1.82 1.48 3.3 3.3 3.3ZM6 20c-.551 0-1-.448-1-1v-2.586l3-3 5.293 5.293a.997.997 0 0 0 1.414 0l2.263-2.263 3.233 3.515c-.068.015-.131.041-.203.041H6Zm-3.197-8 1.752-1.168C4.833 10.646 5 10.334 5 10V5c0-.552.449-1 1-1h14a1 1 0 0 1 1 1v12.871l-3.264-3.548a1 1 0 0 0-1.443-.03L14 16.586l-5.293-5.294a1.03 1.03 0 0 0-1.414 0l-2.362 2.363a1.004 1.004 0 0 0-.376-.487L2.803 12ZM20 2H6C4.346 2 3 3.345 3 5v4.464L.445 11.167a1.002 1.002 0 0 0 0 1.665L3 14.535V19c0 1.654 1.346 3 3 3h14c1.654 0 3-1.346 3-3V5c0-1.655-1.346-3-3-3Z\" fill=\"currentColor\"/>\n</svg>",
+  "bubble-pill": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M20 2c1.654 0 3 1.345 3 3v14c0 1.654-1.346 3-3 3H6c-1.654 0-3-1.346-3-3v-4.465L.445 12.832a1.001 1.001 0 0 1 0-1.665L3 9.464V5c0-1.655 1.346-3 3-3h14Zm1 17V5a1 1 0 0 0-1-1H6c-.551 0-1 .448-1 1v5c0 .334-.167.646-.445.832L2.803 12l1.752 1.168c.278.186.445.498.445.832v5c0 .552.449 1 1 1h14a1 1 0 0 0 1-1ZM15.117 6.487a3.161 3.161 0 0 1 2.426 1.044c1.26 1.4 1.244 3.497-.036 4.776-.018.018-.041.023-.06.04-.016.018-.022.042-.04.06l-4 4c-.021.021-.05.028-.073.048-.024.027-.037.062-.065.088-.72.648-1.595.971-2.445.971a3.15 3.15 0 0 1-2.367-1.045c-1.26-1.399-1.243-3.497.036-4.777.018-.017.04-.023.06-.039.016-.019.022-.043.04-.06l4-4c.022-.022.05-.03.074-.05.025-.027.036-.06.065-.087a3.696 3.696 0 0 1 2.385-.969Zm.976 4.405c.527-.526.512-1.416-.036-2.023a1.172 1.172 0 0 0-.9-.382 1.72 1.72 0 0 0-1.087.456c-.01.01-.023.011-.034.02-.011.013-.016.031-.03.044L12.715 10.3l1.986 1.985 1.293-1.292c.018-.018.04-.024.059-.039.017-.02.022-.044.04-.062Zm-4.1 4.1 1.293-1.293-1.986-1.985-1.293 1.293c-.018.017-.04.023-.06.04-.015.018-.021.042-.04.06-.527.527-.511 1.415.037 2.024.554.615 1.437.42 1.987-.074.01-.009.022-.01.032-.019.012-.015.017-.032.03-.046Z\" fill=\"currentColor\"/>\n</svg>",
+  "bubble-text": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"m2.803 12 1.752 1.168c.278.186.445.499.445.832v5c0 .552.449 1 1 1h14a1 1 0 0 0 1-1V5c0-.551-.448-1-1-1H6c-.551 0-1 .449-1 1v5c0 .334-.167.646-.445.832L2.803 12ZM20 22H6c-1.654 0-3-1.345-3-3v-4.464L.446 12.832a1 1 0 0 1 0-1.664L3 9.465V5c0-1.654 1.346-3 3-3h14c1.655 0 3 1.346 3 3v14c0 1.655-1.345 3-3 3Zm-4.2-7H8a1 1 0 1 1 0-2h7.8a1 1 0 1 1 0 2Zm2.2-4H8a1 1 0 0 1 0-2h10a1 1 0 1 1 0 2Z\" fill=\"currentColor\"/>\n</svg>",
   "bulb": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 10h-4M12 10v7.9M16 17.9v-4.1c1.6-1.2 2.6-3.1 2.6-5.2 0-3.7-3-6.6-6.6-6.6S5.4 4.9 5.4 8.6c0 2.1 1 4 2.6 5.2v4.1h8zM8 17.9l2 4.1h4l2-4.1\"/></svg>",
   "calculator": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 7h16M7.9 10.5h0M11.9 10.5h0M15.9 10.5h0M7.9 14.5h0M11.9 14.5h0M15.9 14.5h0M8 18.5h3.9M15.9 18.5h0M18 22H6c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v16c0 1.1-.9 2-2 2z\"/></svg>",
   "check": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-check\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>",
   "check-circle": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-check-circle\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path><polyline points=\"22 4 12 14.01 9 11.01\"></polyline></svg>",
+  "check-square": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"m8 11 3 3L22 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M20 12v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>",
   "checkmark-circle-filled": "<svg width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11zm5.7-13.3l-7 7c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3l-3-3c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l2.3 2.3 6.3-6.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z\"/>\n</svg>\n",
   "chevron-down": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-chevron-down\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>",
   "chevron-left": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-chevron-left\"><polyline points=\"15 18 9 12 15 6\"></polyline></svg>",
   "chevron-right": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-chevron-right\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>",
   "chevron-up": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-chevron-up\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg>",
   "clipboard": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-clipboard\"><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"></path><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"></rect></svg>",
+  "coffee": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-coffee\"><path d=\"M18 8h1a4 4 0 0 1 0 8h-1\"></path><path d=\"M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z\"></path><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"4\"></line><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\"></line><line x1=\"14\" y1=\"1\" x2=\"14\" y2=\"4\"></line></svg>",
   "collapse": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 20.3L12 18l-3 2.3M12 22v-4M9 3.7L12 6l3-2.3M12 2v4M5 10h14M5 14h14\"/></svg>",
   "compass": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-compass\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><polygon points=\"16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\"></polygon></svg>",
-  "coffee": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-coffee\"><path d=\"M18 8h1a4 4 0 0 1 0 8h-1\"></path><path d=\"M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z\"></path><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"4\"></line><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\"></line><line x1=\"14\" y1=\"1\" x2=\"14\" y2=\"4\"></line></svg>",
   "copy": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-copy\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>",
+  "corner-down-left": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M9 10L4 15L9 20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M20 4V11C20 13.2091 18.2091 15 16 15H4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
   "corner-down-right": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-corner-down-right\"><polyline points=\"15 10 20 15 15 20\"></polyline><path d=\"M4 4v7a4 4 0 0 0 4 4h12\"></path></svg>",
   "download": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-download\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path><polyline points=\"7 10 12 15 17 10\"></polyline><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line></svg>",
   "edit-3": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-edit-3\"><path d=\"M12 20h9\"></path><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"></path></svg>",
+  "edit-3-filled": "<svg width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 20h9\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M18 2.83c-.695 0-1.362.276-1.854.768l-12.5 12.5a.5.5 0 00-.131.232l-1 4a.5.5 0 00.606.606l4-1a.5.5 0 00.233-.131l12.5-12.5A2.62 2.62 0 0018 2.83z\" stroke=\"none\"/>\n</svg>\n",
   "education": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n  <path clip-rule=\"evenodd\" d=\"M12 2 1 8l11 6 11-6-11-6Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n  <path d=\"M5 11v7l7 4.5 7-4.5v-7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n  <path d=\"M23 8v8\" stroke-width=\"2\" stroke-linecap=\"round\" />\n</svg>\n",
-  "eye": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-eye\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path><circle cx=\"12\" cy=\"12\" r=\"3\"></circle></svg>",
-  "eye-off": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-eye-off\"><path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line></svg>",
   "expand": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 19.7l3 2.3 3-2.3M12 18v4M15 4.3L12 2 9 4.3M12 6V2M5 10h14M5 14h14\"/></svg>",
-  "edit-3-filled": "<svg width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 20h9\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M18 2.83c-.695 0-1.362.276-1.854.768l-12.5 12.5a.5.5 0 00-.131.232l-1 4a.5.5 0 00.606.606l4-1a.5.5 0 00.233-.131l12.5-12.5A2.62 2.62 0 0018 2.83z\" stroke=\"none\"/>\n</svg>\n",
   "external-link": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-external-link\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>",
+  "eye": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-eye\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path><circle cx=\"12\" cy=\"12\" r=\"3\"></circle></svg>",
+  "eye-off": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-eye-off\"><path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line></svg>",
   "face-happy": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n     stroke-width=\"2\"\n     stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n    <path d=\"M16 14.7c-2.2 2.2-5.8 2.2-8 0M8.9 9.4h0M15.1 9.4h0\"/>\n</svg>\n",
   "face-neutral": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n     stroke-width=\"2\"\n     stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path d=\"M8.9 9.4h0M15.1 9.4h0\"/>\n    <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n    <path d=\"M16 15.5H8\"/>\n</svg>\n",
   "face-sad": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n     stroke-width=\"2\"\n     stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path d=\"M8.9 9.4h0M15.1 9.4h0\"/>\n    <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n    <path d=\"M8 16.3c2.2-2.2 5.8-2.2 8 0\"/>\n</svg>\n",
@@ -44,13 +50,14 @@
   "flag": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-flag\"><path d=\"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z\"></path><line x1=\"4\" y1=\"22\" x2=\"4\" y2=\"15\"></line></svg>",
   "flag-filled": "<svg width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1v12z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M4 22v-7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
   "flask": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4.4 21h15.2c1.1 0 1.8-1.2 1.3-2.2L14.3 7.3V3H9.7v4.3L3.1 18.8c-.5 1 .2 2.2 1.3 2.2zM8.5 3h7M5 16h14\"/></svg>",
-  "folder-plus": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-folder-plus\"><path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"></path><line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"17\"></line><line x1=\"9\" y1=\"14\" x2=\"15\" y2=\"14\"></line></svg>",
-  "folder-check-filled": "<svg width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 5a3 3 0 013-3h5a1 1 0 01.832.445L11.535 5H20a3 3 0 013 3v11a3 3 0 01-3 3H4a3 3 0 01-3-3V5zm15.707 5.707a1 1 0 00-1.414-1.414L10 14.586l-1.793-1.793a1 1 0 00-1.414 1.414l2.5 2.5a1 1 0 001.414 0l6-6z\"/>\n</svg>\n",
-  "folder": "<svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M3.6 8a.58.58 0 0 0-.6.6v11.2c0 .348.252.6.6.6h12.8a.58.58 0 0 0 .6-.6V11a.58.58 0 0 0-.6-.6H9.2c-.334 0-.646-.168-.832-.446L7.065 8H3.6Zm12.8 14.4H3.6A2.572 2.572 0 0 1 1 19.8V8.6C1 7.142 2.142 6 3.6 6h4c.334 0 .646.167.832.444L9.735 8.4H16.4c1.458 0 2.6 1.143 2.6 2.6v8.8c0 1.459-1.142 2.6-2.6 2.6ZM22 21a1 1 0 0 1-1-1V3H9v1a1 1 0 0 1-2 0V2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1ZM18 7h-6a1 1 0 0 1 0-2h6a1 1 0 1 1 0 2Z\" fill=\"currentColor\"/>\n</svg>\n",
   "flowchart": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\"><path clip-rule=\"evenodd\" d=\"M2 5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5ZM17 5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V5ZM17 15a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-4Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17 7h-5M7 7h5m5 11h-3a2 2 0 0 1-2-2V7\" stroke-width=\"2\"/></svg>",
+  "folder": "<svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M3.6 8a.58.58 0 0 0-.6.6v11.2c0 .348.252.6.6.6h12.8a.58.58 0 0 0 .6-.6V11a.58.58 0 0 0-.6-.6H9.2c-.334 0-.646-.168-.832-.446L7.065 8H3.6Zm12.8 14.4H3.6A2.572 2.572 0 0 1 1 19.8V8.6C1 7.142 2.142 6 3.6 6h4c.334 0 .646.167.832.444L9.735 8.4H16.4c1.458 0 2.6 1.143 2.6 2.6v8.8c0 1.459-1.142 2.6-2.6 2.6ZM22 21a1 1 0 0 1-1-1V3H9v1a1 1 0 0 1-2 0V2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1ZM18 7h-6a1 1 0 0 1 0-2h6a1 1 0 1 1 0 2Z\" fill=\"currentColor\"/>\n</svg>\n",
+  "folder-check-filled": "<svg width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 5a3 3 0 013-3h5a1 1 0 01.832.445L11.535 5H20a3 3 0 013 3v11a3 3 0 01-3 3H4a3 3 0 01-3-3V5zm15.707 5.707a1 1 0 00-1.414-1.414L10 14.586l-1.793-1.793a1 1 0 00-1.414 1.414l2.5 2.5a1 1 0 001.414 0l6-6z\"/>\n</svg>\n",
+  "folder-plus": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-folder-plus\"><path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"></path><line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"17\"></line><line x1=\"9\" y1=\"14\" x2=\"15\" y2=\"14\"></line></svg>",
   "gift": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M20.7992 11.9999V22.9999H3.19922V11.9999\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M23 6.49988H1V11.9999H23V6.49988Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9995 22.9999V6.49988\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.0003 6.5H7.05029C6.32095 6.5 5.62147 6.21027 5.10575 5.69454C4.59002 5.17882 4.30029 4.47935 4.30029 3.75C4.30029 3.02065 4.59002 2.32118 5.10575 1.80546C5.62147 1.28973 6.32095 1 7.05029 1C10.9003 1 12.0003 6.5 12.0003 6.5Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9995 6.5H16.9495C17.6789 6.5 18.3783 6.21027 18.8941 5.69454C19.4098 5.17882 19.6995 4.47935 19.6995 3.75C19.6995 3.02065 19.4098 2.32118 18.8941 1.80546C18.3783 1.28973 17.6789 1 16.9495 1C13.0995 1 11.9995 6.5 11.9995 6.5Z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
-  "help-circle": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-help-circle\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line></svg>",
   "hammer-filled": "<svg width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M15.741 3.293l6 6c.48.479.743 1.103.743 1.757 0 .654-.263 1.278-.743 1.758l-1.399 1.399a2.482 2.482 0 01-1.758.738 2.479 2.479 0 01-1.756-.737l-1.711-1.693-8.582 8.581a.997.997 0 01-1.414 0l-2.828-2.828a1 1 0 010-1.415l8.559-8.559-3.621-3.583A.998.998 0 017.934 3h7.1c.266 0 .52.105.707.293z\"/>\n</svg>\n",
+  "headphones": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M3 18v-6a9 9 0 0 1 18 0v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M21 14h1a1 1 0 0 0-1-1v1ZM3 14v-1a1 1 0 0 0-1 1h1Zm17 5a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2Zm-1 1h-1v2h1v-2Zm-1 0a1 1 0 0 1-1-1h-2a3 3 0 0 0 3 3v-2Zm-1-1v-3h-2v3h2Zm0-3a1 1 0 0 1 1-1v-2a3 3 0 0 0-3 3h2Zm1-1h3v-2h-3v2Zm2-1v5h2v-5h-2ZM2 19a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H2Zm3 3h1v-2H5v2Zm1 0a3 3 0 0 0 3-3H7a1 1 0 0 1-1 1v2Zm3-3v-3H7v3h2Zm0-3a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2Zm-3-3H3v2h3v-2Zm-4 1v5h2v-5H2Z\" fill=\"currentColor\"/>\n</svg>",
+  "help-circle": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-help-circle\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line></svg>",
   "home": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-home\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>",
   "image": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-image\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle><polyline points=\"21 15 16 10 5 21\"></polyline></svg>",
   "layers": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-layers\"><polygon points=\"12 2 2 7 12 12 22 7 12 2\"></polygon><polyline points=\"2 17 12 22 22 17\"></polyline><polyline points=\"2 12 12 17 22 12\"></polyline></svg>",
@@ -75,26 +82,28 @@
   "quiz": "<svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.8 12.0999C7.352 12.0999 7.8 12.5469 7.8 13.0999C7.8 13.6529 7.352 14.0999 6.8 14.0999C3.05 14.0999 0 11.0049 0 7.1999C0 3.3869 2.987 0.399902 6.8 0.399902C10.55 0.399902 13.6 3.4509 13.6 7.1999C13.6 7.7519 13.153 8.1999 12.6 8.1999C12.047 8.1999 11.6 7.7519 11.6 7.1999C11.6 4.5539 9.446 2.3999 6.8 2.3999C4.109 2.3999 2 4.5089 2 7.1999C2 9.9479 4.109 12.0999 6.8 12.0999ZM5.8 4.7C5.8 4.148 6.248 3.7 6.8 3.7C7.352 3.7 7.8 4.148 7.8 4.7V6.785L8.807 7.793C9.198 8.183 9.198 8.816 8.807 9.207C8.612 9.402 8.356 9.5 8.1 9.5C7.844 9.5 7.589 9.402 7.393 9.207L6.093 7.907C5.905 7.72 5.8 7.465 5.8 7.2V4.7ZM13.0998 17.1859L10.9138 14.9999L17.4008 8.51389L19.5858 10.6999L13.0998 17.1859ZM10.6858 19.5999H8.49979V17.4149L9.49979 16.4149L11.6858 18.5999L10.6858 19.5999ZM21.7068 9.99291L18.1078 6.39291C17.9198 6.20591 17.6658 6.09991 17.4008 6.09991C17.1348 6.09991 16.8808 6.20591 16.6938 6.39291L6.79279 16.2929C6.60579 16.4809 6.49979 16.7349 6.49979 16.9999V20.5999C6.49979 21.1529 6.94779 21.5999 7.49979 21.5999H11.0998C11.3658 21.5999 11.6198 21.4949 11.8078 21.3069L21.7068 11.4069C22.0978 11.0169 22.0978 10.3839 21.7068 9.99291Z\" fill=\"currentColor\"/>\n</svg>\n",
   "reset": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-rotate-ccw\"><polyline points=\"1 4 1 10 7 10\"></polyline><path d=\"M3.51 15a9 9 0 1 0 2.13-9.36L1 10\"></path></svg>",
   "rotate-cw": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-rotate-cw\"><polyline points=\"23 4 23 10 17 10\"></polyline><path d=\"M20.49 15a9 9 0 1 1-2.12-9.36L23 10\"></path></svg>",
-  "search-list": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4 6h16M15 12h5M16 18h4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path clip-rule=\"evenodd\" d=\"M7.125 19.5a4.375 4.375 0 100-8.75 4.375 4.375 0 000 8.75z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M13.25 21.25l-3.033-3.033\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
   "search": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-search\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>",
+  "search-list": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4 6h16M15 12h5M16 18h4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path clip-rule=\"evenodd\" d=\"M7.125 19.5a4.375 4.375 0 100-8.75 4.375 4.375 0 000 8.75z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M13.25 21.25l-3.033-3.033\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
   "settings": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-settings\"><circle cx=\"12\" cy=\"12\" r=\"3\"></circle><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path></svg>",
   "share": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-share\"><path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path><polyline points=\"16 6 12 2 8 6\"></polyline><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"15\"></line></svg>",
   "shopping-bag": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\"><path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line><path d=\"M16 10a4 4 0 0 1-8 0\"></path></svg>",
   "show-all": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n        d=\"M13.333 2H4c-.733 0-1.333.6-1.333 1.333v3.334L.667 8l2 1.333v3.334C2.667 13.4 3.267 14 4 14h9.333c.734 0 1.334-.6 1.334-1.333V3.333c0-.733-.6-1.333-1.334-1.333z\"\n        stroke=\"currentColor\" stroke-width=\"1.333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n    <path\n        d=\"M9.693 9.673H7.64l-.393 1.174H6L8.12 5.16h1.087l2.126 5.687h-1.246l-.394-1.174zm-1.74-.953h1.42L8.66 6.593 7.953 8.72z\"\n        fill=\"currentColor\" />\n</svg>\n",
   "sliders": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-sliders\"><line x1=\"4\" y1=\"21\" x2=\"4\" y2=\"14\"></line><line x1=\"4\" y1=\"10\" x2=\"4\" y2=\"3\"></line><line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"12\"></line><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"3\"></line><line x1=\"20\" y1=\"21\" x2=\"20\" y2=\"16\"></line><line x1=\"20\" y1=\"12\" x2=\"20\" y2=\"3\"></line><line x1=\"1\" y1=\"14\" x2=\"7\" y2=\"14\"></line><line x1=\"9\" y1=\"8\" x2=\"15\" y2=\"8\"></line><line x1=\"17\" y1=\"16\" x2=\"23\" y2=\"16\"></line></svg>",
+  "smartzoom": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"m7.593 15.164-1.7-1a1 1 0 0 1 1.013-1.724l1.701.999a1.002 1.002 0 0 1-1.014 1.725Zm7.288-8.6C17.989 7.917 20 10.926 20 14.401c0 4.676-3.504 8.372-8.151 8.6H5a1 1 0 1 1 0-1.999h6.8c3.514-.173 6.2-3.01 6.2-6.6 0-2.997-1.954-5.543-4.862-6.336a1 1 0 0 1-.598-1.475l1.076-1.817-2.545-1.42-3.695 6.37 2.561 1.43 1.103-1.862a1 1 0 0 1 1.082-.466c2.653.603 4.578 2.948 4.578 5.575 0 3.143-2.656 5.8-5.8 5.8a5.764 5.764 0 0 1-3.791-1.4H5a1 1 0 1 1 0-2h2.5c.265 0 .52.106.707.293a3.78 3.78 0 0 0 2.693 1.107c2.06 0 3.8-1.74 3.8-3.8 0-1.474-.953-2.815-2.345-3.406l-1.195 2.016a.998.998 0 0 1-1.347.363l-4.3-2.4A1.003 1.003 0 0 1 5.135 9.6l4.701-8.1a.996.996 0 0 1 1.352-.37l4.299 2.4a1.002 1.002 0 0 1 .373 1.382l-.979 1.653Z\" fill=\"currentColor\"/>\n</svg>",
+  "sort": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M6 5v15M11 15l-5 5-5-5M18 19V4M13 9l5-5 5 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>",
   "star": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-star\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"></polygon></svg>",
   "stethoscope": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path d=\"M13.1 2.5h2.3v4.6c0 3.2-2.6 5.7-5.7 5.7S4 10.2 4 7.1V2.5h2.3\"/>\n    <circle cx=\"17.7\" cy=\"15\" r=\"2.3\"/>\n    <path d=\"M17.7 17.5c0 2.2-1.8 4-4 4s-4-1.8-4-4M9.7 17.5v-4\"/>\n</svg>\n",
   "tag": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-tag\"><path d=\"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z\"></path><line x1=\"7\" y1=\"7\" x2=\"7.01\" y2=\"7\"></line></svg>",
+  "text-zoom-reset": "<svg width=\"24\" height=\"24\" fill=\"currentColor\" stroke=\"none\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.509 18H9.454l-.9-2H4.447l-.9 2H1.354l4.234-9.41h1.824l3.56 7.91 4.607-10.89h1.842L22.663 18H20.49l-1.269-3h-5.444l-1.269 3zM6.5 11.437L7.654 14H5.347L6.5 11.437zM18.376 13L16.5 8.566 14.624 13h3.752z\"/>\n</svg>\n",
+  "thumbs-up": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-thumbs-up\"><path d=\"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3\"></path></svg>",
   "timer-off": "\n<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.848 6.88a8 8 0 1 0 11.275 11.27M19.748 15A8 8 0 0 0 10 5.252M15.5 9.5l-.5.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12 5V2\"  stroke-width=\"2\"/><path d=\"M10 2h4\" stroke-width=\"2\" stroke-linecap=\"round\"/><path d=\"m4 4 17 17\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
   "timer-on": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 21a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM15 10l-3 3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12 5V2\" stroke-width=\"2\"/><path d=\"M10 2h4\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>",
-  "thumbs-up": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-thumbs-up\"><path d=\"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3\"></path></svg>",
-  "text-zoom-reset": "<svg width=\"24\" height=\"24\" fill=\"currentColor\" stroke=\"none\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.509 18H9.454l-.9-2H4.447l-.9 2H1.354l4.234-9.41h1.824l3.56 7.91 4.607-10.89h1.842L22.663 18H20.49l-1.269-3h-5.444l-1.269 3zM6.5 11.437L7.654 14H5.347L6.5 11.437zM18.376 13L16.5 8.566 14.624 13h3.752z\"/>\n</svg>\n",
   "trash-2": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-trash-2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path><line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"></line><line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"></line></svg>",
   "user": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-user\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"></path><circle cx=\"12\" cy=\"7\" r=\"4\"></circle></svg>",
   "users": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-users\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"></path><circle cx=\"9\" cy=\"7\" r=\"4\"></circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"></path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path></svg>",
   "watch": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-watch\"><circle cx=\"12\" cy=\"12\" r=\"7\"></circle><polyline points=\"12 9 12 12 13.5 13.5\"></polyline><path d=\"M16.51 17.35l-.35 3.83a2 2 0 0 1-2 1.82H9.83a2 2 0 0 1-2-1.82l-.35-3.83m.01-10.7l.35-3.83A2 2 0 0 1 9.83 1h4.35a2 2 0 0 1 2 1.82l.35 3.83\"></path></svg>",
   "wifi": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-wifi\"><path d=\"M5 12.55a11 11 0 0 1 14.08 0\"></path><path d=\"M1.42 9a16 16 0 0 1 21.16 0\"></path><path d=\"M8.53 16.11a6 6 0 0 1 6.95 0\"></path><line x1=\"12\" y1=\"20\" x2=\"12.01\" y2=\"20\"></line></svg>",
   "wifi-off": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-wifi-off\"><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line><path d=\"M16.72 11.06A10.94 10.94 0 0 1 19 12.55\"></path><path d=\"M5 12.55a10.94 10.94 0 0 1 5.17-2.39\"></path><path d=\"M10.71 5.05A16 16 0 0 1 22.58 9\"></path><path d=\"M1.42 9a15.91 15.91 0 0 1 4.7-2.88\"></path><path d=\"M8.53 16.11a6 6 0 0 1 6.95 0\"></path><line x1=\"12\" y1=\"20\" x2=\"12.01\" y2=\"20\"></line></svg>",
-  "x-circle-filled": "<svg width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11zm4.707-15.707a1 1 0 010 1.414L13.414 12l3.293 3.293a1 1 0 01-1.414 1.414L12 13.414l-3.293 3.293a1 1 0 01-1.414-1.414L10.586 12 7.293 8.707a1 1 0 011.414-1.414L12 10.586l3.293-3.293a1 1 0 011.414 0z\"/>\n</svg>\n",
-  "x": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-x\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>"
+  "x": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-x\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>",
+  "x-circle-filled": "<svg width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11zm4.707-15.707a1 1 0 010 1.414L13.414 12l3.293 3.293a1 1 0 01-1.414 1.414L12 13.414l-3.293 3.293a1 1 0 01-1.414-1.414L10.586 12 7.293 8.707a1 1 0 011.414-1.414L12 10.586l3.293-3.293a1 1 0 011.414 0z\"/>\n</svg>\n"
 }