tuix-webcomponents 0.0.26 → 0.0.27

package/custom-elements.json

@@ -425,6 +425,244 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-checkbox/TuixCheckbox.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "hostStyles",
+          "default": "css`\n  :host {\n    --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(Palette.WHITE)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-text-color-error: ${unsafeCSS(Palette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(Palette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-text-color-label: ${unsafeCSS(Palette.BLACK)};\n    --t-label-right-default-justify: flex-start;\n    --t-label-left-default-justify: space-between;\n  }\n  :host([dark]) {\n    --t-main-color-tuix: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.BLACK)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-text-color-error: ${unsafeCSS(DarkPalette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n    --t-text-color-label: ${unsafeCSS(DarkPalette.WHITE)};\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "checkboxContainerStyles",
+          "default": "css`\n  .t-checkbox-full-container {\n    display: flex;\n    justify-content: var(--t-label-right-default-justify, flex-start);\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-checkbox-full-container {\n    cursor: not-allowed;\n  }\n  .t-checkbox-container {\n    --t-checkbox-size-box: 1.5rem;\n    --t-checkbox-shadow-width: 2px;\n    --t-checkbox-border-radius: 0.25rem;\n    display: block;\n    position: relative;\n    height: var(--t-checkbox-size-box);\n    width: var(--t-checkbox-size-box);\n    min-width: var(--t-checkbox-size-box);\n  }\n  .t-checkbox-container .t-checkbox {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-checkbox-container {\n      --t-checkbox-size-box: 1rem;\n      --t-checkbox-shadow-width: 1px;\n      --t-checkbox-border-radius: 0.125rem;\n      margin-top: 1px;\n    }\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "checkboxCheckmarkStyles",
+          "default": "css`\n  .t-checkbox-container .t-checkbox-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: var(--t-checkbox-size-box);\n    width: var(--t-checkbox-size-box);\n    border-radius: var(--t-checkbox-border-radius);\n    background-color: var(--t-bg-color-primary);\n    border: 1px solid var(--t-stroke-color-grey);\n    box-sizing: border-box;\n  }\n  .t-checkbox-container .t-checkbox-checkmark tuix-icon {\n    margin: auto;\n    display: none;\n    width: calc(var(--t-checkbox-size-box) - 0.5rem);\n    height: calc(var(--t-checkbox-size-box) - 0.5rem);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {\n    background-color: var(--t-main-color-tuix);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {\n    box-shadow: 0 0 0px var(--t-checkbox-shadow-width)\n      var(--t-stroke-color-focus);\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {\n    display: block;\n  }\n  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox-checkmark {\n    border: 1px solid var(--t-text-color-error);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox:checked\n    ~ .t-checkbox-checkmark {\n    background-color: var(--t-text-color-error);\n    border: none;\n  }\n\n  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "checkboxLabelStyles",
+          "default": "css`\n  .t-checkbox-label {\n    display: block;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-checkbox-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n    justify-content: var(--t-label-left-default-justify, space-between);\n  }\n  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "hostStyles",
+          "declaration": {
+            "name": "hostStyles",
+            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "checkboxContainerStyles",
+          "declaration": {
+            "name": "checkboxContainerStyles",
+            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "checkboxCheckmarkStyles",
+          "declaration": {
+            "name": "checkboxCheckmarkStyles",
+            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "checkboxLabelStyles",
+          "declaration": {
+            "name": "checkboxLabelStyles",
+            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-checkbox/TuixCheckbox.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "TuixCheckbox",
+          "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "checked"
+            },
+            {
+              "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": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "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": "_onCheckboxChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "InputEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_getIconMode",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_getFullContainerClasses",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ClassInfo"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "checked"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dark"
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "error"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "labelSide",
+              "type": {
+                "text": "CheckboxLabelSide"
+              },
+              "fieldName": "labelSide"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "tuix-checkbox",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TuixCheckbox",
+          "declaration": {
+            "name": "TuixCheckbox",
+            "module": "src/tuix-checkbox/TuixCheckbox.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "tuix-checkbox",
+          "declaration": {
+            "name": "TuixCheckbox",
+            "module": "src/tuix-checkbox/TuixCheckbox.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-button/TuixBaseButton.ts",
@@ -877,263 +1115,25 @@
     },
     {
       "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`"
+          "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": "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": "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": "checkboxCheckmarkStyles",
-          "default": "css`\n  .t-checkbox-container .t-checkbox-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: var(--t-checkbox-size-box);\n    width: var(--t-checkbox-size-box);\n    border-radius: var(--t-checkbox-border-radius);\n    background-color: var(--t-bg-color-primary);\n    border: 1px solid var(--t-stroke-color-grey);\n    box-sizing: border-box;\n  }\n  .t-checkbox-container .t-checkbox-checkmark tuix-icon {\n    margin: auto;\n    display: none;\n    width: calc(var(--t-checkbox-size-box) - 0.5rem);\n    height: calc(var(--t-checkbox-size-box) - 0.5rem);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {\n    background-color: var(--t-main-color-tuix);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {\n    box-shadow: 0 0 0px var(--t-checkbox-shadow-width)\n      var(--t-stroke-color-focus);\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {\n    display: block;\n  }\n  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox-checkmark {\n    border: 1px solid var(--t-text-color-error);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox:checked\n    ~ .t-checkbox-checkmark {\n    background-color: var(--t-text-color-error);\n    border: none;\n  }\n\n  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "checkboxLabelStyles",
-          "default": "css`\n  .t-checkbox-label {\n    display: block;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-checkbox-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n    justify-content: var(--t-label-left-default-justify, space-between);\n  }\n  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "hostStyles",
-          "declaration": {
-            "name": "hostStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "checkboxContainerStyles",
-          "declaration": {
-            "name": "checkboxContainerStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "checkboxCheckmarkStyles",
-          "declaration": {
-            "name": "checkboxCheckmarkStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "checkboxLabelStyles",
-          "declaration": {
-            "name": "checkboxLabelStyles",
-            "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-checkbox/TuixCheckbox.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "TuixCheckbox",
-          "members": [
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "checked"
-            },
-            {
-              "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": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "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": "_onCheckboxChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "InputEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_getIconMode",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_getFullContainerClasses",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "ClassInfo"
-                }
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "checked"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "dark",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "dark"
-            },
-            {
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "error"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "label"
-            },
-            {
-              "name": "labelSide",
-              "type": {
-                "text": "CheckboxLabelSide"
-              },
-              "fieldName": "labelSide"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "tuix-checkbox",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "TuixCheckbox",
-          "declaration": {
-            "name": "TuixCheckbox",
-            "module": "src/tuix-checkbox/TuixCheckbox.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "tuix-checkbox",
-          "declaration": {
-            "name": "TuixCheckbox",
-            "module": "src/tuix-checkbox/TuixCheckbox.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-dropdown/TuixDropdown.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`"
-        },
-        {
-          "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`"
-        },
-        {
-          "kind": "variable",
-          "name": "dropdownOptionStyles",
-          "default": "css`\n  .t-options-container {\n    width: 100%;\n    position: absolute;\n    top: calc(100% + 2px);\n    left: 0;\n    border: none;\n    border-radius: 0 0 5px 5px;\n    background-color: var(--t-field-color-option);\n    visibility: collapse;\n    overflow-y: auto;\n    max-height: 250px;\n    color: var(--t-field-color-text);\n    box-shadow: 0px 2px 8px 0px ${unsafeCSS(Palette.SHADOW)};\n    z-index: 9999;\n  }\n  .t-options-container::-webkit-scrollbar {\n    width: 0.75rem;\n  }\n  .t-options-container::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n  .t-options-container::-webkit-scrollbar-thumb {\n    background-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    border-radius: 0.25rem;\n    border: 0.188rem solid transparent;\n    background-clip: content-box;\n  }\n  .t-options-container.show {\n    visibility: visible;\n  }\n  .t-options-container.show.t-with-description {\n    top: calc(100% + 2px - 1.5rem);\n  }\n  @media only screen and (max-height: 500px) {\n    .t-options-container {\n      max-height: 50vh;\n    }\n  }\n  .t-dropdown-option {\n    padding: var(--t-field-padding-y) 1rem;\n    cursor: pointer;\n    font-size: 1rem;\n    line-height: 1.25rem;\n    font-weight: 300;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .t-dropdown-option.t-option-hover {\n    background-color: var(--t-field-color-form);\n  }\n  .t-dropdown-option.t-option-selected {\n    color: var(--t-field-color-main);\n  }\n  .t-dropdown-option.t-option-filtered {\n    display: none;\n  }\n  .t-dropdown-option:focus {\n    outline: none;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-dropdown-option {\n      font-size: 0.938rem;\n      line-height: 1.125rem;\n      --t-field-padding-y: 1.063rem;\n      --t-field-padding-top: 1.5rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-dropdown-option {\n      font-size: 0.813rem;\n      line-height: 1rem;\n      --t-field-padding-y: 1rem;\n      --t-field-padding-top: 1.375rem;\n    }\n  }\n`"
-        }
-      ],
-      "exports": [
+          "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": "dropdownHostStyles",
@@ -1888,224 +1888,7 @@
     },
     {
       "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": "_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": "icon",
-              "fieldName": "icon"
-            },
-            {
-              "name": "variant",
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
-            },
-            {
-              "name": "dark",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "dark",
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "TuixBaseButton",
-            "module": "/src/tuix-button/TuixBaseButton"
-          },
-          "tagName": "tuix-icon-button",
-          "customElement": true,
-          "events": [
-            {
-              "name": "customClick",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "TuixBaseButton",
-                "module": "src/tuix-button/TuixBaseButton.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "TuixIconButton",
-          "declaration": {
-            "name": "TuixIconButton",
-            "module": "src/tuix-icon-button/TuixIconButton.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "tuix-icon-button",
-          "declaration": {
-            "name": "TuixIconButton",
-            "module": "src/tuix-icon-button/TuixIconButton.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-input/TuixInput.styles.ts",
+      "path": "src/tuix-input/TuixInput.styles.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -2725,62 +2508,279 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-link/TuixLink.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "LINK_TEXT_COLOR_VAR_NAME",
-          "type": {
-            "text": "string"
-          },
-          "default": "'--t-link-text-color'"
-        },
-        {
-          "kind": "variable",
-          "name": "linkStyles",
-          "default": "css`\n  ${unsafeCSS(`\n  :host {\n    --t-link-border-color: ${Palette.MAIN};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${Palette.MAIN}\n  }\n\n  :host([dark]) {\n    --t-link-border-color: ${DarkPalette.MAIN};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${DarkPalette.MAIN}\n  }\n\n  :host([variant=${MainVariant.SECONDARY}]) {\n    --t-link-border-color: ${Palette.WHITE};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${Palette.WHITE}\n  }\n\n  :host([variant=${MainVariant.SECONDARY}][dark]) {\n    --t-link-border-color: ${DarkPalette.PRIMARY_50};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${DarkPalette.PRIMARY_50}\n  }\n\n  :host([disabled]) .link.disabled {\n    --t-link-border-color: ${Palette.PRIMARY_300};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${Palette.PRIMARY_300}\n  }\n\n  .link {\n    text-decoration: none;\n    display: inline;\n    color: var(${LINK_TEXT_COLOR_VAR_NAME});\n    border-bottom: solid 1px var(--t-link-border-active-color, transparent);\n  }\n  .link:hover {\n    border-bottom: solid 1px var(--t-link-border-color);\n    cursor: pointer;\n  }\n  .link.secondary {\n    color: var(${LINK_TEXT_COLOR_VAR_NAME});\n  }\n  .link.secondary:hover {\n    border-bottom: solid 1px var(--t-link-border-color);\n  }\n  .link.disabled {\n    border-bottom: solid 1px var(--t-link-border-color);\n    color: var(${LINK_TEXT_COLOR_VAR_NAME});\n    cursor: not-allowed;\n  }\n`)}\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LINK_TEXT_COLOR_VAR_NAME",
-          "declaration": {
-            "name": "LINK_TEXT_COLOR_VAR_NAME",
-            "module": "src/tuix-link/TuixLink.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "linkStyles",
-          "declaration": {
-            "name": "linkStyles",
-            "module": "src/tuix-link/TuixLink.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-link/TuixLink.ts",
+      "path": "src/tuix-icon-button/TuixIconButton.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "TuixLink",
+          "name": "TuixIconButton",
           "members": [
             {
               "kind": "field",
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "href"
-            },
-            {
-              "kind": "field",
-              "name": "target",
-              "attribute": "target"
+              "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": "_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": "icon",
+              "fieldName": "icon"
+            },
+            {
+              "name": "variant",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            },
+            {
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dark",
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "TuixBaseButton",
+            "module": "/src/tuix-button/TuixBaseButton"
+          },
+          "tagName": "tuix-icon-button",
+          "customElement": true,
+          "events": [
+            {
+              "name": "customClick",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "TuixBaseButton",
+                "module": "src/tuix-button/TuixBaseButton.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TuixIconButton",
+          "declaration": {
+            "name": "TuixIconButton",
+            "module": "src/tuix-icon-button/TuixIconButton.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "tuix-icon-button",
+          "declaration": {
+            "name": "TuixIconButton",
+            "module": "src/tuix-icon-button/TuixIconButton.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-link/TuixLink.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "LINK_TEXT_COLOR_VAR_NAME",
+          "type": {
+            "text": "string"
+          },
+          "default": "'--t-link-text-color'"
+        },
+        {
+          "kind": "variable",
+          "name": "linkStyles",
+          "default": "css`\n  ${unsafeCSS(`\n  :host {\n    --t-link-border-color: ${Palette.MAIN};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${Palette.MAIN}\n  }\n\n  :host([dark]) {\n    --t-link-border-color: ${DarkPalette.MAIN};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${DarkPalette.MAIN}\n  }\n\n  :host([variant=${MainVariant.SECONDARY}]) {\n    --t-link-border-color: ${Palette.WHITE};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${Palette.WHITE}\n  }\n\n  :host([variant=${MainVariant.SECONDARY}][dark]) {\n    --t-link-border-color: ${DarkPalette.PRIMARY_50};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${DarkPalette.PRIMARY_50}\n  }\n\n  :host([disabled]) .link.disabled {\n    --t-link-border-color: ${Palette.PRIMARY_300};\n    ${LINK_TEXT_COLOR_VAR_NAME}: ${Palette.PRIMARY_300}\n  }\n\n  .link {\n    text-decoration: none;\n    display: inline;\n    color: var(${LINK_TEXT_COLOR_VAR_NAME});\n    border-bottom: solid 1px var(--t-link-border-active-color, transparent);\n  }\n  .link:hover {\n    border-bottom: solid 1px var(--t-link-border-color);\n    cursor: pointer;\n  }\n  .link.secondary {\n    color: var(${LINK_TEXT_COLOR_VAR_NAME});\n  }\n  .link.secondary:hover {\n    border-bottom: solid 1px var(--t-link-border-color);\n  }\n  .link.disabled {\n    border-bottom: solid 1px var(--t-link-border-color);\n    color: var(${LINK_TEXT_COLOR_VAR_NAME});\n    cursor: not-allowed;\n  }\n`)}\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LINK_TEXT_COLOR_VAR_NAME",
+          "declaration": {
+            "name": "LINK_TEXT_COLOR_VAR_NAME",
+            "module": "src/tuix-link/TuixLink.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "linkStyles",
+          "declaration": {
+            "name": "linkStyles",
+            "module": "src/tuix-link/TuixLink.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-link/TuixLink.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "TuixLink",
+          "members": [
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "attribute": "target"
             },
             {
               "kind": "field",
@@ -3856,56 +3856,74 @@
     },
     {
       "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",
@@ -3917,9 +3935,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"
             },
             {
@@ -3929,18 +3957,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",
@@ -3955,99 +3995,81 @@
             "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"
           }
         }
       ]
     },
     {
       "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`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "commonToastStyles",
-          "declaration": {
-            "name": "commonToastStyles",
-            "module": "src/tuix-toast/TuixToast.styles.ts"
-          }
-        },
+          "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": "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",
@@ -4059,19 +4081,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"
             },
             {
@@ -4081,30 +4093,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",
@@ -4119,25 +4119,25 @@
             "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"
           }
         }
       ]
@@ -4438,37 +4438,53 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-button/enums/tuix-button.enums.ts",
+      "path": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "buttonTextColor",
+          "name": "CheckboxIconColorLight",
           "type": {
-            "text": "Record<MainVariant, string>"
+            "text": "object"
           },
-          "default": "{\n  [MainVariant.PRIMARY]: Palette.WHITE,\n  [MainVariant.SECONDARY]: Palette.MAIN,\n}"
+          "default": "{\n  [CheckboxIconMode.DEFAULT]: Palette.WHITE,\n  [CheckboxIconMode.DISABLED]: Palette.PRIMARY_300,\n  [CheckboxIconMode.ERROR]: Palette.WHITE,\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "CheckboxIconColorDark",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  [CheckboxIconMode.DEFAULT]: DarkPalette.WHITE,\n  [CheckboxIconMode.DISABLED]: DarkPalette.PRIMARY_100,\n  [CheckboxIconMode.ERROR]: DarkPalette.WHITE,\n}"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "buttonTextColor",
+          "name": "CheckboxIconColorLight",
           "declaration": {
-            "name": "buttonTextColor",
-            "module": "src/tuix-button/enums/tuix-button.enums.ts"
+            "name": "CheckboxIconColorLight",
+            "module": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CheckboxIconColorDark",
+          "declaration": {
+            "name": "CheckboxIconColorDark",
+            "module": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-button/interfaces/tuix-button.interface.ts",
+      "path": "src/tuix-checkbox/interfaces/tuix-checkbox.interface.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-button/stories/tuix-button.stories.ts",
+      "path": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4476,15 +4492,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixButton',\n  component: 'tuix-button',\n  argTypes: {\n    value: {\n      control: 'text',\n    },\n    variant: {\n      control: 'inline-radio',\n      options: Object.values(MainVariant),\n    },\n    iconLeft: {\n      control: 'select',\n      options: ['', ...[...Object.values(IconName), null]],\n    },\n    iconRight: {\n      control: 'select',\n      options: ['', ...[...Object.values(IconName), null]],\n    },\n    disabled: { control: 'boolean' },\n    dark: { control: 'boolean' },\n    full: { control: 'boolean' },\n    onClick: { action: 'customClick' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"width:100%; height:100vh; ${args.dark\n        ? `background-color: ${Palette.BLACK};`\n        : ''}\"\n    >\n      <div style=\"width:50%; margin:auto; height:100%; position:relative;\">\n        <tuix-button\n          style=\"width:100%; height:20%; text-align:center; position:absolute; top:50%;\"\n          .variant=${args.variant}\n          .iconLeft=${args.iconLeft}\n          .iconRight=${args.iconRight}\n          ?disabled=${args.disabled}\n          ?dark=${args.dark}\n          ?full=${args.full}\n          @customClick=${(e: CustomEventTuixButton) => args.onClick?.(e)}\n        >\n          ${args.value}\n        </tuix-button>\n      </div>\n    </div>\n  `,\n}"
+          "default": "{\n  title: 'TuixCheckbox',\n  component: 'tuix-checkbox',\n  argTypes: {\n    checked: {\n      control: 'boolean',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n    label: {\n      control: 'text',\n    },\n    labelSide: {\n      control: 'select',\n      options: [...Object.values(CheckboxLabelSide)],\n    },\n    onChange: { action: 'change' },\n  },\n  render: (args: ArgTypes) => html`\n    <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-checkbox\n          ?checked=\"${args.checked}\"\n          ?disabled=\"${args.disabled}\"\n          ?dark=\"${args.dark}\"\n          ?error=\"${args.error}\"\n          label=\"${args.label}\"\n          labelSide=\"${args.labelSide}\"\n          @change=\"${args.onChange}\"\n        ></tuix-checkbox>\n        <tuix-checkbox\n          ?checked=\"${args.checked}\"\n          ?disabled=\"${args.disabled}\"\n          ?dark=\"${args.dark}\"\n          ?error=\"${args.error}\"\n          labelSide=\"${args.labelSide}\"\n          @change=\"${args.onChange}\"\n        >\n          <tuix-text\n            size=\"${TextSize.FieldPlaceholder}\"\n            color=\"${TextVariant.PRIMARY}\"\n            ?dark=\"${args.dark}\"\n          >\n            Label from slot using a long text with max-width container\n          </tuix-text>\n        </tuix-checkbox>\n      </div>\n    </div>\n  `,\n}"
         },
         {
           "kind": "variable",
-          "name": "Button",
+          "name": "tuixCheckboxExample",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    value: 'Click me',\n    variant: MainVariant.PRIMARY,\n    disabled: false,\n    dark: false,\n    full: false,\n    iconLeft: null,\n    iconRight: null,\n  },\n}"
+          "default": "{\n  args: {\n    checked: false,\n    disabled: false,\n    dark: false,\n    error: false,\n    label: 'Label from property',\n    labelSide: CheckboxLabelSide.RIGHT,\n  },\n}"
         }
       ],
       "exports": [
@@ -4493,68 +4509,52 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-button/stories/tuix-button.stories.ts"
+            "module": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Button",
+          "name": "tuixCheckboxExample",
           "declaration": {
-            "name": "Button",
-            "module": "src/tuix-button/stories/tuix-button.stories.ts"
+            "name": "tuixCheckboxExample",
+            "module": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts",
+      "path": "src/tuix-button/enums/tuix-button.enums.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "CheckboxIconColorLight",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  [CheckboxIconMode.DEFAULT]: Palette.WHITE,\n  [CheckboxIconMode.DISABLED]: Palette.PRIMARY_300,\n  [CheckboxIconMode.ERROR]: Palette.WHITE,\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "CheckboxIconColorDark",
+          "name": "buttonTextColor",
           "type": {
-            "text": "object"
+            "text": "Record<MainVariant, string>"
           },
-          "default": "{\n  [CheckboxIconMode.DEFAULT]: DarkPalette.WHITE,\n  [CheckboxIconMode.DISABLED]: DarkPalette.PRIMARY_100,\n  [CheckboxIconMode.ERROR]: DarkPalette.WHITE,\n}"
+          "default": "{\n  [MainVariant.PRIMARY]: Palette.WHITE,\n  [MainVariant.SECONDARY]: Palette.MAIN,\n}"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "CheckboxIconColorLight",
-          "declaration": {
-            "name": "CheckboxIconColorLight",
-            "module": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "CheckboxIconColorDark",
+          "name": "buttonTextColor",
           "declaration": {
-            "name": "CheckboxIconColorDark",
-            "module": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts"
+            "name": "buttonTextColor",
+            "module": "src/tuix-button/enums/tuix-button.enums.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-checkbox/interfaces/tuix-checkbox.interface.ts",
+      "path": "src/tuix-button/interfaces/tuix-button.interface.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts",
+      "path": "src/tuix-button/stories/tuix-button.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4562,15 +4562,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixCheckbox',\n  component: 'tuix-checkbox',\n  argTypes: {\n    checked: {\n      control: 'boolean',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    dark: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n    label: {\n      control: 'text',\n    },\n    labelSide: {\n      control: 'select',\n      options: [...Object.values(CheckboxLabelSide)],\n    },\n    onChange: { action: 'change' },\n  },\n  render: (args: ArgTypes) => html`\n    <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-checkbox\n          ?checked=\"${args.checked}\"\n          ?disabled=\"${args.disabled}\"\n          ?dark=\"${args.dark}\"\n          ?error=\"${args.error}\"\n          label=\"${args.label}\"\n          labelSide=\"${args.labelSide}\"\n          @change=\"${args.onChange}\"\n        ></tuix-checkbox>\n        <tuix-checkbox\n          ?checked=\"${args.checked}\"\n          ?disabled=\"${args.disabled}\"\n          ?dark=\"${args.dark}\"\n          ?error=\"${args.error}\"\n          labelSide=\"${args.labelSide}\"\n          @change=\"${args.onChange}\"\n        >\n          <tuix-text\n            size=\"${TextSize.FieldPlaceholder}\"\n            color=\"${TextVariant.PRIMARY}\"\n            ?dark=\"${args.dark}\"\n          >\n            Label from slot using a long text with max-width container\n          </tuix-text>\n        </tuix-checkbox>\n      </div>\n    </div>\n  `,\n}"
+          "default": "{\n  title: 'TuixButton',\n  component: 'tuix-button',\n  argTypes: {\n    value: {\n      control: 'text',\n    },\n    variant: {\n      control: 'inline-radio',\n      options: Object.values(MainVariant),\n    },\n    iconLeft: {\n      control: 'select',\n      options: ['', ...[...Object.values(IconName), null]],\n    },\n    iconRight: {\n      control: 'select',\n      options: ['', ...[...Object.values(IconName), null]],\n    },\n    disabled: { control: 'boolean' },\n    dark: { control: 'boolean' },\n    full: { control: 'boolean' },\n    onClick: { action: 'customClick' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"width:100%; height:100vh; ${args.dark\n        ? `background-color: ${Palette.BLACK};`\n        : ''}\"\n    >\n      <div style=\"width:50%; margin:auto; height:100%; position:relative;\">\n        <tuix-button\n          style=\"width:100%; height:20%; text-align:center; position:absolute; top:50%;\"\n          .variant=${args.variant}\n          .iconLeft=${args.iconLeft}\n          .iconRight=${args.iconRight}\n          ?disabled=${args.disabled}\n          ?dark=${args.dark}\n          ?full=${args.full}\n          @customClick=${(e: CustomEventTuixButton) => args.onClick?.(e)}\n        >\n          ${args.value}\n        </tuix-button>\n      </div>\n    </div>\n  `,\n}"
         },
         {
           "kind": "variable",
-          "name": "tuixCheckboxExample",
+          "name": "Button",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    checked: false,\n    disabled: false,\n    dark: false,\n    error: false,\n    label: 'Label from property',\n    labelSide: CheckboxLabelSide.RIGHT,\n  },\n}"
+          "default": "{\n  args: {\n    value: 'Click me',\n    variant: MainVariant.PRIMARY,\n    disabled: false,\n    dark: false,\n    full: false,\n    iconLeft: null,\n    iconRight: null,\n  },\n}"
         }
       ],
       "exports": [
@@ -4579,15 +4579,15 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts"
+            "module": "src/tuix-button/stories/tuix-button.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "tuixCheckboxExample",
+          "name": "Button",
           "declaration": {
-            "name": "tuixCheckboxExample",
-            "module": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts"
+            "name": "Button",
+            "module": "src/tuix-button/stories/tuix-button.stories.ts"
           }
         }
       ]
@@ -4684,46 +4684,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-icon/stories/tuix-icon.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "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}"
-        },
-        {
-          "kind": "variable",
-          "name": "regularIcon",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{\n  args: {\n    ...defaultValues,\n  },\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "regularIcon",
-          "declaration": {
-            "name": "regularIcon",
-            "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-icon/enums/tuix-icon.enums.ts",
@@ -4740,74 +4700,50 @@
       "exports": [
         {
           "kind": "js",
-          "name": "iconSize",
-          "declaration": {
-            "name": "iconSize",
-            "module": "src/tuix-icon/enums/tuix-icon.enums.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "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}"
-        },
-        {
-          "kind": "variable",
-          "name": "iconButton",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{\n  args: {\n    variant: MainVariant.PRIMARY,\n    icon: IconName.ARROW_DOWN,\n    disabled: false,\n    dark: false,\n  },\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "iconButton",
+          "name": "iconSize",
           "declaration": {
-            "name": "iconButton",
-            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
+            "name": "iconSize",
+            "module": "src/tuix-icon/enums/tuix-icon.enums.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-input/interfaces/tuix-input.interface.ts",
+      "path": "src/tuix-icon/stories/tuix-icon.stories.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "InputState",
+          "name": "meta",
           "type": {
             "text": "object"
           },
-          "default": "{\n  INACTIVE: 'inactive',\n  ACTIVE: 'active',\n  DISABLED: 'disabled',\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": "regularIcon",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{\n  args: {\n    ...defaultValues,\n  },\n}"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "InputState",
+          "name": "default",
           "declaration": {
-            "name": "InputState",
-            "module": "src/tuix-input/interfaces/tuix-input.interface.ts"
+            "name": "meta",
+            "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "regularIcon",
+          "declaration": {
+            "name": "regularIcon",
+            "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
           }
         }
       ]
@@ -4868,6 +4804,30 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-input/interfaces/tuix-input.interface.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "InputState",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  INACTIVE: 'inactive',\n  ACTIVE: 'active',\n  DISABLED: 'disabled',\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "InputState",
+          "declaration": {
+            "name": "InputState",
+            "module": "src/tuix-input/interfaces/tuix-input.interface.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-input/stories/tuix-input.stories.ts",
@@ -4908,6 +4868,52 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "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}"
+        },
+        {
+          "kind": "variable",
+          "name": "iconButton",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{\n  args: {\n    variant: MainVariant.PRIMARY,\n    icon: IconName.ARROW_DOWN,\n    disabled: false,\n    dark: false,\n  },\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "iconButton",
+          "declaration": {
+            "name": "iconButton",
+            "module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tuix-link/enums/linkTarget.enum.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-link/stories/tuix-link.stories.ts",
@@ -4948,12 +4954,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/tuix-link/enums/linkTarget.enum.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/tuix-modal/stories/tuix-modal.stories.ts",
@@ -5134,47 +5134,79 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-text/enums/tuix-text.enums.ts",
+      "path": "src/tuix-toast/enums/tuix-toast.enums.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "colorText",
+          "name": "toastBgColorMap",
           "type": {
-            "text": "Record<TextVariant, string>"
+            "text": "Record<ToastTypeExcludingNone, 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}"
+          "default": "{\n  [ToastType.TEXT]: Palette.WHITE,\n  [ToastType.WARNING]: Palette.VALIDATION_50,\n  [ToastType.ERROR]: Palette.ERROR_50,\n  [ToastType.SUCCESS]: Palette.SUCCESS_50,\n}"
         },
         {
           "kind": "variable",
-          "name": "colorTextDark",
+          "name": "toastBgDarkColorMap",
           "type": {
-            "text": "Record<TextVariant, string>"
+            "text": "Record<ToastTypeExcludingNone, 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}"
+          "default": "{\n  [ToastType.TEXT]: DarkPalette.TOAST_TEXT,\n  [ToastType.WARNING]: DarkPalette.TOAST_WARNING,\n  [ToastType.ERROR]: DarkPalette.TOAST_ERROR,\n  [ToastType.SUCCESS]: DarkPalette.TOAST_SUCCESS,\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "iconPropertiesMap",
+          "type": {
+            "text": "Record<ToastTypeExcludingNone, IconProperties>"
+          },
+          "default": "{\n    [ToastType.TEXT]: {\n      name: IconName.ARROW_DOWN,\n      color: Palette.BLACK,\n    },\n    [ToastType.WARNING]: {\n      name: IconName.TRIANGLE_EXCLAMATION,\n      color: Palette.VALIDATION,\n    },\n    [ToastType.ERROR]: {\n      name: IconName.CIRCLE_EXCLAMATION,\n      color: Palette.ERROR,\n    },\n    [ToastType.SUCCESS]: {\n      name: IconName.CIRCLE_CHECK,\n      color: Palette.SUCCESS,\n    },\n  }"
+        },
+        {
+          "kind": "variable",
+          "name": "iconDarkPropertiesMap",
+          "type": {
+            "text": "Record<\n  ToastTypeExcludingNone,\n  IconProperties\n>"
+          },
+          "default": "{\n  [ToastType.TEXT]: {\n    name: IconName.ARROW_DOWN,\n    color: Palette.WHITE,\n  },\n  [ToastType.WARNING]: {\n    name: IconName.TRIANGLE_EXCLAMATION,\n    color: DarkPalette.VALIDATION,\n  },\n  [ToastType.ERROR]: {\n    name: IconName.CIRCLE_EXCLAMATION,\n    color: DarkPalette.ERROR,\n  },\n  [ToastType.SUCCESS]: {\n    name: IconName.CIRCLE_CHECK,\n    color: DarkPalette.SUCCESS,\n  },\n}"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "colorText",
+          "name": "toastBgColorMap",
           "declaration": {
-            "name": "colorText",
-            "module": "src/tuix-text/enums/tuix-text.enums.ts"
+            "name": "toastBgColorMap",
+            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
           }
         },
         {
           "kind": "js",
-          "name": "colorTextDark",
+          "name": "toastBgDarkColorMap",
           "declaration": {
-            "name": "colorTextDark",
-            "module": "src/tuix-text/enums/tuix-text.enums.ts"
+            "name": "toastBgDarkColorMap",
+            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "iconPropertiesMap",
+          "declaration": {
+            "name": "iconPropertiesMap",
+            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "iconDarkPropertiesMap",
+          "declaration": {
+            "name": "iconDarkPropertiesMap",
+            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-text/stories/tuix-text.stories.ts",
+      "path": "src/tuix-toast/stories/tuix-toast.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -5182,15 +5214,15 @@
           "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}"
+          "default": "{\n  title: 'TuixToast',\n  component: 'tuix-toast',\n  argTypes: {\n    type: {\n      control: 'select',\n      options: Object.values(ToastType),\n    },\n    dark: {\n      control: 'boolean',\n    },\n    visibilityDuration: {\n      control: 'number',\n    },\n    onClose: { action: 'on-close' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"height: 100vh; ${args.dark\n        ? `background-color: ${Palette.BLACK};`\n        : ''}\"\n    >\n      <tuix-toast\n        type=\"${args.type}\"\n        ?dark=\"${args.dark}\"\n        visibility-duration=\"${args.visibilityDuration}\"\n        @on-close=\"${args.onClose}\"\n      >\n        Lorem ipsum dolor sit amet consectetur. Sollicitudin id interdum\n        dignissim at orci. Augue vivamus arcu massa porta facilisi.\n      </tuix-toast>\n    </div>\n  `,\n}"
         },
         {
           "kind": "variable",
-          "name": "Headline",
+          "name": "toastExample",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    value: 'Test text',\n    size: TextSize.XL,\n    dark: false,\n  },\n}"
+          "default": "{\n  args: {\n    type: ToastType.TEXT,\n    dark: false,\n    visibilityDuration: 4000,\n  },\n}"
         }
       ],
       "exports": [
@@ -5199,94 +5231,62 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-text/stories/tuix-text.stories.ts"
+            "module": "src/tuix-toast/stories/tuix-toast.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Headline",
+          "name": "toastExample",
           "declaration": {
-            "name": "Headline",
-            "module": "src/tuix-text/stories/tuix-text.stories.ts"
+            "name": "toastExample",
+            "module": "src/tuix-toast/stories/tuix-toast.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-toast/enums/tuix-toast.enums.ts",
+      "path": "src/tuix-text/enums/tuix-text.enums.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "toastBgColorMap",
-          "type": {
-            "text": "Record<ToastTypeExcludingNone, string>"
-          },
-          "default": "{\n  [ToastType.TEXT]: Palette.WHITE,\n  [ToastType.WARNING]: Palette.VALIDATION_50,\n  [ToastType.ERROR]: Palette.ERROR_50,\n  [ToastType.SUCCESS]: Palette.SUCCESS_50,\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "toastBgDarkColorMap",
-          "type": {
-            "text": "Record<ToastTypeExcludingNone, string>"
-          },
-          "default": "{\n  [ToastType.TEXT]: Palette.PRIMARY_950,\n  [ToastType.WARNING]: DarkPalette.VALIDATION_50,\n  [ToastType.ERROR]: DarkPalette.ERROR_50,\n  [ToastType.SUCCESS]: DarkPalette.SUCCESS_50,\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "iconPropertiesMap",
+          "name": "colorText",
           "type": {
-            "text": "Record<ToastTypeExcludingNone, IconProperties>"
+            "text": "Record<TextVariant, string>"
           },
-          "default": "{\n    [ToastType.TEXT]: {\n      name: IconName.ARROW_DOWN,\n      color: Palette.BLACK,\n    },\n    [ToastType.WARNING]: {\n      name: IconName.TRIANGLE_EXCLAMATION,\n      color: Palette.VALIDATION,\n    },\n    [ToastType.ERROR]: {\n      name: IconName.CIRCLE_EXCLAMATION,\n      color: Palette.ERROR,\n    },\n    [ToastType.SUCCESS]: {\n      name: IconName.CIRCLE_CHECK,\n      color: Palette.SUCCESS,\n    },\n  }"
+          "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": "iconDarkPropertiesMap",
+          "name": "colorTextDark",
           "type": {
-            "text": "Record<\n  ToastTypeExcludingNone,\n  IconProperties\n>"
+            "text": "Record<TextVariant, string>"
           },
-          "default": "{\n  [ToastType.TEXT]: {\n    name: IconName.ARROW_DOWN,\n    color: Palette.WHITE,\n  },\n  [ToastType.WARNING]: {\n    name: IconName.TRIANGLE_EXCLAMATION,\n    color: DarkPalette.VALIDATION,\n  },\n  [ToastType.ERROR]: {\n    name: IconName.CIRCLE_EXCLAMATION,\n    color: DarkPalette.ERROR,\n  },\n  [ToastType.SUCCESS]: {\n    name: IconName.CIRCLE_CHECK,\n    color: DarkPalette.SUCCESS,\n  },\n}"
+          "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": "toastBgColorMap",
-          "declaration": {
-            "name": "toastBgColorMap",
-            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "toastBgDarkColorMap",
-          "declaration": {
-            "name": "toastBgDarkColorMap",
-            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "iconPropertiesMap",
+          "name": "colorText",
           "declaration": {
-            "name": "iconPropertiesMap",
-            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
+            "name": "colorText",
+            "module": "src/tuix-text/enums/tuix-text.enums.ts"
           }
         },
         {
           "kind": "js",
-          "name": "iconDarkPropertiesMap",
+          "name": "colorTextDark",
           "declaration": {
-            "name": "iconDarkPropertiesMap",
-            "module": "src/tuix-toast/enums/tuix-toast.enums.ts"
+            "name": "colorTextDark",
+            "module": "src/tuix-text/enums/tuix-text.enums.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/tuix-toast/stories/tuix-toast.stories.ts",
+      "path": "src/tuix-text/stories/tuix-text.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -5294,15 +5294,15 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  title: 'TuixToast',\n  component: 'tuix-toast',\n  argTypes: {\n    type: {\n      control: 'select',\n      options: Object.values(ToastType),\n    },\n    dark: {\n      control: 'boolean',\n    },\n    visibilityDuration: {\n      control: 'number',\n    },\n    onClose: { action: 'on-close' },\n  },\n  render: (args: ArgTypes) => html`\n    <div\n      style=\"height: 100vh; ${args.dark\n        ? `background-color: ${Palette.BLACK};`\n        : ''}\"\n    >\n      <tuix-toast\n        type=\"${args.type}\"\n        ?dark=\"${args.dark}\"\n        visibility-duration=\"${args.visibilityDuration}\"\n        @on-close=\"${args.onClose}\"\n      >\n        Lorem ipsum dolor sit amet consectetur. Sollicitudin id interdum\n        dignissim at orci. Augue vivamus arcu massa porta facilisi.\n      </tuix-toast>\n    </div>\n  `,\n}"
+          "default": "{\n  title: '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": "toastExample",
+          "name": "Headline",
           "type": {
             "text": "Story"
           },
-          "default": "{\n  args: {\n    type: ToastType.TEXT,\n    dark: false,\n    visibilityDuration: 4000,\n  },\n}"
+          "default": "{\n  args: {\n    value: 'Test text',\n    size: TextSize.XL,\n    dark: false,\n  },\n}"
         }
       ],
       "exports": [
@@ -5311,15 +5311,15 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/tuix-toast/stories/tuix-toast.stories.ts"
+            "module": "src/tuix-text/stories/tuix-text.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "toastExample",
+          "name": "Headline",
           "declaration": {
-            "name": "toastExample",
-            "module": "src/tuix-toast/stories/tuix-toast.stories.ts"
+            "name": "Headline",
+            "module": "src/tuix-text/stories/tuix-text.stories.ts"
           }
         }
       ]