diff --git a/src/elements/Button/Button.tsx b/src/elements/Button/Button.tsx
index 5ab0d4f5..b34e9e9c 100644
--- a/src/elements/Button/Button.tsx
+++ b/src/elements/Button/Button.tsx
@@ -25,12 +25,12 @@ export interface ButtonProps
   /**
    * Style variant of the button.
    */
-  variant?: 'filled' | 'outline' | 'text';
+  variant?: 'filled' | 'outline' | 'text' | string;
 
   /**
    * The size variation of the button.
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | string;
 
   /**
    * If true, the button will take up the full width of its container.
diff --git a/src/elements/Button/ButtonTheme.ts b/src/elements/Button/ButtonTheme.ts
index e063c727..aeac42c4 100644
--- a/src/elements/Button/ButtonTheme.ts
+++ b/src/elements/Button/ButtonTheme.ts
@@ -12,12 +12,14 @@ export interface ButtonTheme {
       small: string;
       medium: string;
       large: string;
+      [key: string]: string;
     };
   };
   variants: {
     filled: string;
     outline: string;
     text: string;
+    [key: string]: string;
   };
   colors: {
     default: {
diff --git a/src/elements/Chip/Chip.tsx b/src/elements/Chip/Chip.tsx
index 49157da8..65537331 100644
--- a/src/elements/Chip/Chip.tsx
+++ b/src/elements/Chip/Chip.tsx
@@ -20,12 +20,12 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Size variant for the chip.
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | string;
 
   /**
    * Style variant for the chip.
    */
-  variant?: 'filled' | 'outline';
+  variant?: 'filled' | 'outline' | string;
 
   /**
    * Whether the chip is selected.
diff --git a/src/elements/Chip/ChipTheme.ts b/src/elements/Chip/ChipTheme.ts
index 9ff1f572..13f75e58 100644
--- a/src/elements/Chip/ChipTheme.ts
+++ b/src/elements/Chip/ChipTheme.ts
@@ -29,6 +29,7 @@ export interface ChipTheme {
       small: string;
       medium: string;
       large: string;
+      [key: string]: string;
     };
   };
   variants: {
@@ -49,6 +50,7 @@ export interface ChipTheme {
     small: string;
     medium: string;
     large: string;
+    [key: string]: string;
   };
   focus: string;
   deleteButton: {
@@ -57,6 +59,7 @@ export interface ChipTheme {
       small: string;
       medium: string;
       large: string;
+      [key: string]: string;
     };
   };
   disabled: string;
diff --git a/src/elements/Loader/DotsLoader.tsx b/src/elements/Loader/DotsLoader.tsx
index 5a01cd7b..c9ca6b40 100644
--- a/src/elements/Loader/DotsLoader.tsx
+++ b/src/elements/Loader/DotsLoader.tsx
@@ -18,7 +18,7 @@ export interface DotsLoaderProps {
   /**
    * The size of the loader.
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | string;
 
   /**
    * Theme for the DotsLoader.
diff --git a/src/elements/Loader/DotsLoaderTheme.ts b/src/elements/Loader/DotsLoaderTheme.ts
index 4a98b68f..cc0261c3 100644
--- a/src/elements/Loader/DotsLoaderTheme.ts
+++ b/src/elements/Loader/DotsLoaderTheme.ts
@@ -5,6 +5,7 @@ export interface DotsLoaderTheme {
     small: string;
     medium: string;
     large: string;
+    [key: string]: string;
   };
 }
 
diff --git a/src/form/Checkbox/Checkbox.tsx b/src/form/Checkbox/Checkbox.tsx
index 3c470221..89d48716 100644
--- a/src/form/Checkbox/Checkbox.tsx
+++ b/src/form/Checkbox/Checkbox.tsx
@@ -28,7 +28,7 @@ export interface CheckboxProps {
   /**
    * Size of the checkbox.
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | string;
 
   /**
    * Additional class names to apply to the checkbox.
diff --git a/src/form/Checkbox/CheckboxTheme.ts b/src/form/Checkbox/CheckboxTheme.ts
index 2e9ca70f..300795da 100644
--- a/src/form/Checkbox/CheckboxTheme.ts
+++ b/src/form/Checkbox/CheckboxTheme.ts
@@ -9,6 +9,7 @@ export interface CheckboxTheme {
       small: string;
       medium: string;
       large: string;
+      [key: string]: string;
     };
   };
   border: string;
@@ -19,6 +20,7 @@ export interface CheckboxTheme {
     small: string;
     medium: string;
     large: string;
+    [key: string]: string;
   };
   boxVariants: {
     hover: {
diff --git a/src/form/Input/Input.tsx b/src/form/Input/Input.tsx
index 830fce19..b16c5675 100644
--- a/src/form/Input/Input.tsx
+++ b/src/form/Input/Input.tsx
@@ -36,7 +36,7 @@ export interface InputProps
   /**
    * Size of the input.
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | string;
 
   /**
    * Content to display before the input.
diff --git a/src/form/Input/InputTheme.ts b/src/form/Input/InputTheme.ts
index c3c6880c..9c09eb73 100644
--- a/src/form/Input/InputTheme.ts
+++ b/src/form/Input/InputTheme.ts
@@ -10,6 +10,7 @@ export interface InputTheme {
     small: string;
     medium: string;
     large: string;
+    [key: string]: string;
   };
   adornment: {
     base: string;
diff --git a/src/form/Radio/Radio.tsx b/src/form/Radio/Radio.tsx
index 9e6b7103..d8566f1d 100644
--- a/src/form/Radio/Radio.tsx
+++ b/src/form/Radio/Radio.tsx
@@ -37,7 +37,7 @@ export interface RadioProps {
   /**
    * Size of the radio.
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | string;
 
   /**
    * Event handler for when the radio is changed.
diff --git a/src/form/Radio/RadioTheme.ts b/src/form/Radio/RadioTheme.ts
index 13800020..ee670f88 100644
--- a/src/form/Radio/RadioTheme.ts
+++ b/src/form/Radio/RadioTheme.ts
@@ -12,6 +12,7 @@ export interface RadioTheme {
       small: string;
       medium: string;
       large: string;
+      [key: string]: string;
     };
   };
   label: {
@@ -24,6 +25,7 @@ export interface RadioTheme {
     small: string;
     medium: string;
     large: string;
+    [key: string]: string;
   };
 }
 
diff --git a/src/form/Textarea/Textarea.tsx b/src/form/Textarea/Textarea.tsx
index 3d9ea138..a3e4c8a8 100644
--- a/src/form/Textarea/Textarea.tsx
+++ b/src/form/Textarea/Textarea.tsx
@@ -31,7 +31,7 @@ export interface TextareaProps extends TextareaAutosizeProps {
   /**
    * Size of the field.
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | string;
 
   /**
    * Theme for the Textarea.
diff --git a/src/form/Textarea/TextareaTheme.ts b/src/form/Textarea/TextareaTheme.ts
index 5db93fba..18ba5874 100644
--- a/src/form/Textarea/TextareaTheme.ts
+++ b/src/form/Textarea/TextareaTheme.ts
@@ -10,6 +10,7 @@ export interface TextareaTheme {
     small: string;
     medium: string;
     large: string;
+    [key: string]: string;
   };
 }
 
diff --git a/src/form/Toggle/Toggle.tsx b/src/form/Toggle/Toggle.tsx
index 27f3d64c..e5d51154 100644
--- a/src/form/Toggle/Toggle.tsx
+++ b/src/form/Toggle/Toggle.tsx
@@ -22,7 +22,7 @@ export interface ToggleProps {
   /**
    * The size of the toggle.
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | string;
 
   /**
    * When the toggle is changed.
diff --git a/src/form/Toggle/ToggleTheme.ts b/src/form/Toggle/ToggleTheme.ts
index bc040766..0cde12f3 100644
--- a/src/form/Toggle/ToggleTheme.ts
+++ b/src/form/Toggle/ToggleTheme.ts
@@ -9,6 +9,7 @@ export interface ToggleTheme {
       small: string;
       medium: string;
       large: string;
+      [key: string]: string;
     };
     disabled: string;
     disabledAndChecked: string;
@@ -17,6 +18,7 @@ export interface ToggleTheme {
     small: string;
     medium: string;
     large: string;
+    [key: string]: string;
   };
 }
 
diff --git a/src/layout/Tabs/Tab.tsx b/src/layout/Tabs/Tab.tsx
index 26d43b0f..cc351fcc 100644
--- a/src/layout/Tabs/Tab.tsx
+++ b/src/layout/Tabs/Tab.tsx
@@ -47,7 +47,7 @@ export interface TabProps extends PropsWithChildren {
    *
    * @private
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | string;
 
   /**
    * Theme for the Tabs.
diff --git a/src/layout/Tabs/TabList.tsx b/src/layout/Tabs/TabList.tsx
index d131c608..5b1fd458 100644
--- a/src/layout/Tabs/TabList.tsx
+++ b/src/layout/Tabs/TabList.tsx
@@ -45,7 +45,7 @@ export interface TabListProps extends PropsWithChildren {
    * The size of the tabs.
    * @private
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | string;
 
   /**
    * Theme for the Tabs.
diff --git a/src/layout/Tabs/Tabs.tsx b/src/layout/Tabs/Tabs.tsx
index b59e3916..adbe5f2c 100644
--- a/src/layout/Tabs/Tabs.tsx
+++ b/src/layout/Tabs/Tabs.tsx
@@ -49,7 +49,7 @@ export interface TabsProps extends PropsWithChildren {
   /**
    * The size of the tabs.
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | string;
 
   /**
    * The callback to be called when a tab is selected.
diff --git a/src/layout/Tabs/TabsTheme.ts b/src/layout/Tabs/TabsTheme.ts
index 6daf90b3..0a0ad500 100644
--- a/src/layout/Tabs/TabsTheme.ts
+++ b/src/layout/Tabs/TabsTheme.ts
@@ -8,6 +8,7 @@ export interface TabsTheme {
         small: string;
         medium: string;
         large: string;
+        [key: string]: string;
       };
     };
     divider: string;
@@ -28,6 +29,7 @@ export interface TabsTheme {
         small: string;
         medium: string;
         large: string;
+        [key: string]: string;
       };
     };
   };
diff --git a/src/layout/VerticalSpacer/VerticalSpacer.tsx b/src/layout/VerticalSpacer/VerticalSpacer.tsx
index 0e5b099f..4c99d175 100644
--- a/src/layout/VerticalSpacer/VerticalSpacer.tsx
+++ b/src/layout/VerticalSpacer/VerticalSpacer.tsx
@@ -15,7 +15,14 @@ export interface VerticalSpacerProps extends HTMLAttributes<HTMLDivElement> {
   theme?: VerticalSpacerTheme;
 }
 
-export type VerticalSpaceType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type VerticalSpaceType =
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | 'xxl'
+  | string;
 
 export interface VerticalSpacerRef {
   /**
diff --git a/src/layout/VerticalSpacer/VerticalSpacerTheme.ts b/src/layout/VerticalSpacer/VerticalSpacerTheme.ts
index a40a3bb9..38308747 100644
--- a/src/layout/VerticalSpacer/VerticalSpacerTheme.ts
+++ b/src/layout/VerticalSpacer/VerticalSpacerTheme.ts
@@ -7,6 +7,7 @@ export interface VerticalSpacerTheme {
     lg: string;
     xl: string;
     xxl: string;
+    [key: string]: string;
   };
 }