npm - tuix-webcomponents - Versions diffs - 0.0.27 → 0.0.28 - Mend

tuix-webcomponents 0.0.27 → 0.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/custom-elements.json +1367 -1367
package/package.json +1 -1

package/custom-elements.json CHANGED Viewed

@@ -427,344 +427,480 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-checkbox/TuixCheckbox.styles.ts",
+      "path": "src/tuix-dropdown/TuixDropdown.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`"
+          "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": "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`"
+          "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": "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`"
+          "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": "hostStyles",
-          "declaration": {
-            "name": "hostStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "checkboxContainerStyles",
+          "name": "dropdownHostStyles",
           "declaration": {
-            "name": "checkboxContainerStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+            "name": "dropdownHostStyles",
+            "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
           }
         },
         {
           "kind": "js",
-          "name": "checkboxCheckmarkStyles",
+          "name": "dropdownMainContainerStyles",
           "declaration": {
-            "name": "checkboxCheckmarkStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+            "name": "dropdownMainContainerStyles",
+            "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
           }
         },
         {
           "kind": "js",
-          "name": "checkboxLabelStyles",
+          "name": "dropdownOptionStyles",
           "declaration": {
-            "name": "checkboxLabelStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+            "name": "dropdownOptionStyles",
+            "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-checkbox/TuixCheckbox.ts",
+      "path": "src/tuix-dropdown/TuixDropdown.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "TuixCheckbox",
+          "name": "TuixDropdown",
           "members": [
             {
               "kind": "field",
-              "name": "checked",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "TuixDropdownOption | undefined"
               },
-              "default": "false",
-              "attribute": "checked"
+              "default": "undefined",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "options",
               "type": {
-                "text": "boolean"
+                "text": "TuixDropdownOption[]"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
+              "default": "[]",
+              "attribute": "options"
             },
             {
               "kind": "field",
-              "name": "dark",
+              "name": "placeholder",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "attribute": "dark",
-              "reflects": true
+              "default": "''",
+              "attribute": "placeholder"
             },
             {
               "kind": "field",
-              "name": "error",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "error",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "dark",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "attribute": "label"
+              "default": "false",
+              "attribute": "dark",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "labelSide",
+              "name": "description",
               "type": {
-                "text": "CheckboxLabelSide"
+                "text": "string | undefined"
               },
-              "attribute": "labelSide"
+              "attribute": "description"
             },
             {
-              "kind": "method",
-              "name": "_onCheckboxChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "InputEvent"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "descriptionType",
+              "attribute": "descriptionType"
             },
             {
-              "kind": "method",
-              "name": "_getIconMode",
-              "privacy": "private"
+              "kind": "field",
+              "name": "type",
+              "attribute": "type"
             },
             {
-              "kind": "method",
-              "name": "_getFullContainerClasses",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "ClassInfo"
-                }
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "checked",
+              "kind": "field",
+              "name": "_value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "fieldName": "checked"
+              "privacy": "private",
+              "default": "''"
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "_isOptionsVisible",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "fieldName": "disabled"
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "name": "dark",
+              "kind": "field",
+              "name": "_searchingOption",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "fieldName": "dark"
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "name": "error",
+              "kind": "field",
+              "name": "_extendedOptions",
               "type": {
-                "text": "boolean"
+                "text": "TuixDropdownExtendedOption[]"
               },
-              "default": "false",
-              "fieldName": "error"
+              "default": "[]"
             },
             {
-              "name": "label",
+              "kind": "field",
+              "name": "_optionsContainer",
               "type": {
-                "text": "string"
+                "text": "HTMLElement | undefined"
               },
-              "default": "''",
-              "fieldName": "label"
+              "privacy": "private"
             },
             {
-              "name": "labelSide",
+              "kind": "field",
+              "name": "_inputDropdown",
               "type": {
-                "text": "CheckboxLabelSide"
+                "text": "HTMLElement | undefined"
               },
-              "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",
-          "declaration": {
-            "name": "TuixCheckbox",
-            "module": "src/tuix-checkbox/TuixCheckbox.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-button/TuixBaseButton.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "TuixBaseButton",
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "attribute": "variant",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "_previousSelectedOption",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement | null"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
+              "privacy": "private",
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "dark",
+              "name": "_previousFocusedOption",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement | null"
               },
-              "default": "false",
-              "attribute": "dark",
-              "reflects": true
+              "privacy": "private",
+              "default": "null"
             },
             {
-              "kind": "field",
-              "name": "iconColor",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "''"
+              "kind": "method",
+              "name": "_onEnterPress",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "_getTextColor",
-              "privacy": "protected"
+              "name": "_onKeyDownOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "_updateIconColor",
+              "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": "_getOptionName",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "string"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "TuixDropdownOption"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "_handleClick",
-              "privacy": "protected"
+              "name": "_getOptionValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TuixDropdownPlainOption"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "TuixDropdownOption"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "_iconTemplate",
-              "privacy": "protected",
+              "name": "_findIndex",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "number"
                 }
               },
               "parameters": [
                 {
-                  "name": "iconName",
+                  "name": "option",
                   "type": {
-                    "text": "IconName"
+                    "text": "TuixDropdownOption"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleInputBase",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
                   }
                 },
                 {
-                  "name": "iconSize",
+                  "name": "eventName",
                   "type": {
-                    "text": "IconSizeVariant"
+                    "text": "string"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_buttonContent",
-              "privacy": "protected",
+              "name": "_extendOptionsList",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "value",
+                  "default": "''"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleArrowDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleArrowUp",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_handleClickOutside",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_focusTargetOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "targetOption",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "extrict",
+                  "default": "true"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_toggleOptions",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_focusOptionsContainer",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_unselectPreviousOption",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_hasCompleteDescription",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_getOptionsContainerClasses",
+              "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": "customClick",
+              "name": "select",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "eventName",
               "type": {
                 "text": "CustomEvent"
               }
@@ -772,8 +908,39 @@
           ],
           "attributes": [
             {
-              "name": "variant",
-              "fieldName": "variant"
+              "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",
@@ -790,205 +957,352 @@
               },
               "default": "false",
               "fieldName": "dark"
+            },
+            {
+              "name": "description",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "description"
+            },
+            {
+              "name": "descriptionType",
+              "fieldName": "descriptionType"
+            },
+            {
+              "name": "type",
+              "fieldName": "type"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
+          "tagName": "tuix-dropdown",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TuixBaseButton",
+          "name": "TuixDropdown",
           "declaration": {
-            "name": "TuixBaseButton",
-            "module": "src/tuix-button/TuixBaseButton.ts"
+            "name": "TuixDropdown",
+            "module": "src/tuix-dropdown/TuixDropdown.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "tuix-dropdown",
+          "declaration": {
+            "name": "TuixDropdown",
+            "module": "src/tuix-dropdown/TuixDropdown.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-button/TuixButton.styles.ts",
+      "path": "src/tuix-checkbox/TuixCheckbox.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`"
+          "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": "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`"
+          "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": "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`"
+          "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": "hostButtonStyles",
+          "name": "hostStyles",
           "declaration": {
-            "name": "hostButtonStyles",
-            "module": "src/tuix-button/TuixButton.styles.ts"
+            "name": "hostStyles",
+            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
           }
         },
         {
           "kind": "js",
-          "name": "buttonSizeStyles",
+          "name": "checkboxContainerStyles",
           "declaration": {
-            "name": "buttonSizeStyles",
-            "module": "src/tuix-button/TuixButton.styles.ts"
+            "name": "checkboxContainerStyles",
+            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
           }
         },
         {
           "kind": "js",
-          "name": "buttonColorStyles",
+          "name": "checkboxCheckmarkStyles",
           "declaration": {
-            "name": "buttonColorStyles",
-            "module": "src/tuix-button/TuixButton.styles.ts"
+            "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-button/TuixButton.ts",
+      "path": "src/tuix-checkbox/TuixCheckbox.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "TuixButton",
+          "name": "TuixCheckbox",
           "members": [
             {
               "kind": "field",
-              "name": "full",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "full",
+              "attribute": "checked"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "iconRight",
+              "name": "dark",
               "type": {
-                "text": "IconName | undefined"
+                "text": "boolean"
               },
-              "attribute": "iconRight"
+              "default": "false",
+              "attribute": "dark",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "iconLeft",
+              "name": "error",
               "type": {
-                "text": "IconName | undefined"
+                "text": "boolean"
               },
-              "attribute": "iconLeft"
+              "default": "false",
+              "attribute": "error",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "labelSide",
+              "type": {
+                "text": "CheckboxLabelSide"
+              },
+              "attribute": "labelSide"
             },
             {
               "kind": "method",
-              "name": "_updateIconColor",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
+              "name": "_onCheckboxChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "InputEvent"
+                  }
                 }
-              },
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "_buttonContent",
-              "privacy": "protected",
+              "name": "_getIconMode",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_getFullContainerClasses",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "ClassInfo"
                 }
-              },
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
               }
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "field",
-              "name": "variant",
-              "attribute": "variant",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
               }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "checked"
             },
             {
-              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
               "name": "dark",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "dark",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "fieldName": "dark"
             },
             {
-              "kind": "field",
-              "name": "iconColor",
+              "name": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "error"
+            },
+            {
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "privacy": "protected",
               "default": "''",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "fieldName": "label"
             },
             {
-              "kind": "method",
-              "name": "_getTextColor",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "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",
+          "declaration": {
+            "name": "TuixCheckbox",
+            "module": "src/tuix-checkbox/TuixCheckbox.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-button/TuixBaseButton.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "TuixBaseButton",
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "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": "iconColor",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "''"
             },
             {
               "kind": "method",
-              "name": "_handleClick",
+              "name": "_getTextColor",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "_updateIconColor",
               "privacy": "protected",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             },
+            {
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "_iconTemplate",
@@ -1011,43 +1325,31 @@
                     "text": "IconSizeVariant"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_buttonContent",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
               }
             }
           ],
-          "attributes": [
-            {
-              "name": "full",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "full"
-            },
-            {
-              "name": "iconRight",
-              "type": {
-                "text": "IconName | undefined"
-              },
-              "fieldName": "iconRight"
-            },
+          "events": [
             {
-              "name": "iconLeft",
+              "name": "customClick",
               "type": {
-                "text": "IconName | undefined"
-              },
-              "fieldName": "iconLeft"
-            },
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
             {
               "name": "variant",
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "fieldName": "variant"
             },
             {
               "name": "disabled",
@@ -1055,11 +1357,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "fieldName": "disabled"
             },
             {
               "name": "dark",
@@ -1067,568 +1365,265 @@
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "dark",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "fieldName": "dark"
             }
           ],
           "superclass": {
-            "name": "TuixBaseButton",
-            "module": "/src/tuix-button/TuixBaseButton"
+            "name": "LitElement",
+            "package": "lit"
           },
-          "tagName": "tuix-button",
-          "customElement": true,
-          "events": [
-            {
-              "name": "customClick",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
-            }
-          ]
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TuixButton",
-          "declaration": {
-            "name": "TuixButton",
-            "module": "src/tuix-button/TuixButton.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "tuix-button",
+          "name": "TuixBaseButton",
           "declaration": {
-            "name": "TuixButton",
-            "module": "src/tuix-button/TuixButton.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": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dark",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "_updateIconColor",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "false",
-              "attribute": "dark",
-              "reflects": true
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "description",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "_buttonContent",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
               },
-              "attribute": "description"
-            },
-            {
-              "kind": "field",
-              "name": "descriptionType",
-              "attribute": "descriptionType"
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "attribute": "type"
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "_value",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "''"
+              "name": "variant",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "_isOptionsVisible",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "_searchingOption",
+              "name": "dark",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "_extendedOptions",
-              "type": {
-                "text": "TuixDropdownExtendedOption[]"
-              },
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "_optionsContainer",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_inputDropdown",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_previousSelectedOption",
-              "type": {
-                "text": "HTMLElement | null"
-              },
-              "privacy": "private",
-              "default": "null"
+              "default": "false",
+              "attribute": "dark",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "_previousFocusedOption",
+              "name": "iconColor",
               "type": {
-                "text": "HTMLElement | null"
+                "text": "string"
               },
-              "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"
-                  }
-                }
-              ]
+              "default": "''",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "_handleSelectEvent",
+              "name": "_getTextColor",
               "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent | KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_handleBlur",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_getOptionName",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "TuixDropdownOption"
-                  }
-                }
-              ]
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "_getOptionValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "TuixDropdownPlainOption"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "TuixDropdownOption"
-                  }
-                }
-              ]
+              "name": "_handleClick",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "_findIndex",
-              "privacy": "private",
+              "name": "_iconTemplate",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "number"
+                  "text": "TemplateResult"
                 }
               },
               "parameters": [
                 {
-                  "name": "option",
-                  "type": {
-                    "text": "TuixDropdownOption"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_handleInputBase",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
+                  "name": "iconName",
                   "type": {
-                    "text": "CustomEvent"
+                    "text": "IconName"
                   }
                 },
                 {
-                  "name": "eventName",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_extendOptionsList",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "value",
-                  "default": "''"
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_handleArrowDown",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_handleArrowUp",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_handleClickOutside",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_focusTargetOption",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "targetOption",
+                  "name": "iconSize",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "IconSizeVariant"
                   }
-                },
-                {
-                  "name": "extrict",
-                  "default": "true"
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_toggleOptions",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_focusOptionsContainer",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_unselectPreviousOption",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_hasCompleteDescription",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
                 }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_getOptionsContainerClasses",
-              "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",
-              "type": {
-                "text": "CustomEvent"
+              ],
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
               }
             }
           ],
           "attributes": [
             {
-              "name": "value",
-              "type": {
-                "text": "TuixDropdownOption | undefined"
-              },
-              "default": "undefined",
-              "resolveInitializer": {
-                "module": "src/tuix-dropdown/TuixDropdown.ts"
-              },
-              "fieldName": "value"
-            },
-            {
-              "name": "options",
+              "name": "full",
               "type": {
-                "text": "TuixDropdownOption[]"
+                "text": "boolean"
               },
-              "default": "[]",
-              "fieldName": "options"
+              "default": "false",
+              "fieldName": "full"
             },
             {
-              "name": "placeholder",
+              "name": "iconRight",
               "type": {
-                "text": "string"
+                "text": "IconName | undefined"
               },
-              "default": "''",
-              "fieldName": "placeholder"
+              "fieldName": "iconRight"
             },
             {
-              "name": "title",
+              "name": "iconLeft",
               "type": {
-                "text": "string"
+                "text": "IconName | undefined"
               },
-              "default": "''",
-              "fieldName": "title"
+              "fieldName": "iconLeft"
+            },
+            {
+              "name": "variant",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
               "name": "disabled",
@@ -1636,7 +1631,11 @@
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "disabled"
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
               "name": "dark",
@@ -1644,47 +1643,48 @@
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "dark"
-            },
-            {
-              "name": "description",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "description"
-            },
-            {
-              "name": "descriptionType",
-              "fieldName": "descriptionType"
-            },
-            {
-              "name": "type",
-              "fieldName": "type"
+              "fieldName": "dark",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "TuixBaseButton",
+            "module": "/src/tuix-button/TuixBaseButton"
           },
-          "tagName": "tuix-dropdown",
-          "customElement": true
+          "tagName": "tuix-button",
+          "customElement": true,
+          "events": [
+            {
+              "name": "customClick",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TuixDropdown",
+          "name": "TuixButton",
           "declaration": {
-            "name": "TuixDropdown",
-            "module": "src/tuix-dropdown/TuixDropdown.ts"
+            "name": "TuixButton",
+            "module": "src/tuix-button/TuixButton.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "tuix-dropdown",
+          "name": "tuix-button",
           "declaration": {
-            "name": "TuixDropdown",
-            "module": "src/tuix-dropdown/TuixDropdown.ts"
+            "name": "TuixButton",
+            "module": "src/tuix-button/TuixButton.ts"
           }
         }
       ]
@@ -1813,75 +1813,292 @@
             },
             {
               "kind": "method",
-              "name": "_getSelectedFill",
-              "privacy": "private"
+              "name": "_getSelectedFill",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_getIconTemplate",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "fieldName": "name"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "string | TextVariant | undefined"
+              },
+              "fieldName": "color"
+            },
+            {
+              "name": "size",
+              "fieldName": "size"
+            },
+            {
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dark"
+            },
+            {
+              "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": "field",
+              "name": "icon",
+              "attribute": "icon"
+            },
+            {
+              "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",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "dark",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "iconColor",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "''",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_getTextColor",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "_getIconTemplate",
-              "privacy": "private",
+              "name": "_iconTemplate",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "TemplateResult"
                 }
+              },
+              "parameters": [
+                {
+                  "name": "iconName",
+                  "type": {
+                    "text": "IconName"
+                  }
+                },
+                {
+                  "name": "iconSize",
+                  "type": {
+                    "text": "IconSizeVariant"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
               }
             }
           ],
           "attributes": [
             {
-              "name": "name",
-              "fieldName": "name"
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "string | TextVariant | undefined"
-              },
-              "fieldName": "color"
+              "name": "icon",
+              "fieldName": "icon"
             },
             {
-              "name": "size",
-              "fieldName": "size"
+              "name": "variant",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
-              "name": "dark",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "dark"
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             },
             {
-              "name": "fill",
+              "name": "dark",
               "type": {
-                "text": "string | TextVariant | undefined"
+                "text": "boolean"
               },
-              "fieldName": "fill"
+              "default": "false",
+              "fieldName": "dark",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "TuixBaseButton",
+            "module": "/src/tuix-button/TuixBaseButton"
           },
-          "tagName": "tuix-icon",
-          "customElement": true
+          "tagName": "tuix-icon-button",
+          "customElement": true,
+          "events": [
+            {
+              "name": "customClick",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TuixIcon",
+          "name": "TuixIconButton",
           "declaration": {
-            "name": "TuixIcon",
-            "module": "src/tuix-icon/TuixIcon.ts"
+            "name": "TuixIconButton",
+            "module": "src/tuix-icon-button/TuixIconButton.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "tuix-icon",
+          "name": "tuix-icon-button",
           "declaration": {
-            "name": "TuixIcon",
-            "module": "src/tuix-icon/TuixIcon.ts"
+            "name": "TuixIconButton",
+            "module": "src/tuix-icon-button/TuixIconButton.ts"
           }
         }
       ]
@@ -2408,317 +2625,100 @@
               },
               "fieldName": "iconRight"
             },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "value"
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "placeholder"
-            },
-            {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "title"
-            },
-            {
-              "name": "type",
-              "fieldName": "type"
-            },
-            {
-              "name": "maxlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "fieldName": "maxlength"
-            },
-            {
-              "name": "description",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "description"
-            },
-            {
-              "name": "descriptionType",
-              "fieldName": "descriptionType"
-            },
-            {
-              "name": "dark",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "dark"
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "readonly"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "autofocus"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "tuix-input",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "TuixInput",
-          "declaration": {
-            "name": "TuixInput",
-            "module": "src/tuix-input/TuixInput.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "tuix-input",
-          "declaration": {
-            "name": "TuixInput",
-            "module": "src/tuix-input/TuixInput.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-icon-button/TuixIconButton.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "TuixIconButton",
-          "members": [
-            {
-              "kind": "field",
-              "name": "icon",
-              "attribute": "icon"
-            },
-            {
-              "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",
+            {
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "default": "''",
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "dark",
+              "name": "placeholder",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "attribute": "dark",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "default": "''",
+              "fieldName": "placeholder"
             },
             {
-              "kind": "field",
-              "name": "iconColor",
+              "name": "title",
               "type": {
                 "text": "string"
               },
-              "privacy": "protected",
               "default": "''",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "fieldName": "title"
             },
             {
-              "kind": "method",
-              "name": "_getTextColor",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "name": "type",
+              "fieldName": "type"
             },
             {
-              "kind": "method",
-              "name": "_handleClick",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "maxlength"
             },
             {
-              "kind": "method",
-              "name": "_iconTemplate",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
+              "name": "description",
+              "type": {
+                "text": "string | undefined"
               },
-              "parameters": [
-                {
-                  "name": "iconName",
-                  "type": {
-                    "text": "IconName"
-                  }
-                },
-                {
-                  "name": "iconSize",
-                  "type": {
-                    "text": "IconSizeVariant"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
-            }
-          ],
-          "attributes": [
+              "fieldName": "description"
+            },
             {
-              "name": "icon",
-              "fieldName": "icon"
+              "name": "descriptionType",
+              "fieldName": "descriptionType"
             },
             {
-              "name": "variant",
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dark"
             },
             {
-              "name": "disabled",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "fieldName": "readonly"
             },
             {
-              "name": "dark",
+              "name": "autofocus",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "dark",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
+              "fieldName": "autofocus"
             }
           ],
           "superclass": {
-            "name": "TuixBaseButton",
-            "module": "/src/tuix-button/TuixBaseButton"
+            "name": "LitElement",
+            "package": "lit"
           },
-          "tagName": "tuix-icon-button",
-          "customElement": true,
-          "events": [
-            {
-              "name": "customClick",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
-            }
-          ]
+          "tagName": "tuix-input",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TuixIconButton",
+          "name": "TuixInput",
           "declaration": {
-            "name": "TuixIconButton",
-            "module": "src/tuix-icon-button/TuixIconButton.ts"
+            "name": "TuixInput",
+            "module": "src/tuix-input/TuixInput.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "tuix-icon-button",
+          "name": "tuix-input",
           "declaration": {
-            "name": "TuixIconButton",
-            "module": "src/tuix-icon-button/TuixIconButton.ts"
+            "name": "TuixInput",
+            "module": "src/tuix-input/TuixInput.ts"
           }
         }
       ]
@@ -3856,74 +3856,56 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-toast/TuixToast.styles.ts",
+      "path": "src/tuix-text/TuixText.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`"
-        },
-        {
-          "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": "linkFontStyles",
+          "default": "css`\n  ${unsafeCSS(`\n  ${slottedClassName(TextSize.Link)} {\n    font-family: 'Rubik', sans-serif;\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.Link)} {\n      font-size: 0.938rem;\n      line-height: 1.125rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    ${slottedClassName(TextSize.Link)} {\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\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": "textStyles",
+          "default": "css`\n  ${unsafeCSS(`\n  ${slottedClassName(TextSize.XXL)} {\n    font-size: 6rem;\n    font-weight: 600;\n    line-height: 6.25rem;\n  }\n  ${slottedClassName(TextSize.XL)} {\n    font-size: 3.375rem;\n    font-weight: 600;\n    line-height: 3.688rem;\n  }\n\n  ${slottedClassName(TextSize.L)} {\n    font-size: 2.813rem;\n    font-weight: 600;\n    line-height: 3.375rem;\n  }\n\n  ${slottedClassName(TextSize.M)} {\n    font-size: 2.313rem;\n    font-weight: 600;\n    line-height: 2.75rem;\n  }\n\n  ${slottedClassName(TextSize.S)} {\n    font-size: 1.938rem;\n    font-weight: 600;\n    line-height: 2.313rem;\n  }\n\n  ${slottedClassName(TextSize.XS)} {\n    font-size: 1.313rem;\n    font-weight: 600;\n    line-height: 1.563rem;\n  }\n\n  ${slottedClassName(TextSize.Body1)} {\n    font-size: 1.125rem;\n    font-weight: 300;\n    line-height: 1.688rem;\n  }\n\n  ${slottedClassName(TextSize.Body2)} {\n    font-size: 0.938rem;\n    font-weight: 300;\n    line-height: 1.313rem;\n  }\n\n  ${slottedClassName(TextSize.BulletList)} {\n    font-size: 1.125rem;\n    font-weight: 300;\n    line-height: 1.375rem;\n  }\n\n  ${slottedClassName(TextSize.FieldPlaceholder)} {\n    font-size: 1rem;\n    font-weight: 300;\n    line-height: 1.25rem;\n  }\n\n  ${slottedClassName(TextSize.FieldTitle)} {\n    font-size: 0.75rem;\n    font-weight: 300;\n    line-height: 0.875rem;\n  }\n\n  ${slottedClassName(TextSize.FieldDescription)} {\n    font-size: 0.75rem;\n    font-weight: 300;\n    line-height: 0.875rem;\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    ${slottedClassName(TextSize.XXL)} {\n      font-size: 3rem;\n      font-weight: 600;\n      line-height: 3.3125rem;\n    }\n    ${slottedClassName(TextSize.XL)} {\n      font-size: 3rem;\n      line-height: 3.313rem;\n    }\n    ${slottedClassName(TextSize.L)} {\n      font-size: 2.5rem;\n      line-height: 3rem;\n    }\n    ${slottedClassName(TextSize.M)} {\n      font-size: 2.063rem;\n      line-height: 2.5rem;\n    }\n    ${slottedClassName(TextSize.S)} {\n      font-size: 1.75rem;\n      line-height: 2.125rem;\n    }\n    ${slottedClassName(TextSize.XS)} {\n      font-size: 1.188rem;\n      line-height: 1.438rem;\n    }\n\n    ${slottedClassName(TextSize.Body1)} {\n      font-size: 1rem;\n      line-height: 1.5rem;\n    }\n\n    ${slottedClassName(TextSize.Body2)} {\n      font-size: 0.875rem;\n      line-height: 1.125rem;\n    }\n\n    ${slottedClassName(TextSize.BulletList)} {\n      font-size: 1rem;\n      line-height: 1.1875rem;\n    }\n\n    ${slottedClassName(TextSize.FieldPlaceholder)} {\n      font-size: 0.938rem;\n      line-height: 1.125rem;\n    }\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    ${slottedClassName(TextSize.XXL)} {\n      font-size: 1.8125rem;\n      font-weight: 600;\n      line-height: 2rem;\n    }\n    ${slottedClassName(TextSize.XL)} {\n      font-size: 2.625rem;\n      line-height: 2.875rem;\n    }\n    ${slottedClassName(TextSize.L)} {\n      font-size: 2.188rem;\n      line-height: 2.4375rem;\n    }\n    ${slottedClassName(TextSize.M)} {\n      font-size: 1.813rem;\n      line-height: 2rem;\n    }\n    ${slottedClassName(TextSize.S)} {\n      font-size: 1.5rem;\n      line-height: 1.625rem;\n    }\n    ${slottedClassName(TextSize.XS)} {\n      font-size: 1.063rem;\n      line-height: 1.1875rem;\n    }\n    ${slottedClassName(TextSize.Body1)} {\n      font-size: 0.875rem;\n      font-weight: 300;\n      line-height: 1.313rem;\n    }\n    ${slottedClassName(TextSize.Body2)} {\n      font-size: 0.75rem;\n      line-height: 1rem;\n    }\n    ${slottedClassName(TextSize.BulletList)} {\n      font-size: 0.875rem;\n      font-weight: 300;\n      line-height: 1.0625rem;\n    }\n    ${slottedClassName(TextSize.FieldPlaceholder)} {\n      font-size: 0.875rem;\n      font-weight: 300;\n      line-height: 1rem;\n    }\n  }\n`)}\n`"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "commonToastStyles",
-          "declaration": {
-            "name": "commonToastStyles",
-            "module": "src/tuix-toast/TuixToast.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "tabletToastStyles",
+          "name": "linkFontStyles",
           "declaration": {
-            "name": "tabletToastStyles",
-            "module": "src/tuix-toast/TuixToast.styles.ts"
+            "name": "linkFontStyles",
+            "module": "src/tuix-text/TuixText.styles.ts"
           }
         },
         {
           "kind": "js",
-          "name": "mobileToastStyles",
+          "name": "textStyles",
           "declaration": {
-            "name": "mobileToastStyles",
-            "module": "src/tuix-toast/TuixToast.styles.ts"
+            "name": "textStyles",
+            "module": "src/tuix-text/TuixText.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-toast/TuixToast.ts",
+      "path": "src/tuix-text/TuixText.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "TuixToast",
+          "name": "TuixText",
           "members": [
             {
               "kind": "field",
-              "name": "type",
-              "attribute": "type",
-              "reflects": true
+              "name": "size",
+              "attribute": "size"
             },
             {
               "kind": "field",
-              "name": "visibilityDuration",
-              "type": {
-                "text": "number"
-              },
-              "default": "4000",
-              "attribute": "visibility-duration"
+              "name": "color",
+              "attribute": "color"
             },
             {
               "kind": "field",
@@ -3935,19 +3917,9 @@
               "attribute": "dark",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "lastType",
-              "default": "ToastType.SUCCESS"
-            },
             {
               "kind": "method",
-              "name": "_handleOnClose",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_saveType",
+              "name": "_getTextColor",
               "privacy": "private"
             },
             {
@@ -3957,30 +3929,18 @@
             },
             {
               "kind": "field",
-              "name": "_getIcon",
+              "name": "_getClassMap",
               "privacy": "private"
             }
           ],
-          "events": [
-            {
-              "name": "on-close",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
           "attributes": [
             {
-              "name": "type",
-              "fieldName": "type"
+              "name": "size",
+              "fieldName": "size"
             },
             {
-              "name": "visibility-duration",
-              "type": {
-                "text": "number"
-              },
-              "default": "4000",
-              "fieldName": "visibilityDuration"
+              "name": "color",
+              "fieldName": "color"
             },
             {
               "name": "dark",
@@ -3995,81 +3955,99 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "tuix-toast",
+          "tagName": "tuix-text",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TuixToast",
+          "name": "TuixText",
           "declaration": {
-            "name": "TuixToast",
-            "module": "src/tuix-toast/TuixToast.ts"
+            "name": "TuixText",
+            "module": "src/tuix-text/TuixText.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "tuix-toast",
+          "name": "tuix-text",
           "declaration": {
-            "name": "TuixToast",
-            "module": "src/tuix-toast/TuixToast.ts"
+            "name": "TuixText",
+            "module": "src/tuix-text/TuixText.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-text/TuixText.styles.ts",
+      "path": "src/tuix-toast/TuixToast.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "linkFontStyles",
-          "default": "css`\n  ${unsafeCSS(`\n  ${slottedClassName(TextSize.Link)} {\n    font-family: 'Rubik', sans-serif;\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.Link)} {\n      font-size: 0.938rem;\n      line-height: 1.125rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    ${slottedClassName(TextSize.Link)} {\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n  }\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": "textStyles",
-          "default": "css`\n  ${unsafeCSS(`\n  ${slottedClassName(TextSize.XXL)} {\n    font-size: 6rem;\n    font-weight: 600;\n    line-height: 6.25rem;\n  }\n  ${slottedClassName(TextSize.XL)} {\n    font-size: 3.375rem;\n    font-weight: 600;\n    line-height: 3.688rem;\n  }\n\n  ${slottedClassName(TextSize.L)} {\n    font-size: 2.813rem;\n    font-weight: 600;\n    line-height: 3.375rem;\n  }\n\n  ${slottedClassName(TextSize.M)} {\n    font-size: 2.313rem;\n    font-weight: 600;\n    line-height: 2.75rem;\n  }\n\n  ${slottedClassName(TextSize.S)} {\n    font-size: 1.938rem;\n    font-weight: 600;\n    line-height: 2.313rem;\n  }\n\n  ${slottedClassName(TextSize.XS)} {\n    font-size: 1.313rem;\n    font-weight: 600;\n    line-height: 1.563rem;\n  }\n\n  ${slottedClassName(TextSize.Body1)} {\n    font-size: 1.125rem;\n    font-weight: 300;\n    line-height: 1.688rem;\n  }\n\n  ${slottedClassName(TextSize.Body2)} {\n    font-size: 0.938rem;\n    font-weight: 300;\n    line-height: 1.313rem;\n  }\n\n  ${slottedClassName(TextSize.BulletList)} {\n    font-size: 1.125rem;\n    font-weight: 300;\n    line-height: 1.375rem;\n  }\n\n  ${slottedClassName(TextSize.FieldPlaceholder)} {\n    font-size: 1rem;\n    font-weight: 300;\n    line-height: 1.25rem;\n  }\n\n  ${slottedClassName(TextSize.FieldTitle)} {\n    font-size: 0.75rem;\n    font-weight: 300;\n    line-height: 0.875rem;\n  }\n\n  ${slottedClassName(TextSize.FieldDescription)} {\n    font-size: 0.75rem;\n    font-weight: 300;\n    line-height: 0.875rem;\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    ${slottedClassName(TextSize.XXL)} {\n      font-size: 3rem;\n      font-weight: 600;\n      line-height: 3.3125rem;\n    }\n    ${slottedClassName(TextSize.XL)} {\n      font-size: 3rem;\n      line-height: 3.313rem;\n    }\n    ${slottedClassName(TextSize.L)} {\n      font-size: 2.5rem;\n      line-height: 3rem;\n    }\n    ${slottedClassName(TextSize.M)} {\n      font-size: 2.063rem;\n      line-height: 2.5rem;\n    }\n    ${slottedClassName(TextSize.S)} {\n      font-size: 1.75rem;\n      line-height: 2.125rem;\n    }\n    ${slottedClassName(TextSize.XS)} {\n      font-size: 1.188rem;\n      line-height: 1.438rem;\n    }\n\n    ${slottedClassName(TextSize.Body1)} {\n      font-size: 1rem;\n      line-height: 1.5rem;\n    }\n\n    ${slottedClassName(TextSize.Body2)} {\n      font-size: 0.875rem;\n      line-height: 1.125rem;\n    }\n\n    ${slottedClassName(TextSize.BulletList)} {\n      font-size: 1rem;\n      line-height: 1.1875rem;\n    }\n\n    ${slottedClassName(TextSize.FieldPlaceholder)} {\n      font-size: 0.938rem;\n      line-height: 1.125rem;\n    }\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    ${slottedClassName(TextSize.XXL)} {\n      font-size: 1.8125rem;\n      font-weight: 600;\n      line-height: 2rem;\n    }\n    ${slottedClassName(TextSize.XL)} {\n      font-size: 2.625rem;\n      line-height: 2.875rem;\n    }\n    ${slottedClassName(TextSize.L)} {\n      font-size: 2.188rem;\n      line-height: 2.4375rem;\n    }\n    ${slottedClassName(TextSize.M)} {\n      font-size: 1.813rem;\n      line-height: 2rem;\n    }\n    ${slottedClassName(TextSize.S)} {\n      font-size: 1.5rem;\n      line-height: 1.625rem;\n    }\n    ${slottedClassName(TextSize.XS)} {\n      font-size: 1.063rem;\n      line-height: 1.1875rem;\n    }\n    ${slottedClassName(TextSize.Body1)} {\n      font-size: 0.875rem;\n      font-weight: 300;\n      line-height: 1.313rem;\n    }\n    ${slottedClassName(TextSize.Body2)} {\n      font-size: 0.75rem;\n      line-height: 1rem;\n    }\n    ${slottedClassName(TextSize.BulletList)} {\n      font-size: 0.875rem;\n      font-weight: 300;\n      line-height: 1.0625rem;\n    }\n    ${slottedClassName(TextSize.FieldPlaceholder)} {\n      font-size: 0.875rem;\n      font-weight: 300;\n      line-height: 1rem;\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": "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": "linkFontStyles",
+          "name": "commonToastStyles",
           "declaration": {
-            "name": "linkFontStyles",
-            "module": "src/tuix-text/TuixText.styles.ts"
+            "name": "commonToastStyles",
+            "module": "src/tuix-toast/TuixToast.styles.ts"
           }
         },
         {
           "kind": "js",
-          "name": "textStyles",
+          "name": "tabletToastStyles",
           "declaration": {
-            "name": "textStyles",
-            "module": "src/tuix-text/TuixText.styles.ts"
+            "name": "tabletToastStyles",
+            "module": "src/tuix-toast/TuixToast.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "mobileToastStyles",
+          "declaration": {
+            "name": "mobileToastStyles",
+            "module": "src/tuix-toast/TuixToast.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-text/TuixText.ts",
+      "path": "src/tuix-toast/TuixToast.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "TuixText",
+          "name": "TuixToast",
           "members": [
             {
               "kind": "field",
-              "name": "size",
-              "attribute": "size"
+              "name": "type",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "color",
-              "attribute": "color"
+              "name": "visibilityDuration",
+              "type": {
+                "text": "number"
+              },
+              "default": "4000",
+              "attribute": "visibility-duration"
             },
             {
               "kind": "field",
@@ -4081,9 +4059,19 @@
               "attribute": "dark",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "lastType",
+              "default": "ToastType.SUCCESS"
+            },
             {
               "kind": "method",
-              "name": "_getTextColor",
+              "name": "_handleOnClose",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_saveType",
               "privacy": "private"
             },
             {
@@ -4093,18 +4081,30 @@
             },
             {
               "kind": "field",
-              "name": "_getClassMap",
+              "name": "_getIcon",
               "privacy": "private"
             }
           ],
+          "events": [
+            {
+              "name": "on-close",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
           "attributes": [
             {
-              "name": "size",
-              "fieldName": "size"
+              "name": "type",
+              "fieldName": "type"
             },
             {
-              "name": "color",
-              "fieldName": "color"
+              "name": "visibility-duration",
+              "type": {
+                "text": "number"
+              },
+              "default": "4000",
+              "fieldName": "visibilityDuration"
             },
             {
               "name": "dark",
@@ -4119,25 +4119,25 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "tuix-text",
+          "tagName": "tuix-toast",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TuixText",
+          "name": "TuixToast",
           "declaration": {
-            "name": "TuixText",
-            "module": "src/tuix-text/TuixText.ts"
+            "name": "TuixToast",
+            "module": "src/tuix-toast/TuixToast.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "tuix-text",
+          "name": "tuix-toast",
           "declaration": {
-            "name": "TuixText",
-            "module": "src/tuix-text/TuixText.ts"
+            "name": "TuixToast",
+            "module": "src/tuix-toast/TuixToast.ts"
           }
         }
       ]
@@ -4436,6 +4436,98 @@
         }
       ]
     },
+    {
+      "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",
+      "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",
+          "type": {
+            "text": "Story"
+          },
+          "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": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "tuixDropdownObjectList",
+          "declaration": {
+            "name": "tuixDropdownObjectList",
+            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "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}"
+        },
+        {
+          "kind": "variable",
+          "name": "tuixDropdownExample",
+          "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}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "tuixDropdownExample",
+          "declaration": {
+            "name": "tuixDropdownExample",
+            "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts",
@@ -4594,59 +4686,7 @@
     },
     {
       "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",
-      "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",
-          "type": {
-            "text": "Story"
-          },
-          "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": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "tuixDropdownObjectList",
-          "declaration": {
-            "name": "tuixDropdownObjectList",
-            "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.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",
@@ -4654,15 +4694,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": [
@@ -4671,15 +4711,15 @@
           "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",
+          "name": "regularIcon",
           "declaration": {
-            "name": "tuixDropdownExample",
-            "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
+            "name": "regularIcon",
+            "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
           }
         }
       ]
@@ -4710,7 +4750,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-icon/stories/tuix-icon.stories.ts",
+      "path": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4718,15 +4758,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: '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": "regularIcon",
+          "name": "iconButton",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    ...defaultValues,\n  },\n}"
+          "default": "{\n  args: {\n    variant: MainVariant.PRIMARY,\n    icon: IconName.ARROW_DOWN,\n    disabled: false,\n    dark: false,\n  },\n}"
         }
       ],
       "exports": [
@@ -4735,15 +4775,15 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
+            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "regularIcon",
+          "name": "iconButton",
           "declaration": {
-            "name": "regularIcon",
-            "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
+            "name": "iconButton",
+            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
           }
         }
       ]
@@ -4870,7 +4910,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts",
+      "path": "src/tuix-link/enums/linkTarget.enum.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-link/stories/tuix-link.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4878,15 +4924,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: 'TuixLink',\n  component: 'tuix-link',\n  argTypes: {\n    value: { control: 'text' },\n    href: { control: 'text' },\n    target: {\n      control: 'select',\n      options: Object.values(LinkTarget),\n    },\n    variant: {\n      control: 'inline-radio',\n      options: Object.values(MainVariant),\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"display: flex; flex-direction:column; gap:20px; justify-content: center; align-items: center; height: 100vh;\n    ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\n    ${args.variant === MainVariant.SECONDARY\n        ? `background-color: ${Palette.MAIN};`\n        : ''}\"\n    >\n      <tuix-link\n        href=\"${args.href}\"\n        target=\"${args.target}\"\n        variant=\"${args.variant}\"\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n      >\n        <tuix-text size=\"${TextSize.Button}\"> ${args.value} </tuix-text>\n      </tuix-link>\n      <tuix-link\n        href=\"${args.href}\"\n        target=\"${args.target}\"\n        variant=\"${args.variant}\"\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n      >\n        ${args.value}\n      </tuix-link>\n    </div>\n  `,\n}"
         },
         {
           "kind": "variable",
-          "name": "iconButton",
+          "name": "linkExample",
           "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: 'Test link',\n    href: 'https://google.com',\n    target: LinkTarget.BLANK,\n    variant: MainVariant.PRIMARY,\n    disabled: false,\n    dark: false,\n  },\n}"
         }
       ],
       "exports": [
@@ -4895,28 +4941,28 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
+            "module": "src/tuix-link/stories/tuix-link.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "iconButton",
+          "name": "linkExample",
           "declaration": {
-            "name": "iconButton",
-            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
+            "name": "linkExample",
+            "module": "src/tuix-link/stories/tuix-link.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-link/enums/linkTarget.enum.ts",
+      "path": "src/tuix-paper/enums/tuix-paper.enum.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-link/stories/tuix-link.stories.ts",
+      "path": "src/tuix-paper/stories/tuix-paper.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4924,15 +4970,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixLink',\n  component: 'tuix-link',\n  argTypes: {\n    value: { control: 'text' },\n    href: { control: 'text' },\n    target: {\n      control: 'select',\n      options: Object.values(LinkTarget),\n    },\n    variant: {\n      control: 'inline-radio',\n      options: Object.values(MainVariant),\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"display: flex; flex-direction:column; gap:20px; justify-content: center; align-items: center; height: 100vh;\n    ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\n    ${args.variant === MainVariant.SECONDARY\n        ? `background-color: ${Palette.MAIN};`\n        : ''}\"\n    >\n      <tuix-link\n        href=\"${args.href}\"\n        target=\"${args.target}\"\n        variant=\"${args.variant}\"\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n      >\n        <tuix-text size=\"${TextSize.Button}\"> ${args.value} </tuix-text>\n      </tuix-link>\n      <tuix-link\n        href=\"${args.href}\"\n        target=\"${args.target}\"\n        variant=\"${args.variant}\"\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n      >\n        ${args.value}\n      </tuix-link>\n    </div>\n  `,\n}"
+          "default": "{\n  title: 'TuixPaper',\n  component: 'tuix-paper',\n  argTypes: {\n    elevation: {\n      control: 'select',\n      options: Object.values(PaperElevation),\n    },\n    borderRadius: {\n      control: 'select',\n      options: Object.values(BorderRadiusPaper),\n    },\n    dark: {\n      control: 'boolean',\n    },\n  },\n  render: (args: ArgTypes) => html`\n    <style>\n      tuix-text {\n        width: 181px;\n        height: 181px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    </style>\n    <div\n      style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n    ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n    >\n      <tuix-paper\n        elevation=\"${args.elevation}\"\n        ?dark=\"${args.dark}\"\n        border-radius=\"${args.borderRadius}\"\n      >\n        <tuix-text size=\"${TextSize.Body2}\" ?dark=\"${args.dark}\">\n          Elevation\n        </tuix-text>\n      </tuix-paper>\n    </div>\n  `,\n}"
         },
         {
           "kind": "variable",
-          "name": "linkExample",
+          "name": "elevation",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    value: 'Test link',\n    href: 'https://google.com',\n    target: LinkTarget.BLANK,\n    variant: MainVariant.PRIMARY,\n    disabled: false,\n    dark: false,\n  },\n}"
+          "default": "{\n  args: {\n    elevation: PaperElevation.VARIANT_1,\n    borderRadius: BorderRadiusPaper.STRONG,\n    dark: false,\n  },\n}"
         }
       ],
       "exports": [
@@ -4941,22 +4987,28 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-link/stories/tuix-link.stories.ts"
+            "module": "src/tuix-paper/stories/tuix-paper.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "linkExample",
+          "name": "elevation",
           "declaration": {
-            "name": "linkExample",
-            "module": "src/tuix-link/stories/tuix-link.stories.ts"
+            "name": "elevation",
+            "module": "src/tuix-paper/stories/tuix-paper.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-modal/stories/tuix-modal.stories.ts",
+      "path": "src/tuix-radio-button/interfaces/tuix-radio-button.interface.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-radio-button/stories/tuix-radio-button.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4964,15 +5016,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixModal',\n  component: 'tuix-modal',\n  argTypes: {\n    dark: {\n      control: 'boolean',\n    },\n    visible: {\n      control: 'boolean',\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-modal\n        ?dark=\"${args.dark}\"\n        ?visible=\"${args.visible}\"\n        @on-close=\"${args.onClose}\"\n      >\n        <tuix-text\n          slot=\"title\"\n          color=${TextVariant.PRIMARY}\n          ?dark=${args.dark}\n          size=\"${TextSize.S}\"\n        >\n          Title\n        </tuix-text>\n        <tuix-text slot=\"body\" ?dark=\"${args.dark}\">\n          Lorem ipsum dolor sit amet consectetur. Sollicitudin id interdum\n          dignissim at orci. Augue vivamus arcu massa porta facilisi.\n        </tuix-text>\n        <div\n          slot=\"actions\"\n          style=\"display:flex; gap: 10px; justify-content: flex-end;\n      width: 100%;\"\n        >\n          <tuix-button ?dark=\"${args.dark}\">Action</tuix-button>\n          <tuix-button variant=\"${MainVariant.SECONDARY}\" ?dark=\"${args.dark}\"\n            >Cancel</tuix-button\n          >\n        </div>\n      </tuix-modal>\n    </div>\n  `,\n}"
+          "default": "{\n  title: 'TuixRadioButton',\n  component: 'tuix-radio-button',\n  argTypes: {\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n    options: {\n      control: 'object',\n    },\n    labelSide: {\n      control: 'select',\n      options: Object.values(CheckboxLabelSide),\n    },\n    selectedOption: {\n      control: 'object',\n    },\n    onChange: { action: 'change' },\n  },\n  render: (args: ArgTypes) => html` <div\n    style=\"display: flex; justify-content: center; align-items: center; height: 100vh; ${args.dark\n      ? 'background-color:' + Palette.BLACK + ';'\n      : ''}}\"\n  >\n    <div\n      style=\"max-width: 300px; display: flex; gap: 16px; flex-direction: column\"\n    >\n      <tuix-radio-button\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n        ?error=\"${args.error}\"\n        .options=\"${args.options}\"\n        labelSide=\"${args.labelSide}\"\n        .selectedOption=\"${args.selectedOption}\"\n        @change=\"${args.onChange}\"\n      >\n        <tuix-text\n          size=\"${TextSize.FieldPlaceholder}\"\n          color=\"${TextVariant.PRIMARY}\"\n          slot=\"label-1\"\n          ?dark=\"${args.dark}\"\n        >\n          Label from named slot 1 using a long text with max-width container\n        </tuix-text>\n      </tuix-radio-button>\n    </div>\n  </div>`,\n}"
         },
         {
           "kind": "variable",
-          "name": "modalExample",
+          "name": "tuixRadioButtonExample",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    dark: false,\n    visible: true,\n  },\n}"
+          "default": "{\n  args: {\n    disabled: false,\n    dark: false,\n    error: false,\n    options: ['Option 0', 'Option 1', 'Option 2'],\n    labelSide: CheckboxLabelSide.RIGHT,\n    selectedOption: 'Option 0',\n  },\n}"
         }
       ],
       "exports": [
@@ -4981,28 +5033,28 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-modal/stories/tuix-modal.stories.ts"
+            "module": "src/tuix-radio-button/stories/tuix-radio-button.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "modalExample",
+          "name": "tuixRadioButtonExample",
           "declaration": {
-            "name": "modalExample",
-            "module": "src/tuix-modal/stories/tuix-modal.stories.ts"
+            "name": "tuixRadioButtonExample",
+            "module": "src/tuix-radio-button/stories/tuix-radio-button.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-paper/enums/tuix-paper.enum.ts",
+      "path": "src/tuix-table/interfaces/tuix-table.interface.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-paper/stories/tuix-paper.stories.ts",
+      "path": "src/tuix-modal/stories/tuix-modal.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -5010,15 +5062,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixPaper',\n  component: 'tuix-paper',\n  argTypes: {\n    elevation: {\n      control: 'select',\n      options: Object.values(PaperElevation),\n    },\n    borderRadius: {\n      control: 'select',\n      options: Object.values(BorderRadiusPaper),\n    },\n    dark: {\n      control: 'boolean',\n    },\n  },\n  render: (args: ArgTypes) => html`\n    <style>\n      tuix-text {\n        width: 181px;\n        height: 181px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    </style>\n    <div\n      style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n    ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n    >\n      <tuix-paper\n        elevation=\"${args.elevation}\"\n        ?dark=\"${args.dark}\"\n        border-radius=\"${args.borderRadius}\"\n      >\n        <tuix-text size=\"${TextSize.Body2}\" ?dark=\"${args.dark}\">\n          Elevation\n        </tuix-text>\n      </tuix-paper>\n    </div>\n  `,\n}"
+          "default": "{\n  title: 'TuixModal',\n  component: 'tuix-modal',\n  argTypes: {\n    dark: {\n      control: 'boolean',\n    },\n    visible: {\n      control: 'boolean',\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-modal\n        ?dark=\"${args.dark}\"\n        ?visible=\"${args.visible}\"\n        @on-close=\"${args.onClose}\"\n      >\n        <tuix-text\n          slot=\"title\"\n          color=${TextVariant.PRIMARY}\n          ?dark=${args.dark}\n          size=\"${TextSize.S}\"\n        >\n          Title\n        </tuix-text>\n        <tuix-text slot=\"body\" ?dark=\"${args.dark}\">\n          Lorem ipsum dolor sit amet consectetur. Sollicitudin id interdum\n          dignissim at orci. Augue vivamus arcu massa porta facilisi.\n        </tuix-text>\n        <div\n          slot=\"actions\"\n          style=\"display:flex; gap: 10px; justify-content: flex-end;\n      width: 100%;\"\n        >\n          <tuix-button ?dark=\"${args.dark}\">Action</tuix-button>\n          <tuix-button variant=\"${MainVariant.SECONDARY}\" ?dark=\"${args.dark}\"\n            >Cancel</tuix-button\n          >\n        </div>\n      </tuix-modal>\n    </div>\n  `,\n}"
         },
         {
           "kind": "variable",
-          "name": "elevation",
+          "name": "modalExample",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    elevation: PaperElevation.VARIANT_1,\n    borderRadius: BorderRadiusPaper.STRONG,\n    dark: false,\n  },\n}"
+          "default": "{\n  args: {\n    dark: false,\n    visible: true,\n  },\n}"
         }
       ],
       "exports": [
@@ -5027,71 +5079,59 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-paper/stories/tuix-paper.stories.ts"
+            "module": "src/tuix-modal/stories/tuix-modal.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "elevation",
+          "name": "modalExample",
           "declaration": {
-            "name": "elevation",
-            "module": "src/tuix-paper/stories/tuix-paper.stories.ts"
+            "name": "modalExample",
+            "module": "src/tuix-modal/stories/tuix-modal.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-radio-button/interfaces/tuix-radio-button.interface.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-radio-button/stories/tuix-radio-button.stories.ts",
+      "path": "src/tuix-text/enums/tuix-text.enums.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "meta",
+          "name": "colorText",
           "type": {
-            "text": "object"
+            "text": "Record<TextVariant, string>"
           },
-          "default": "{\n  title: 'TuixRadioButton',\n  component: 'tuix-radio-button',\n  argTypes: {\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n    options: {\n      control: 'object',\n    },\n    labelSide: {\n      control: 'select',\n      options: Object.values(CheckboxLabelSide),\n    },\n    selectedOption: {\n      control: 'object',\n    },\n    onChange: { action: 'change' },\n  },\n  render: (args: ArgTypes) => html` <div\n    style=\"display: flex; justify-content: center; align-items: center; height: 100vh; ${args.dark\n      ? 'background-color:' + Palette.BLACK + ';'\n      : ''}}\"\n  >\n    <div\n      style=\"max-width: 300px; display: flex; gap: 16px; flex-direction: column\"\n    >\n      <tuix-radio-button\n        ?disabled=\"${args.disabled}\"\n        ?dark=\"${args.dark}\"\n        ?error=\"${args.error}\"\n        .options=\"${args.options}\"\n        labelSide=\"${args.labelSide}\"\n        .selectedOption=\"${args.selectedOption}\"\n        @change=\"${args.onChange}\"\n      >\n        <tuix-text\n          size=\"${TextSize.FieldPlaceholder}\"\n          color=\"${TextVariant.PRIMARY}\"\n          slot=\"label-1\"\n          ?dark=\"${args.dark}\"\n        >\n          Label from named slot 1 using a long text with max-width container\n        </tuix-text>\n      </tuix-radio-button>\n    </div>\n  </div>`,\n}"
+          "default": "{\n  [TextVariant.MAIN]: Palette.MAIN,\n  [TextVariant.DARK_MAIN]: Palette.DARK_MAIN,\n  [TextVariant.PRIMARY]: Palette.BLACK,\n  [TextVariant.SECONDARY]: Palette.WHITE,\n  [TextVariant.STROKE]: Palette.PRIMARY_400,\n  [TextVariant.GREY]: Palette.NEUTRAL_600,\n  [TextVariant.LIGHT_GREY]: Palette.NEUTRAL_200,\n  [TextVariant.DISABLED]: Palette.PRIMARY_100,\n  [TextVariant.SECTION]: Palette.PRIMARY_700,\n  [TextVariant.VALIDATION]: Palette.VALIDATION,\n  [TextVariant.ERROR]: Palette.ERROR,\n  [TextVariant.SUCCESS]: Palette.SUCCESS,\n  [TextVariant.LIGHT]: Palette.WHITE,\n  [TextVariant.DARK]: Palette.BLACK,\n  [TextVariant.DARK_BLUE]: Palette.DARK_MAIN,\n  [TextVariant.TITLE_BLUE]: Palette.DARK_MAIN,\n}"
         },
         {
           "kind": "variable",
-          "name": "tuixRadioButtonExample",
+          "name": "colorTextDark",
           "type": {
-            "text": "Story"
+            "text": "Record<TextVariant, string>"
           },
-          "default": "{\n  args: {\n    disabled: false,\n    dark: false,\n    error: false,\n    options: ['Option 0', 'Option 1', 'Option 2'],\n    labelSide: CheckboxLabelSide.RIGHT,\n    selectedOption: 'Option 0',\n  },\n}"
+          "default": "{\n  ...colorText,\n  [TextVariant.MAIN]: DarkPalette.MAIN,\n  [TextVariant.DARK_MAIN]: DarkPalette.NEUTRAL_600,\n  [TextVariant.PRIMARY]: DarkPalette.PRIMARY_50,\n  [TextVariant.SECONDARY]: Palette.BLACK,\n  [TextVariant.GREY]: DarkPalette.NEUTRAL_600,\n  [TextVariant.DISABLED]: Palette.PRIMARY_200,\n  [TextVariant.VALIDATION]: DarkPalette.VALIDATION,\n  [TextVariant.ERROR]: DarkPalette.ERROR,\n  [TextVariant.SUCCESS]: DarkPalette.SUCCESS,\n  [TextVariant.LIGHT]: DarkPalette.PRIMARY_50,\n  [TextVariant.DARK_BLUE]: DarkPalette.PRIMARY_800,\n  [TextVariant.TITLE_BLUE]: DarkPalette.PRIMARY_300,\n  [TextVariant.SECTION]: Palette.PRIMARY_300,\n}"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
+          "name": "colorText",
           "declaration": {
-            "name": "meta",
-            "module": "src/tuix-radio-button/stories/tuix-radio-button.stories.ts"
+            "name": "colorText",
+            "module": "src/tuix-text/enums/tuix-text.enums.ts"
           }
         },
         {
           "kind": "js",
-          "name": "tuixRadioButtonExample",
+          "name": "colorTextDark",
           "declaration": {
-            "name": "tuixRadioButtonExample",
-            "module": "src/tuix-radio-button/stories/tuix-radio-button.stories.ts"
+            "name": "colorTextDark",
+            "module": "src/tuix-text/enums/tuix-text.enums.ts"
           }
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-table/interfaces/tuix-table.interface.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-table/stories/tuix-table.stories.ts",
@@ -5132,6 +5172,46 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-text/stories/tuix-text.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  title: 'TuixText',\n  component: 'tuix-text',\n  argTypes: {\n    value: { control: 'text' },\n    size: {\n      control: 'select',\n      options: Object.values(TextSize),\n    },\n    color: {\n      control: 'select',\n      options: Object.values(TextVariant),\n    },\n    dark: {\n      control: 'boolean',\n    },\n  },\n  render: (args: ArgTypes) => html`\n    <style>\n      tuix-text > * {\n        display: block;\n      }\n    </style>\n    <div\n      style=\"display: flex; justify-content: center; align-items: center; height: 100%; \n    ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n    >\n      <tuix-text size=\"${args.size}\" color=\"${args.color}\" ?dark=\"${args.dark}\">\n        ${args.value}\n        <h1>${args.value}</h1>\n        <h2>${args.value}</h2>\n        <h3>${args.value}</h3>\n        <h4>${args.value}</h4>\n        <h5>${args.value}</h5>\n        <h6>${args.value}</h6>\n        <p>${args.value}</p>\n        <span> ${args.value} </span>\n      </tuix-text>\n    </div>\n  `,\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "Headline",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{\n  args: {\n    value: 'Test text',\n    size: TextSize.XL,\n    dark: false,\n  },\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/tuix-text/stories/tuix-text.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Headline",
+          "declaration": {
+            "name": "Headline",
+            "module": "src/tuix-text/stories/tuix-text.stories.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-toast/enums/tuix-toast.enums.ts",
@@ -5244,86 +5324,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-text/enums/tuix-text.enums.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "colorText",
-          "type": {
-            "text": "Record<TextVariant, string>"
-          },
-          "default": "{\n  [TextVariant.MAIN]: Palette.MAIN,\n  [TextVariant.DARK_MAIN]: Palette.DARK_MAIN,\n  [TextVariant.PRIMARY]: Palette.BLACK,\n  [TextVariant.SECONDARY]: Palette.WHITE,\n  [TextVariant.STROKE]: Palette.PRIMARY_400,\n  [TextVariant.GREY]: Palette.NEUTRAL_600,\n  [TextVariant.LIGHT_GREY]: Palette.NEUTRAL_200,\n  [TextVariant.DISABLED]: Palette.PRIMARY_100,\n  [TextVariant.SECTION]: Palette.PRIMARY_700,\n  [TextVariant.VALIDATION]: Palette.VALIDATION,\n  [TextVariant.ERROR]: Palette.ERROR,\n  [TextVariant.SUCCESS]: Palette.SUCCESS,\n  [TextVariant.LIGHT]: Palette.WHITE,\n  [TextVariant.DARK]: Palette.BLACK,\n  [TextVariant.DARK_BLUE]: Palette.DARK_MAIN,\n  [TextVariant.TITLE_BLUE]: Palette.DARK_MAIN,\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "colorTextDark",
-          "type": {
-            "text": "Record<TextVariant, string>"
-          },
-          "default": "{\n  ...colorText,\n  [TextVariant.MAIN]: DarkPalette.MAIN,\n  [TextVariant.DARK_MAIN]: DarkPalette.NEUTRAL_600,\n  [TextVariant.PRIMARY]: DarkPalette.PRIMARY_50,\n  [TextVariant.SECONDARY]: Palette.BLACK,\n  [TextVariant.GREY]: DarkPalette.NEUTRAL_600,\n  [TextVariant.DISABLED]: Palette.PRIMARY_200,\n  [TextVariant.VALIDATION]: DarkPalette.VALIDATION,\n  [TextVariant.ERROR]: DarkPalette.ERROR,\n  [TextVariant.SUCCESS]: DarkPalette.SUCCESS,\n  [TextVariant.LIGHT]: DarkPalette.PRIMARY_50,\n  [TextVariant.DARK_BLUE]: DarkPalette.PRIMARY_800,\n  [TextVariant.TITLE_BLUE]: DarkPalette.PRIMARY_300,\n  [TextVariant.SECTION]: Palette.PRIMARY_300,\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "colorText",
-          "declaration": {
-            "name": "colorText",
-            "module": "src/tuix-text/enums/tuix-text.enums.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "colorTextDark",
-          "declaration": {
-            "name": "colorTextDark",
-            "module": "src/tuix-text/enums/tuix-text.enums.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-text/stories/tuix-text.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  title: 'TuixText',\n  component: 'tuix-text',\n  argTypes: {\n    value: { control: 'text' },\n    size: {\n      control: 'select',\n      options: Object.values(TextSize),\n    },\n    color: {\n      control: 'select',\n      options: Object.values(TextVariant),\n    },\n    dark: {\n      control: 'boolean',\n    },\n  },\n  render: (args: ArgTypes) => html`\n    <style>\n      tuix-text > * {\n        display: block;\n      }\n    </style>\n    <div\n      style=\"display: flex; justify-content: center; align-items: center; height: 100%; \n    ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n    >\n      <tuix-text size=\"${args.size}\" color=\"${args.color}\" ?dark=\"${args.dark}\">\n        ${args.value}\n        <h1>${args.value}</h1>\n        <h2>${args.value}</h2>\n        <h3>${args.value}</h3>\n        <h4>${args.value}</h4>\n        <h5>${args.value}</h5>\n        <h6>${args.value}</h6>\n        <p>${args.value}</p>\n        <span> ${args.value} </span>\n      </tuix-text>\n    </div>\n  `,\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "Headline",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{\n  args: {\n    value: 'Test text',\n    size: TextSize.XL,\n    dark: false,\n  },\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/tuix-text/stories/tuix-text.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Headline",
-          "declaration": {
-            "name": "Headline",
-            "module": "src/tuix-text/stories/tuix-text.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-toggle-button/interfaces/tuix-toggle.interface.ts",