tuix-webcomponents 0.0.33 → 0.0.35

package/custom-elements.json

@@ -451,81 +451,18 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-checkbox/TuixCheckbox.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "hostStyles",
-          "default": "css`\n  :host {\n    --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(Palette.WHITE)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-text-color-error: ${unsafeCSS(Palette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(Palette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-text-color-label: ${unsafeCSS(Palette.BLACK)};\n    --t-label-right-default-justify: flex-start;\n    --t-label-left-default-justify: space-between;\n  }\n  :host([dark]) {\n    --t-main-color-tuix: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.BLACK)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-text-color-error: ${unsafeCSS(DarkPalette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n    --t-text-color-label: ${unsafeCSS(DarkPalette.WHITE)};\n  }\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "checkboxContainerStyles",
-          "default": "css`\n  .t-checkbox-full-container {\n    display: flex;\n    justify-content: var(--t-label-right-default-justify, flex-start);\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-checkbox-full-container {\n    cursor: not-allowed;\n  }\n  .t-checkbox-container {\n    --t-checkbox-size-box: 1.5rem;\n    --t-checkbox-shadow-width: 2px;\n    --t-checkbox-border-radius: 0.25rem;\n    display: block;\n    position: relative;\n    height: var(--t-checkbox-size-box);\n    width: var(--t-checkbox-size-box);\n    min-width: var(--t-checkbox-size-box);\n  }\n  .t-checkbox-container .t-checkbox {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-checkbox-container {\n      --t-checkbox-size-box: 1rem;\n      --t-checkbox-shadow-width: 1px;\n      --t-checkbox-border-radius: 0.125rem;\n      margin-top: 1px;\n    }\n  }\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "checkboxCheckmarkStyles",
-          "default": "css`\n  .t-checkbox-container .t-checkbox-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: var(--t-checkbox-size-box);\n    width: var(--t-checkbox-size-box);\n    border-radius: var(--t-checkbox-border-radius);\n    background-color: var(--t-bg-color-primary);\n    border: 1px solid var(--t-stroke-color-grey);\n    box-sizing: border-box;\n  }\n  .t-checkbox-container .t-checkbox-checkmark tuix-icon {\n    margin: auto;\n    display: none;\n    width: calc(var(--t-checkbox-size-box) - 0.5rem);\n    height: calc(var(--t-checkbox-size-box) - 0.5rem);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {\n    background-color: var(--t-main-color-tuix);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {\n    box-shadow: 0 0 0px var(--t-checkbox-shadow-width)\n      var(--t-stroke-color-focus);\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {\n    display: block;\n  }\n  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox-checkmark {\n    border: 1px solid var(--t-text-color-error);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox:checked\n    ~ .t-checkbox-checkmark {\n    background-color: var(--t-text-color-error);\n    border: none;\n  }\n\n  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "checkboxLabelStyles",
-          "default": "css`\n  .t-checkbox-label {\n    display: block;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-checkbox-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n    justify-content: var(--t-label-left-default-justify, space-between);\n  }\n  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "hostStyles",
-          "declaration": {
-            "name": "hostStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "checkboxContainerStyles",
-          "declaration": {
-            "name": "checkboxContainerStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "checkboxCheckmarkStyles",
-          "declaration": {
-            "name": "checkboxCheckmarkStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "checkboxLabelStyles",
-          "declaration": {
-            "name": "checkboxLabelStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-checkbox/TuixCheckbox.ts",
+      "path": "src/tuix-button/TuixBaseButton.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "TuixCheckbox",
+          "name": "TuixBaseButton",
           "members": [
             {
               "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "checked"
+              "name": "variant",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -549,63 +486,71 @@
             },
             {
               "kind": "field",
-              "name": "error",
+              "name": "iconColor",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "attribute": "error",
-              "reflects": true
+              "privacy": "protected",
+              "default": "''"
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "label"
+              "kind": "method",
+              "name": "_getTextColor",
+              "privacy": "protected"
             },
             {
-              "kind": "field",
-              "name": "labelSide",
-              "type": {
-                "text": "CheckboxLabelSide"
-              },
-              "attribute": "labelSide"
+              "kind": "method",
+              "name": "_updateIconColor",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "_onCheckboxChange",
-              "privacy": "private",
+              "name": "_handleClick",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "_iconTemplate",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "iconName",
                   "type": {
-                    "text": "InputEvent"
+                    "text": "IconName"
+                  }
+                },
+                {
+                  "name": "iconSize",
+                  "type": {
+                    "text": "IconSizeVariant"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_getIconMode",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_getFullContainerClasses",
-              "privacy": "private",
+              "name": "_buttonContent",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "ClassInfo"
+                  "text": "TemplateResult"
                 }
               }
             }
           ],
           "events": [
             {
-              "name": "change",
+              "name": "customClick",
               "type": {
                 "text": "CustomEvent"
               }
@@ -613,12 +558,8 @@
           ],
           "attributes": [
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "checked"
+              "name": "variant",
+              "fieldName": "variant"
             },
             {
               "name": "disabled",
@@ -635,150 +576,146 @@
               },
               "default": "false",
               "fieldName": "dark"
-            },
-            {
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "error"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "label"
-            },
-            {
-              "name": "labelSide",
-              "type": {
-                "text": "CheckboxLabelSide"
-              },
-              "fieldName": "labelSide"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "tuix-checkbox",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TuixCheckbox",
-          "declaration": {
-            "name": "TuixCheckbox",
-            "module": "src/tuix-checkbox/TuixCheckbox.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "tuix-checkbox",
+          "name": "TuixBaseButton",
           "declaration": {
-            "name": "TuixCheckbox",
-            "module": "src/tuix-checkbox/TuixCheckbox.ts"
+            "name": "TuixBaseButton",
+            "module": "src/tuix-button/TuixBaseButton.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-dropdown/TuixDropdown.styles.ts",
+      "path": "src/tuix-button/TuixButton.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "dropdownHostStyles",
-          "default": "css`\n  ${hostStyles}\n  :host {\n    --t-field-color-option: ${unsafeCSS(Palette.WHITE)};\n    --t-field-color-main: ${unsafeCSS(Palette.MAIN)};\n  }\n\n  :host .t-input-dropdown {\n    --t-field-font-weight: 300;\n    --t-field-font-size: 1rem;\n    --t-field-padding-x: 1rem;\n    --t-field-title-left-position: 1rem;\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    :host .t-input-dropdown {\n      --t-field-font-size: 0.938rem;\n      --t-field-line-height: 1.125rem;\n    }\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    :host .t-input-dropdown {\n      --t-field-font-size: 0.813rem;\n      --t-field-line-height: 1rem;\n    }\n  }\n\n  :host([dark]) {\n    --t-field-color-option: ${unsafeCSS(DarkPalette.ELEVATION_2)};\n  }\n`"
+          "name": "hostButtonStyles",
+          "default": "css`\n  :host {\n    --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-secondary-color: ${unsafeCSS(Palette.WHITE)};\n    --t-button-accent-color: ${unsafeCSS(Palette.SECONDARY)};\n    --t-button-text-color: ${unsafeCSS(Palette.WHITE)};\n    --t-button-text-secondary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-button-hover-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_200)};\n  }\n  :host([dark]) {\n    --t-button-primary-color: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-button-text-color: ${unsafeCSS(DarkPalette.WHITE)};\n    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_950)};\n    --t-button-hover-primary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n    --t-button-secondary-color: ${unsafeCSS(Palette.BLACK)};\n    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_950)};\n    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n  }\n`"
         },
         {
           "kind": "variable",
-          "name": "dropdownMainContainerStyles",
-          "default": "css`\n  .t-dropdown-full-container {\n    position: relative;\n    font-family: 'Rubik', sans-serif;\n  }\n  .t-dropdown-container .t-input-dropdown {\n    --t-field-input-cursor: pointer;\n  }\n`"
+          "name": "buttonSizeStyles",
+          "default": "css`\n  ${unsafeCSS(`\n  ${slottedClassName(TextSize.Button)} {\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.25rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    ${slottedClassName(TextSize.Button)} {\n      font-size: 0.938rem;\n      font-weight: 400;\n      line-height: 1.125rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    ${slottedClassName(TextSize.Button)} {\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 1rem;\n    }\n  }\n`)}\n`"
         },
         {
           "kind": "variable",
-          "name": "dropdownOptionStyles",
-          "default": "css`\n  .t-options-container {\n    width: 100%;\n    position: absolute;\n    top: calc(100% + 2px);\n    left: 0;\n    border: none;\n    border-radius: 0 0 5px 5px;\n    background-color: var(--t-field-color-option);\n    visibility: collapse;\n    overflow-y: auto;\n    max-height: 250px;\n    color: var(--t-field-color-text);\n    box-shadow: 0px 2px 8px 0px ${unsafeCSS(Palette.SHADOW)};\n    z-index: 9999;\n  }\n  .t-options-container::-webkit-scrollbar {\n    width: 0.75rem;\n  }\n  .t-options-container::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n  .t-options-container::-webkit-scrollbar-thumb {\n    background-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    border-radius: 0.25rem;\n    border: 0.188rem solid transparent;\n    background-clip: content-box;\n  }\n  .t-options-container.show {\n    visibility: visible;\n  }\n  .t-options-container.show.t-with-description {\n    top: calc(100% + 2px - 1.5rem);\n  }\n  @media only screen and (max-height: 500px) {\n    .t-options-container {\n      max-height: 50vh;\n    }\n  }\n  .t-dropdown-option {\n    padding: var(--t-field-padding-y) 1rem;\n    cursor: pointer;\n    font-size: 1rem;\n    line-height: 1.25rem;\n    font-weight: 300;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .t-dropdown-option.t-option-hover {\n    background-color: var(--t-field-color-form);\n  }\n  .t-dropdown-option.t-option-selected {\n    color: var(--t-field-color-main);\n  }\n  .t-dropdown-option.t-option-filtered {\n    display: none;\n  }\n  .t-dropdown-option:focus {\n    outline: none;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-dropdown-option {\n      font-size: 0.938rem;\n      line-height: 1.125rem;\n      --t-field-padding-y: 1.063rem;\n      --t-field-padding-top: 1.5rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-dropdown-option {\n      font-size: 0.813rem;\n      line-height: 1rem;\n      --t-field-padding-y: 1rem;\n      --t-field-padding-top: 1.375rem;\n    }\n  }\n`"
+          "name": "buttonColorStyles",
+          "default": "css`\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {\n    background-color: var(--t-button-primary-color);\n    outline: none;\n    color: var(--t-button-text-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {\n    background-color: var(--t-button-hover-primary-color);\n    cursor: pointer;\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {\n    background-color: var(--t-button-hover-primary-color);\n    outline: 2px solid var(--t-button-accent-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {\n    background-color: var(--t-button-active-primary-color);\n    outline: none;\n  }\n\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {\n    background-color: var(--t-button-secondary-color);\n    outline: 1px solid var(--t-button-hover-primary-color);\n    color: var(--t-button-text-secondary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {\n    background-color: var(--t-button-hover-secondary-color);\n    outline: 1px solid var(--t-button-primary-color);\n    color: var(--t-button-primary-color);\n    cursor: pointer;\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {\n    background-color: var(--t-button-hover-secondary-color);\n    outline: 2px solid var(--t-button-accent-color);\n    color: var(--t-button-primary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {\n    background-color: var(--t-button-active-secondary-color);\n    outline: 1px solid var(--t-button-primary-color);\n    color: var(--t-button-primary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {\n    outline: 1px solid var(--t-button-text-muted-color);\n  }\n\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {\n    background-color: var(--t-button-disabled-bg-color);\n    color: var(--t-button-text-muted-color);\n    cursor: not-allowed;\n  }\n`"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "dropdownHostStyles",
+          "name": "hostButtonStyles",
           "declaration": {
-            "name": "dropdownHostStyles",
-            "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
+            "name": "hostButtonStyles",
+            "module": "src/tuix-button/TuixButton.styles.ts"
           }
         },
         {
           "kind": "js",
-          "name": "dropdownMainContainerStyles",
+          "name": "buttonSizeStyles",
           "declaration": {
-            "name": "dropdownMainContainerStyles",
-            "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
+            "name": "buttonSizeStyles",
+            "module": "src/tuix-button/TuixButton.styles.ts"
           }
         },
         {
           "kind": "js",
-          "name": "dropdownOptionStyles",
+          "name": "buttonColorStyles",
           "declaration": {
-            "name": "dropdownOptionStyles",
-            "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
+            "name": "buttonColorStyles",
+            "module": "src/tuix-button/TuixButton.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-dropdown/TuixDropdown.ts",
+      "path": "src/tuix-button/TuixButton.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "TuixDropdown",
+          "name": "TuixButton",
           "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "full",
               "type": {
-                "text": "TuixDropdownOption | undefined"
+                "text": "boolean"
               },
-              "default": "undefined",
-              "attribute": "value"
+              "default": "false",
+              "attribute": "full",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "options",
+              "name": "iconRight",
               "type": {
-                "text": "TuixDropdownOption[]"
+                "text": "IconName | undefined"
               },
-              "default": "[]",
-              "attribute": "options"
+              "attribute": "iconRight"
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "iconLeft",
               "type": {
-                "text": "string"
+                "text": "IconName | undefined"
               },
-              "default": "''",
-              "attribute": "placeholder"
+              "attribute": "iconLeft"
             },
             {
-              "kind": "field",
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "title"
-            },
+              "kind": "method",
+              "name": "_updateIconColor",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_buttonContent",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -787,7 +724,11 @@
               },
               "default": "false",
               "attribute": "disabled",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
               "kind": "field",
@@ -797,372 +738,324 @@
               },
               "default": "false",
               "attribute": "dark",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "description",
+              "name": "iconColor",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "attribute": "description"
+              "privacy": "protected",
+              "default": "''",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "descriptionType",
-              "attribute": "descriptionType"
+              "kind": "method",
+              "name": "_getTextColor",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "type",
-              "attribute": "type"
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "_value",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "_iconTemplate",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
               },
-              "privacy": "private",
-              "default": "''"
-            },
+              "parameters": [
+                {
+                  "name": "iconName",
+                  "type": {
+                    "text": "IconName"
+                  }
+                },
+                {
+                  "name": "iconSize",
+                  "type": {
+                    "text": "IconSizeVariant"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "_isOptionsVisible",
+              "name": "full",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "fieldName": "full"
             },
             {
-              "kind": "field",
-              "name": "_searchingOption",
+              "name": "iconRight",
               "type": {
-                "text": "boolean"
+                "text": "IconName | undefined"
               },
-              "privacy": "private",
-              "default": "false"
+              "fieldName": "iconRight"
             },
             {
-              "kind": "field",
-              "name": "_extendedOptions",
+              "name": "iconLeft",
               "type": {
-                "text": "TuixDropdownExtendedOption[]"
+                "text": "IconName | undefined"
               },
-              "default": "[]"
+              "fieldName": "iconLeft"
             },
             {
-              "kind": "field",
-              "name": "_optionsContainer",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
+              "name": "variant",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "_inputDropdown",
+              "name": "disabled",
               "type": {
-                "text": "HTMLElement | undefined"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "_previousSelectedOption",
+              "name": "dark",
               "type": {
-                "text": "HTMLElement | null"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "null"
-            },
+              "default": "false",
+              "fieldName": "dark",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "TuixBaseButton",
+            "module": "/src/tuix-button/TuixBaseButton"
+          },
+          "tagName": "tuix-button",
+          "customElement": true,
+          "events": [
             {
-              "kind": "field",
-              "name": "_previousFocusedOption",
+              "name": "customClick",
               "type": {
-                "text": "HTMLElement | null"
+                "text": "CustomEvent"
               },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "method",
-              "name": "_onEnterPress",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_onKeyDownOption",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_onKeyPressOption",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_onMouseOverOption",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_onClickOption",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent | KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_onInputSingle",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_handleSelectEvent",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent | KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_handleBlur",
-              "privacy": "private"
-            },
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TuixButton",
+          "declaration": {
+            "name": "TuixButton",
+            "module": "src/tuix-button/TuixButton.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "tuix-button",
+          "declaration": {
+            "name": "TuixButton",
+            "module": "src/tuix-button/TuixButton.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-checkbox/TuixCheckbox.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "hostStyles",
+          "default": "css`\n  :host {\n    --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(Palette.WHITE)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-text-color-error: ${unsafeCSS(Palette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(Palette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-text-color-label: ${unsafeCSS(Palette.BLACK)};\n    --t-label-right-default-justify: flex-start;\n    --t-label-left-default-justify: space-between;\n  }\n  :host([dark]) {\n    --t-main-color-tuix: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.BLACK)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-text-color-error: ${unsafeCSS(DarkPalette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n    --t-text-color-label: ${unsafeCSS(DarkPalette.WHITE)};\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "checkboxContainerStyles",
+          "default": "css`\n  .t-checkbox-full-container {\n    display: flex;\n    justify-content: var(--t-label-right-default-justify, flex-start);\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-checkbox-full-container {\n    cursor: not-allowed;\n  }\n  .t-checkbox-container {\n    --t-checkbox-size-box: 1.5rem;\n    --t-checkbox-shadow-width: 2px;\n    --t-checkbox-border-radius: 0.25rem;\n    display: block;\n    position: relative;\n    height: var(--t-checkbox-size-box);\n    width: var(--t-checkbox-size-box);\n    min-width: var(--t-checkbox-size-box);\n  }\n  .t-checkbox-container .t-checkbox {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-checkbox-container {\n      --t-checkbox-size-box: 1rem;\n      --t-checkbox-shadow-width: 1px;\n      --t-checkbox-border-radius: 0.125rem;\n      margin-top: 1px;\n    }\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "checkboxCheckmarkStyles",
+          "default": "css`\n  .t-checkbox-container .t-checkbox-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: var(--t-checkbox-size-box);\n    width: var(--t-checkbox-size-box);\n    border-radius: var(--t-checkbox-border-radius);\n    background-color: var(--t-bg-color-primary);\n    border: 1px solid var(--t-stroke-color-grey);\n    box-sizing: border-box;\n  }\n  .t-checkbox-container .t-checkbox-checkmark tuix-icon {\n    margin: auto;\n    display: none;\n    width: calc(var(--t-checkbox-size-box) - 0.5rem);\n    height: calc(var(--t-checkbox-size-box) - 0.5rem);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {\n    background-color: var(--t-main-color-tuix);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {\n    box-shadow: 0 0 0px var(--t-checkbox-shadow-width)\n      var(--t-stroke-color-focus);\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {\n    display: block;\n  }\n  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox-checkmark {\n    border: 1px solid var(--t-text-color-error);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox:checked\n    ~ .t-checkbox-checkmark {\n    background-color: var(--t-text-color-error);\n    border: none;\n  }\n\n  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "checkboxLabelStyles",
+          "default": "css`\n  .t-checkbox-label {\n    display: block;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-checkbox-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n    justify-content: var(--t-label-left-default-justify, space-between);\n  }\n  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "hostStyles",
+          "declaration": {
+            "name": "hostStyles",
+            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "checkboxContainerStyles",
+          "declaration": {
+            "name": "checkboxContainerStyles",
+            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "checkboxCheckmarkStyles",
+          "declaration": {
+            "name": "checkboxCheckmarkStyles",
+            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "checkboxLabelStyles",
+          "declaration": {
+            "name": "checkboxLabelStyles",
+            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-checkbox/TuixCheckbox.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "TuixCheckbox",
+          "members": [
             {
-              "kind": "method",
-              "name": "_getOptionName",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "TuixDropdownOption"
-                  }
-                }
-              ]
+              "default": "false",
+              "attribute": "checked"
             },
             {
-              "kind": "method",
-              "name": "_getOptionValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "TuixDropdownPlainOption"
-                }
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "TuixDropdownOption"
-                  }
-                }
-              ]
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "_findIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
+              "kind": "field",
+              "name": "dark",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "TuixDropdownOption"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_handleInputBase",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                },
-                {
-                  "name": "eventName",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_extendOptionsList",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "value",
-                  "default": "''"
-                }
-              ]
+              "default": "false",
+              "attribute": "dark",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "_handleArrowDown",
-              "privacy": "private"
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "error",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "_handleArrowUp",
-              "privacy": "private"
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "_handleClickOutside",
-              "privacy": "private"
+              "name": "labelSide",
+              "type": {
+                "text": "CheckboxLabelSide"
+              },
+              "attribute": "labelSide"
             },
             {
               "kind": "method",
-              "name": "_focusTargetOption",
+              "name": "_onCheckboxChange",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "targetOption",
+                  "name": "event",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "InputEvent"
                   }
-                },
-                {
-                  "name": "extrict",
-                  "default": "true"
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_toggleOptions",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_focusOptionsContainer",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_unselectPreviousOption",
+              "name": "_getIconMode",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_hasCompleteDescription",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_getOptionsContainerClasses",
+              "name": "_getFullContainerClasses",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "ClassInfo"
                 }
               }
-            },
-            {
-              "kind": "method",
-              "name": "_triggerUpdateByExternalValueChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_resetPreviousSelection",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_getOptionsTemplate",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "TemplateResult[]"
-                }
-              }
             }
           ],
           "events": [
             {
-              "name": "select",
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
-              "name": "eventName",
+              "name": "change",
               "type": {
                 "text": "CustomEvent"
               }
@@ -1170,39 +1063,12 @@
           ],
           "attributes": [
             {
-              "name": "value",
-              "type": {
-                "text": "TuixDropdownOption | undefined"
-              },
-              "default": "undefined",
-              "resolveInitializer": {
-                "module": "src/tuix-dropdown/TuixDropdown.ts"
-              },
-              "fieldName": "value"
-            },
-            {
-              "name": "options",
-              "type": {
-                "text": "TuixDropdownOption[]"
-              },
-              "default": "[]",
-              "fieldName": "options"
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "placeholder"
-            },
-            {
-              "name": "title",
+              "name": "checked",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "fieldName": "title"
+              "default": "false",
+              "fieldName": "checked"
             },
             {
               "name": "disabled",
@@ -1221,72 +1087,146 @@
               "fieldName": "dark"
             },
             {
-              "name": "description",
+              "name": "error",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "fieldName": "description"
+              "default": "false",
+              "fieldName": "error"
             },
             {
-              "name": "descriptionType",
-              "fieldName": "descriptionType"
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
             },
             {
-              "name": "type",
-              "fieldName": "type"
+              "name": "labelSide",
+              "type": {
+                "text": "CheckboxLabelSide"
+              },
+              "fieldName": "labelSide"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "tuix-dropdown",
+          "tagName": "tuix-checkbox",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TuixDropdown",
+          "name": "TuixCheckbox",
           "declaration": {
-            "name": "TuixDropdown",
-            "module": "src/tuix-dropdown/TuixDropdown.ts"
+            "name": "TuixCheckbox",
+            "module": "src/tuix-checkbox/TuixCheckbox.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "tuix-dropdown",
+          "name": "tuix-checkbox",
           "declaration": {
-            "name": "TuixDropdown",
-            "module": "src/tuix-dropdown/TuixDropdown.ts"
+            "name": "TuixCheckbox",
+            "module": "src/tuix-checkbox/TuixCheckbox.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-button/TuixBaseButton.ts",
+      "path": "src/tuix-icon/TuixIcon.icons.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "iconTemplate",
+          "return": {
+            "type": {
+              "text": "ReturnType<typeof html>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "name",
+              "optional": true,
+              "type": {
+                "text": "IconName"
+              }
+            },
+            {
+              "name": "color",
+              "default": "Palette.BLACK",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "fill",
+              "optional": true,
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "variable",
+          "name": "iconContentMap",
+          "type": {
+            "text": "IconContentMapType"
+          },
+          "default": "{\n  [IconName.ARROW_DOWN]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 5V19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M19 12L12 19L5 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_LEFT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M19 12H5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 19L5 12L12 5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_UP]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 19V5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M5 12L12 5L19 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_RIGHT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M5 12H19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 5L19 12L12 19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.SEARCH]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M20.9999 20.9999L16.6499 16.6499\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.EYE_ON]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.EYE_OFF]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <g clip-path=\"url(#clip0_2207_3897)\">\n  <path d=\"M9.9 4.24002C10.5883 4.0789 11.2931 3.99836 12 4.00003C19 4.00003 23 12 23 12C22.393 13.1356 21.6691 14.2048 20.84 15.19M14.12 14.12C13.8454 14.4148 13.5141 14.6512 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1752 15.0074 10.8016 14.8565C10.4281 14.7056 10.0887 14.4811 9.80385 14.1962C9.51897 13.9113 9.29439 13.572 9.14351 13.1984C8.99262 12.8249 8.91853 12.4247 8.92563 12.0219C8.93274 11.6191 9.02091 11.2219 9.18488 10.8539C9.34884 10.4859 9.58525 10.1547 9.88 9.88003M17.94 17.94C16.2306 19.243 14.1491 19.9649 12 20C5 20 1 12 1 12C2.24389 9.68192 3.96914 7.65663 6.06 6.06003L17.94 17.94Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M1 1L23 23\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  <defs>\n  <clipPath id=\"clip0_2207_3897\">\n  <rect width=\"24\" height=\"24\" fill=\"white\"/>\n  </clipPath>\n  </defs>\n  </svg>\n  `,\n  [IconName.EYE_CLOSE_LINE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M9.34178 18.7821L7.41078 18.2641L8.19778 15.3251C7.01975 14.8906 5.9249 14.2575 4.96078 13.4531L2.80778 15.6071L1.39278 14.1921L3.54678 12.0391C2.33086 10.5829 1.51387 8.83587 1.17578 6.96911L3.14378 6.61011C3.90278 10.8121 7.57878 14.0001 11.9998 14.0001C16.4198 14.0001 20.0968 10.8121 20.8558 6.61011L22.8238 6.96811C22.4861 8.83512 21.6695 10.5825 20.4538 12.0391L22.6068 14.1921L21.1918 15.6071L19.0388 13.4531C18.0747 14.2575 16.9798 14.8906 15.8018 15.3251L16.5888 18.2651L14.6578 18.7821L13.8698 15.8421C12.6321 16.0542 11.3674 16.0542 10.1298 15.8421L9.34178 18.7821Z\" fill=\"black\"/>\n  </svg>\n  `,\n  [IconName.TRIANGLE_EXCLAMATION]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M10.2898 3.85996L1.81978 18C1.64514 18.3024 1.55274 18.6453 1.55177 18.9945C1.55079 19.3437 1.64127 19.6871 1.8142 19.9905C1.98714 20.2939 2.2365 20.5467 2.53748 20.7238C2.83847 20.9009 3.18058 20.9961 3.52978 21H20.4698C20.819 20.9961 21.1611 20.9009 21.4621 20.7238C21.7631 20.5467 22.0124 20.2939 22.1854 19.9905C22.3583 19.6871 22.4488 19.3437 22.4478 18.9945C22.4468 18.6453 22.3544 18.3024 22.1798 18L13.7098 3.85996C13.5315 3.56607 13.2805 3.32308 12.981 3.15444C12.6814 2.98581 12.3435 2.89722 11.9998 2.89722C11.656 2.89722 11.3181 2.98581 11.0186 3.15444C10.7191 3.32308 10.468 3.56607 10.2898 3.85996V3.85996Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 9V13\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 17H12.01\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CIRCLE_X]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M15 9L9 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M9 9L15 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.LOADER]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 2V6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 18V22\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M4.93018 4.92993L7.76018 7.75993\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16.2402 16.24L19.0702 19.07\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M2 12H6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M18 12H22\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M4.93018 19.07L7.76018 16.24\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16.2402 7.75993L19.0702 4.92993\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.LOADER_CIRCLE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CIRCLE_CHECK]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M22 11.0801V12.0001C21.9988 14.1565 21.3005 16.2548 20.0093 17.9819C18.7182 19.7091 16.9033 20.9726 14.8354 21.584C12.7674 22.1954 10.5573 22.122 8.53447 21.3747C6.51168 20.6274 4.78465 19.2462 3.61096 17.4372C2.43727 15.6281 1.87979 13.4882 2.02168 11.3364C2.16356 9.18467 2.99721 7.13643 4.39828 5.49718C5.79935 3.85793 7.69279 2.71549 9.79619 2.24025C11.8996 1.76502 14.1003 1.98245 16.07 2.86011\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M22 4L12 14.01L9 11.01\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHEVRON_DOWN]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M6 9L12 15L18 9\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHEVRON_UP]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M18 15L12 9L6 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHECK]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M20 6L9 17L4 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.NAV_HAMBURGUER]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"24/ outlined / action / main / menu\">\n  <path id=\"Vector\" d=\"M3 12H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path id=\"Vector_2\" d=\"M3 6H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path id=\"Vector_3\" d=\"M3 18H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  </svg>`,\n  [IconName.SUN]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <g clip-path=\"url(#clip0_2207_4056)\">\n    <path d=\"M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M12 1V3\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M12 21V23\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M4.22021 4.21997L5.64021 5.63997\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M18.3599 18.3601L19.7799 19.7801\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M1 12H3\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M21 12H23\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M4.22021 19.7801L5.64021 18.3601\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M18.3599 5.63997L19.7799 4.21997\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_2207_4056\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n  </svg>`,\n  [IconName.MOON]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M20.9999 12.79C20.8426 14.4922 20.2038 16.1144 19.1581 17.4668C18.1125 18.8192 16.7034 19.8458 15.0956 20.4265C13.4878 21.0073 11.7479 21.1181 10.0794 20.7461C8.41092 20.3741 6.8829 19.5345 5.67413 18.3258C4.46536 17.117 3.62584 15.589 3.25381 13.9205C2.88178 12.252 2.99262 10.5121 3.57336 8.9043C4.15411 7.29651 5.18073 5.88737 6.53311 4.84175C7.8855 3.79614 9.5077 3.15731 11.2099 3C10.2133 4.34827 9.73375 6.00945 9.85843 7.68141C9.98312 9.35338 10.7038 10.9251 11.8893 12.1106C13.0748 13.2961 14.6465 14.0168 16.3185 14.1415C17.9905 14.2662 19.6516 13.7866 20.9999 12.79Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CHEVRON_LEFT]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M15 18L9 12L15 6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CHEVRON_RIGHT]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M9 18L15 12L9 6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.BOOKMARK]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M19 21L12 16L5 21V5C5 4.46957 5.21071 3.96086 5.58579 3.58579C5.96086 3.21071 6.46957 3 7 3H17C17.5304 3 18.0391 3.21071 18.4142 3.58579C18.7893 3.96086 19 4.46957 19 5V21Z\" stroke=\"#A8A9D1\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.UPLOAD]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M17 8L12 3L7 8\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 3V15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.DOWNLOAD]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M7 10L12 15L17 10\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 15V3\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.MAP_PIN]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.PHONE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21.9999 16.9201V19.9201C22.0011 20.1986 21.944 20.4743 21.8324 20.7294C21.7209 20.9846 21.5572 21.2137 21.352 21.402C21.1468 21.5902 20.9045 21.7336 20.6407 21.8228C20.3769 21.912 20.0973 21.9452 19.8199 21.9201C16.7428 21.5857 13.7869 20.5342 11.1899 18.8501C8.77376 17.3148 6.72527 15.2663 5.18993 12.8501C3.49991 10.2413 2.44818 7.27109 2.11993 4.1801C2.09494 3.90356 2.12781 3.62486 2.21643 3.36172C2.30506 3.09859 2.4475 2.85679 2.6347 2.65172C2.82189 2.44665 3.04974 2.28281 3.30372 2.17062C3.55771 2.05843 3.83227 2.00036 4.10993 2.0001H7.10993C7.59524 1.99532 8.06572 2.16718 8.43369 2.48363C8.80166 2.80008 9.04201 3.23954 9.10993 3.7201C9.23656 4.68016 9.47138 5.62282 9.80993 6.5301C9.94448 6.88802 9.9736 7.27701 9.89384 7.65098C9.81408 8.02494 9.6288 8.36821 9.35993 8.6401L8.08993 9.9101C9.51349 12.4136 11.5864 14.4865 14.0899 15.9101L15.3599 14.6401C15.6318 14.3712 15.9751 14.1859 16.3491 14.1062C16.723 14.0264 17.112 14.0556 17.4699 14.1901C18.3772 14.5286 19.3199 14.7635 20.2799 14.8901C20.7657 14.9586 21.2093 15.2033 21.5265 15.5776C21.8436 15.9519 22.0121 16.4297 21.9999 16.9201Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.MAIL]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M22 6L12 13L2 6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.MAILS]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M17 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 1-1.732M22 5.5l-6.419 4.179a2 2 0 0 1-2.162 0L7 5.5\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M20 3H9a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.LAYERS]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 2 2 7l10 5 10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.SEND]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M22 2 11 13M22 2l-7 20-4-9-9-4z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.FILE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M19.462 9.598c-.022-1.74-.28-3.21-.772-4.42a5.32 5.32 0 0 0-2.497-2.749c-1.133-.608-2.704-.918-4.702-.929h-.137a.85.85 0 0 0-.542.248l-1.56 1.548-2.913 2.895-1.57 1.56a.9.9 0 0 0-.269.642v13.448q.001.294.175.479c.115.124.274.18.471.18h6.356q3.005.001 4.73-.884a5.07 5.07 0 0 0 2.452-2.686q.731-1.8.789-4.562c.016-.901.027-1.7.027-2.382 0-.681-.011-1.492-.027-2.388zm-8.924-5.096v2.996H7.522zm7.117 8.143c0 .45-.01.98-.027 1.577q-.031 2.34-.63 3.767c-.394.946-1.05 1.639-1.954 2.067s-2.13.642-3.69.642H6.339V9.294h5.08c.482 0 .871-.4.871-.895V3.336q2.654.208 3.854 1.532c.953 1.053 1.45 2.675 1.49 4.877.016.602.027 1.126.027 1.56v1.334z\" fill=\"#121212\"/>\n  </svg>`,\n  [IconName.FORMAT_LIST]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21 5H11m10 7H11m10 7H11M3 8l4 4-4 4\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.SAVE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M17 21v-8H7v8M7 3v5h8\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.SQUARE_CODE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"m10 9-3 3 3 3m4 0 3-3-3-3\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.BRACES]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1m8 0h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.ADD_MAIL]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7m17 9v6m-3-3h6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.MAIL_LOGO]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21.854 4.5H2.146a.64.64 0 0 0-.646.637v13.726a.64.64 0 0 0 .646.637h19.708a.64.64 0 0 0 .646-.637V5.137a.64.64 0 0 0-.646-.637m-1.96 1.274-7.48 5.447-8.16-5.447zM2.793 18.226V6.337l9.275 6.19a.65.65 0 0 0 .745-.016l8.394-6.113v11.828z\" fill=\"#121212\"/>\n  </svg>`,\n  [IconName.BUILDING]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 10h.01M12 14h.01M12 6h.01M16 10h.01M16 14h.01M16 6h.01M8 10h.01M8 14h.01M8 6h.01M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CODE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"m16 18 6-6-6-6M8 6l-6 6 6 6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.USER_PLUS]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M8.5 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M20 8v6M23 11h-6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.FACEBOOK]: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M18.625 0.625H1.375C0.960156 0.625 0.625 0.960156 0.625 1.375V18.625C0.625 19.0398 0.960156 19.375 1.375 19.375H18.625C19.0398 19.375 19.375 19.0398 19.375 18.625V1.375C19.375 0.960156 19.0398 0.625 18.625 0.625ZM16.4594 6.09766H14.9617C13.7875 6.09766 13.5602 6.65547 13.5602 7.47578V9.28281H16.3633L15.9977 12.1117H13.5602V19.375H10.6375V12.1141H8.19297V9.28281H10.6375V7.19687C10.6375 4.77578 12.1164 3.45625 14.2773 3.45625C15.3133 3.45625 16.2016 3.53359 16.4617 3.56875V6.09766H16.4594Z\" fill=\"none\" />\n  </svg>`,\n  [IconName.TWITTER]: `<svg width=\"24\" height=\"20\" viewBox=\"0 0 24 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M23.6425 2.93695C22.8075 3.30695 21.9105 3.55696 20.9675 3.66996C21.9405 3.08775 22.6685 2.17142 23.0155 1.09195C22.1014 1.63494 21.1009 2.01715 20.0575 2.22196C19.3559 1.47282 18.4266 0.976281 17.4138 0.809429C16.4011 0.642577 15.3616 0.814746 14.4568 1.29921C13.5519 1.78367 12.8323 2.55332 12.4097 3.48866C11.9871 4.424 11.8851 5.4727 12.1195 6.47195C10.2672 6.37895 8.45515 5.8975 6.80095 5.05886C5.14674 4.22022 3.68736 3.04312 2.51752 1.60396C2.11752 2.29396 1.88752 3.09396 1.88752 3.94596C1.88708 4.71295 2.07596 5.4682 2.4374 6.14469C2.79885 6.82118 3.32168 7.39799 3.95952 7.82396C3.2198 7.80042 2.4964 7.60054 1.84952 7.24095V7.30095C1.84945 8.3767 2.22156 9.41933 2.90271 10.252C3.58386 11.0846 4.53209 11.6559 5.58652 11.869C4.90031 12.0547 4.18086 12.082 3.48252 11.949C3.78002 12.8746 4.35952 13.684 5.13989 14.2639C5.92026 14.8438 6.86244 15.1651 7.83452 15.183C6.18436 16.4784 4.14641 17.181 2.04852 17.178C1.6769 17.1781 1.3056 17.1564 0.936523 17.113C3.066 18.4821 5.54486 19.2088 8.07652 19.206C16.6465 19.206 21.3315 12.108 21.3315 5.95195C21.3315 5.75196 21.3265 5.54995 21.3175 5.34995C22.2288 4.69093 23.0154 3.87485 23.6405 2.93995L23.6425 2.93695Z\" fill=\"#33355B\"/>\n  </svg>`,\n  [IconName.LINKEDIN]: `<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=\"M2.7206e-07 1.838C2.7206e-07 1.35053 0.193646 0.883032 0.538338 0.53834C0.88303 0.193648 1.35053 2.45031e-06 1.838 2.45031e-06H20.16C20.4016 -0.000392101 20.6409 0.0468654 20.8641 0.139069C21.0874 0.231273 21.2903 0.366612 21.4612 0.537339C21.6322 0.708065 21.7677 0.910826 21.8602 1.13401C21.9526 1.3572 22.0001 1.59643 22 1.838V20.16C22.0003 20.4016 21.9529 20.6409 21.8606 20.8642C21.7683 21.0875 21.6328 21.2904 21.462 21.4613C21.2912 21.6322 21.0884 21.7678 20.8651 21.8602C20.6419 21.9526 20.4026 22.0001 20.161 22H1.838C1.59655 22 1.35746 21.9524 1.1344 21.86C0.911335 21.7676 0.708671 21.6321 0.537984 21.4613C0.367297 21.2905 0.231932 21.0878 0.139623 20.8647C0.0473133 20.6416 -0.000131096 20.4025 2.7206e-07 20.161V1.838ZM8.708 8.388H11.687V9.884C12.117 9.024 13.217 8.25 14.87 8.25C18.039 8.25 18.79 9.963 18.79 13.106V18.928H15.583V13.822C15.583 12.032 15.153 11.022 14.061 11.022C12.546 11.022 11.916 12.111 11.916 13.822V18.928H8.708V8.388ZM3.208 18.791H6.416V8.25H3.208V18.79V18.791ZM6.875 4.812C6.88105 5.08668 6.83217 5.35979 6.73124 5.61532C6.63031 5.87084 6.47935 6.10364 6.28723 6.30003C6.09511 6.49643 5.8657 6.65248 5.61246 6.75901C5.35921 6.86554 5.08724 6.92042 4.8125 6.92042C4.53776 6.92042 4.26579 6.86554 4.01255 6.75901C3.7593 6.65248 3.52989 6.49643 3.33777 6.30003C3.14565 6.10364 2.99469 5.87084 2.89376 5.61532C2.79283 5.35979 2.74395 5.08668 2.75 4.812C2.76187 4.27286 2.98439 3.75979 3.36989 3.38269C3.75539 3.00558 4.27322 2.79442 4.8125 2.79442C5.35178 2.79442 5.86961 3.00558 6.25512 3.38269C6.64062 3.75979 6.86313 4.27286 6.875 4.812Z\" fill=\"none\" />\n  </svg>`,\n  [IconName.SHARE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M8.58984 13.51L15.4198 17.49\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M15.4098 6.51001L8.58984 10.49\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.COPY]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.GOOGLE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\">\n  <path d=\"M23.7309 12.1644C23.7309 18.7373 19.2297 23.415 12.5825 23.415C6.20934 23.415 1.0625 18.2682 1.0625 11.895C1.0625 5.52184 6.20934 0.375 12.5825 0.375C15.6855 0.375 18.296 1.51306 20.3074 3.38971L17.1719 6.40442C13.0702 2.44674 5.44289 5.41965 5.44289 11.895C5.44289 15.9131 8.65269 19.1693 12.5825 19.1693C17.1441 19.1693 18.8535 15.8991 19.1229 14.2036H12.5825V10.2413H23.5497C23.6566 10.8313 23.7309 11.398 23.7309 12.1644Z\" fill=\"#585A9D\"/>\n  </svg>`,\n  [IconName.BELL]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M13.7295 21C13.5537 21.3031 13.3014 21.5547 12.9978 21.7295C12.6941 21.9044 12.3499 21.9965 11.9995 21.9965C11.6492 21.9965 11.3049 21.9044 11.0013 21.7295C10.6977 21.5547 10.4453 21.3031 10.2695 21\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.GEAR]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g clip-path=\"url(#clip0_7723_21679)\">\n  <path d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15V15Z\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  <defs>\n  <clipPath id=\"clip0_7723_21679\">\n  <rect width=\"24\" height=\"24\" fill=\"white\"/>\n  </clipPath>\n  </defs>\n  </svg>`,\n  [IconName.LOGOUT]: `<svg width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M9.69922 21H5.69922C5.16879 21 4.66008 20.7893 4.28501 20.4142C3.90993 20.0391 3.69922 19.5304 3.69922 19V5C3.69922 4.46957 3.90993 3.96086 4.28501 3.58579C4.66008 3.21071 5.16879 3 5.69922 3H9.69922\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16.6992 17L21.6992 12L16.6992 7\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M21.6992 12H9.69922\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>`,\n  [IconName.CIRCLE_EXCLAMATION]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 8V12\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 16H12.01\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CAMERA]: `<svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M23 19.5312C23 20.0617 22.7893 20.5704 22.4142 20.9455C22.0391 21.3205 21.5304 21.5312 21 21.5312H3C2.46957 21.5312 1.96086 21.3205 1.58579 20.9455C1.21071 20.5704 1 20.0617 1 19.5312V8.53125C1 8.00082 1.21071 7.49211 1.58579 7.11704C1.96086 6.74196 2.46957 6.53125 3 6.53125H7L9 3.53125H15L17 6.53125H21C21.5304 6.53125 22.0391 6.74196 22.4142 7.11704C22.7893 7.49211 23 8.00082 23 8.53125V19.5312Z\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 17.5312C14.2091 17.5312 16 15.7404 16 13.5312C16 11.3221 14.2091 9.53125 12 9.53125C9.79086 9.53125 8 11.3221 8 13.5312C8 15.7404 9.79086 17.5312 12 17.5312Z\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.PENCIL]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M17 3.00006C17.2626 2.73741 17.5744 2.52907 17.9176 2.38693C18.2608 2.24479 18.6286 2.17163 19 2.17163C19.3714 2.17163 19.7392 2.24479 20.0824 2.38693C20.4256 2.52907 20.7374 2.73741 21 3.00006C21.2626 3.2627 21.471 3.57451 21.6131 3.91767C21.7553 4.26083 21.8284 4.62862 21.8284 5.00006C21.8284 5.37149 21.7553 5.73929 21.6131 6.08245C21.471 6.42561 21.2626 6.73741 21 7.00006L7.5 20.5001L2 22.0001L3.5 16.5001L17 3.00006Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.X]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M18 6L6 18\" stroke=\"#585A9D\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M6 6L18 18\" stroke=\"#585A9D\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.PLUS]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 5V19\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M5 12H19\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.INVOICE]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M8 8H16M8 12H16M8 16H16M4 2V22L6 21L8 22L10 21L12 22L14 21L16 22L18 21L20 22V2L18 3L16 2L14 3L12 2L10 3L8 2L6 3L4 2Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.DELETE]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M3 6H5H21\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M10 11V17\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M14 11V17\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.TRIANGLE_ARROW_DOWN]: `<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M8 10L4 6H12L8 10Z\" fill=\"#121212\"/>\n  </svg>`,\n  [IconName.USERS]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M23 20.9999V18.9999C22.9993 18.1136 22.7044 17.2527 22.1614 16.5522C21.6184 15.8517 20.8581 15.3515 20 15.1299\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16 3.12988C16.8604 3.35018 17.623 3.85058 18.1676 4.55219C18.7122 5.2538 19.0078 6.11671 19.0078 7.00488C19.0078 7.89305 18.7122 8.75596 18.1676 9.45757C17.623 10.1592 16.8604 10.6596 16 10.8799\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CLOCK]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 6V12L16 14\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CHECK_CLOCK]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M21.8 10C20.8734 5.43552 16.8379 2 12 2C6.47715 2 2 6.47715 2 12C2 16.8379 5.43552 20.8734 10 21.8\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 6V12\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17.5 23C20.5376 23 23 20.5376 23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5C12 20.5376 14.4624 23 17.5 23ZM19.3637 14.8402C19.7191 14.4174 20.3499 14.3628 20.7727 14.7181C21.1954 15.0734 21.2501 15.7042 20.8948 16.127L17.0344 20.7202C16.6805 21.1414 16.0529 21.1975 15.6298 20.8459L13.5808 19.1433C13.1561 18.7903 13.0979 18.1598 13.4508 17.735C13.8038 17.3103 14.4343 17.2521 14.8591 17.6051L16.1432 18.6722L19.3637 14.8402Z\" fill=\"#121212\"/>\n  </svg>`,\n  [IconName.GLOBE]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M2 12H22\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CALENDAR]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16 2V6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M8 2V6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M3 10H21\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.STATS]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 20V10\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M18 20V4\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M6 20V16\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.HOLIDAYS]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M8 22H3C1.89543 22 1 21.1046 1 20V6C1 4.89543 1.89543 4 3 4H17C18.1046 4 19 4.89543 19 6V11\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M14 2V6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M6 2V6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M1 10H19\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12.2 15H21.8C22.46 15 23 15.45 23 16V22C23 22.55 22.46 23 21.8 23H12.2C11.54 23 11 22.55 11 22V16C11 15.45 11.54 15 12.2 15Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M14 15V23\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M19 14L15 14\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M20 15V23\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.TRENDING_UP]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M23 6L13.5 15.5L8.5 10.5L1 18\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M17 6H23V12\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.ARCHIVE]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M21 8V21H3V8\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M23 3H1V8H23V3Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M10 12H14\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.ACCESS_TOKEN]: `<svg width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M16.2054 7.5L19.7054 4M21.7054 2L19.7054 4L21.7054 2ZM12.0954 11.61C12.6117 12.1195 13.0222 12.726 13.3031 13.3948C13.5841 14.0635 13.7299 14.7813 13.7324 15.5066C13.7348 16.232 13.5937 16.9507 13.3173 17.6213C13.0408 18.2919 12.6344 18.9012 12.1215 19.4141C11.6086 19.9271 10.9993 20.3334 10.3287 20.6099C9.65804 20.8864 8.93935 21.0275 8.21398 21.025C7.48862 21.0226 6.7709 20.8767 6.10214 20.5958C5.43339 20.3148 4.82682 19.9043 4.31735 19.388C3.31548 18.3507 2.76111 16.9614 2.77365 15.5193C2.78618 14.0772 3.36461 12.6977 4.38435 11.678C5.40409 10.6583 6.78356 10.0798 8.22565 10.0673C9.66773 10.0548 11.057 10.6091 12.0944 11.611L12.0954 11.61ZM12.0954 11.61L16.2054 7.5L12.0954 11.61ZM16.2054 7.5L19.2054 10.5L22.7054 7L19.7054 4L16.2054 7.5Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.RESIZE]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M14 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V14M3 3V9M3 3H9M3 3L15 15\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CHAT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.MESSAGE_CIRCLE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.BOOK]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.BOOK_PLUS]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 7v6m-8 6.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5A2.5 2.5 0 0 1 4 19.5m0 0A2.5 2.5 0 0 1 6.5 17H20M9 10h6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.BOOKS]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M5 7a2 2 0 0 0-2 2v11\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M5.803 18H5a2 2 0 1 0 0 4h9.5a.5.5 0 0 0 .5-.5V21m-6-6V4a2 2 0 0 1 2-2h9.5a.5.5 0 0 1 .5.5v14a.5.5 0 0 1-.5.5H11a2 2 0 0 1-2-2m0 0a2 2 0 0 1 2-2h10\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.BOOK_SEARCH]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M11 22H5.5a2.5 2.5 0 0 1 0-5h4.501M21 22l-1.879-1.878\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M3 19.5v-15A2.5 2.5 0 0 1 5.5 2H18a1 1 0 0 1 1 1v8M17 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.MORE_HORIZONTAL]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2M19 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2M5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.BOT]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 8V4H8M18 8H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M2 14h2m16 0h2m-7-1v2m-6-2v2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.SCROLL_DOWN]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 5v14M19 12l-7 7-7-7\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.PLAY]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path opacity=\"0.85\" d=\"M12 0C18.6273 1.23698e-05 23.9999 5.37258 24 12C24 18.6275 18.6274 24 12 24C5.3726 24 0 18.6275 0 12C8.9678e-05 5.37257 5.37265 0 12 0ZM10.002 15.4863L16.043 11.998L10.002 8.51074V15.4863Z\" fill=\"#121212\"/>\n  </svg>`,\n  [IconName.EXTERNAL_LINK]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M15 3H21M21 3V9M21 3L10 14M18 13V19.0001C18 19.5305 17.7892 20.0391 17.4142 20.4142C17.0391 20.7892 16.5305 21 16.0001 21H4.99999C4.46956 21 3.96086 20.7892 3.58578 20.4142C3.21072 20.0391 3 19.5305 3 19.0001V8C3 7.46957 3.21072 6.96086 3.58578 6.58578C3.96086 6.21072 4.46956 6 4.99999 6H11\" stroke=\"#121212\" stroke-width=\"1.33\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.TRIANGLE_RIGHT]: `<svg width=\"11\" height=\"13\" viewBox=\"0 0 11 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M10.5 5.32929C11.1667 5.71419 11.1667 6.67644 10.5 7.06134L1.5 12.2575C0.833332 12.6424 -6.10471e-07 12.1613 -5.76822e-07 11.3915L-1.2256e-07 0.999159C-8.8911e-08 0.229359 0.833333 -0.251766 1.5 0.133134L10.5 5.32929Z\" fill=\"url(#paint0_linear_19984_58714)\"/>\n    <defs>\n    <linearGradient id=\"paint0_linear_19984_58714\" x1=\"4\" y1=\"-1.80469\" x2=\"4\" y2=\"14.1953\" gradientUnits=\"userSpaceOnUse\">\n    <stop stop-color=\"#585A9D\"/>\n    <stop offset=\"1\" stop-color=\"#3B3969\"/>\n    </linearGradient>\n    </defs>\n    </svg>`,\n  [IconName.FILE_PLUS]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M14 2V8H20\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M12 18V12\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M9 15H15\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>`,\n  [IconName.FILE_TEXT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M14 2V8H20\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M16 13H8\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M16 17H8\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M10 9H9H8\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>`,\n  [IconName.HIGHLIGHT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M12 20H21\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M16.5 3.50023C16.8978 3.1024 17.4374 2.87891 18 2.87891C18.2786 2.87891 18.5544 2.93378 18.8118 3.04038C19.0692 3.14699 19.303 3.30324 19.5 3.50023C19.697 3.69721 19.8532 3.93106 19.9598 4.18843C20.0665 4.4458 20.1213 4.72165 20.1213 5.00023C20.1213 5.2788 20.0665 5.55465 19.9598 5.81202C19.8532 6.06939 19.697 6.30324 19.5 6.50023L7 19.0002L3 20.0002L4 16.0002L16.5 3.50023Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>`,\n  [IconName.MCP_LOGO]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"m21.835 11.813-.083.081-8.706 8.537a.274.274 0 0 0-.004.388l.004.005 1.788 1.755a.825.825 0 0 1 .017 1.164l-.015.015a.86.86 0 0 1-1.205 0l-1.788-1.752a1.92 1.92 0 0 1 0-2.754l8.708-8.538a2.47 2.47 0 0 0 .046-3.492l-.046-.048-.051-.048a2.587 2.587 0 0 0-3.608-.003l-7.171 7.035h-.003l-.098.097a.863.863 0 0 1-1.204 0 .825.825 0 0 1-.015-1.164l.015-.015 7.273-7.135a2.47 2.47 0 0 0 .04-3.494l-.043-.045a2.587 2.587 0 0 0-3.61 0l-9.624 9.443a.86.86 0 0 1-1.203 0 .825.825 0 0 1-.017-1.164l.017-.015 9.625-9.444a4.313 4.313 0 0 1 6.015 0 4.12 4.12 0 0 1 1.205 3.54 4.3 4.3 0 0 1 3.609 1.18l.05.05a4.115 4.115 0 0 1 .08 5.82m-2.536-2.33a.825.825 0 0 0 .015-1.164l-.015-.015a.86.86 0 0 0-1.205 0l-7.117 6.983a2.587 2.587 0 0 1-3.61 0 2.47 2.47 0 0 1-.046-3.495l.047-.047 7.12-6.982a.825.825 0 0 0 .017-1.164l-.017-.015a.86.86 0 0 0-1.204 0l-7.12 6.98a4.114 4.114 0 0 0 0 5.9 4.314 4.314 0 0 0 6.016 0z\" fill=\"#121212\"/>\n  </svg>`,\n  [IconName.ENDPOINTS]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M17 20a3 3 0 1 0 0-6 3 3 0 0 0 0 6M7 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6M21 7a3 3 0 1 0-6 0 3 3 0 0 0 6 0M10.5 10.5l4 4\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <rect width=\"8\" height=\"8\" x=\"3\" y=\"3\" rx=\"2\" stroke=\"#121212\" stroke-width=\"2\"/>\n  <path d=\"M7 12v3M12 7h3\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n  </svg>`,\n  [IconName.PLAY_OUTLINE]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M5 3L19 12L5 21V3Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.REFRESH]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M23 4V10H17\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M1 20V14H7\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M3.506 8.998C4.013 7.564 4.875 6.283 6.012 5.273C7.148 4.263 8.522 3.557 10.004 3.222C11.487 2.886 13.031 2.932 14.491 3.354C15.952 3.777 17.281 4.562 18.356 5.638L23 10M1 14L5.636 18.358C6.711 19.433 8.04 20.218 9.501 20.641C10.961 21.063 12.505 21.109 13.988 20.773C15.471 20.438 16.844 19.732 17.981 18.722C19.117 17.712 19.979 16.431 20.486 14.998\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.SHIELD]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "iconTemplate",
+          "declaration": {
+            "name": "iconTemplate",
+            "module": "src/tuix-icon/TuixIcon.icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "iconContentMap",
+          "declaration": {
+            "name": "iconContentMap",
+            "module": "src/tuix-icon/TuixIcon.icons.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-icon/TuixIcon.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "TuixBaseButton",
+          "name": "TuixIcon",
           "members": [
             {
               "kind": "field",
-              "name": "variant",
-              "attribute": "variant",
-              "reflects": true
+              "name": "name",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "color",
               "type": {
-                "text": "boolean"
+                "text": "string | TextVariant | undefined"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
+              "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "attribute": "size"
             },
             {
               "kind": "field",
@@ -1295,66 +1235,39 @@
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "dark",
-              "reflects": true
+              "attribute": "dark"
             },
             {
               "kind": "field",
-              "name": "iconColor",
+              "name": "fill",
               "type": {
-                "text": "string"
+                "text": "string | TextVariant | undefined"
               },
-              "privacy": "protected",
-              "default": "''"
-            },
-            {
-              "kind": "method",
-              "name": "_getTextColor",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "_updateIconColor",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_handleClick",
-              "privacy": "protected"
+              "attribute": "fill"
             },
             {
               "kind": "method",
-              "name": "_iconTemplate",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              },
+              "name": "_getSelectedColor",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "iconName",
-                  "type": {
-                    "text": "IconName"
-                  }
-                },
-                {
-                  "name": "iconSize",
+                  "name": "color",
+                  "optional": true,
                   "type": {
-                    "text": "IconSizeVariant"
+                    "text": "string | TextVariant"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_buttonContent",
-              "privacy": "protected",
+              "name": "_getSelectedFill",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_getIconTemplate",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "TemplateResult"
@@ -1362,26 +1275,21 @@
               }
             }
           ],
-          "events": [
-            {
-              "name": "customClick",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
           "attributes": [
             {
-              "name": "variant",
-              "fieldName": "variant"
+              "name": "name",
+              "fieldName": "name"
             },
             {
-              "name": "disabled",
+              "name": "color",
               "type": {
-                "text": "boolean"
+                "text": "string | TextVariant | undefined"
               },
-              "default": "false",
-              "fieldName": "disabled"
+              "fieldName": "color"
+            },
+            {
+              "name": "size",
+              "fieldName": "size"
             },
             {
               "name": "dark",
@@ -1390,107 +1298,55 @@
               },
               "default": "false",
               "fieldName": "dark"
+            },
+            {
+              "name": "fill",
+              "type": {
+                "text": "string | TextVariant | undefined"
+              },
+              "fieldName": "fill"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
-          },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "TuixBaseButton",
-          "declaration": {
-            "name": "TuixBaseButton",
-            "module": "src/tuix-button/TuixBaseButton.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-button/TuixButton.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "hostButtonStyles",
-          "default": "css`\n  :host {\n    --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-secondary-color: ${unsafeCSS(Palette.WHITE)};\n    --t-button-accent-color: ${unsafeCSS(Palette.SECONDARY)};\n    --t-button-text-color: ${unsafeCSS(Palette.WHITE)};\n    --t-button-text-secondary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-button-hover-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_200)};\n  }\n  :host([dark]) {\n    --t-button-primary-color: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-button-text-color: ${unsafeCSS(DarkPalette.WHITE)};\n    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_950)};\n    --t-button-hover-primary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n    --t-button-secondary-color: ${unsafeCSS(Palette.BLACK)};\n    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_950)};\n    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n  }\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "buttonSizeStyles",
-          "default": "css`\n  ${unsafeCSS(`\n  ${slottedClassName(TextSize.Button)} {\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.25rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    ${slottedClassName(TextSize.Button)} {\n      font-size: 0.938rem;\n      font-weight: 400;\n      line-height: 1.125rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    ${slottedClassName(TextSize.Button)} {\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 1rem;\n    }\n  }\n`)}\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "buttonColorStyles",
-          "default": "css`\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {\n    background-color: var(--t-button-primary-color);\n    outline: none;\n    color: var(--t-button-text-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {\n    background-color: var(--t-button-hover-primary-color);\n    cursor: pointer;\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {\n    background-color: var(--t-button-hover-primary-color);\n    outline: 2px solid var(--t-button-accent-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {\n    background-color: var(--t-button-active-primary-color);\n    outline: none;\n  }\n\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {\n    background-color: var(--t-button-secondary-color);\n    outline: 1px solid var(--t-button-hover-primary-color);\n    color: var(--t-button-text-secondary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {\n    background-color: var(--t-button-hover-secondary-color);\n    outline: 1px solid var(--t-button-primary-color);\n    color: var(--t-button-primary-color);\n    cursor: pointer;\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {\n    background-color: var(--t-button-hover-secondary-color);\n    outline: 2px solid var(--t-button-accent-color);\n    color: var(--t-button-primary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {\n    background-color: var(--t-button-active-secondary-color);\n    outline: 1px solid var(--t-button-primary-color);\n    color: var(--t-button-primary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {\n    outline: 1px solid var(--t-button-text-muted-color);\n  }\n\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {\n    background-color: var(--t-button-disabled-bg-color);\n    color: var(--t-button-text-muted-color);\n    cursor: not-allowed;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "hostButtonStyles",
-          "declaration": {
-            "name": "hostButtonStyles",
-            "module": "src/tuix-button/TuixButton.styles.ts"
-          }
-        },
+          },
+          "tagName": "tuix-icon",
+          "customElement": true
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "buttonSizeStyles",
+          "name": "TuixIcon",
           "declaration": {
-            "name": "buttonSizeStyles",
-            "module": "src/tuix-button/TuixButton.styles.ts"
+            "name": "TuixIcon",
+            "module": "src/tuix-icon/TuixIcon.ts"
           }
         },
         {
-          "kind": "js",
-          "name": "buttonColorStyles",
+          "kind": "custom-element-definition",
+          "name": "tuix-icon",
           "declaration": {
-            "name": "buttonColorStyles",
-            "module": "src/tuix-button/TuixButton.styles.ts"
+            "name": "TuixIcon",
+            "module": "src/tuix-icon/TuixIcon.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-button/TuixButton.ts",
+      "path": "src/tuix-icon-button/TuixIconButton.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "TuixButton",
+          "name": "TuixIconButton",
           "members": [
             {
               "kind": "field",
-              "name": "full",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "full",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "iconRight",
-              "type": {
-                "text": "IconName | undefined"
-              },
-              "attribute": "iconRight"
-            },
-            {
-              "kind": "field",
-              "name": "iconLeft",
-              "type": {
-                "text": "IconName | undefined"
-              },
-              "attribute": "iconLeft"
+              "name": "icon",
+              "attribute": "icon"
             },
             {
               "kind": "method",
@@ -1620,26 +1476,8 @@
           ],
           "attributes": [
             {
-              "name": "full",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "full"
-            },
-            {
-              "name": "iconRight",
-              "type": {
-                "text": "IconName | undefined"
-              },
-              "fieldName": "iconRight"
-            },
-            {
-              "name": "iconLeft",
-              "type": {
-                "text": "IconName | undefined"
-              },
-              "fieldName": "iconLeft"
+              "name": "icon",
+              "fieldName": "icon"
             },
             {
               "name": "variant",
@@ -1678,7 +1516,7 @@
             "name": "TuixBaseButton",
             "module": "/src/tuix-button/TuixBaseButton"
           },
-          "tagName": "tuix-button",
+          "tagName": "tuix-icon-button",
           "customElement": true,
           "events": [
             {
@@ -1697,371 +1535,538 @@
       "exports": [
         {
           "kind": "js",
-          "name": "TuixButton",
+          "name": "TuixIconButton",
           "declaration": {
-            "name": "TuixButton",
-            "module": "src/tuix-button/TuixButton.ts"
+            "name": "TuixIconButton",
+            "module": "src/tuix-icon-button/TuixIconButton.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "tuix-button",
+          "name": "tuix-icon-button",
           "declaration": {
-            "name": "TuixButton",
-            "module": "src/tuix-button/TuixButton.ts"
+            "name": "TuixIconButton",
+            "module": "src/tuix-icon-button/TuixIconButton.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-icon/TuixIcon.icons.ts",
+      "path": "src/tuix-dropdown/TuixDropdown.styles.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "iconTemplate",
-          "return": {
-            "type": {
-              "text": "ReturnType<typeof html>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "name",
-              "optional": true,
-              "type": {
-                "text": "IconName"
-              }
-            },
-            {
-              "name": "color",
-              "default": "Palette.BLACK",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "fill",
-              "optional": true,
-              "type": {
-                "text": "string"
-              }
-            }
-          ]
+          "kind": "variable",
+          "name": "dropdownHostStyles",
+          "default": "css`\n  ${hostStyles}\n  :host {\n    --t-field-color-option: ${unsafeCSS(Palette.WHITE)};\n    --t-field-color-main: ${unsafeCSS(Palette.MAIN)};\n  }\n\n  :host .t-input-dropdown {\n    --t-field-font-weight: 300;\n    --t-field-font-size: 1rem;\n    --t-field-padding-x: 1rem;\n    --t-field-title-left-position: 1rem;\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    :host .t-input-dropdown {\n      --t-field-font-size: 0.938rem;\n      --t-field-line-height: 1.125rem;\n    }\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    :host .t-input-dropdown {\n      --t-field-font-size: 0.813rem;\n      --t-field-line-height: 1rem;\n    }\n  }\n\n  :host([dark]) {\n    --t-field-color-option: ${unsafeCSS(DarkPalette.ELEVATION_2)};\n  }\n`"
         },
         {
           "kind": "variable",
-          "name": "iconContentMap",
-          "type": {
-            "text": "IconContentMapType"
-          },
-          "default": "{\n  [IconName.ARROW_DOWN]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 5V19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M19 12L12 19L5 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_LEFT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M19 12H5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 19L5 12L12 5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_UP]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 19V5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M5 12L12 5L19 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_RIGHT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M5 12H19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 5L19 12L12 19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.SEARCH]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M20.9999 20.9999L16.6499 16.6499\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.EYE_ON]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.EYE_OFF]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <g clip-path=\"url(#clip0_2207_3897)\">\n  <path d=\"M9.9 4.24002C10.5883 4.0789 11.2931 3.99836 12 4.00003C19 4.00003 23 12 23 12C22.393 13.1356 21.6691 14.2048 20.84 15.19M14.12 14.12C13.8454 14.4148 13.5141 14.6512 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1752 15.0074 10.8016 14.8565C10.4281 14.7056 10.0887 14.4811 9.80385 14.1962C9.51897 13.9113 9.29439 13.572 9.14351 13.1984C8.99262 12.8249 8.91853 12.4247 8.92563 12.0219C8.93274 11.6191 9.02091 11.2219 9.18488 10.8539C9.34884 10.4859 9.58525 10.1547 9.88 9.88003M17.94 17.94C16.2306 19.243 14.1491 19.9649 12 20C5 20 1 12 1 12C2.24389 9.68192 3.96914 7.65663 6.06 6.06003L17.94 17.94Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M1 1L23 23\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  <defs>\n  <clipPath id=\"clip0_2207_3897\">\n  <rect width=\"24\" height=\"24\" fill=\"white\"/>\n  </clipPath>\n  </defs>\n  </svg>\n  `,\n  [IconName.EYE_CLOSE_LINE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M9.34178 18.7821L7.41078 18.2641L8.19778 15.3251C7.01975 14.8906 5.9249 14.2575 4.96078 13.4531L2.80778 15.6071L1.39278 14.1921L3.54678 12.0391C2.33086 10.5829 1.51387 8.83587 1.17578 6.96911L3.14378 6.61011C3.90278 10.8121 7.57878 14.0001 11.9998 14.0001C16.4198 14.0001 20.0968 10.8121 20.8558 6.61011L22.8238 6.96811C22.4861 8.83512 21.6695 10.5825 20.4538 12.0391L22.6068 14.1921L21.1918 15.6071L19.0388 13.4531C18.0747 14.2575 16.9798 14.8906 15.8018 15.3251L16.5888 18.2651L14.6578 18.7821L13.8698 15.8421C12.6321 16.0542 11.3674 16.0542 10.1298 15.8421L9.34178 18.7821Z\" fill=\"black\"/>\n  </svg>\n  `,\n  [IconName.TRIANGLE_EXCLAMATION]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M10.2898 3.85996L1.81978 18C1.64514 18.3024 1.55274 18.6453 1.55177 18.9945C1.55079 19.3437 1.64127 19.6871 1.8142 19.9905C1.98714 20.2939 2.2365 20.5467 2.53748 20.7238C2.83847 20.9009 3.18058 20.9961 3.52978 21H20.4698C20.819 20.9961 21.1611 20.9009 21.4621 20.7238C21.7631 20.5467 22.0124 20.2939 22.1854 19.9905C22.3583 19.6871 22.4488 19.3437 22.4478 18.9945C22.4468 18.6453 22.3544 18.3024 22.1798 18L13.7098 3.85996C13.5315 3.56607 13.2805 3.32308 12.981 3.15444C12.6814 2.98581 12.3435 2.89722 11.9998 2.89722C11.656 2.89722 11.3181 2.98581 11.0186 3.15444C10.7191 3.32308 10.468 3.56607 10.2898 3.85996V3.85996Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 9V13\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 17H12.01\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CIRCLE_X]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M15 9L9 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M9 9L15 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.LOADER]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 2V6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 18V22\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M4.93018 4.92993L7.76018 7.75993\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16.2402 16.24L19.0702 19.07\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M2 12H6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M18 12H22\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M4.93018 19.07L7.76018 16.24\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16.2402 7.75993L19.0702 4.92993\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.LOADER_CIRCLE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CIRCLE_CHECK]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M22 11.0801V12.0001C21.9988 14.1565 21.3005 16.2548 20.0093 17.9819C18.7182 19.7091 16.9033 20.9726 14.8354 21.584C12.7674 22.1954 10.5573 22.122 8.53447 21.3747C6.51168 20.6274 4.78465 19.2462 3.61096 17.4372C2.43727 15.6281 1.87979 13.4882 2.02168 11.3364C2.16356 9.18467 2.99721 7.13643 4.39828 5.49718C5.79935 3.85793 7.69279 2.71549 9.79619 2.24025C11.8996 1.76502 14.1003 1.98245 16.07 2.86011\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M22 4L12 14.01L9 11.01\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHEVRON_DOWN]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M6 9L12 15L18 9\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHEVRON_UP]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M18 15L12 9L6 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHECK]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M20 6L9 17L4 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.NAV_HAMBURGUER]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"24/ outlined / action / main / menu\">\n  <path id=\"Vector\" d=\"M3 12H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path id=\"Vector_2\" d=\"M3 6H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path id=\"Vector_3\" d=\"M3 18H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  </svg>`,\n  [IconName.SUN]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <g clip-path=\"url(#clip0_2207_4056)\">\n    <path d=\"M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M12 1V3\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M12 21V23\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M4.22021 4.21997L5.64021 5.63997\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M18.3599 18.3601L19.7799 19.7801\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M1 12H3\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M21 12H23\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M4.22021 19.7801L5.64021 18.3601\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M18.3599 5.63997L19.7799 4.21997\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_2207_4056\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n  </svg>`,\n  [IconName.MOON]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M20.9999 12.79C20.8426 14.4922 20.2038 16.1144 19.1581 17.4668C18.1125 18.8192 16.7034 19.8458 15.0956 20.4265C13.4878 21.0073 11.7479 21.1181 10.0794 20.7461C8.41092 20.3741 6.8829 19.5345 5.67413 18.3258C4.46536 17.117 3.62584 15.589 3.25381 13.9205C2.88178 12.252 2.99262 10.5121 3.57336 8.9043C4.15411 7.29651 5.18073 5.88737 6.53311 4.84175C7.8855 3.79614 9.5077 3.15731 11.2099 3C10.2133 4.34827 9.73375 6.00945 9.85843 7.68141C9.98312 9.35338 10.7038 10.9251 11.8893 12.1106C13.0748 13.2961 14.6465 14.0168 16.3185 14.1415C17.9905 14.2662 19.6516 13.7866 20.9999 12.79Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CHEVRON_LEFT]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M15 18L9 12L15 6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CHEVRON_RIGHT]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M9 18L15 12L9 6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.BOOKMARK]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M19 21L12 16L5 21V5C5 4.46957 5.21071 3.96086 5.58579 3.58579C5.96086 3.21071 6.46957 3 7 3H17C17.5304 3 18.0391 3.21071 18.4142 3.58579C18.7893 3.96086 19 4.46957 19 5V21Z\" stroke=\"#A8A9D1\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.UPLOAD]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M17 8L12 3L7 8\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 3V15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.DOWNLOAD]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M7 10L12 15L17 10\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 15V3\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.MAP_PIN]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.PHONE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21.9999 16.9201V19.9201C22.0011 20.1986 21.944 20.4743 21.8324 20.7294C21.7209 20.9846 21.5572 21.2137 21.352 21.402C21.1468 21.5902 20.9045 21.7336 20.6407 21.8228C20.3769 21.912 20.0973 21.9452 19.8199 21.9201C16.7428 21.5857 13.7869 20.5342 11.1899 18.8501C8.77376 17.3148 6.72527 15.2663 5.18993 12.8501C3.49991 10.2413 2.44818 7.27109 2.11993 4.1801C2.09494 3.90356 2.12781 3.62486 2.21643 3.36172C2.30506 3.09859 2.4475 2.85679 2.6347 2.65172C2.82189 2.44665 3.04974 2.28281 3.30372 2.17062C3.55771 2.05843 3.83227 2.00036 4.10993 2.0001H7.10993C7.59524 1.99532 8.06572 2.16718 8.43369 2.48363C8.80166 2.80008 9.04201 3.23954 9.10993 3.7201C9.23656 4.68016 9.47138 5.62282 9.80993 6.5301C9.94448 6.88802 9.9736 7.27701 9.89384 7.65098C9.81408 8.02494 9.6288 8.36821 9.35993 8.6401L8.08993 9.9101C9.51349 12.4136 11.5864 14.4865 14.0899 15.9101L15.3599 14.6401C15.6318 14.3712 15.9751 14.1859 16.3491 14.1062C16.723 14.0264 17.112 14.0556 17.4699 14.1901C18.3772 14.5286 19.3199 14.7635 20.2799 14.8901C20.7657 14.9586 21.2093 15.2033 21.5265 15.5776C21.8436 15.9519 22.0121 16.4297 21.9999 16.9201Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.MAIL]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M22 6L12 13L2 6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.MAILS]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M17 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 1-1.732M22 5.5l-6.419 4.179a2 2 0 0 1-2.162 0L7 5.5\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M20 3H9a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.LAYERS]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 2 2 7l10 5 10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.SEND]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M22 2 11 13M22 2l-7 20-4-9-9-4z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.FILE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M19.462 9.598c-.022-1.74-.28-3.21-.772-4.42a5.32 5.32 0 0 0-2.497-2.749c-1.133-.608-2.704-.918-4.702-.929h-.137a.85.85 0 0 0-.542.248l-1.56 1.548-2.913 2.895-1.57 1.56a.9.9 0 0 0-.269.642v13.448q.001.294.175.479c.115.124.274.18.471.18h6.356q3.005.001 4.73-.884a5.07 5.07 0 0 0 2.452-2.686q.731-1.8.789-4.562c.016-.901.027-1.7.027-2.382 0-.681-.011-1.492-.027-2.388zm-8.924-5.096v2.996H7.522zm7.117 8.143c0 .45-.01.98-.027 1.577q-.031 2.34-.63 3.767c-.394.946-1.05 1.639-1.954 2.067s-2.13.642-3.69.642H6.339V9.294h5.08c.482 0 .871-.4.871-.895V3.336q2.654.208 3.854 1.532c.953 1.053 1.45 2.675 1.49 4.877.016.602.027 1.126.027 1.56v1.334z\" fill=\"#121212\"/>\n  </svg>`,\n  [IconName.FORMAT_LIST]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21 5H11m10 7H11m10 7H11M3 8l4 4-4 4\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.SAVE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M17 21v-8H7v8M7 3v5h8\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.SQUARE_CODE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"m10 9-3 3 3 3m4 0 3-3-3-3\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.BRACES]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1m8 0h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.ADD_MAIL]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7m17 9v6m-3-3h6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.MAIL_LOGO]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21.854 4.5H2.146a.64.64 0 0 0-.646.637v13.726a.64.64 0 0 0 .646.637h19.708a.64.64 0 0 0 .646-.637V5.137a.64.64 0 0 0-.646-.637m-1.96 1.274-7.48 5.447-8.16-5.447zM2.793 18.226V6.337l9.275 6.19a.65.65 0 0 0 .745-.016l8.394-6.113v11.828z\" fill=\"#121212\"/>\n  </svg>`,\n  [IconName.BUILDING]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 10h.01M12 14h.01M12 6h.01M16 10h.01M16 14h.01M16 6h.01M8 10h.01M8 14h.01M8 6h.01M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CODE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"m16 18 6-6-6-6M8 6l-6 6 6 6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.USER_PLUS]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M8.5 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M20 8v6M23 11h-6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.FACEBOOK]: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M18.625 0.625H1.375C0.960156 0.625 0.625 0.960156 0.625 1.375V18.625C0.625 19.0398 0.960156 19.375 1.375 19.375H18.625C19.0398 19.375 19.375 19.0398 19.375 18.625V1.375C19.375 0.960156 19.0398 0.625 18.625 0.625ZM16.4594 6.09766H14.9617C13.7875 6.09766 13.5602 6.65547 13.5602 7.47578V9.28281H16.3633L15.9977 12.1117H13.5602V19.375H10.6375V12.1141H8.19297V9.28281H10.6375V7.19687C10.6375 4.77578 12.1164 3.45625 14.2773 3.45625C15.3133 3.45625 16.2016 3.53359 16.4617 3.56875V6.09766H16.4594Z\" fill=\"none\" />\n  </svg>`,\n  [IconName.TWITTER]: `<svg width=\"24\" height=\"20\" viewBox=\"0 0 24 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M23.6425 2.93695C22.8075 3.30695 21.9105 3.55696 20.9675 3.66996C21.9405 3.08775 22.6685 2.17142 23.0155 1.09195C22.1014 1.63494 21.1009 2.01715 20.0575 2.22196C19.3559 1.47282 18.4266 0.976281 17.4138 0.809429C16.4011 0.642577 15.3616 0.814746 14.4568 1.29921C13.5519 1.78367 12.8323 2.55332 12.4097 3.48866C11.9871 4.424 11.8851 5.4727 12.1195 6.47195C10.2672 6.37895 8.45515 5.8975 6.80095 5.05886C5.14674 4.22022 3.68736 3.04312 2.51752 1.60396C2.11752 2.29396 1.88752 3.09396 1.88752 3.94596C1.88708 4.71295 2.07596 5.4682 2.4374 6.14469C2.79885 6.82118 3.32168 7.39799 3.95952 7.82396C3.2198 7.80042 2.4964 7.60054 1.84952 7.24095V7.30095C1.84945 8.3767 2.22156 9.41933 2.90271 10.252C3.58386 11.0846 4.53209 11.6559 5.58652 11.869C4.90031 12.0547 4.18086 12.082 3.48252 11.949C3.78002 12.8746 4.35952 13.684 5.13989 14.2639C5.92026 14.8438 6.86244 15.1651 7.83452 15.183C6.18436 16.4784 4.14641 17.181 2.04852 17.178C1.6769 17.1781 1.3056 17.1564 0.936523 17.113C3.066 18.4821 5.54486 19.2088 8.07652 19.206C16.6465 19.206 21.3315 12.108 21.3315 5.95195C21.3315 5.75196 21.3265 5.54995 21.3175 5.34995C22.2288 4.69093 23.0154 3.87485 23.6405 2.93995L23.6425 2.93695Z\" fill=\"#33355B\"/>\n  </svg>`,\n  [IconName.LINKEDIN]: `<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=\"M2.7206e-07 1.838C2.7206e-07 1.35053 0.193646 0.883032 0.538338 0.53834C0.88303 0.193648 1.35053 2.45031e-06 1.838 2.45031e-06H20.16C20.4016 -0.000392101 20.6409 0.0468654 20.8641 0.139069C21.0874 0.231273 21.2903 0.366612 21.4612 0.537339C21.6322 0.708065 21.7677 0.910826 21.8602 1.13401C21.9526 1.3572 22.0001 1.59643 22 1.838V20.16C22.0003 20.4016 21.9529 20.6409 21.8606 20.8642C21.7683 21.0875 21.6328 21.2904 21.462 21.4613C21.2912 21.6322 21.0884 21.7678 20.8651 21.8602C20.6419 21.9526 20.4026 22.0001 20.161 22H1.838C1.59655 22 1.35746 21.9524 1.1344 21.86C0.911335 21.7676 0.708671 21.6321 0.537984 21.4613C0.367297 21.2905 0.231932 21.0878 0.139623 20.8647C0.0473133 20.6416 -0.000131096 20.4025 2.7206e-07 20.161V1.838ZM8.708 8.388H11.687V9.884C12.117 9.024 13.217 8.25 14.87 8.25C18.039 8.25 18.79 9.963 18.79 13.106V18.928H15.583V13.822C15.583 12.032 15.153 11.022 14.061 11.022C12.546 11.022 11.916 12.111 11.916 13.822V18.928H8.708V8.388ZM3.208 18.791H6.416V8.25H3.208V18.79V18.791ZM6.875 4.812C6.88105 5.08668 6.83217 5.35979 6.73124 5.61532C6.63031 5.87084 6.47935 6.10364 6.28723 6.30003C6.09511 6.49643 5.8657 6.65248 5.61246 6.75901C5.35921 6.86554 5.08724 6.92042 4.8125 6.92042C4.53776 6.92042 4.26579 6.86554 4.01255 6.75901C3.7593 6.65248 3.52989 6.49643 3.33777 6.30003C3.14565 6.10364 2.99469 5.87084 2.89376 5.61532C2.79283 5.35979 2.74395 5.08668 2.75 4.812C2.76187 4.27286 2.98439 3.75979 3.36989 3.38269C3.75539 3.00558 4.27322 2.79442 4.8125 2.79442C5.35178 2.79442 5.86961 3.00558 6.25512 3.38269C6.64062 3.75979 6.86313 4.27286 6.875 4.812Z\" fill=\"none\" />\n  </svg>`,\n  [IconName.SHARE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M8.58984 13.51L15.4198 17.49\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M15.4098 6.51001L8.58984 10.49\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.COPY]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.GOOGLE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\">\n  <path d=\"M23.7309 12.1644C23.7309 18.7373 19.2297 23.415 12.5825 23.415C6.20934 23.415 1.0625 18.2682 1.0625 11.895C1.0625 5.52184 6.20934 0.375 12.5825 0.375C15.6855 0.375 18.296 1.51306 20.3074 3.38971L17.1719 6.40442C13.0702 2.44674 5.44289 5.41965 5.44289 11.895C5.44289 15.9131 8.65269 19.1693 12.5825 19.1693C17.1441 19.1693 18.8535 15.8991 19.1229 14.2036H12.5825V10.2413H23.5497C23.6566 10.8313 23.7309 11.398 23.7309 12.1644Z\" fill=\"#585A9D\"/>\n  </svg>`,\n  [IconName.BELL]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M13.7295 21C13.5537 21.3031 13.3014 21.5547 12.9978 21.7295C12.6941 21.9044 12.3499 21.9965 11.9995 21.9965C11.6492 21.9965 11.3049 21.9044 11.0013 21.7295C10.6977 21.5547 10.4453 21.3031 10.2695 21\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.GEAR]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g clip-path=\"url(#clip0_7723_21679)\">\n  <path d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15V15Z\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  <defs>\n  <clipPath id=\"clip0_7723_21679\">\n  <rect width=\"24\" height=\"24\" fill=\"white\"/>\n  </clipPath>\n  </defs>\n  </svg>`,\n  [IconName.LOGOUT]: `<svg width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M9.69922 21H5.69922C5.16879 21 4.66008 20.7893 4.28501 20.4142C3.90993 20.0391 3.69922 19.5304 3.69922 19V5C3.69922 4.46957 3.90993 3.96086 4.28501 3.58579C4.66008 3.21071 5.16879 3 5.69922 3H9.69922\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16.6992 17L21.6992 12L16.6992 7\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M21.6992 12H9.69922\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>`,\n  [IconName.CIRCLE_EXCLAMATION]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 8V12\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 16H12.01\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CAMERA]: `<svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M23 19.5312C23 20.0617 22.7893 20.5704 22.4142 20.9455C22.0391 21.3205 21.5304 21.5312 21 21.5312H3C2.46957 21.5312 1.96086 21.3205 1.58579 20.9455C1.21071 20.5704 1 20.0617 1 19.5312V8.53125C1 8.00082 1.21071 7.49211 1.58579 7.11704C1.96086 6.74196 2.46957 6.53125 3 6.53125H7L9 3.53125H15L17 6.53125H21C21.5304 6.53125 22.0391 6.74196 22.4142 7.11704C22.7893 7.49211 23 8.00082 23 8.53125V19.5312Z\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 17.5312C14.2091 17.5312 16 15.7404 16 13.5312C16 11.3221 14.2091 9.53125 12 9.53125C9.79086 9.53125 8 11.3221 8 13.5312C8 15.7404 9.79086 17.5312 12 17.5312Z\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.PENCIL]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M17 3.00006C17.2626 2.73741 17.5744 2.52907 17.9176 2.38693C18.2608 2.24479 18.6286 2.17163 19 2.17163C19.3714 2.17163 19.7392 2.24479 20.0824 2.38693C20.4256 2.52907 20.7374 2.73741 21 3.00006C21.2626 3.2627 21.471 3.57451 21.6131 3.91767C21.7553 4.26083 21.8284 4.62862 21.8284 5.00006C21.8284 5.37149 21.7553 5.73929 21.6131 6.08245C21.471 6.42561 21.2626 6.73741 21 7.00006L7.5 20.5001L2 22.0001L3.5 16.5001L17 3.00006Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.X]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M18 6L6 18\" stroke=\"#585A9D\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M6 6L18 18\" stroke=\"#585A9D\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.PLUS]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 5V19\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M5 12H19\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.INVOICE]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M8 8H16M8 12H16M8 16H16M4 2V22L6 21L8 22L10 21L12 22L14 21L16 22L18 21L20 22V2L18 3L16 2L14 3L12 2L10 3L8 2L6 3L4 2Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.DELETE]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M3 6H5H21\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M10 11V17\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M14 11V17\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.TRIANGLE_ARROW_DOWN]: `<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M8 10L4 6H12L8 10Z\" fill=\"#121212\"/>\n  </svg>`,\n  [IconName.USERS]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M23 20.9999V18.9999C22.9993 18.1136 22.7044 17.2527 22.1614 16.5522C21.6184 15.8517 20.8581 15.3515 20 15.1299\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16 3.12988C16.8604 3.35018 17.623 3.85058 18.1676 4.55219C18.7122 5.2538 19.0078 6.11671 19.0078 7.00488C19.0078 7.89305 18.7122 8.75596 18.1676 9.45757C17.623 10.1592 16.8604 10.6596 16 10.8799\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CLOCK]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 6V12L16 14\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CHECK_CLOCK]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M21.8 10C20.8734 5.43552 16.8379 2 12 2C6.47715 2 2 6.47715 2 12C2 16.8379 5.43552 20.8734 10 21.8\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 6V12\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17.5 23C20.5376 23 23 20.5376 23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5C12 20.5376 14.4624 23 17.5 23ZM19.3637 14.8402C19.7191 14.4174 20.3499 14.3628 20.7727 14.7181C21.1954 15.0734 21.2501 15.7042 20.8948 16.127L17.0344 20.7202C16.6805 21.1414 16.0529 21.1975 15.6298 20.8459L13.5808 19.1433C13.1561 18.7903 13.0979 18.1598 13.4508 17.735C13.8038 17.3103 14.4343 17.2521 14.8591 17.6051L16.1432 18.6722L19.3637 14.8402Z\" fill=\"#121212\"/>\n  </svg>`,\n  [IconName.GLOBE]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M2 12H22\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CALENDAR]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16 2V6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M8 2V6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M3 10H21\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.STATS]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 20V10\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M18 20V4\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M6 20V16\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.HOLIDAYS]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M8 22H3C1.89543 22 1 21.1046 1 20V6C1 4.89543 1.89543 4 3 4H17C18.1046 4 19 4.89543 19 6V11\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M14 2V6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M6 2V6\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M1 10H19\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12.2 15H21.8C22.46 15 23 15.45 23 16V22C23 22.55 22.46 23 21.8 23H12.2C11.54 23 11 22.55 11 22V16C11 15.45 11.54 15 12.2 15Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M14 15V23\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M19 14L15 14\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M20 15V23\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.TRENDING_UP]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M23 6L13.5 15.5L8.5 10.5L1 18\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M17 6H23V12\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.ARCHIVE]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M21 8V21H3V8\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M23 3H1V8H23V3Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M10 12H14\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.ACCESS_TOKEN]: `<svg width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M16.2054 7.5L19.7054 4M21.7054 2L19.7054 4L21.7054 2ZM12.0954 11.61C12.6117 12.1195 13.0222 12.726 13.3031 13.3948C13.5841 14.0635 13.7299 14.7813 13.7324 15.5066C13.7348 16.232 13.5937 16.9507 13.3173 17.6213C13.0408 18.2919 12.6344 18.9012 12.1215 19.4141C11.6086 19.9271 10.9993 20.3334 10.3287 20.6099C9.65804 20.8864 8.93935 21.0275 8.21398 21.025C7.48862 21.0226 6.7709 20.8767 6.10214 20.5958C5.43339 20.3148 4.82682 19.9043 4.31735 19.388C3.31548 18.3507 2.76111 16.9614 2.77365 15.5193C2.78618 14.0772 3.36461 12.6977 4.38435 11.678C5.40409 10.6583 6.78356 10.0798 8.22565 10.0673C9.66773 10.0548 11.057 10.6091 12.0944 11.611L12.0954 11.61ZM12.0954 11.61L16.2054 7.5L12.0954 11.61ZM16.2054 7.5L19.2054 10.5L22.7054 7L19.7054 4L16.2054 7.5Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.RESIZE]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M14 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V14M3 3V9M3 3H9M3 3L15 15\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CHAT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.MESSAGE_CIRCLE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.BOOK]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.MORE_HORIZONTAL]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2M19 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2M5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.BOT]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 8V4H8M18 8H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M2 14h2m16 0h2m-7-1v2m-6-2v2\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.SCROLL_DOWN]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 5v14M19 12l-7 7-7-7\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.PLAY]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path opacity=\"0.85\" d=\"M12 0C18.6273 1.23698e-05 23.9999 5.37258 24 12C24 18.6275 18.6274 24 12 24C5.3726 24 0 18.6275 0 12C8.9678e-05 5.37257 5.37265 0 12 0ZM10.002 15.4863L16.043 11.998L10.002 8.51074V15.4863Z\" fill=\"#121212\"/>\n  </svg>`,\n  [IconName.EXTERNAL_LINK]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M15 3H21M21 3V9M21 3L10 14M18 13V19.0001C18 19.5305 17.7892 20.0391 17.4142 20.4142C17.0391 20.7892 16.5305 21 16.0001 21H4.99999C4.46956 21 3.96086 20.7892 3.58578 20.4142C3.21072 20.0391 3 19.5305 3 19.0001V8C3 7.46957 3.21072 6.96086 3.58578 6.58578C3.96086 6.21072 4.46956 6 4.99999 6H11\" stroke=\"#121212\" stroke-width=\"1.33\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.TRIANGLE_RIGHT]: `<svg width=\"11\" height=\"13\" viewBox=\"0 0 11 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M10.5 5.32929C11.1667 5.71419 11.1667 6.67644 10.5 7.06134L1.5 12.2575C0.833332 12.6424 -6.10471e-07 12.1613 -5.76822e-07 11.3915L-1.2256e-07 0.999159C-8.8911e-08 0.229359 0.833333 -0.251766 1.5 0.133134L10.5 5.32929Z\" fill=\"url(#paint0_linear_19984_58714)\"/>\n    <defs>\n    <linearGradient id=\"paint0_linear_19984_58714\" x1=\"4\" y1=\"-1.80469\" x2=\"4\" y2=\"14.1953\" gradientUnits=\"userSpaceOnUse\">\n    <stop stop-color=\"#585A9D\"/>\n    <stop offset=\"1\" stop-color=\"#3B3969\"/>\n    </linearGradient>\n    </defs>\n    </svg>`,\n  [IconName.FILE_PLUS]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M14 2V8H20\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M12 18V12\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M9 15H15\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>`,\n  [IconName.FILE_TEXT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M14 2V8H20\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M16 13H8\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M16 17H8\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M10 9H9H8\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>`,\n  [IconName.HIGHLIGHT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M12 20H21\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M16.5 3.50023C16.8978 3.1024 17.4374 2.87891 18 2.87891C18.2786 2.87891 18.5544 2.93378 18.8118 3.04038C19.0692 3.14699 19.303 3.30324 19.5 3.50023C19.697 3.69721 19.8532 3.93106 19.9598 4.18843C20.0665 4.4458 20.1213 4.72165 20.1213 5.00023C20.1213 5.2788 20.0665 5.55465 19.9598 5.81202C19.8532 6.06939 19.697 6.30324 19.5 6.50023L7 19.0002L3 20.0002L4 16.0002L16.5 3.50023Z\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>`,\n  [IconName.MCP_LOGO]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"m21.835 11.813-.083.081-8.706 8.537a.274.274 0 0 0-.004.388l.004.005 1.788 1.755a.825.825 0 0 1 .017 1.164l-.015.015a.86.86 0 0 1-1.205 0l-1.788-1.752a1.92 1.92 0 0 1 0-2.754l8.708-8.538a2.47 2.47 0 0 0 .046-3.492l-.046-.048-.051-.048a2.587 2.587 0 0 0-3.608-.003l-7.171 7.035h-.003l-.098.097a.863.863 0 0 1-1.204 0 .825.825 0 0 1-.015-1.164l.015-.015 7.273-7.135a2.47 2.47 0 0 0 .04-3.494l-.043-.045a2.587 2.587 0 0 0-3.61 0l-9.624 9.443a.86.86 0 0 1-1.203 0 .825.825 0 0 1-.017-1.164l.017-.015 9.625-9.444a4.313 4.313 0 0 1 6.015 0 4.12 4.12 0 0 1 1.205 3.54 4.3 4.3 0 0 1 3.609 1.18l.05.05a4.115 4.115 0 0 1 .08 5.82m-2.536-2.33a.825.825 0 0 0 .015-1.164l-.015-.015a.86.86 0 0 0-1.205 0l-7.117 6.983a2.587 2.587 0 0 1-3.61 0 2.47 2.47 0 0 1-.046-3.495l.047-.047 7.12-6.982a.825.825 0 0 0 .017-1.164l-.017-.015a.86.86 0 0 0-1.204 0l-7.12 6.98a4.114 4.114 0 0 0 0 5.9 4.314 4.314 0 0 0 6.016 0z\" fill=\"#121212\"/>\n  </svg>`,\n  [IconName.ENDPOINTS]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M17 20a3 3 0 1 0 0-6 3 3 0 0 0 0 6M7 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6M21 7a3 3 0 1 0-6 0 3 3 0 0 0 6 0M10.5 10.5l4 4\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <rect width=\"8\" height=\"8\" x=\"3\" y=\"3\" rx=\"2\" stroke=\"#121212\" stroke-width=\"2\"/>\n  <path d=\"M7 12v3M12 7h3\" stroke=\"#121212\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n  </svg>`,\n}"
+          "name": "dropdownMainContainerStyles",
+          "default": "css`\n  .t-dropdown-full-container {\n    position: relative;\n    font-family: 'Rubik', sans-serif;\n  }\n  .t-dropdown-container .t-input-dropdown {\n    --t-field-input-cursor: pointer;\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "dropdownOptionStyles",
+          "default": "css`\n  .t-options-container {\n    width: 100%;\n    position: absolute;\n    top: calc(100% + 2px);\n    left: 0;\n    border: none;\n    border-radius: 0 0 5px 5px;\n    background-color: var(--t-field-color-option);\n    visibility: collapse;\n    overflow-y: auto;\n    max-height: 250px;\n    color: var(--t-field-color-text);\n    box-shadow: 0px 2px 8px 0px ${unsafeCSS(Palette.SHADOW)};\n    z-index: 9999;\n  }\n  .t-options-container::-webkit-scrollbar {\n    width: 0.75rem;\n  }\n  .t-options-container::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n  .t-options-container::-webkit-scrollbar-thumb {\n    background-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    border-radius: 0.25rem;\n    border: 0.188rem solid transparent;\n    background-clip: content-box;\n  }\n  .t-options-container.show {\n    visibility: visible;\n  }\n  .t-options-container.show.t-with-description {\n    top: calc(100% + 2px - 1.5rem);\n  }\n  @media only screen and (max-height: 500px) {\n    .t-options-container {\n      max-height: 50vh;\n    }\n  }\n  .t-dropdown-option {\n    padding: var(--t-field-padding-y) 1rem;\n    cursor: pointer;\n    font-size: 1rem;\n    line-height: 1.25rem;\n    font-weight: 300;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .t-dropdown-option.t-option-hover {\n    background-color: var(--t-field-color-form);\n  }\n  .t-dropdown-option.t-option-selected {\n    color: var(--t-field-color-main);\n  }\n  .t-dropdown-option.t-option-filtered {\n    display: none;\n  }\n  .t-dropdown-option:focus {\n    outline: none;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-dropdown-option {\n      font-size: 0.938rem;\n      line-height: 1.125rem;\n      --t-field-padding-y: 1.063rem;\n      --t-field-padding-top: 1.5rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-dropdown-option {\n      font-size: 0.813rem;\n      line-height: 1rem;\n      --t-field-padding-y: 1rem;\n      --t-field-padding-top: 1.375rem;\n    }\n  }\n`"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "iconTemplate",
+          "name": "dropdownHostStyles",
           "declaration": {
-            "name": "iconTemplate",
-            "module": "src/tuix-icon/TuixIcon.icons.ts"
+            "name": "dropdownHostStyles",
+            "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
           }
         },
         {
           "kind": "js",
-          "name": "iconContentMap",
+          "name": "dropdownMainContainerStyles",
           "declaration": {
-            "name": "iconContentMap",
-            "module": "src/tuix-icon/TuixIcon.icons.ts"
+            "name": "dropdownMainContainerStyles",
+            "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "dropdownOptionStyles",
+          "declaration": {
+            "name": "dropdownOptionStyles",
+            "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-icon/TuixIcon.ts",
+      "path": "src/tuix-dropdown/TuixDropdown.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "TuixIcon",
+          "name": "TuixDropdown",
           "members": [
             {
               "kind": "field",
-              "name": "name",
-              "attribute": "name"
+              "name": "value",
+              "type": {
+                "text": "TuixDropdownOption | undefined"
+              },
+              "default": "undefined",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "TuixDropdownOption[]"
+              },
+              "default": "[]",
+              "attribute": "options"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "dark",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "description",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "description"
+            },
+            {
+              "kind": "field",
+              "name": "descriptionType",
+              "attribute": "descriptionType"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "_value",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "_isOptionsVisible",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_searchingOption",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_extendedOptions",
+              "type": {
+                "text": "TuixDropdownExtendedOption[]"
+              },
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "_optionsContainer",
               "type": {
-                "text": "string | TextVariant | undefined"
+                "text": "HTMLElement | undefined"
               },
-              "attribute": "color"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "size",
-              "attribute": "size"
+              "name": "_inputDropdown",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "dark",
+              "name": "_previousSelectedOption",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement | null"
               },
-              "default": "false",
-              "attribute": "dark"
+              "privacy": "private",
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "fill",
+              "name": "_previousFocusedOption",
               "type": {
-                "text": "string | TextVariant | undefined"
+                "text": "HTMLElement | null"
               },
-              "attribute": "fill"
+              "privacy": "private",
+              "default": "null"
             },
             {
               "kind": "method",
-              "name": "_getSelectedColor",
+              "name": "_onEnterPress",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "color",
-                  "optional": true,
+                  "name": "event",
                   "type": {
-                    "text": "string | TextVariant"
+                    "text": "KeyboardEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_getSelectedFill",
+              "name": "_onKeyDownOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onKeyPressOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onMouseOverOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onClickOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent | KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onInputSingle",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleSelectEvent",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent | KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleBlur",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_getIconTemplate",
+              "name": "_getOptionName",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "string"
                 }
-              }
-            }
-          ],
-          "attributes": [
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "TuixDropdownOption"
+                  }
+                }
+              ]
+            },
             {
-              "name": "name",
-              "fieldName": "name"
+              "kind": "method",
+              "name": "_getOptionValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TuixDropdownPlainOption"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "TuixDropdownOption"
+                  }
+                }
+              ]
             },
             {
-              "name": "color",
-              "type": {
-                "text": "string | TextVariant | undefined"
+              "kind": "method",
+              "name": "_findIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
               },
-              "fieldName": "color"
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "TuixDropdownOption"
+                  }
+                }
+              ]
             },
             {
-              "name": "size",
-              "fieldName": "size"
+              "kind": "method",
+              "name": "_handleInputBase",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                },
+                {
+                  "name": "eventName",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "name": "dark",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "dark"
+              "kind": "method",
+              "name": "_extendOptionsList",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "value",
+                  "default": "''"
+                }
+              ]
             },
             {
-              "name": "fill",
-              "type": {
-                "text": "string | TextVariant | undefined"
-              },
-              "fieldName": "fill"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "tuix-icon",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "TuixIcon",
-          "declaration": {
-            "name": "TuixIcon",
-            "module": "src/tuix-icon/TuixIcon.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "tuix-icon",
-          "declaration": {
-            "name": "TuixIcon",
-            "module": "src/tuix-icon/TuixIcon.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-icon-button/TuixIconButton.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "TuixIconButton",
-          "members": [
+              "kind": "method",
+              "name": "_handleArrowDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleArrowUp",
+              "privacy": "private"
+            },
             {
               "kind": "field",
-              "name": "icon",
-              "attribute": "icon"
+              "name": "_handleClickOutside",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_updateIconColor",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
+              "name": "_focusTargetOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "targetOption",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "extrict",
+                  "default": "true"
                 }
-              },
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "_buttonContent",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              },
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "name": "_toggleOptions",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "variant",
-              "attribute": "variant",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "kind": "method",
+              "name": "_focusOptionsContainer",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "kind": "method",
+              "name": "_unselectPreviousOption",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "dark",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "dark",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
+              "kind": "method",
+              "name": "_hasCompleteDescription",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
               }
             },
             {
-              "kind": "field",
-              "name": "iconColor",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "''",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
+              "kind": "method",
+              "name": "_getOptionsContainerClasses",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ClassInfo"
+                }
               }
             },
             {
               "kind": "method",
-              "name": "_getTextColor",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "name": "_triggerUpdateByExternalValueChange",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_handleClick",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "name": "_resetPreviousSelection",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_iconTemplate",
-              "privacy": "protected",
+              "name": "_getOptionsTemplate",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "iconName",
-                  "type": {
-                    "text": "IconName"
-                  }
-                },
-                {
-                  "name": "iconSize",
-                  "type": {
-                    "text": "IconSizeVariant"
-                  }
+                  "text": "TemplateResult[]"
                 }
-              ],
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
               }
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "icon",
-              "fieldName": "icon"
+              "name": "select",
+              "type": {
+                "text": "CustomEvent"
+              }
             },
             {
-              "name": "variant",
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
+              "name": "eventName",
+              "type": {
+                "text": "CustomEvent"
               }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "TuixDropdownOption | undefined"
+              },
+              "default": "undefined",
+              "resolveInitializer": {
+                "module": "src/tuix-dropdown/TuixDropdown.ts"
+              },
+              "fieldName": "value"
+            },
+            {
+              "name": "options",
+              "type": {
+                "text": "TuixDropdownOption[]"
+              },
+              "default": "[]",
+              "fieldName": "options"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "title"
             },
             {
               "name": "disabled",
@@ -2069,11 +2074,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "fieldName": "disabled"
             },
             {
               "name": "dark",
@@ -2081,48 +2082,47 @@
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "dark",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "TuixBaseButton",
-            "module": "/src/tuix-button/TuixBaseButton"
-          },
-          "tagName": "tuix-icon-button",
-          "customElement": true,
-          "events": [
+              "fieldName": "dark"
+            },
             {
-              "name": "customClick",
+              "name": "description",
               "type": {
-                "text": "CustomEvent"
+                "text": "string | undefined"
               },
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "fieldName": "description"
+            },
+            {
+              "name": "descriptionType",
+              "fieldName": "descriptionType"
+            },
+            {
+              "name": "type",
+              "fieldName": "type"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "tuix-dropdown",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TuixIconButton",
+          "name": "TuixDropdown",
           "declaration": {
-            "name": "TuixIconButton",
-            "module": "src/tuix-icon-button/TuixIconButton.ts"
+            "name": "TuixDropdown",
+            "module": "src/tuix-dropdown/TuixDropdown.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "tuix-icon-button",
+          "name": "tuix-dropdown",
           "declaration": {
-            "name": "TuixIconButton",
-            "module": "src/tuix-icon-button/TuixIconButton.ts"
+            "name": "TuixDropdown",
+            "module": "src/tuix-dropdown/TuixDropdown.ts"
           }
         }
       ]
@@ -4160,74 +4160,104 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-toast/TuixToast.styles.ts",
+      "path": "src/tuix-toggle-button/TuixToggleButton.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "commonToastStyles",
-          "default": "css`\n  :host {\n    position: fixed;\n    bottom: -100%;\n    left: 50%;\n    transform: translateX(-50%);\n    transition: bottom 600ms linear;\n    width: 640px;\n    z-index: 99;\n  }\n\n  :host([type='text']),\n  :host([type='warning']),\n  :host([type='error']),\n  :host([type='success']) {\n    bottom: 1.5rem;\n  }\n\n  .toast-container {\n    padding: 12px 16px;\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    border-radius: 4px;\n  }\n`"
+          "name": "toggleButtonHostStyles",
+          "default": "css`\n  ${hostStyles}\n  :host {\n    --t-bg-color-primary: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-toggle-shadow-color-focus: rgba(142, 141, 208, 0.16);\n  }\n  :host([dark]) {\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-bg-color-inner: ${unsafeCSS(DarkPalette.WHITE)};\n  }\n  :host([dark][disabled]) {\n    --t-bg-color-inner: ${unsafeCSS(DarkPalette.MAIN)};\n  }\n`"
         },
         {
           "kind": "variable",
-          "name": "tabletToastStyles",
-          "default": "css`\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    :host {\n      width: 520px;\n    }\n  }\n`"
+          "name": "toggleButtonContainerStyles",
+          "default": "css`\n  .t-toggle-button-full-container {\n    display: flex;\n    justify-content: var(--t-label-right-default-justify, flex-start);\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-toggle-button-full-container {\n    cursor: not-allowed;\n  }\n  .t-toggle-button-container {\n    --t-toggle-button-size-box: 3rem;\n    --t-toggle-button-shadow-width: 2px;\n    --t-toggle-inner-radio: 1rem;\n    display: block;\n    position: relative;\n    height: calc(var(--t-toggle-button-size-box) / 2);\n    width: var(--t-toggle-button-size-box);\n    min-width: var(--t-toggle-button-size-box);\n  }\n  .t-toggle-button-container .t-toggle-button {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  .t-radio-button-full-container:not(.t-with-label-left) {\n    justify-content: flex-start;\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-toggle-button-container {\n      --t-toggle-button-size-box: 2rem;\n      --t-toggle-button-shadow-width: 1px;\n      --t-toggle-inner-radio: 0.75rem;\n      margin-top: 1px;\n    }\n  }\n`"
         },
         {
           "kind": "variable",
-          "name": "mobileToastStyles",
-          "default": "css`\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    :host {\n      max-width: 343px;\n      width: 90%;\n    }\n  }\n`"
+          "name": "toggleButtonCheckmarkStyles",
+          "default": "css`\n  .t-toggle-button-container .t-toggle-button-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: calc(var(--t-toggle-button-size-box) / 2);\n    width: var(--t-toggle-button-size-box);\n    border-radius: 0.75rem;\n    background-color: var(--t-bg-color-primary);\n    box-sizing: border-box;\n  }\n  .t-toggle-button-container\n    .t-toggle-button:checked\n    ~ .t-toggle-button-checkmark {\n    background-color: var(--t-main-color-tuix);\n  }\n  .t-toggle-button-full-container:hover\n    .t-toggle-button-container\n    .t-toggle-button-checkmark {\n    box-shadow: 0px 4px 4px 0px var(--t-toggle-shadow-color-focus);\n  }\n  .t-toggle-button-container\n    .t-toggle-button:focus\n    ~ .t-toggle-button-checkmark {\n    box-shadow: 0 0 0px var(--t-toggle-button-shadow-width)\n      var(--t-stroke-color-focus);\n  }\n  .t-toggle-button-container\n    .t-toggle-button:disabled\n    ~ .t-toggle-button-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    box-shadow: none;\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "toggleButtonInnerStyles",
+          "default": "css`\n  .t-toggle-button-container .t-toggle-button-checkmark .t-toggle-button-inner {\n    background-color: var(--t-bg-color-inner, ${unsafeCSS(Palette.WHITE)});\n    margin: auto auto auto calc(var(--t-toggle-button-shadow-width) * 2);\n    height: var(--t-toggle-inner-radio);\n    width: var(--t-toggle-inner-radio);\n    border-radius: 50%;\n    display: block;\n    transition: 0.3s;\n  }\n  .t-toggle-button-container\n    .t-toggle-button:checked\n    ~ .t-toggle-button-checkmark\n    .t-toggle-button-inner {\n    transform: translateX(\n      calc(\n        var(--t-toggle-button-size-box) - var(--t-toggle-inner-radio) -\n          var(--t-toggle-button-shadow-width) * 4\n      )\n    );\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "toggleButtonLabelStyles",
+          "default": "css`\n  .t-toggle-button-label {\n    display: block;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-toggle-button-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n    justify-content: var(--t-label-left-default-justify, space-between);\n  }\n  .t-toggle-button-full-container.t-with-label-left .t-toggle-button-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "commonToastStyles",
+          "name": "toggleButtonHostStyles",
           "declaration": {
-            "name": "commonToastStyles",
-            "module": "src/tuix-toast/TuixToast.styles.ts"
+            "name": "toggleButtonHostStyles",
+            "module": "src/tuix-toggle-button/TuixToggleButton.styles.ts"
           }
         },
         {
           "kind": "js",
-          "name": "tabletToastStyles",
+          "name": "toggleButtonContainerStyles",
           "declaration": {
-            "name": "tabletToastStyles",
-            "module": "src/tuix-toast/TuixToast.styles.ts"
+            "name": "toggleButtonContainerStyles",
+            "module": "src/tuix-toggle-button/TuixToggleButton.styles.ts"
           }
         },
         {
           "kind": "js",
-          "name": "mobileToastStyles",
+          "name": "toggleButtonCheckmarkStyles",
           "declaration": {
-            "name": "mobileToastStyles",
-            "module": "src/tuix-toast/TuixToast.styles.ts"
+            "name": "toggleButtonCheckmarkStyles",
+            "module": "src/tuix-toggle-button/TuixToggleButton.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "toggleButtonInnerStyles",
+          "declaration": {
+            "name": "toggleButtonInnerStyles",
+            "module": "src/tuix-toggle-button/TuixToggleButton.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "toggleButtonLabelStyles",
+          "declaration": {
+            "name": "toggleButtonLabelStyles",
+            "module": "src/tuix-toggle-button/TuixToggleButton.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-toast/TuixToast.ts",
+      "path": "src/tuix-toggle-button/TuixToggleButton.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "TuixToast",
+          "name": "TuixToggleButton",
           "members": [
             {
               "kind": "field",
-              "name": "type",
-              "attribute": "type",
-              "reflects": true
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "checked"
             },
             {
               "kind": "field",
-              "name": "visibilityDuration",
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "4000",
-              "attribute": "visibility-duration"
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -4241,33 +4271,48 @@
             },
             {
               "kind": "field",
-              "name": "lastType",
-              "default": "ToastType.SUCCESS"
-            },
-            {
-              "kind": "method",
-              "name": "_handleOnClose",
-              "privacy": "private"
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "_saveType",
-              "privacy": "private"
+              "name": "labelSide",
+              "type": {
+                "text": "CheckboxLabelSide"
+              },
+              "attribute": "labelSide"
             },
             {
-              "kind": "field",
-              "name": "_getStyleMap",
-              "privacy": "private"
+              "kind": "method",
+              "name": "_onToggleButtonChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "InputEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "_getIcon",
-              "privacy": "private"
+              "kind": "method",
+              "name": "_getFullContainerClasses",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ClassInfo"
+                }
+              }
             }
           ],
           "events": [
             {
-              "name": "on-close",
+              "name": "change",
               "type": {
                 "text": "CustomEvent"
               }
@@ -4275,16 +4320,20 @@
           ],
           "attributes": [
             {
-              "name": "type",
-              "fieldName": "type"
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "checked"
             },
             {
-              "name": "visibility-duration",
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "4000",
-              "fieldName": "visibilityDuration"
+              "default": "false",
+              "fieldName": "disabled"
             },
             {
               "name": "dark",
@@ -4293,135 +4342,120 @@
               },
               "default": "false",
               "fieldName": "dark"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "labelSide",
+              "type": {
+                "text": "CheckboxLabelSide"
+              },
+              "fieldName": "labelSide"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "tuix-toast",
+          "tagName": "tuix-toggle-button",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TuixToast",
+          "name": "TuixToggleButton",
           "declaration": {
-            "name": "TuixToast",
-            "module": "src/tuix-toast/TuixToast.ts"
+            "name": "TuixToggleButton",
+            "module": "src/tuix-toggle-button/TuixToggleButton.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "tuix-toast",
+          "name": "tuix-toggle-button",
           "declaration": {
-            "name": "TuixToast",
-            "module": "src/tuix-toast/TuixToast.ts"
+            "name": "TuixToggleButton",
+            "module": "src/tuix-toggle-button/TuixToggleButton.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-toggle-button/TuixToggleButton.styles.ts",
+      "path": "src/tuix-toast/TuixToast.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "toggleButtonHostStyles",
-          "default": "css`\n  ${hostStyles}\n  :host {\n    --t-bg-color-primary: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-toggle-shadow-color-focus: rgba(142, 141, 208, 0.16);\n  }\n  :host([dark]) {\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-bg-color-inner: ${unsafeCSS(DarkPalette.WHITE)};\n  }\n  :host([dark][disabled]) {\n    --t-bg-color-inner: ${unsafeCSS(DarkPalette.MAIN)};\n  }\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "toggleButtonContainerStyles",
-          "default": "css`\n  .t-toggle-button-full-container {\n    display: flex;\n    justify-content: var(--t-label-right-default-justify, flex-start);\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-toggle-button-full-container {\n    cursor: not-allowed;\n  }\n  .t-toggle-button-container {\n    --t-toggle-button-size-box: 3rem;\n    --t-toggle-button-shadow-width: 2px;\n    --t-toggle-inner-radio: 1rem;\n    display: block;\n    position: relative;\n    height: calc(var(--t-toggle-button-size-box) / 2);\n    width: var(--t-toggle-button-size-box);\n    min-width: var(--t-toggle-button-size-box);\n  }\n  .t-toggle-button-container .t-toggle-button {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  .t-radio-button-full-container:not(.t-with-label-left) {\n    justify-content: flex-start;\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-toggle-button-container {\n      --t-toggle-button-size-box: 2rem;\n      --t-toggle-button-shadow-width: 1px;\n      --t-toggle-inner-radio: 0.75rem;\n      margin-top: 1px;\n    }\n  }\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "toggleButtonCheckmarkStyles",
-          "default": "css`\n  .t-toggle-button-container .t-toggle-button-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: calc(var(--t-toggle-button-size-box) / 2);\n    width: var(--t-toggle-button-size-box);\n    border-radius: 0.75rem;\n    background-color: var(--t-bg-color-primary);\n    box-sizing: border-box;\n  }\n  .t-toggle-button-container\n    .t-toggle-button:checked\n    ~ .t-toggle-button-checkmark {\n    background-color: var(--t-main-color-tuix);\n  }\n  .t-toggle-button-full-container:hover\n    .t-toggle-button-container\n    .t-toggle-button-checkmark {\n    box-shadow: 0px 4px 4px 0px var(--t-toggle-shadow-color-focus);\n  }\n  .t-toggle-button-container\n    .t-toggle-button:focus\n    ~ .t-toggle-button-checkmark {\n    box-shadow: 0 0 0px var(--t-toggle-button-shadow-width)\n      var(--t-stroke-color-focus);\n  }\n  .t-toggle-button-container\n    .t-toggle-button:disabled\n    ~ .t-toggle-button-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    box-shadow: none;\n  }\n`"
+          "name": "commonToastStyles",
+          "default": "css`\n  :host {\n    position: fixed;\n    bottom: -100%;\n    left: 50%;\n    transform: translateX(-50%);\n    transition: bottom 600ms linear;\n    width: 640px;\n    z-index: 99;\n  }\n\n  :host([type='text']),\n  :host([type='warning']),\n  :host([type='error']),\n  :host([type='success']) {\n    bottom: 1.5rem;\n  }\n\n  .toast-container {\n    padding: 12px 16px;\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    border-radius: 4px;\n  }\n`"
         },
         {
           "kind": "variable",
-          "name": "toggleButtonInnerStyles",
-          "default": "css`\n  .t-toggle-button-container .t-toggle-button-checkmark .t-toggle-button-inner {\n    background-color: var(--t-bg-color-inner, ${unsafeCSS(Palette.WHITE)});\n    margin: auto auto auto calc(var(--t-toggle-button-shadow-width) * 2);\n    height: var(--t-toggle-inner-radio);\n    width: var(--t-toggle-inner-radio);\n    border-radius: 50%;\n    display: block;\n    transition: 0.3s;\n  }\n  .t-toggle-button-container\n    .t-toggle-button:checked\n    ~ .t-toggle-button-checkmark\n    .t-toggle-button-inner {\n    transform: translateX(\n      calc(\n        var(--t-toggle-button-size-box) - var(--t-toggle-inner-radio) -\n          var(--t-toggle-button-shadow-width) * 4\n      )\n    );\n  }\n`"
+          "name": "tabletToastStyles",
+          "default": "css`\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    :host {\n      width: 520px;\n    }\n  }\n`"
         },
         {
           "kind": "variable",
-          "name": "toggleButtonLabelStyles",
-          "default": "css`\n  .t-toggle-button-label {\n    display: block;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-toggle-button-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n    justify-content: var(--t-label-left-default-justify, space-between);\n  }\n  .t-toggle-button-full-container.t-with-label-left .t-toggle-button-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`"
+          "name": "mobileToastStyles",
+          "default": "css`\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    :host {\n      max-width: 343px;\n      width: 90%;\n    }\n  }\n`"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "toggleButtonHostStyles",
-          "declaration": {
-            "name": "toggleButtonHostStyles",
-            "module": "src/tuix-toggle-button/TuixToggleButton.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "toggleButtonContainerStyles",
-          "declaration": {
-            "name": "toggleButtonContainerStyles",
-            "module": "src/tuix-toggle-button/TuixToggleButton.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "toggleButtonCheckmarkStyles",
+          "name": "commonToastStyles",
           "declaration": {
-            "name": "toggleButtonCheckmarkStyles",
-            "module": "src/tuix-toggle-button/TuixToggleButton.styles.ts"
+            "name": "commonToastStyles",
+            "module": "src/tuix-toast/TuixToast.styles.ts"
           }
         },
         {
           "kind": "js",
-          "name": "toggleButtonInnerStyles",
+          "name": "tabletToastStyles",
           "declaration": {
-            "name": "toggleButtonInnerStyles",
-            "module": "src/tuix-toggle-button/TuixToggleButton.styles.ts"
+            "name": "tabletToastStyles",
+            "module": "src/tuix-toast/TuixToast.styles.ts"
           }
         },
         {
           "kind": "js",
-          "name": "toggleButtonLabelStyles",
+          "name": "mobileToastStyles",
           "declaration": {
-            "name": "toggleButtonLabelStyles",
-            "module": "src/tuix-toggle-button/TuixToggleButton.styles.ts"
+            "name": "mobileToastStyles",
+            "module": "src/tuix-toast/TuixToast.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-toggle-button/TuixToggleButton.ts",
+      "path": "src/tuix-toast/TuixToast.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "TuixToggleButton",
+          "name": "TuixToast",
           "members": [
             {
               "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "checked"
+              "name": "type",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "visibilityDuration",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
+              "default": "4000",
+              "attribute": "visibility-duration"
             },
             {
               "kind": "field",
@@ -4435,48 +4469,33 @@
             },
             {
               "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "label"
+              "name": "lastType",
+              "default": "ToastType.SUCCESS"
+            },
+            {
+              "kind": "method",
+              "name": "_handleOnClose",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "labelSide",
-              "type": {
-                "text": "CheckboxLabelSide"
-              },
-              "attribute": "labelSide"
+              "name": "_saveType",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "_onToggleButtonChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "InputEvent"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_getStyleMap",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "_getFullContainerClasses",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "ClassInfo"
-                }
-              }
+              "kind": "field",
+              "name": "_getIcon",
+              "privacy": "private"
             }
           ],
           "events": [
             {
-              "name": "change",
+              "name": "on-close",
               "type": {
                 "text": "CustomEvent"
               }
@@ -4484,20 +4503,16 @@
           ],
           "attributes": [
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "checked"
+              "name": "type",
+              "fieldName": "type"
             },
             {
-              "name": "disabled",
+              "name": "visibility-duration",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "fieldName": "disabled"
+              "default": "4000",
+              "fieldName": "visibilityDuration"
             },
             {
               "name": "dark",
@@ -4506,46 +4521,31 @@
               },
               "default": "false",
               "fieldName": "dark"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "label"
-            },
-            {
-              "name": "labelSide",
-              "type": {
-                "text": "CheckboxLabelSide"
-              },
-              "fieldName": "labelSide"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "tuix-toggle-button",
+          "tagName": "tuix-toast",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TuixToggleButton",
+          "name": "TuixToast",
           "declaration": {
-            "name": "TuixToggleButton",
-            "module": "src/tuix-toggle-button/TuixToggleButton.ts"
+            "name": "TuixToast",
+            "module": "src/tuix-toast/TuixToast.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "tuix-toggle-button",
+          "name": "tuix-toast",
           "declaration": {
-            "name": "TuixToggleButton",
-            "module": "src/tuix-toggle-button/TuixToggleButton.ts"
+            "name": "TuixToast",
+            "module": "src/tuix-toast/TuixToast.ts"
           }
         }
       ]
@@ -4616,6 +4616,76 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-button/enums/tuix-button.enums.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "buttonTextColor",
+          "type": {
+            "text": "Record<MainVariant, string>"
+          },
+          "default": "{\n  [MainVariant.PRIMARY]: Palette.WHITE,\n  [MainVariant.SECONDARY]: Palette.MAIN,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "buttonTextColor",
+          "declaration": {
+            "name": "buttonTextColor",
+            "module": "src/tuix-button/enums/tuix-button.enums.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-button/stories/tuix-button.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  title: 'TuixButton',\n  component: 'tuix-button',\n  argTypes: {\n    value: {\n      control: 'text',\n    },\n    variant: {\n      control: 'inline-radio',\n      options: Object.values(MainVariant),\n    },\n    iconLeft: {\n      control: 'select',\n      options: ['', ...[...Object.values(IconName), null]],\n    },\n    iconRight: {\n      control: 'select',\n      options: ['', ...[...Object.values(IconName), null]],\n    },\n    disabled: { control: 'boolean' },\n    dark: { control: 'boolean' },\n    full: { control: 'boolean' },\n    onClick: { action: 'customClick' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"width:100%; height:100vh; ${args.dark\n        ? `background-color: ${Palette.BLACK};`\n        : ''}\"\n    >\n      <div style=\"width:50%; margin:auto; height:100%; position:relative;\">\n        <tuix-button\n          style=\"width:100%; height:20%; text-align:center; position:absolute; top:50%;\"\n          .variant=${args.variant}\n          .iconLeft=${args.iconLeft}\n          .iconRight=${args.iconRight}\n          ?disabled=${args.disabled}\n          ?dark=${args.dark}\n          ?full=${args.full}\n          @customClick=${(e: CustomEventTuixButton) => args.onClick?.(e)}\n        >\n          ${args.value}\n        </tuix-button>\n      </div>\n    </div>\n  `,\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "Button",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{\n  args: {\n    value: 'Click me',\n    variant: MainVariant.PRIMARY,\n    disabled: false,\n    dark: false,\n    full: false,\n    iconLeft: null,\n    iconRight: null,\n  },\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/tuix-button/stories/tuix-button.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Button",
+          "declaration": {
+            "name": "Button",
+            "module": "src/tuix-button/stories/tuix-button.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-button/interfaces/tuix-button.interface.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts",
@@ -4704,59 +4774,31 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-dropdown/enums/tuix-dropdown.enums.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-dropdown/interfaces/tuix-dropdown.interface.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts",
+      "path": "src/tuix-icon/enums/tuix-icon.enums.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  title: 'TuixDropdown',\n  component: 'tuix-dropdown',\n  argTypes: {\n    value: {\n      control: 'object',\n    },\n    options: {\n      control: 'object',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    placeholder: {\n      control: 'text',\n    },\n    title: {\n      control: 'text',\n    },\n    description: {\n      control: 'text',\n    },\n    descriptionType: {\n      control: 'select',\n      options: [...Object.values(DescriptionType), null],\n    },\n    dark: {\n      control: 'boolean',\n    },\n    type: {\n      control: 'select',\n      options: [...Object.values(DropdownType)],\n    },\n    onInputSingle: { action: 'input-single' },\n    onSelect: { action: 'select' },\n  },\n  render: (args: ArgTypes) => html` <div\n    style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n  ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n  >\n    <tuix-dropdown\n      ?disabled=\"${args.disabled}\"\n      .value=\"${args.value}\"\n      .options=\"${args.options}\"\n      placeholder=\"${args.placeholder}\"\n      title=\"${args.title}\"\n      .description=\"${args.description}\"\n      descriptionType=\"${args.descriptionType}\"\n      ?dark=\"${args.dark}\"\n      .type=\"${args.type}\"\n      @input-single=\"${args.onInputSingle}\"\n      @select=\"${args.onSelect}\"\n    >\n    </tuix-dropdown>\n  </div>`,\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "tuixDropdownObjectList",
+          "name": "iconSize",
           "type": {
-            "text": "Story"
+            "text": "Record<IconSizeVariant, string>"
           },
-          "default": "{\n  args: {\n    value: '458ac6ca-9a57-48c5-8abf-768460397607',\n    // value: { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' }, // This works too\n    disabled: false,\n    title: 'Title',\n    dark: false,\n    options: [\n      { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' },\n      { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397602' },\n      { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397603' },\n      { name: 'apple2', value: '458ac6ca-9a57-48c5-8abf-768460397604' },\n      { name: 'orange2', value: '458ac6ca-9a57-48c5-8abf-768460397605' },\n      { name: 'tomato2', value: '458ac6ca-9a57-48c5-8abf-768460397606' },\n      { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397607' },\n      { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397608' },\n      { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397609' },\n    ],\n    type: DropdownType.SEARCH,\n  },\n}"
+          "default": "{\n  [IconSizeVariant.SMALL]: '16px',\n  [IconSizeVariant.MEDIUM]: '24px',\n  [IconSizeVariant.LARGE]: '32px',\n  [IconSizeVariant.FULL]: '100%',\n}"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "tuixDropdownObjectList",
+          "name": "iconSize",
           "declaration": {
-            "name": "tuixDropdownObjectList",
-            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
+            "name": "iconSize",
+            "module": "src/tuix-icon/enums/tuix-icon.enums.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts",
+      "path": "src/tuix-icon/stories/tuix-icon.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4764,15 +4806,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixDropdown',\n  component: 'tuix-dropdown',\n  argTypes: {\n    value: { control: 'text' },\n\n    options: {\n      control: 'select',\n      options: ['fruits', 'countries'],\n      mapping: {\n        fruits: fruits,\n        countries: countryPhoneArray,\n      },\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    placeholder: { control: 'text' },\n    title: { control: 'text' },\n    description: { control: 'text' },\n    descriptionType: {\n      control: 'select',\n      options: [...Object.values(DescriptionType), null],\n    },\n    dark: {\n      control: 'boolean',\n    },\n    type: {\n      control: 'select',\n      options: [...Object.values(DropdownType)],\n    },\n    onInputSingle: { action: 'input-single' },\n    onSelect: { action: 'select' },\n  },\n  render: (args: ArgTypes) => html`<div\n    style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n  ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n  >\n    <tuix-dropdown\n      ?disabled=\"${args.disabled}\"\n      .value=\"${args.value}\"\n      .options=\"${args.options}\"\n      placeholder=\"${args.placeholder}\"\n      title=\"${args.title}\"\n      .description=\"${args.description}\"\n      descriptionType=\"${args.descriptionType}\"\n      ?dark=\"${args.dark}\"\n      .type=\"${args.type}\"\n      @input-single=\"${args.onInputSingle}\"\n      @select=\"${args.onSelect}\"\n    >\n    </tuix-dropdown>\n  </div>`,\n}"
+          "default": "{\n  title: 'TuixIcon',\n  component: 'tuix-icon',\n  argTypes: {\n    name: {\n      control: 'select',\n      options: Object.values(IconName),\n    },\n    size: {\n      control: 'select',\n      options: Object.values(IconSizeVariant),\n    },\n    color: {\n      control: 'select',\n      options: [...Object.keys(Palette), ...Object.values(TextVariant)],\n    },\n    fill: {\n      control: 'select',\n      options: [...Object.keys(Palette), ...Object.values(TextVariant), null],\n    },\n    dark: {\n      control: 'boolean',\n    },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n      ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n    >\n      <tuix-icon\n        name=\"${args.name}\"\n        size=\"${args.size}\"\n        color=\"${args.color}\"\n        ?dark=\"${args.dark}\"\n        fill=\"${args.fill}\"\n      >\n      </tuix-icon>\n    </div>\n  `,\n}"
         },
         {
           "kind": "variable",
-          "name": "tuixDropdownExample",
+          "name": "regularIcon",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    value: 'apple2',\n    disabled: false,\n    title: 'Title',\n    dark: false,\n    options: [\n      'apple',\n      'orange',\n      'tomato',\n      'apple2',\n      'orange2',\n      'tomato2',\n      'apple3',\n      'orange3',\n      'tomato3',\n    ],\n    type: DropdownType.SINGLE,\n  },\n}"
+          "default": "{\n  args: {\n    ...defaultValues,\n  },\n}"
         }
       ],
       "exports": [
@@ -4781,52 +4823,22 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
+            "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "tuixDropdownExample",
-          "declaration": {
-            "name": "tuixDropdownExample",
-            "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-button/interfaces/tuix-button.interface.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-button/enums/tuix-button.enums.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "buttonTextColor",
-          "type": {
-            "text": "Record<MainVariant, string>"
-          },
-          "default": "{\n  [MainVariant.PRIMARY]: Palette.WHITE,\n  [MainVariant.SECONDARY]: Palette.MAIN,\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "buttonTextColor",
+          "name": "regularIcon",
           "declaration": {
-            "name": "buttonTextColor",
-            "module": "src/tuix-button/enums/tuix-button.enums.ts"
+            "name": "regularIcon",
+            "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-button/stories/tuix-button.stories.ts",
+      "path": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4834,15 +4846,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixButton',\n  component: 'tuix-button',\n  argTypes: {\n    value: {\n      control: 'text',\n    },\n    variant: {\n      control: 'inline-radio',\n      options: Object.values(MainVariant),\n    },\n    iconLeft: {\n      control: 'select',\n      options: ['', ...[...Object.values(IconName), null]],\n    },\n    iconRight: {\n      control: 'select',\n      options: ['', ...[...Object.values(IconName), null]],\n    },\n    disabled: { control: 'boolean' },\n    dark: { control: 'boolean' },\n    full: { control: 'boolean' },\n    onClick: { action: 'customClick' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"width:100%; height:100vh; ${args.dark\n        ? `background-color: ${Palette.BLACK};`\n        : ''}\"\n    >\n      <div style=\"width:50%; margin:auto; height:100%; position:relative;\">\n        <tuix-button\n          style=\"width:100%; height:20%; text-align:center; position:absolute; top:50%;\"\n          .variant=${args.variant}\n          .iconLeft=${args.iconLeft}\n          .iconRight=${args.iconRight}\n          ?disabled=${args.disabled}\n          ?dark=${args.dark}\n          ?full=${args.full}\n          @customClick=${(e: CustomEventTuixButton) => args.onClick?.(e)}\n        >\n          ${args.value}\n        </tuix-button>\n      </div>\n    </div>\n  `,\n}"
+          "default": "{\n  title: 'TuixIconButton',\n  component: 'tuix-icon-button',\n  argTypes: {\n    variant: {\n      control: 'inline-radio',\n      options: Object.values(MainVariant),\n    },\n    icon: {\n      control: 'select',\n      options: Object.values(IconName),\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n    onClick: { action: 'customClick' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n  ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n    >\n      <tuix-icon-button\n        variant=\"${args.variant}\"\n        icon=\"${args.icon}\"\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n        @customClick=\"${args.onClick}\"\n      />\n    </div>\n  `,\n}"
         },
         {
           "kind": "variable",
-          "name": "Button",
+          "name": "iconButton",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    value: 'Click me',\n    variant: MainVariant.PRIMARY,\n    disabled: false,\n    dark: false,\n    full: false,\n    iconLeft: null,\n    iconRight: null,\n  },\n}"
+          "default": "{\n  args: {\n    variant: MainVariant.PRIMARY,\n    icon: IconName.ARROW_DOWN,\n    disabled: false,\n    dark: false,\n  },\n}"
         }
       ],
       "exports": [
@@ -4851,46 +4863,34 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-button/stories/tuix-button.stories.ts"
+            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Button",
+          "name": "iconButton",
           "declaration": {
-            "name": "Button",
-            "module": "src/tuix-button/stories/tuix-button.stories.ts"
+            "name": "iconButton",
+            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-icon/enums/tuix-icon.enums.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "iconSize",
-          "type": {
-            "text": "Record<IconSizeVariant, string>"
-          },
-          "default": "{\n  [IconSizeVariant.SMALL]: '16px',\n  [IconSizeVariant.MEDIUM]: '24px',\n  [IconSizeVariant.LARGE]: '32px',\n  [IconSizeVariant.FULL]: '100%',\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "iconSize",
-          "declaration": {
-            "name": "iconSize",
-            "module": "src/tuix-icon/enums/tuix-icon.enums.ts"
-          }
-        }
-      ]
+      "path": "src/tuix-dropdown/enums/tuix-dropdown.enums.ts",
+      "declarations": [],
+      "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-icon/stories/tuix-icon.stories.ts",
+      "path": "src/tuix-dropdown/interfaces/tuix-dropdown.interface.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4898,15 +4898,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixIcon',\n  component: 'tuix-icon',\n  argTypes: {\n    name: {\n      control: 'select',\n      options: Object.values(IconName),\n    },\n    size: {\n      control: 'select',\n      options: Object.values(IconSizeVariant),\n    },\n    color: {\n      control: 'select',\n      options: [...Object.keys(Palette), ...Object.values(TextVariant)],\n    },\n    fill: {\n      control: 'select',\n      options: [...Object.keys(Palette), ...Object.values(TextVariant), null],\n    },\n    dark: {\n      control: 'boolean',\n    },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n      ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n    >\n      <tuix-icon\n        name=\"${args.name}\"\n        size=\"${args.size}\"\n        color=\"${args.color}\"\n        ?dark=\"${args.dark}\"\n        fill=\"${args.fill}\"\n      >\n      </tuix-icon>\n    </div>\n  `,\n}"
+          "default": "{\n  title: 'TuixDropdown',\n  component: 'tuix-dropdown',\n  argTypes: {\n    value: {\n      control: 'object',\n    },\n    options: {\n      control: 'object',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    placeholder: {\n      control: 'text',\n    },\n    title: {\n      control: 'text',\n    },\n    description: {\n      control: 'text',\n    },\n    descriptionType: {\n      control: 'select',\n      options: [...Object.values(DescriptionType), null],\n    },\n    dark: {\n      control: 'boolean',\n    },\n    type: {\n      control: 'select',\n      options: [...Object.values(DropdownType)],\n    },\n    onInputSingle: { action: 'input-single' },\n    onSelect: { action: 'select' },\n  },\n  render: (args: ArgTypes) => html` <div\n    style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n  ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n  >\n    <tuix-dropdown\n      ?disabled=\"${args.disabled}\"\n      .value=\"${args.value}\"\n      .options=\"${args.options}\"\n      placeholder=\"${args.placeholder}\"\n      title=\"${args.title}\"\n      .description=\"${args.description}\"\n      descriptionType=\"${args.descriptionType}\"\n      ?dark=\"${args.dark}\"\n      .type=\"${args.type}\"\n      @input-single=\"${args.onInputSingle}\"\n      @select=\"${args.onSelect}\"\n    >\n    </tuix-dropdown>\n  </div>`,\n}"
         },
         {
           "kind": "variable",
-          "name": "regularIcon",
+          "name": "tuixDropdownObjectList",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    ...defaultValues,\n  },\n}"
+          "default": "{\n  args: {\n    value: '458ac6ca-9a57-48c5-8abf-768460397607',\n    // value: { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' }, // This works too\n    disabled: false,\n    title: 'Title',\n    dark: false,\n    options: [\n      { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' },\n      { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397602' },\n      { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397603' },\n      { name: 'apple2', value: '458ac6ca-9a57-48c5-8abf-768460397604' },\n      { name: 'orange2', value: '458ac6ca-9a57-48c5-8abf-768460397605' },\n      { name: 'tomato2', value: '458ac6ca-9a57-48c5-8abf-768460397606' },\n      { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397607' },\n      { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397608' },\n      { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397609' },\n    ],\n    type: DropdownType.SEARCH,\n  },\n}"
         }
       ],
       "exports": [
@@ -4915,22 +4915,22 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
+            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "regularIcon",
+          "name": "tuixDropdownObjectList",
           "declaration": {
-            "name": "regularIcon",
-            "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
+            "name": "tuixDropdownObjectList",
+            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts",
+      "path": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4938,15 +4938,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixIconButton',\n  component: 'tuix-icon-button',\n  argTypes: {\n    variant: {\n      control: 'inline-radio',\n      options: Object.values(MainVariant),\n    },\n    icon: {\n      control: 'select',\n      options: Object.values(IconName),\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n    onClick: { action: 'customClick' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n  ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n    >\n      <tuix-icon-button\n        variant=\"${args.variant}\"\n        icon=\"${args.icon}\"\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n        @customClick=\"${args.onClick}\"\n      />\n    </div>\n  `,\n}"
+          "default": "{\n  title: 'TuixDropdown',\n  component: 'tuix-dropdown',\n  argTypes: {\n    value: { control: 'text' },\n\n    options: {\n      control: 'select',\n      options: ['fruits', 'countries'],\n      mapping: {\n        fruits: fruits,\n        countries: countryPhoneArray,\n      },\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    placeholder: { control: 'text' },\n    title: { control: 'text' },\n    description: { control: 'text' },\n    descriptionType: {\n      control: 'select',\n      options: [...Object.values(DescriptionType), null],\n    },\n    dark: {\n      control: 'boolean',\n    },\n    type: {\n      control: 'select',\n      options: [...Object.values(DropdownType)],\n    },\n    onInputSingle: { action: 'input-single' },\n    onSelect: { action: 'select' },\n  },\n  render: (args: ArgTypes) => html`<div\n    style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n  ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n  >\n    <tuix-dropdown\n      ?disabled=\"${args.disabled}\"\n      .value=\"${args.value}\"\n      .options=\"${args.options}\"\n      placeholder=\"${args.placeholder}\"\n      title=\"${args.title}\"\n      .description=\"${args.description}\"\n      descriptionType=\"${args.descriptionType}\"\n      ?dark=\"${args.dark}\"\n      .type=\"${args.type}\"\n      @input-single=\"${args.onInputSingle}\"\n      @select=\"${args.onSelect}\"\n    >\n    </tuix-dropdown>\n  </div>`,\n}"
         },
         {
           "kind": "variable",
-          "name": "iconButton",
+          "name": "tuixDropdownExample",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    variant: MainVariant.PRIMARY,\n    icon: IconName.ARROW_DOWN,\n    disabled: false,\n    dark: false,\n  },\n}"
+          "default": "{\n  args: {\n    value: 'apple2',\n    disabled: false,\n    title: 'Title',\n    dark: false,\n    options: [\n      'apple',\n      'orange',\n      'tomato',\n      'apple2',\n      'orange2',\n      'tomato2',\n      'apple3',\n      'orange3',\n      'tomato3',\n    ],\n    type: DropdownType.SINGLE,\n  },\n}"
         }
       ],
       "exports": [
@@ -4955,15 +4955,15 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
+            "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "iconButton",
+          "name": "tuixDropdownExample",
           "declaration": {
-            "name": "iconButton",
-            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
+            "name": "tuixDropdownExample",
+            "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
           }
         }
       ]
@@ -5312,78 +5312,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-toast/enums/tuix-toast.enums.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "toastBgColorMap",
-          "type": {
-            "text": "Record<ToastTypeExcludingNone, string>"
-          },
-          "default": "{\n  [ToastType.TEXT]: Palette.WHITE,\n  [ToastType.WARNING]: Palette.VALIDATION_50,\n  [ToastType.ERROR]: Palette.ERROR_50,\n  [ToastType.SUCCESS]: Palette.SUCCESS_50,\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "toastBgDarkColorMap",
-          "type": {
-            "text": "Record<ToastTypeExcludingNone, string>"
-          },
-          "default": "{\n  [ToastType.TEXT]: DarkPalette.TOAST_TEXT,\n  [ToastType.WARNING]: DarkPalette.TOAST_WARNING,\n  [ToastType.ERROR]: DarkPalette.TOAST_ERROR,\n  [ToastType.SUCCESS]: DarkPalette.TOAST_SUCCESS,\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "iconPropertiesMap",
-          "type": {
-            "text": "Record<ToastTypeExcludingNone, IconProperties>"
-          },
-          "default": "{\n    [ToastType.TEXT]: {\n      name: IconName.ARROW_DOWN,\n      color: Palette.BLACK,\n    },\n    [ToastType.WARNING]: {\n      name: IconName.TRIANGLE_EXCLAMATION,\n      color: Palette.VALIDATION,\n    },\n    [ToastType.ERROR]: {\n      name: IconName.CIRCLE_EXCLAMATION,\n      color: Palette.ERROR,\n    },\n    [ToastType.SUCCESS]: {\n      name: IconName.CIRCLE_CHECK,\n      color: Palette.SUCCESS,\n    },\n  }"
-        },
-        {
-          "kind": "variable",
-          "name": "iconDarkPropertiesMap",
-          "type": {
-            "text": "Record<\n  ToastTypeExcludingNone,\n  IconProperties\n>"
-          },
-          "default": "{\n  [ToastType.TEXT]: {\n    name: IconName.ARROW_DOWN,\n    color: Palette.WHITE,\n  },\n  [ToastType.WARNING]: {\n    name: IconName.TRIANGLE_EXCLAMATION,\n    color: DarkPalette.VALIDATION,\n  },\n  [ToastType.ERROR]: {\n    name: IconName.CIRCLE_EXCLAMATION,\n    color: DarkPalette.ERROR,\n  },\n  [ToastType.SUCCESS]: {\n    name: IconName.CIRCLE_CHECK,\n    color: DarkPalette.SUCCESS,\n  },\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "toastBgColorMap",
-          "declaration": {
-            "name": "toastBgColorMap",
-            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "toastBgDarkColorMap",
-          "declaration": {
-            "name": "toastBgDarkColorMap",
-            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "iconPropertiesMap",
-          "declaration": {
-            "name": "iconPropertiesMap",
-            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "iconDarkPropertiesMap",
-          "declaration": {
-            "name": "iconDarkPropertiesMap",
-            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-text/enums/tuix-text.enums.ts",
@@ -5466,7 +5394,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-toast/stories/tuix-toast.stories.ts",
+      "path": "src/tuix-toggle-button/interfaces/tuix-toggle.interface.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-toggle-button/stories/tuix-toggle-button.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -5474,15 +5408,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixToast',\n  component: 'tuix-toast',\n  argTypes: {\n    type: {\n      control: 'select',\n      options: Object.values(ToastType),\n    },\n    dark: {\n      control: 'boolean',\n    },\n    visibilityDuration: {\n      control: 'number',\n    },\n    onClose: { action: 'on-close' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"height: 100vh; ${args.dark\n        ? `background-color: ${Palette.BLACK};`\n        : ''}\"\n    >\n      <tuix-toast\n        type=\"${args.type}\"\n        ?dark=\"${args.dark}\"\n        visibility-duration=\"${args.visibilityDuration}\"\n        @on-close=\"${args.onClose}\"\n      >\n        Lorem ipsum dolor sit amet consectetur. Sollicitudin id interdum\n        dignissim at orci. Augue vivamus arcu massa porta facilisi.\n      </tuix-toast>\n    </div>\n  `,\n}"
+          "default": "{\n  title: 'TuixToggleButton',\n  component: 'tuix-toggle-button',\n  argTypes: {\n    checked: {\n      control: 'boolean',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n    label: {\n      control: 'text',\n    },\n    labelSide: {\n      control: 'select',\n      options: Object.values(CheckboxLabelSide),\n    },\n    onChange: { action: 'change' },\n  },\n  render: (args: ArgTypes) => html`<div\n    style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n  ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n  >\n    <div\n      style=\"max-width: 300px; display: flex; gap: 16px; flex-direction: column\"\n    >\n      <tuix-toggle-button\n        ?checked=\"${args.checked}\"\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n        label=\"${args.label}\"\n        labelSide=\"${args.labelSide}\"\n        @change=\"${args.onChange}\"\n      ></tuix-toggle-button>\n      <tuix-toggle-button\n        ?checked=\"${args.checked}\"\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n        labelSide=\"${args.labelSide}\"\n        @change=\"${args.onChange}\"\n      >\n        <tuix-text\n          size=\"${TextSize.FieldPlaceholder}\"\n          color=\"${TextVariant.PRIMARY}\"\n          ?dark=\"${args.dark}\"\n        >\n          Label from slot using a long text with max-width container\n        </tuix-text>\n      </tuix-toggle-button>\n    </div>\n  </div>`,\n}"
         },
         {
           "kind": "variable",
-          "name": "toastExample",
+          "name": "tuixToggleExample",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    type: ToastType.TEXT,\n    dark: false,\n    visibilityDuration: 4000,\n  },\n}"
+          "default": "{\n  args: {\n    checked: false,\n    disabled: false,\n    dark: false,\n    label: 'Label from property',\n    labelSide: CheckboxLabelSide.RIGHT,\n  },\n}"
         }
       ],
       "exports": [
@@ -5491,28 +5425,94 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-toast/stories/tuix-toast.stories.ts"
+            "module": "src/tuix-toggle-button/stories/tuix-toggle-button.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "toastExample",
+          "name": "tuixToggleExample",
           "declaration": {
-            "name": "toastExample",
-            "module": "src/tuix-toast/stories/tuix-toast.stories.ts"
+            "name": "tuixToggleExample",
+            "module": "src/tuix-toggle-button/stories/tuix-toggle-button.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/utils/interfaces/detail-value.interface.ts",
-      "declarations": [],
-      "exports": []
+      "path": "src/tuix-toast/enums/tuix-toast.enums.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "toastBgColorMap",
+          "type": {
+            "text": "Record<ToastTypeExcludingNone, string>"
+          },
+          "default": "{\n  [ToastType.TEXT]: Palette.WHITE,\n  [ToastType.WARNING]: Palette.VALIDATION_50,\n  [ToastType.ERROR]: Palette.ERROR_50,\n  [ToastType.SUCCESS]: Palette.SUCCESS_50,\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "toastBgDarkColorMap",
+          "type": {
+            "text": "Record<ToastTypeExcludingNone, string>"
+          },
+          "default": "{\n  [ToastType.TEXT]: DarkPalette.TOAST_TEXT,\n  [ToastType.WARNING]: DarkPalette.TOAST_WARNING,\n  [ToastType.ERROR]: DarkPalette.TOAST_ERROR,\n  [ToastType.SUCCESS]: DarkPalette.TOAST_SUCCESS,\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "iconPropertiesMap",
+          "type": {
+            "text": "Record<ToastTypeExcludingNone, IconProperties>"
+          },
+          "default": "{\n    [ToastType.TEXT]: {\n      name: IconName.ARROW_DOWN,\n      color: Palette.BLACK,\n    },\n    [ToastType.WARNING]: {\n      name: IconName.TRIANGLE_EXCLAMATION,\n      color: Palette.VALIDATION,\n    },\n    [ToastType.ERROR]: {\n      name: IconName.CIRCLE_EXCLAMATION,\n      color: Palette.ERROR,\n    },\n    [ToastType.SUCCESS]: {\n      name: IconName.CIRCLE_CHECK,\n      color: Palette.SUCCESS,\n    },\n  }"
+        },
+        {
+          "kind": "variable",
+          "name": "iconDarkPropertiesMap",
+          "type": {
+            "text": "Record<\n  ToastTypeExcludingNone,\n  IconProperties\n>"
+          },
+          "default": "{\n  [ToastType.TEXT]: {\n    name: IconName.ARROW_DOWN,\n    color: Palette.WHITE,\n  },\n  [ToastType.WARNING]: {\n    name: IconName.TRIANGLE_EXCLAMATION,\n    color: DarkPalette.VALIDATION,\n  },\n  [ToastType.ERROR]: {\n    name: IconName.CIRCLE_EXCLAMATION,\n    color: DarkPalette.ERROR,\n  },\n  [ToastType.SUCCESS]: {\n    name: IconName.CIRCLE_CHECK,\n    color: DarkPalette.SUCCESS,\n  },\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "toastBgColorMap",
+          "declaration": {
+            "name": "toastBgColorMap",
+            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "toastBgDarkColorMap",
+          "declaration": {
+            "name": "toastBgDarkColorMap",
+            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "iconPropertiesMap",
+          "declaration": {
+            "name": "iconPropertiesMap",
+            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "iconDarkPropertiesMap",
+          "declaration": {
+            "name": "iconDarkPropertiesMap",
+            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-toggle-button/stories/tuix-toggle-button.stories.ts",
+      "path": "src/tuix-toast/stories/tuix-toast.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -5520,15 +5520,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixToggleButton',\n  component: 'tuix-toggle-button',\n  argTypes: {\n    checked: {\n      control: 'boolean',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n    label: {\n      control: 'text',\n    },\n    labelSide: {\n      control: 'select',\n      options: Object.values(CheckboxLabelSide),\n    },\n    onChange: { action: 'change' },\n  },\n  render: (args: ArgTypes) => html`<div\n    style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n  ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n  >\n    <div\n      style=\"max-width: 300px; display: flex; gap: 16px; flex-direction: column\"\n    >\n      <tuix-toggle-button\n        ?checked=\"${args.checked}\"\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n        label=\"${args.label}\"\n        labelSide=\"${args.labelSide}\"\n        @change=\"${args.onChange}\"\n      ></tuix-toggle-button>\n      <tuix-toggle-button\n        ?checked=\"${args.checked}\"\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n        labelSide=\"${args.labelSide}\"\n        @change=\"${args.onChange}\"\n      >\n        <tuix-text\n          size=\"${TextSize.FieldPlaceholder}\"\n          color=\"${TextVariant.PRIMARY}\"\n          ?dark=\"${args.dark}\"\n        >\n          Label from slot using a long text with max-width container\n        </tuix-text>\n      </tuix-toggle-button>\n    </div>\n  </div>`,\n}"
+          "default": "{\n  title: 'TuixToast',\n  component: 'tuix-toast',\n  argTypes: {\n    type: {\n      control: 'select',\n      options: Object.values(ToastType),\n    },\n    dark: {\n      control: 'boolean',\n    },\n    visibilityDuration: {\n      control: 'number',\n    },\n    onClose: { action: 'on-close' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"height: 100vh; ${args.dark\n        ? `background-color: ${Palette.BLACK};`\n        : ''}\"\n    >\n      <tuix-toast\n        type=\"${args.type}\"\n        ?dark=\"${args.dark}\"\n        visibility-duration=\"${args.visibilityDuration}\"\n        @on-close=\"${args.onClose}\"\n      >\n        Lorem ipsum dolor sit amet consectetur. Sollicitudin id interdum\n        dignissim at orci. Augue vivamus arcu massa porta facilisi.\n      </tuix-toast>\n    </div>\n  `,\n}"
         },
         {
           "kind": "variable",
-          "name": "tuixToggleExample",
+          "name": "toastExample",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    checked: false,\n    disabled: false,\n    dark: false,\n    label: 'Label from property',\n    labelSide: CheckboxLabelSide.RIGHT,\n  },\n}"
+          "default": "{\n  args: {\n    type: ToastType.TEXT,\n    dark: false,\n    visibilityDuration: 4000,\n  },\n}"
         }
       ],
       "exports": [
@@ -5537,22 +5537,22 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-toggle-button/stories/tuix-toggle-button.stories.ts"
+            "module": "src/tuix-toast/stories/tuix-toast.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "tuixToggleExample",
+          "name": "toastExample",
           "declaration": {
-            "name": "tuixToggleExample",
-            "module": "src/tuix-toggle-button/stories/tuix-toggle-button.stories.ts"
+            "name": "toastExample",
+            "module": "src/tuix-toast/stories/tuix-toast.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-toggle-button/interfaces/tuix-toggle.interface.ts",
+      "path": "src/utils/interfaces/detail-value.interface.ts",
       "declarations": [],
       "exports": []
     }