diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 25489bc..acc752b 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -2,11 +2,13 @@ import { applicationConfig, Preview } from '@storybook/angular';
 import { setCompodocJson } from '@storybook/addon-docs/angular';
 import docJson from '../documentation.json';
 import { providePrimeNG } from 'primeng/config';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+
 import Preset from '../src/prime-preset/theme.preset';
-setCompodocJson(docJson);
 
-import '!style-loader!css-loader!postcss-loader!sass-loader!../node_modules/@tabler/icons-webfont/dist/tabler-icons.min.css';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import '!style-loader!css-loader!postcss-loader!sass-loader!../src/styles.scss';
+
+setCompodocJson(docJson);
 
 const preview: Preview = {
   decorators: [
diff --git a/.storybook/tsconfig.json b/.storybook/tsconfig.json
index b25f6fe..507a714 100644
--- a/.storybook/tsconfig.json
+++ b/.storybook/tsconfig.json
@@ -5,6 +5,6 @@
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true
   },
-  "include": ["../src/stories/**/*.stories.*", "./preview.ts"],
+  "include": ["../src/stories/**/*.stories.*", "./preview.ts", "../src/prime-preset/**/*"],
   "files": ["./typings.d.ts"]
 }
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index f98a6e9..6bdbf57 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -2,7 +2,22 @@ import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessC
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import { providePrimeNG } from 'primeng/config';
+import Preset from '../prime-preset/theme.preset';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideBrowserGlobalErrorListeners(), provideZonelessChangeDetection(), provideRouter(routes)]
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZonelessChangeDetection(),
+    providePrimeNG({
+      theme: {
+        preset: Preset,
+        options: {
+          darkModeSelector: false,
+          cssLayer: false
+        }
+      }
+    }),
+    provideRouter(routes)
+  ]
 };
diff --git a/src/app/app.html b/src/app/app.html
index e69de29..beb2fb5 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -0,0 +1 @@
+<p-button label="Label"></p-button>
diff --git a/src/app/app.ts b/src/app/app.ts
index 451f3f1..dd76ca8 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -1,9 +1,9 @@
 import { Component, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Button } from 'primeng/button';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [Button],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
diff --git a/src/prime-preset/components.ts b/src/prime-preset/components.ts
deleted file mode 100644
index e5a007c..0000000
--- a/src/prime-preset/components.ts
+++ /dev/null
@@ -1,3362 +0,0 @@
-export default {
-  accordion: {
-    header: {
-      color: '{text.color}',
-      hoverColor: '{text.hoverColor}',
-      activeColor: '{text.color}',
-      activeHoverColor: '{text.hoverColor}',
-      borderColor: '{transparent}',
-      padding: '1rem 0 1rem 0',
-      fontWeight: '{fonts.fontWeight.bold}',
-      borderRadius: '0',
-      borderWidth: '0 0 0 0',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: 'inset {focus.ring.shadow}'
-      },
-      toggleIcon: {
-        color: '{text.color}',
-        hoverColor: '{text.hoverColor}',
-        activeColor: '{text.color}',
-        activeHoverColor: '{text.hoverColor}'
-      },
-      last: {
-        bottomBorderRadius: '{content.borderRadius}',
-        activeBottomBorderRadius: '0'
-      },
-      first: {
-        borderWidth: '0',
-        topBorderRadius: '{content.borderRadius}'
-      }
-    },
-    root: {
-      transitionDuration: '{formField.transitionDuration}'
-    },
-    panel: {
-      borderWidth: '0 0 0.07142857142857142rem 0',
-      borderColor: '{formField.borderColor}'
-    },
-    colorScheme: {
-      light: {
-        header: {
-          background: '{transparent}',
-          hoverBackground: '{transparent}',
-          activeBackground: '{transparent}',
-          activeHoverBackground: '{transparent}'
-        }
-      }
-    },
-    content: {
-      borderWidth: '1px 0 0 0',
-      borderColor: '{transparent}',
-      background: '{transparent}',
-      color: '{text.color}',
-      padding: '0 0 1rem 1.75rem'
-    }
-  },
-  autocomplete: {
-    colorScheme: {
-      light: {
-        chip: {
-          focusBackground: '{chip.colorScheme.light.root.background}',
-          focusColor: '{chip.colorScheme.light.root.color}'
-        },
-        dropdown: {
-          background: '{formField.background}',
-          hoverBackground: '{formField.background}',
-          activeBackground: '{formField.background}',
-          color: '{formField.color}',
-          hoverColor: '{formField.color}',
-          activeColor: '{formField.color}'
-        }
-      }
-    },
-    extend: {
-      extOption: {
-        gap: '0.5rem'
-      },
-      extOptionGroup: {
-        gap: '0.5rem'
-      }
-    },
-    root: {
-      background: '{formField.background}',
-      disabledBackground: '{formField.disabledBackground}',
-      filledBackground: '{formField.filledBackground}',
-      filledHoverBackground: '{formField.filledHoverBackground}',
-      filledFocusBackground: '{formField.filledFocusBackground}',
-      borderColor: '{formField.borderColor}',
-      hoverBorderColor: '{formField.hoverBorderSecondaryColor}',
-      focusBorderColor: '{formField.focusBorderSecondaryColor}',
-      invalidBorderColor: '{formField.invalidBorderColor}',
-      color: '{formField.color}',
-      disabledColor: '{formField.disabledColor}',
-      placeholderColor: '{formField.placeholderColor}',
-      invalidPlaceholderColor: '{formField.invalidPlaceholderColor}',
-      shadow: '{formField.shadow}',
-      paddingX: '{formField.paddingX}',
-      paddingY: '{formField.paddingY}',
-      borderRadius: '{formField.borderRadius}',
-      transitionDuration: '{formField.transitionDuration}'
-    },
-    overlay: {
-      background: '{overlay.select.background}',
-      borderColor: '{overlay.select.borderColor}',
-      borderRadius: '{overlay.select.borderRadius}',
-      color: '{overlay.select.color}',
-      shadow: '{overlay.select.shadow}'
-    },
-    list: {
-      padding: '{list.padding}',
-      gap: '{list.gap}'
-    },
-    option: {
-      focusBackground: '{list.option.focusBackground}',
-      selectedBackground: '{list.option.selectedBackground}',
-      selectedFocusBackground: '{list.option.selectedFocusBackground}',
-      color: '{list.option.color}',
-      focusColor: '{list.option.focusColor}',
-      selectedColor: '{list.option.selectedColor}',
-      selectedFocusColor: '{list.option.selectedFocusColor}',
-      padding: '{list.option.padding}',
-      borderRadius: '{list.option.borderRadius}'
-    },
-    optionGroup: {
-      background: '{list.optionGroup.background}',
-      color: '{list.optionGroup.color}',
-      fontWeight: '{fonts.fontWeight.demibold}',
-      padding: '{list.optionGroup.padding}'
-    },
-    dropdown: {
-      width: '100%',
-      borderColor: '{formField.borderColor}',
-      hoverBorderColor: '{formField.hoverBorderSecondaryColor}',
-      activeBorderColor: '{formField.focusBorderSecondaryColor}',
-      borderRadius: '{formField.borderRadius}',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{formField.focusRing.style}',
-        color: '{formField.focusRing.color}',
-        offset: '{formField.focusRing.offset}',
-        shadow: '{formField.focusRing.shadow}'
-      },
-      sm: {
-        width: '2rem'
-      },
-      lg: {
-        width: '3rem'
-      }
-    },
-    chip: {
-      borderRadius: '{chip.root.borderRadius}'
-    },
-    emptyMessage: {
-      padding: '{list.option.padding}'
-    }
-  },
-  avatar: {
-    extend: {
-      borderColor: '{formField.borderColor}'
-    },
-    root: {
-      width: '2rem',
-      height: '2rem',
-      fontSize: '{fonts.fontSize.base}',
-      color: '{text.extend.colorPrimaryStatic}',
-      background: '{primary.color}',
-      borderRadius: '{borderRadius.md}'
-    },
-    icon: {
-      size: '1rem'
-    },
-    group: {
-      borderColor: '{content.background}',
-      offset: '-0.75rem'
-    },
-    lg: {
-      width: '2.5rem',
-      height: '2.5rem',
-      fontSize: '{fonts.fontSize.base}',
-      icon: {
-        size: '1rem'
-      },
-      group: {
-        offset: '-1rem'
-      }
-    },
-    xl: {
-      width: '3.5rem',
-      height: '3.5rem',
-      icon: {
-        size: '1.5rem'
-      },
-      group: {
-        offset: '-1.5rem'
-      },
-      fontSize: '{fonts.fontSize.base}'
-    }
-  },
-  badge: {
-    colorScheme: {
-      light: {
-        primary: {
-          color: '{text.extend.colorPrimaryStatic}',
-          background: '{primary.color}'
-        },
-        secondary: {
-          color: '{text.extend.colorInverted}',
-          background: '{surface.900}'
-        },
-        success: {
-          color: '{success.900}',
-          background: '{success.300}'
-        },
-        info: {
-          color: '{info.900}',
-          background: '{info.300}'
-        },
-        warn: {
-          color: '{warn.900}',
-          background: '{warn.300}'
-        },
-        danger: {
-          color: '{error.900}',
-          background: '{error.300}'
-        }
-      }
-    },
-    extend: {
-      extDot: {
-        success: {
-          background: '{colors.solid.green.400}'
-        },
-        info: {
-          background: '{info.400}'
-        },
-        warn: {
-          background: '{warn.400}'
-        },
-        danger: {
-          background: '{error.400}'
-        },
-        lg: {
-          size: '0.75rem'
-        },
-        xlg: {
-          size: '1rem'
-        }
-      }
-    },
-    root: {
-      borderRadius: '{borderRadius.xl}',
-      padding: '0.5357142857142857rem',
-      fontSize: '{fonts.fontSize.xs}',
-      fontWeight: '{fonts.fontWeight.regular}',
-      minWidth: '1.5rem',
-      height: '1.5rem'
-    },
-    dot: {
-      size: '0.5rem'
-    },
-    sm: {
-      fontSize: '{fonts.fontSize.xs}',
-      minWidth: '0',
-      height: '0'
-    },
-    lg: {
-      fontSize: '{fonts.fontSize.xs}',
-      minWidth: '1.75rem',
-      height: '1.75rem'
-    },
-    xl: {
-      fontSize: '{fonts.fontSize.xs}',
-      minWidth: '2rem',
-      height: '2rem'
-    }
-  },
-  breadcrumb: {
-    extend: {
-      hoverBackground: '{surface.100}'
-    },
-    root: {
-      padding: '0.25rem',
-      background: '{transparent}',
-      gap: '0',
-      transitionDuration: '{formField.transitionDuration}'
-    },
-    focusRing: {
-      width: '{focusRing.width}',
-      style: '{focusRing.style}',
-      color: '{focusRing.color}',
-      offset: '{focusRing.offset}',
-      shadow: '{focusRing.shadow}'
-    },
-    item: {
-      color: '{text.color}',
-      hoverColor: '{text.hoverColor}',
-      borderRadius: '{borderRadius.xs}',
-      gap: '{navigation.item.gap}',
-      icon: {
-        color: '{text.color}',
-        hoverColor: '{text.hoverColor}'
-      }
-    },
-    separator: {
-      color: '{text.color}'
-    }
-  },
-  button: {
-    extend: {
-      extOutlined: {
-        danger: {
-          focusBackground: '{transparent}'
-        },
-        warn: {
-          focusBackground: '{transparent}'
-        },
-        info: {
-          focusBackground: '{transparent}'
-        },
-        help: {
-          focusBackground: '{transparent}'
-        },
-        success: {
-          focusBackground: '{transparent}'
-        }
-      },
-      disabledBackground: '{formField.disabledBackground}',
-      disabledColor: '{formField.disabledColor}',
-      extText: {
-        danger: {
-          focusBackground: '{transparent}'
-        },
-        warn: {
-          focusBackground: '{transparent}'
-        },
-        info: {
-          focusBackground: '{transparent}'
-        },
-        help: {
-          focusBackground: '{transparent}'
-        },
-        success: {
-          focusBackground: '{transparent}'
-        }
-      },
-      extLink: {
-        background: '{transparent}',
-        colorHover: '{text.hoverColor}',
-        paddingX: '0',
-        paddingY: '0.25rem',
-        sm: {
-          iconOnlyWidth: '1rem'
-        },
-        base: {
-          iconOnlyWidth: '1.5357142857142858rem'
-        },
-        lg: {
-          iconOnlyWidth: '1.75rem'
-        },
-        xlg: {
-          iconOnlyWidth: '2rem'
-        }
-      },
-      extSm: {
-        borderRadius: '{borderRadius.md}',
-        gap: '0.5rem'
-      },
-      extLg: {
-        borderRadius: '{borderRadius.lg}',
-        gap: '0.75rem'
-      },
-      extXlg: {
-        borderRadius: '{borderRadius.lg}',
-        gap: '0.75rem',
-        iconOnlyWidth: '4.071428571428571rem',
-        paddingX: '1.5rem',
-        paddingY: '1.25rem'
-      },
-      borderWidth: '0.07142857142857142rem'
-    },
-    colorScheme: {
-      light: {
-        root: {
-          primary: {
-            background: '{primary.color}',
-            hoverBackground: '{primary.hoverColor}',
-            activeBackground: '{primary.color}',
-            borderColor: '{transparent}',
-            hoverBorderColor: '{transparent}',
-            activeBorderColor: '{transparent}',
-            color: '{text.extend.colorPrimaryStatic}',
-            hoverColor: '{text.extend.colorPrimaryStatic}',
-            activeColor: '{text.extend.colorPrimaryStatic}',
-            focusRing: {
-              color: '{primary.200}',
-              shadow: '{focusRing.shadow}'
-            }
-          },
-          secondary: {
-            background: '{surface.900}',
-            hoverBackground: '{surface.800}',
-            activeBackground: '{surface.900}',
-            borderColor: '{transparent}',
-            hoverBorderColor: '{transparent}',
-            activeBorderColor: '{transparent}',
-            color: '{text.extend.colorInverted}',
-            hoverColor: '{text.extend.colorInverted}',
-            activeColor: '{text.extend.colorInverted}',
-            focusRing: {
-              color: '{primary.200}',
-              shadow: '{focusRing.shadow}'
-            }
-          },
-          contrast: {
-            background: '{surface.200}',
-            hoverBackground: '{surface.300}',
-            activeBackground: '{surface.200}',
-            borderColor: '{transparent}',
-            hoverBorderColor: '{transparent}',
-            activeBorderColor: '{transparent}',
-            color: '{text.color}',
-            hoverColor: '{text.color}',
-            activeColor: '{text.color}',
-            focusRing: {
-              color: '{primary.200}',
-              shadow: '{focusRing.shadow}'
-            }
-          },
-          info: {
-            background: '{info.300}',
-            hoverBackground: '{info.400}',
-            activeBackground: '{info.300}',
-            borderColor: '{transparent}',
-            hoverBorderColor: '{transparent}',
-            activeBorderColor: '{transparent}',
-            color: '{info.900}',
-            hoverColor: '{info.950}',
-            activeColor: '{info.900}'
-          },
-          success: {
-            background: '{success.300}',
-            hoverBackground: '{success.400}',
-            activeBackground: '{success.300}',
-            borderColor: '{transparent}',
-            hoverBorderColor: '{transparent}',
-            activeBorderColor: '{transparent}',
-            color: '{success.900}',
-            hoverColor: '{success.950}',
-            activeColor: '{success.900}'
-          },
-          warn: {
-            background: '{warn.300}',
-            hoverBackground: '{warn.400}',
-            activeBackground: '{warn.300}',
-            borderColor: '{transparent}',
-            hoverBorderColor: '{transparent}',
-            activeBorderColor: '{transparent}',
-            color: '{warn.900}',
-            hoverColor: '{warn.950}',
-            activeColor: '{warn.900}'
-          },
-          help: {
-            background: '{help.300}',
-            hoverBackground: '{help.400}',
-            activeBackground: '{help.300}',
-            borderColor: '{transparent}',
-            hoverBorderColor: '{transparent}',
-            activeBorderColor: '{transparent}',
-            color: '{help.900}',
-            hoverColor: '{help.950}',
-            activeColor: '{help.900}'
-          },
-          danger: {
-            background: '{error.300}',
-            hoverBackground: '{error.400}',
-            activeBackground: '{error.300}',
-            borderColor: '{transparent}',
-            hoverBorderColor: '{transparent}',
-            activeBorderColor: '{transparent}',
-            color: '{error.900}',
-            hoverColor: '{error.950}',
-            activeColor: '{error.900}'
-          }
-        },
-        outlined: {
-          primary: {
-            hoverBackground: '{primary.50}',
-            activeBackground: '{primary.100}',
-            borderColor: '{primary.200}',
-            color: '{colors.solid.green.500}'
-          },
-          success: {
-            hoverBackground: '{success.100}',
-            activeBackground: '{transparent}',
-            borderColor: '{success.600}',
-            color: '{success.600}'
-          },
-          info: {
-            hoverBackground: '{info.100}',
-            activeBackground: '{transparent}',
-            borderColor: '{info.600}',
-            color: '{info.600}'
-          },
-          warn: {
-            hoverBackground: '{warn.100}',
-            activeBackground: '{transparent}',
-            borderColor: '{warn.600}',
-            color: '{warn.600}'
-          },
-          help: {
-            hoverBackground: '{help.100}',
-            activeBackground: '{transparent}',
-            borderColor: '{help.600}',
-            color: '{help.600}'
-          },
-          danger: {
-            hoverBackground: '{error.100}',
-            activeBackground: '{transparent}',
-            borderColor: '{error.600}',
-            color: '{error.600}'
-          }
-        },
-        text: {
-          primary: {
-            hoverBackground: '{surface.100}',
-            activeBackground: '{transparent}',
-            color: '{text.color}'
-          },
-          success: {
-            hoverBackground: '{success.100}',
-            activeBackground: '{transparent}',
-            color: '{success.600}'
-          },
-          info: {
-            hoverBackground: '{info.100}',
-            activeBackground: '{transparent}',
-            color: '{info.600}'
-          },
-          warn: {
-            hoverBackground: '{warn.100}',
-            activeBackground: '{transparent}',
-            color: '{warn.600}'
-          },
-          help: {
-            hoverBackground: '{help.100}',
-            activeBackground: '{transparent}',
-            color: '{help.600}'
-          },
-          danger: {
-            hoverBackground: '{error.100}',
-            activeBackground: '{transparent}',
-            color: '{error.600}'
-          }
-        },
-        link: {
-          color: '{text.color}',
-          hoverColor: '{text.hoverColor}',
-          activeColor: '{text.color}'
-        }
-      }
-    },
-    root: {
-      borderRadius: '{borderRadius.md}',
-      roundedBorderRadius: '2rem',
-      gap: '0.5rem',
-      paddingX: '1rem',
-      paddingY: '0.5rem',
-      iconOnlyWidth: '2.5rem',
-      raisedShadow: '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
-      badgeSize: '1rem',
-      transitionDuration: '{formField.transitionDuration}',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        offset: '{focusRing.offset}'
-      },
-      sm: {
-        iconOnlyWidth: '2rem',
-        paddingX: '0.75rem',
-        paddingY: '0.5rem',
-        fontSize: '{fonts.fontSize.sm}'
-      },
-      lg: {
-        iconOnlyWidth: '3.5714285714285716rem',
-        paddingX: '1.5rem',
-        paddingY: '1rem',
-        fontSize: '{fonts.fontSize.xl}'
-      },
-      label: {
-        fontWeight: '{fonts.fontWeight.demibold}'
-      }
-    }
-  },
-  card: {
-    extend: {
-      borderColor: '{content.borderColor}'
-    },
-    root: {
-      background: '{content.background}',
-      borderRadius: '{borderRadius.lg}',
-      color: '{content.color}',
-      shadow: '0 .125rem .25rem rgba(0,0,0,.075)'
-    },
-    body: {
-      padding: '1rem',
-      gap: '1rem'
-    },
-    caption: {
-      gap: '0.25rem'
-    },
-    title: {
-      fontSize: '{fonts.fontSize.lg}',
-      fontWeight: '{fonts.fontWeight.demibold}'
-    },
-    subtitle: {
-      color: '{text.mutedColor}'
-    }
-  },
-  carousel: {
-    colorScheme: {
-      light: {
-        indicator: {
-          background: '{surface.300}',
-          hoverBackground: '{surface.400}',
-          activeBackground: '{surface.900}'
-        }
-      }
-    },
-    root: {
-      transitionDuration: '{transitionDuration}'
-    },
-    content: {
-      gap: '0.5rem'
-    },
-    indicatorList: {
-      padding: '1rem',
-      gap: '0.5rem'
-    },
-    indicator: {
-      width: '0.5rem',
-      height: '0.5rem',
-      borderRadius: '{borderRadius.xl}',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: '{rating.focusRing.shadow}'
-      }
-    }
-  },
-  checkbox: {
-    root: {
-      borderRadius: '{borderRadius.sm}',
-      extend: {
-        borderWidth: '0.07142857142857142rem'
-      },
-      width: '1.5rem',
-      height: '1.5rem',
-      background: '{formField.background}',
-      checkedBackground: '{surface.900}',
-      checkedHoverBackground: '{surface.800}',
-      disabledBackground: '{formField.disabledBackground}',
-      filledBackground: '{formField.filledBackground}',
-      borderColor: '{formField.borderColor}',
-      hoverBorderColor: '{formField.hoverBorderPrimaryColor}',
-      focusBorderColor: '{formField.focusBorderPrimaryColor}',
-      checkedBorderColor: '{surface.900}',
-      checkedHoverBorderColor: '{surface.800}',
-      checkedFocusBorderColor: '{primary.color}',
-      checkedDisabledBorderColor: '{formField.borderColor}',
-      invalidBorderColor: '{formField.invalidBorderColor}',
-      shadow: '{formField.shadow}',
-      focusRing: {
-        focusRing: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: '{focusRing.shadow}'
-      },
-      sm: {
-        width: '1rem',
-        height: '1rem'
-      },
-      lg: {
-        width: '1.25rem',
-        height: '1.25rem'
-      },
-      transitionDuration: '{formField.transitionDuration}'
-    },
-    icon: {
-      size: '1rem',
-      color: '{formField.color}',
-      checkedColor: '{primary.contrastColor}',
-      checkedHoverColor: '{primary.contrastColor}',
-      disabledColor: '{formField.disabledColor}',
-      sm: {
-        size: '0.75rem'
-      },
-      lg: {
-        size: '1.25rem'
-      }
-    }
-  },
-  chip: {
-    extend: {
-      borderColor: '{transparent}'
-    },
-    root: {
-      borderRadius: '{borderRadius.sm}',
-      paddingX: '0.5rem',
-      paddingY: '0.25rem',
-      gap: '0.5rem',
-      transitionDuration: '{formField.transitionDuration}'
-    },
-    colorScheme: {
-      light: {
-        root: {
-          background: '{surface.200}',
-          color: '{text.color}'
-        },
-        icon: {
-          color: '{text.color}'
-        },
-        removeIcon: {
-          color: '{text.color}'
-        }
-      }
-    },
-    image: {
-      width: '0',
-      height: '0'
-    },
-    icon: {
-      size: '1rem'
-    },
-    removeIcon: {
-      size: '1rem',
-      focusRing: {
-        width: '{formField.focusRing.width}',
-        style: '{formField.focusRing.style}',
-        color: '{primary.200}',
-        offset: '{formField.focusRing.offset}',
-        shadow: '{formField.focusRing.shadow}'
-      }
-    }
-  },
-  confirmdialog: {
-    extend: {
-      extIcon: {
-        success: '{success.500}',
-        info: '{info.500}',
-        help: '{help.500}',
-        warn: '{warn.500}',
-        danger: '{error.500}'
-      }
-    },
-    icon: {
-      size: '1.5rem',
-      color: '{overlay.modal.color}'
-    },
-    content: {
-      gap: '0'
-    }
-  },
-  confirmpopup: {
-    root: {
-      background: '{overlay.popover.background}',
-      color: '{overlay.popover.color}',
-      shadow: '{overlay.popover.shadow}',
-      gutter: '10px',
-      arrowOffset: '1.25rem'
-    },
-    content: {
-      padding: '{overlay.popover.padding}',
-      gap: '1rem'
-    },
-    icon: {
-      size: '1.5rem',
-      color: '{overlay.popover.color}'
-    },
-    footer: {
-      gap: '0.5rem',
-      padding: '0 {overlay.popover.padding} {overlay.popover.padding} {overlay.popover.padding}'
-    }
-  },
-  contextmenu: {
-    root: {
-      background: '{content.background}',
-      color: '{content.color}',
-      shadow: '{overlay.navigation.shadow}'
-    },
-    list: {
-      padding: '{navigation.list.padding}',
-      gap: '{navigation.list.gap}'
-    },
-    item: {
-      padding: '{navigation.item.padding}',
-      gap: '{navigation.item.gap}'
-    },
-    submenu: {
-      mobileIndent: '1.25rem'
-    }
-  },
-  datatable: {
-    colorScheme: {
-      light: {
-        root: {
-          color: '{text.color}',
-          borderColor: '{content.borderColor}'
-        },
-        header: {
-          background: '{surface.50}',
-          color: '{text.color}'
-        },
-        headerCell: {
-          background: '{surface.50}',
-          hoverBackground: '{surface.100}',
-          color: '{text.color}'
-        },
-        footer: {
-          background: '{surface.100}',
-          color: '{text.color}'
-        },
-        footerCell: {
-          background: '{content.hoverBackground}',
-          color: '{text.color}'
-        },
-        row: {
-          stripedBackground: '{content.hoverBackground}'
-        },
-        bodyCell: {
-          selectedBorderColor: '{content.borderColor}'
-        }
-      }
-    },
-    extended: {
-      extHeaderCell: {
-        selectedHoverBackground: '{surface.800}'
-      },
-      extRow: {
-        selectedHoverBackground: '{surface.800}',
-        stripedHoverBackground: '{surface.100}'
-      }
-    },
-    root: {
-      transitionDuration: '{transitionDuration}'
-    },
-    header: {
-      borderColor: '{content.borderColor}',
-      borderWidth: '1px 0 1px 0',
-      padding: '1rem',
-      sm: {
-        padding: '0.5rem'
-      },
-      lg: {
-        padding: '1.25rem'
-      }
-    },
-    headerCell: {
-      selectedBackground: '{highlight.background}',
-      borderColor: '{content.borderColor}',
-      hoverColor: '{text.hoverColor}',
-      selectedColor: '{highlight.color}',
-      gap: '0.5rem',
-      padding: '1rem',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: 'inset {focus.ring.shadow}'
-      },
-      sm: {
-        padding: '0.5rem'
-      },
-      lg: {
-        padding: '1.25rem'
-      }
-    },
-    columnTitle: {
-      fontWeight: '{fonts.fontWeight.bold}'
-    },
-    row: {
-      background: '{content.background}',
-      hoverBackground: '{content.hoverBackground}',
-      selectedBackground: '{highlight.background}',
-      color: '{content.color}',
-      hoverColor: '{content.hoverColor}',
-      selectedColor: '{highlight.color}',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: 'inset {focus.ring.shadow}'
-      }
-    },
-    bodyCell: {
-      borderColor: '{content.borderColor}',
-      padding: '1rem',
-      sm: {
-        padding: '0.5rem'
-      },
-      lg: {
-        padding: '1.25rem'
-      }
-    },
-    footerCell: {
-      borderColor: '{content.borderColor}',
-      padding: '1rem',
-      sm: {
-        padding: '0.5rem'
-      },
-      lg: {
-        padding: '1.25rem'
-      }
-    },
-    columnFooter: {
-      fontWeight: '{fonts.fontWeight.bold}'
-    },
-    dropPoint: {
-      color: '{highlight.background}'
-    },
-    footer: {
-      borderColor: '{content.borderColor}',
-      borderWidth: '0 0 1px 0',
-      padding: '1rem',
-      sm: {
-        padding: '0.5rem'
-      },
-      lg: {
-        padding: '1.25rem'
-      }
-    },
-    columnResizer: {
-      width: '0.5rem'
-    },
-    resizeIndicator: {
-      width: '1px',
-      color: '{highlight.background}'
-    },
-    sortIcon: {
-      color: '{text.color}',
-      hoverColor: '{text.hoverColor}',
-      size: '1rem'
-    },
-    loadingIcon: {
-      size: '2rem'
-    },
-    rowToggleButton: {
-      hoverBackground: '{content.hoverBackground}',
-      selectedHoverBackground: '{content.hoverBackground}',
-      color: '{text.color}',
-      hoverColor: '{text.color}',
-      selectedHoverColor: '{text.color}',
-      size: '2rem',
-      borderRadius: '{content.borderRadius}',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: '{focusRing.shadow}'
-      }
-    },
-    filter: {
-      inlineGap: '0.5rem',
-      rule: {
-        borderColor: '{content.borderColor}'
-      },
-      constraintList: {
-        padding: '{list.padding}',
-        gap: '{list.gap}'
-      },
-      constraint: {
-        focusBackground: '{list.option.focusBackground}',
-        selectedBackground: '{list.option.selectedBackground}',
-        selectedFocusBackground: '{list.option.selectedFocusBackground}',
-        color: '{list.option.color}',
-        focusColor: '{list.option.focusColor}',
-        selectedColor: '{list.option.selectedColor}',
-        selectedFocusColor: '{list.option.selectedFocusColor}',
-        padding: '{list.option.padding}',
-        borderRadius: '{list.option.borderRadius}',
-        separator: {
-          borderColor: '{content.borderColor}'
-        }
-      },
-      overlaySelect: {
-        background: '{overlay.select.background}',
-        color: '{overlay.select.color}',
-        borderColor: '{overlay.select.borderColor}',
-        borderRadius: '{overlay.select.borderRadius}',
-        shadow: '{overlay.select.shadow}'
-      },
-      overlayPopover: {
-        background: '{overlay.popover.background}',
-        color: '{overlay.popover.color}',
-        borderColor: '{overlay.select.borderColor}',
-        borderRadius: '{overlay.select.borderRadius}',
-        shadow: '{overlay.popover.shadow}',
-        padding: '{overlay.popover.padding}',
-        gap: '{list.gap}'
-      }
-    },
-    paginatorTop: {
-      borderColor: '{formField.borderColor}',
-      borderWidth: '0 0 1px 0'
-    },
-    paginatorBottom: {
-      borderWidth: '0 0 1px 0',
-      borderColor: '{content.borderColor}'
-    }
-  },
-  dataview: {
-    root: {
-      borderWidth: '1px',
-      borderRadius: '4px',
-      padding: '0',
-      borderColor: '#ffffff'
-    },
-    header: {
-      borderWidth: '0 0 1px 0',
-      padding: '0.875rem 1.125rem',
-      borderRadius: '5px 5px 0 0',
-      color: '{text.color}'
-    },
-    content: {
-      background: '{content.background}',
-      color: '{content.color}',
-      borderColor: '#ffffff',
-      borderWidth: '0',
-      padding: '0',
-      borderRadius: '5px'
-    },
-    footer: {
-      background: '{content.background}',
-      color: '{content.color}',
-      borderWidth: '1px 0 0 0',
-      padding: '0.875rem 1.125rem',
-      borderRadius: '0 0 5px 5px'
-    },
-    paginatorTop: {
-      borderWidth: '0 0 1px 0'
-    },
-    paginatorBottom: {
-      borderWidth: '1px 0 0 0'
-    }
-  },
-  datepicker: {
-    colorScheme: {
-      light: {
-        dropdown: {
-          background: '{content.background}',
-          hoverBackground: '{navigation.item.focusBackground}',
-          activeBackground: '{navigation.item.activeBackground}',
-          color: '{navigation.item.color}',
-          hoverColor: '{navigation.item.focusColor}',
-          activeColor: '{navigation.item.activeColor}'
-        },
-        today: {
-          background: '{content.background}',
-          color: '{text.color}'
-        }
-      }
-    },
-    extend: {
-      extDate: {
-        selectedHoverBackground: '{primary.600}'
-      },
-      extToday: {
-        borderColor: '{content.borderColor}',
-        hoverBackground: '{content.hoverBackground}'
-      },
-      extTimePicker: {
-        minWidth: '2.857142857142857rem',
-        color: '{content.color}'
-      },
-      extTitle: {
-        width: '15rem'
-      }
-    },
-    panel: {
-      background: '{content.background}',
-      borderColor: '{content.borderColor}',
-      color: '{content.color}',
-      borderRadius: '{content.borderRadius}',
-      shadow: '{overlay.popover.shadow}',
-      padding: '{overlay.popover.padding}'
-    },
-    header: {
-      background: '{content.background}',
-      borderColor: '{content.borderColor}',
-      color: '{content.color}',
-      padding: '0 0 0.5rem 0'
-    },
-    title: {
-      gap: '0.5rem',
-      fontWeight: '{fonts.fontWeight.bold}'
-    },
-    inputIcon: {
-      color: '{formField.iconColor}'
-    },
-    selectMonth: {
-      hoverBackground: '{content.hoverBackground}',
-      color: '{content.color}',
-      hoverColor: '{content.hoverColor}',
-      borderRadius: '{content.borderRadius}',
-      padding: '0.375rem 0.625rem'
-    },
-    dropdown: {
-      width: '2.5rem',
-      borderColor: '{formField.borderColor}',
-      hoverBorderColor: '{formField.borderColor}',
-      activeBorderColor: '{formField.borderColor}',
-      borderRadius: '{formField.borderRadius}',
-      focusRing: {
-        width: '{formField.focusRing.width}',
-        style: '{formField.focusRing.style}',
-        color: '{formField.focusRing.color}',
-        offset: '{formField.focusRing.offset}',
-        shadow: '{formField.shadow}'
-      },
-      sm: {
-        width: '0'
-      },
-      lg: {
-        width: '0'
-      }
-    },
-    group: {
-      borderColor: '{content.borderColor}',
-      gap: '{overlay.popover.padding}'
-    },
-    selectYear: {
-      hoverBackground: '{content.hoverBackground}',
-      color: '{content.color}',
-      hoverColor: '{content.hoverColor}',
-      borderRadius: '{content.borderRadius}',
-      padding: '0.375rem 0.625rem'
-    },
-    dayView: {
-      margin: '0 0 0 0'
-    },
-    weekDay: {
-      padding: '0.25rem',
-      fontWeight: '{fonts.fontWeight.bold}',
-      color: '{content.color}'
-    },
-    date: {
-      hoverBackground: '{content.hoverBackground}',
-      selectedBackground: '{primary.500}',
-      rangeSelectedBackground: '{highlight.background}',
-      color: '{content.color}',
-      hoverColor: '{content.color}',
-      selectedColor: '{text.extend.colorPrimaryStatic}',
-      rangeSelectedColor: '{text.extend.colorSecondaryStatic}',
-      width: '2rem',
-      height: '2rem',
-      borderRadius: '0.375rem',
-      padding: '0.25rem',
-      focusRing: {
-        width: '{formField.focusRing.width}',
-        style: '{formField.focusRing.style}',
-        color: '{formField.focusRing.color}',
-        offset: '{formField.focusRing.offset}',
-        shadow: '{formField.shadow}'
-      }
-    },
-    monthView: {
-      margin: '0 0 0 0'
-    },
-    month: {
-      padding: '0',
-      borderRadius: '0'
-    },
-    yearView: {
-      margin: '0 0 0 0'
-    },
-    year: {
-      padding: '0',
-      borderRadius: '0'
-    },
-    buttonbar: {
-      padding: '0 0 0 0',
-      borderColor: '{content.borderColor}'
-    },
-    timePicker: {
-      padding: '1.5rem 0.75rem 0.75rem 0.75rem',
-      borderColor: '{content.borderColor}',
-      gap: '0.5rem',
-      buttonGap: '0.25rem'
-    },
-    root: {
-      transitionDuration: '{transitionDuration}'
-    }
-  },
-  dialog: {
-    root: {
-      background: '{overlay.modal.background}',
-      borderColor: '{overlay.modal.borderColor}',
-      color: '{overlay.modal.color}',
-      borderRadius: '{overlay.modal.borderRadius}',
-      shadow: '{overlay.popover.shadow}'
-    },
-    header: {
-      padding: '{overlay.modal.padding} {overlay.modal.padding} 1rem {overlay.modal.padding}',
-      gap: '0'
-    },
-    title: {
-      fontSize: '{fonts.fontSize.xl}',
-      fontWeight: '{fonts.fontWeight.demibold}'
-    },
-    content: {
-      padding: '1.5rem'
-    },
-    footer: {
-      padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}',
-      gap: '0.5rem'
-    }
-  },
-  divider: {
-    root: {
-      borderColor: '{content.borderColor}'
-    },
-    content: {
-      background: '{content.background}',
-      color: '{text.mutedColor}'
-    },
-    horizontal: {
-      margin: '1rem 0',
-      padding: '0 1rem',
-      content: {
-        padding: '0 0.5rem'
-      }
-    },
-    vertical: {
-      margin: '0 1rem',
-      padding: '1rem 0',
-      content: {
-        padding: '0.5rem 0'
-      }
-    }
-  },
-  drawer: {
-    extend: {
-      borderRadius: '{overlay.popover.borderRadius}',
-      width: '{sizingDrawer.width}',
-      extHeader: {
-        gap: '0.5rem',
-        borderColor: '{drawer.root.borderColor}'
-      }
-    },
-    root: {
-      background: '{overlay.modal.background}',
-      borderColor: '{overlay.modal.borderColor}',
-      color: '{overlay.modal.color}',
-      shadow: '{overlay.modal.shadow}'
-    },
-    header: {
-      padding: '{overlay.modal.padding} {overlay.modal.padding} 14 {overlay.modal.padding} '
-    },
-    title: {
-      fontSize: '{fonts.fontSize.xl}',
-      fontWeight: '{fonts.fontWeight.demibold}'
-    },
-    content: {
-      padding: '{overlay.modal.padding}'
-    },
-    footer: {
-      padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding} '
-    }
-  },
-  fileupload: {
-    colorScheme: {
-      light: {
-        header: {
-          background: '{surface.0}',
-          color: '{text.color}'
-        }
-      }
-    },
-    extend: {
-      extDragNdrop: {
-        background: '{surface.0}',
-        padding: '1rem',
-        borderRadius: '{formField.borderRadius}',
-        gap: '0.5rem',
-        info: {
-          gap: '0.25rem'
-        }
-      },
-      extContent: {
-        borderRadius: '{borderRadius.md}',
-        highlightBorderDefault: '{formField.borderColor}'
-      }
-    },
-    root: {
-      background: '{content.background}',
-      borderColor: '{content.borderColor}',
-      color: '{content.color}',
-      borderRadius: '{content.borderRadius}',
-      transitionDuration: '{transitionDuration}'
-    },
-    header: {
-      borderColor: '{content.borderColor}',
-      borderWidth: '0',
-      padding: '0',
-      borderRadius: '0',
-      gap: '0.5rem'
-    },
-    content: {
-      highlightBorderColor: '{surface.900}',
-      padding: '0',
-      gap: '0.5rem'
-    },
-    file: {
-      padding: '0.5rem',
-      gap: '0.5rem',
-      borderColor: '{formField.borderColor}',
-      info: {
-        gap: '0.25rem'
-      }
-    },
-    fileList: {
-      gap: '0.5rem'
-    },
-    progressbar: {
-      height: '0.5rem'
-    },
-    basic: {
-      gap: '0.5rem'
-    }
-  },
-  floatlabel: {
-    extend: {
-      height: '4rem',
-      iconSize: '{iconSizeLarge}'
-    },
-    root: {
-      color: '{formField.floatLabelColor}',
-      focusColor: '{formField.floatLabelFocusColor}',
-      activeColor: '{formField.floatLabelActiveColor}',
-      invalidColor: '{formField.floatLabelInvalidColor}',
-      transitionDuration: '{formField.transitionDuration}',
-      positionX: '{formField.paddingX}',
-      positionY: '{formField.paddingY}',
-      fontWeight: '{fonts.fontWeight.regular}',
-      active: {
-        fontSize: '{fonts.fontSize.sm}',
-        fontWeight: '{fonts.fontWeight.regular}'
-      }
-    },
-    over: {
-      active: {
-        top: '0.5rem'
-      }
-    },
-    inside: {
-      input: {
-        paddingTop: '1.875rem',
-        paddingBottom: '{formField.paddingY}'
-      },
-      active: {
-        top: '{formField.paddingY}'
-      }
-    },
-    on: {
-      borderRadius: '0',
-      active: {
-        padding: '0 0.125rem',
-        background: '#ffffff'
-      }
-    }
-  },
-  galleria: {
-    colorScheme: {
-      light: {
-        thumbnailContent: {
-          background: '{surface.100}'
-        },
-        thumbnailNavButton: {
-          hoverBackground: '{colors.alpha.white.20}',
-          color: '{text.color}',
-          hoverColor: '{text.hoverColor}'
-        },
-        indicatorButton: {
-          background: '{surface.300}',
-          hoverBackground: '{surface.400}'
-        }
-      }
-    },
-    root: {
-      borderWidth: '1px',
-      borderColor: '{content.borderColor}',
-      borderRadius: '{content.borderRadius}',
-      transitionDuration: '{transitionDuration}'
-    },
-    navButton: {
-      background: '{transparent}',
-      hoverBackground: '{colors.alpha.white.20}',
-      color: '{text.extend.colorInverted}',
-      hoverColor: '{text.extend.colorInverted}',
-      size: '4rem',
-      gutter: '0.5rem',
-      prev: {
-        borderRadius: '{navigation.item.borderRadius}'
-      },
-      next: {
-        borderRadius: '{navigation.item.borderRadius}'
-      },
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: '{focusRing.shadow}'
-      }
-    },
-    navIcon: {
-      size: '2rem'
-    },
-    thumbnailsContent: {
-      padding: '0.25rem'
-    },
-    thumbnailNavButton: {
-      size: '2rem',
-      borderRadius: '{content.borderRadius}',
-      gutter: '0.5rem',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: '{focusRing.shadow}'
-      }
-    },
-    thumbnailNavButtonIcon: {
-      size: '1rem'
-    },
-    caption: {
-      background: '{colors.alpha.white.50}',
-      color: '{text.color}',
-      padding: '0.5rem'
-    },
-    indicatorList: {
-      gap: '0.5rem',
-      padding: '1rem'
-    },
-    indicatorButton: {
-      width: '0.5rem',
-      height: '0.5rem',
-      activeBackground: '{surface.900}',
-      borderRadius: '{content.borderRadius}',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: '{focusRing.shadow}'
-      }
-    },
-    insetIndicatorList: {
-      background: '{colors.alpha.black.50}'
-    },
-    insetIndicatorButton: {
-      background: '{colors.alpha.white.10}',
-      hoverBackground: '{colors.alpha.white.20}',
-      activeBackground: '{colors.alpha.white.50}'
-    },
-    closeButton: {
-      size: '4rem',
-      gutter: '0.5rem',
-      background: '{colors.alpha.white.10}',
-      hoverBackground: '{colors.alpha.white.20}',
-      color: '{text.extend.colorInverted}',
-      hoverColor: '{text.extend.colorInverted}',
-      borderRadius: '{borderRadius.lg}',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: '{focusRing.shadow}'
-      }
-    },
-    closeButtonIcon: {
-      size: '2rem'
-    }
-  },
-  message: {
-    colorScheme: {
-      light: {
-        success: {
-          background: '{success.50}',
-          borderColor: '{success.500}',
-          color: '{text.color}',
-          shadow: 'none',
-          outlined: {
-            color: '{text.color}',
-            borderColor: '{success.500}'
-          },
-          closeButton: {
-            hoverBackground: '{success.200}',
-            focusRing: {
-              color: '{focusRing.color}',
-              shadow: 'none'
-            }
-          },
-          simple: {
-            color: '{text.color}'
-          }
-        },
-        outlined: {
-          root: {
-            borderWidth: '0'
-          },
-          closeButton: {
-            hoverBackground: '#ffffff',
-            focusRing: {
-              color: '{focusRing.color}',
-              shadow: 'none'
-            }
-          },
-          outlined: {
-            color: '#ffffff',
-            borderColor: '#ffffff'
-          },
-          simple: {
-            color: '#ffffff'
-          }
-        },
-        simple: {
-          content: {
-            padding: '0'
-          }
-        },
-        warn: {
-          background: '{warn.50}',
-          borderColor: '{warn.500}',
-          color: '{text.color}',
-          shadow: 'none',
-          outlined: {
-            color: '{text.color}',
-            borderColor: '{warn.500}'
-          },
-          closeButton: {
-            hoverBackground: '{warn.200}',
-            focusRing: {
-              color: '{focusRing.color}',
-              shadow: 'none'
-            }
-          },
-          simple: {
-            color: '{text.color}'
-          }
-        },
-        error: {
-          background: '{error.50}',
-          borderColor: '{error.500}',
-          color: '{text.color}',
-          shadow: 'none',
-          outlined: {
-            color: '{text.color}',
-            borderColor: '{error.500}'
-          },
-          closeButton: {
-            hoverBackground: '{error.200}',
-            focusRing: {
-              color: '{focusRing.color}',
-              shadow: 'none'
-            }
-          },
-          simple: {
-            color: '{text.color}'
-          }
-        },
-        secondary: {
-          borderColor: '#ffffff',
-          shadow: 'none',
-          closeButton: {
-            hoverBackground: '#ffffff',
-            focusRing: {
-              color: '{focusRing.color}',
-              shadow: 'none'
-            }
-          },
-          simple: {
-            color: '#ffffff'
-          },
-          outlined: {
-            color: '#ffffff',
-            borderColor: '#ffffff'
-          }
-        },
-        contrast: {
-          borderColor: '#ffffff',
-          shadow: 'none',
-          closeButton: {
-            hoverBackground: '#ffffff',
-            focusRing: {
-              color: '{focusRing.color}',
-              shadow: 'none'
-            }
-          },
-          simple: {
-            color: '#ffffff'
-          },
-          outlined: {
-            color: '#ffffff',
-            borderColor: '#ffffff'
-          }
-        },
-        info: {
-          background: '{info.50}',
-          borderColor: '{info.500}',
-          color: '{text.color}',
-          shadow: 'none',
-          outlined: {
-            color: '{text.color}',
-            borderColor: '{info.500}'
-          },
-          closeButton: {
-            hoverBackground: '{info.200}',
-            focusRing: {
-              color: '{focusRing.color}',
-              shadow: 'none'
-            }
-          },
-          simple: {
-            color: '{text.color}'
-          }
-        }
-      }
-    },
-    extend: {
-      width: '{sizingMessage.width}',
-      extText: {
-        gap: '0.25rem'
-      },
-      extInfo: {
-        color: '{info.500}',
-        closeButton: {
-          color: '{info.500}',
-          borderColor: '{info.500}'
-        },
-        caption: {
-          color: '{text.color}'
-        }
-      },
-      extAccentLine: {
-        width: '0.25rem'
-      },
-      extCloseButton: {
-        width: '0.07142857142857142rem'
-      },
-      extSuccess: {
-        color: '{success.500}',
-        closeButton: {
-          color: '{success.500}',
-          borderColor: '{success.500}'
-        },
-        caption: {
-          color: '{text.color}'
-        }
-      },
-      extWarn: {
-        color: '{warn.500}',
-        closeButton: {
-          color: '{warn.500}',
-          borderColor: '{warn.500}'
-        },
-        caption: {
-          color: '{text.color}'
-        }
-      },
-      extError: {
-        color: '{error.500}',
-        closeButton: {
-          color: '{error.500}',
-          borderColor: '{error.500}'
-        },
-        caption: {
-          color: '{text.color}'
-        }
-      }
-    },
-    root: {
-      borderRadius: '{content.borderRadius}',
-      borderWidth: '0.07142857142857142rem',
-      transitionDuration: '{transitionDuration}'
-    },
-    content: {
-      padding: '1rem',
-      gap: '1rem',
-      sm: {
-        padding: '1rem'
-      },
-      lg: {
-        padding: '1rem'
-      }
-    },
-    text: {
-      fontSize: '{fonts.fontSize.base}',
-      fontWeight: '{fonts.fontWeight.bold}',
-      sm: {
-        fontSize: '{fonts.fontSize.base}'
-      },
-      lg: {
-        fontSize: '{fonts.fontSize.base}'
-      }
-    },
-    icon: {
-      size: '2.25rem',
-      sm: {
-        size: '2.25rem'
-      },
-      lg: {
-        size: '2.25rem'
-      }
-    },
-    closeButton: {
-      width: '2rem',
-      height: '2rem',
-      borderRadius: '0.75rem',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        offset: '{focusRing.offset}'
-      }
-    },
-    closeIcon: {
-      size: '1rem',
-      sm: {
-        size: '1rem'
-      },
-      lg: {
-        size: '1rem'
-      }
-    }
-  },
-  inputgroup: {
-    colorScheme: {
-      light: {
-        addon: {
-          background: '{transparent}',
-          borderColor: '{formField.borderColor}',
-          color: '{text.mutedColor}'
-        }
-      }
-    },
-    addon: {
-      borderRadius: '{formField.borderRadius}',
-      padding: '0.75rem',
-      minWidth: '2.5rem'
-    }
-  },
-  inputnumber: {
-    colorScheme: {
-      light: {
-        button: {
-          background: '{transparent}',
-          hoverBackground: '{content.hoverBackground}',
-          activeBackground: '{transparent}',
-          borderColor: '{formField.borderColor}',
-          hoverBorderColor: '{formField.borderColor}',
-          activeBorderColor: '{formField.borderColor}',
-          color: '{text.color}',
-          hoverColor: '{text.hoverColor}',
-          activeColor: '{text.color}'
-        }
-      }
-    },
-    extend: {
-      extButton: {
-        height: '2.5rem'
-      }
-    },
-    transitionDuration: {
-      transitionDuration: '{formField.transitionDuration}'
-    },
-    button: {
-      width: '2.5rem',
-      borderRadius: '{formField.borderRadius}',
-      verticalPadding: '{formField.paddingY}'
-    }
-  },
-  inputotp: {
-    extend: {
-      height: '2.5rem'
-    },
-    root: {
-      gap: '0.5rem'
-    },
-    input: {
-      width: '2.5rem'
-    },
-    sm: {
-      width: '0'
-    },
-    lg: {
-      width: '0'
-    }
-  },
-  inputtext: {
-    extend: {
-      readonlyBackground: '{formField.readonlyBackground}',
-      iconSize: '{iconSizeMedium}',
-      extXlg: {
-        fontSize: '{sizingInputtext.root.fontSize}',
-        paddingX: '{sizingInputtext.root.paddingX}',
-        paddingY: '{sizingInputtext.root.paddingY}'
-      }
-    },
-    root: {
-      background: '{formField.background}',
-      disabledBackground: '{formField.disabledBackground}',
-      filledBackground: '{formField.filledBackground}',
-      filledHoverBackground: '{formField.filledHoverBackground}',
-      filledFocusBackground: '{formField.filledFocusBackground}',
-      borderColor: '{formField.borderColor}',
-      hoverBorderColor: '{formField.hoverBorderSecondaryColor}',
-      focusBorderColor: '{formField.focusBorderSecondaryColor}',
-      invalidBorderColor: '{formField.invalidBorderColor}',
-      color: '{text.color}',
-      disabledColor: '{formField.disabledColor}',
-      placeholderColor: '{formField.placeholderColor}',
-      invalidPlaceholderColor: '{formField.invalidPlaceholderColor}',
-      shadow: '{formField.shadow}',
-      paddingX: '{sizingInputtext.root.paddingX}',
-      paddingY: '{sizingInputtext.root.paddingY}',
-      borderRadius: '{formField.borderRadius}',
-      transitionDuration: '{formField.transitionDuration}',
-      sm: {
-        fontSize: '{sizingInputtext.root.fontSize}',
-        paddingX: '{sizingInputtext.root.paddingX}',
-        paddingY: '{sizingInputtext.root.paddingY}'
-      },
-      lg: {
-        fontSize: '{sizingInputtext.root.fontSize}',
-        paddingX: '{sizingInputtext.root.paddingX}',
-        paddingY: '{sizingInputtext.root.paddingY}'
-      },
-      focusRing: {
-        width: '{formField.focusRing.width}',
-        style: '{formField.focusRing.style}',
-        color: '{formField.focusRing.color}',
-        offset: '{formField.focusRing.offset}',
-        shadow: '{formField.shadow}'
-      }
-    }
-  },
-  listbox: {
-    colorScheme: {
-      light: {
-        option: {
-          stripedBackground: '{surface.50}'
-        }
-      }
-    },
-    extend: {
-      extOption: {
-        label: {
-          gap: '0.25rem'
-        },
-        caption: {
-          color: '{text.mutedColor}',
-          stripedColor: '{text.mutedColor}'
-        }
-      }
-    },
-    root: {
-      background: '{formField.background}',
-      disabledBackground: '{formField.disabledBackground}',
-      borderColor: '{formField.borderColor}',
-      invalidBorderColor: '{formField.invalidBorderColor}',
-      color: '{formField.color}',
-      disabledColor: '{formField.disabledColor}',
-      shadow: '{formField.shadow}',
-      borderRadius: '{formField.borderRadius}',
-      transitionDuration: '{formField.transitionDuration}'
-    },
-    list: {
-      padding: '{list.padding}',
-      gap: '{list.gap}',
-      header: {
-        padding: '{list.header.padding}'
-      }
-    },
-    option: {
-      focusBackground: '{list.option.focusBackground}',
-      selectedBackground: '{list.option.selectedBackground}',
-      selectedFocusBackground: '{list.option.selectedFocusBackground}',
-      color: '{list.option.color}',
-      focusColor: '{list.option.focusColor}',
-      selectedColor: '{list.option.selectedColor}',
-      selectedFocusColor: '{list.option.selectedFocusColor}',
-      padding: '{list.option.padding}',
-      borderRadius: '{list.option.borderRadius}'
-    },
-    optionGroup: {
-      background: '{list.optionGroup.background}',
-      color: '{list.optionGroup.color}',
-      fontWeight: '{fonts.fontWeight.demibold}',
-      padding: '{list.option.padding}'
-    },
-    checkmark: {
-      color: '{list.option.color}',
-      gutterStart: '-0.5rem',
-      gutterEnd: '0.5rem'
-    },
-    emptyMessage: {
-      padding: '{list.option.padding}'
-    }
-  },
-  megamenu: {
-    colorScheme: {
-      light: {
-        root: {
-          background: '{transparent}'
-        }
-      }
-    },
-    extend: {
-      extItem: {
-        caption: {
-          color: '{text.mutedColor}',
-          gap: '0.25rem'
-        }
-      }
-    },
-    root: {
-      borderColor: '{transparent}',
-      borderRadius: '{content.borderRadius}',
-      color: '{content.color}',
-      gap: '0.25rem',
-      transitionDuration: '{transitionDuration}',
-      verticalOrientation: {
-        padding: '{navigation.list.padding}',
-        gap: '{navigation.list.gap}'
-      },
-      horizontalOrientation: {
-        padding: '{navigation.list.padding}',
-        gap: '{navigation.list.gap}'
-      }
-    },
-    baseItem: {
-      borderRadius: '{content.borderRadius}',
-      padding: '{navigation.item.padding}'
-    },
-    item: {
-      focusBackground: '{navigation.item.focusBackground}',
-      activeBackground: '{navigation.item.activeBackground}',
-      color: '{navigation.item.color}',
-      focusColor: '{navigation.item.focusColor}',
-      activeColor: '{navigation.item.activeColor}',
-      padding: '{navigation.item.padding}',
-      borderRadius: '{navigation.item.borderRadius}',
-      gap: '{navigation.item.gap}',
-      icon: {
-        color: '{navigation.item.icon.color}',
-        focusColor: '{navigation.item.icon.focusColor}',
-        activeColor: '{navigation.item.icon.activeColor}'
-      }
-    },
-    overlay: {
-      padding: '0.25rem',
-      background: '{content.background}',
-      borderColor: '{content.borderColor}',
-      borderRadius: '{content.borderRadius}',
-      color: '{content.color}',
-      shadow: '{overlay.navigation.shadow}',
-      gap: '0'
-    },
-    submenu: {
-      padding: '{navigation.list.padding}',
-      gap: '{navigation.list.gap}'
-    },
-    submenuLabel: {
-      padding: '{navigation.submenuLabel.padding}',
-      fontWeight: '{navigation.submenuLabel.fontWeight}',
-      background: '{navigation.submenuLabel.background}',
-      color: '{navigation.submenuLabel.color}'
-    },
-    submenuIcon: {
-      size: '{navigation.submenuIcon.size}',
-      color: '{navigation.submenuIcon.color}',
-      focusColor: '{navigation.submenuIcon.focusColor}',
-      activeColor: '{navigation.submenuIcon.activeColor}'
-    },
-    separator: {
-      borderColor: '{content.borderColor}'
-    },
-    mobileButton: {
-      borderRadius: '{navigation.item.borderRadius}',
-      size: '2rem',
-      color: '{text.color}',
-      hoverColor: '{text.hoverColor}',
-      hoverBackground: '{content.hoverBackground}',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: '{focusRing.shadow}'
-      }
-    }
-  },
-  menu: {
-    extend: {
-      paddingX: '0.25rem',
-      paddingY: '0.25rem',
-      extItem: {
-        caption: {
-          color: '{text.mutedColor}',
-          gap: '0.25rem'
-        }
-      }
-    },
-    root: {
-      background: '{content.background}',
-      borderColor: '{content.borderColor}',
-      color: '{content.color}',
-      borderRadius: '{content.borderRadius}',
-      shadow: '{overlay.navigation.shadow}',
-      transitionDuration: '{transitionDuration}'
-    },
-    list: {
-      padding: '{navigation.list.padding}',
-      gap: '{navigation.list.gap}'
-    },
-    item: {
-      focusBackground: '{navigation.item.focusBackground}',
-      color: '{navigation.item.color}',
-      focusColor: '{navigation.item.focusColor}',
-      padding: '{navigation.item.padding}',
-      borderRadius: '{navigation.item.borderRadius}',
-      gap: '{navigation.item.gap}',
-      icon: {
-        color: '{navigation.item.icon.color}',
-        focusColor: '{navigation.item.icon.focusColor}'
-      }
-    },
-    submenuLabel: {
-      padding: '{navigation.submenuLabel.padding}',
-      fontWeight: '{fonts.fontWeight.demibold}',
-      background: '{navigation.submenuLabel.background}',
-      color: '{navigation.submenuLabel.color}'
-    },
-    separator: {
-      borderColor: '{content.borderColor}'
-    }
-  },
-  menubar: {
-    extend: {
-      extItem: {
-        caption: {
-          color: '{text.mutedColor}',
-          gap: '0.25rem'
-        }
-      },
-      extSubmenuLabel: {
-        padding: '{navigation.submenuLabel.padding}',
-        fontWeight: '{fonts.fontWeight.demibold}',
-        background: '{navigation.submenuLabel.background}',
-        color: '{navigation.submenuLabel.color}'
-      }
-    },
-    colorScheme: {
-      light: {
-        root: {
-          background: '{transparent}'
-        }
-      }
-    },
-    root: {
-      borderColor: '{transparent}',
-      borderRadius: '{navigation.item.borderRadius}',
-      color: '{content.color}',
-      gap: '0.25rem',
-      padding: '{navigation.list.padding}',
-      transitionDuration: '{transitionDuration}'
-    },
-    baseItem: {
-      borderRadius: '{navigation.item.borderRadius}',
-      padding: '0.5rem 0.75rem'
-    },
-    item: {
-      focusBackground: '{navigation.item.focusBackground}',
-      activeBackground: '{navigation.item.activeBackground}',
-      color: '{navigation.item.color}',
-      focusColor: '{navigation.item.focusColor}',
-      activeColor: '{navigation.item.activeColor}',
-      padding: '{navigation.item.padding}',
-      borderRadius: '{navigation.item.borderRadius}',
-      gap: '{navigation.item.gap}',
-      icon: {
-        color: '{navigation.item.icon.color}',
-        focusColor: '{navigation.item.icon.focusColor}',
-        activeColor: '{navigation.item.icon.activeColor}'
-      }
-    },
-    submenu: {
-      padding: '{navigation.list.padding}',
-      gap: '{navigation.list.gap}',
-      background: '{content.background}',
-      borderColor: '{content.borderColor}',
-      borderRadius: '{content.borderRadius}',
-      shadow: '{overlay.navigation.shadow}',
-      mobileIndent: '0.75rem',
-      icon: {
-        size: '{navigation.submenuIcon.size}',
-        color: '{navigation.submenuIcon.color}',
-        focusColor: '{navigation.submenuIcon.focusColor}',
-        activeColor: '{navigation.submenuIcon.activeColor}'
-      }
-    },
-    separator: {
-      borderColor: '{content.borderColor}'
-    },
-    mobileButton: {
-      borderRadius: '{navigation.item.borderRadius}',
-      size: '2rem',
-      color: '{text.color}',
-      hoverColor: '{text.hoverColor}',
-      hoverBackground: '{content.hoverBackground}',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: '{focusRing.shadow}'
-      }
-    }
-  },
-  metergroup: {
-    extend: {
-      extLabel: {
-        color: '{text.mutedColor}'
-      }
-    },
-    root: {
-      borderRadius: '{content.borderRadius}',
-      gap: '0.75rem'
-    },
-    meters: {
-      size: '0.5rem',
-      background: '{content.borderColor}'
-    },
-    label: {
-      gap: '0.5rem'
-    },
-    labelMarker: {
-      size: '0.5rem'
-    },
-    labelIcon: {
-      size: '1rem'
-    },
-    labelList: {
-      verticalGap: '0.5rem',
-      horizontalGap: '0.75rem'
-    }
-  },
-  multiselect: {
-    extend: {
-      paddingX: '0.35714285714285715rem',
-      paddingY: '0.35714285714285715rem'
-    },
-    root: {
-      background: '{formField.background}',
-      disabledBackground: '{formField.disabledBackground}',
-      filledBackground: '{formField.filledBackground}',
-      filledHoverBackground: '{formField.filledHoverBackground}',
-      filledFocusBackground: '{formField.filledFocusBackground}',
-      borderColor: '{formField.borderColor}',
-      hoverBorderColor: '{formField.hoverBorderSecondaryColor}',
-      focusBorderColor: '{formField.focusBorderSecondaryColor}',
-      invalidBorderColor: '{formField.invalidBorderColor}',
-      color: '{formField.color}',
-      disabledColor: '{formField.disabledColor}',
-      placeholderColor: '{formField.placeholderColor}',
-      invalidPlaceholderColor: '{formField.invalidPlaceholderColor}',
-      shadow: '{formField.shadow}',
-      paddingX: '{formField.paddingX}',
-      paddingY: '{formField.paddingY}',
-      borderRadius: '{formField.borderRadius}',
-      transitionDuration: '{formField.transitionDuration}',
-      sm: {
-        fontSize: '{formField.sm.fontSize}',
-        paddingX: '{formField.sm.paddingY}',
-        paddingY: '{formField.sm.paddingY}'
-      },
-      lg: {
-        fontSize: '{formField.lg.fontSize}',
-        paddingX: '{formField.lg.paddingX}',
-        paddingY: '{formField.lg.paddingY}'
-      },
-      focusRing: {
-        width: '{formField.focusRing.width}',
-        style: '{formField.focusRing.style}',
-        color: '{formField.focusRing.color}',
-        offset: '{formField.focusRing.offset}',
-        shadow: '{formField.shadow}'
-      }
-    },
-    dropdown: {
-      width: '0.75rem',
-      color: '{formField.iconColor}'
-    },
-    overlay: {
-      background: '{datatable.filter.overlaySelect.background}',
-      borderColor: '{overlay.select.borderColor}',
-      borderRadius: '{datatable.filter.overlaySelect.borderRadius}',
-      color: '{datatable.filter.overlaySelect.color}',
-      shadow: '{overlay.select.shadow}'
-    },
-    readonlyBackground: '{formField.readonlyBackground}',
-    list: {
-      padding: '{list.padding}',
-      header: {
-        padding: '{list.header.padding}'
-      },
-      gap: '{list.gap}'
-    },
-    option: {
-      focusBackground: '{list.option.focusBackground}',
-      selectedBackground: '{list.option.selectedBackground}',
-      selectedFocusBackground: '{list.option.selectedFocusBackground}',
-      color: '{list.option.color}',
-      focusColor: '{list.option.focusColor}',
-      selectedColor: '{list.option.selectedColor}',
-      selectedFocusColor: '{list.option.selectedFocusColor}',
-      padding: '{list.option.padding}',
-      borderRadius: '{list.option.borderRadius}',
-      gap: '0.5rem'
-    },
-    optionGroup: {
-      background: '{list.optionGroup.background}',
-      color: '{list.optionGroup.color}',
-      fontWeight: '{fonts.fontWeight.demibold}',
-      padding: '{list.optionGroup.padding}'
-    },
-    clearIcon: {
-      color: '{formField.iconColor}'
-    },
-    chip: {
-      borderRadius: '{borderRadius.sm}'
-    },
-    emptyMessage: {
-      padding: '{list.option.padding}'
-    }
-  },
-  paginator: {
-    root: {
-      padding: '0 0.5rem',
-      gap: '0.5rem',
-      borderRadius: '{content.borderRadius}',
-      background: '{transparent}',
-      color: '{content.color}',
-      transitionDuration: '{transitionDuration}'
-    },
-    currentPageReport: {
-      color: '{text.mutedColor}'
-    },
-    navButton: {
-      background: '{transparent}',
-      hoverBackground: '{content.hoverBackground}',
-      selectedBackground: '{highlight.background}',
-      color: '{text.color}',
-      hoverColor: '{text.hoverColor}',
-      selectedColor: '{text.extend.colorInverted}',
-      width: '2.5rem',
-      height: '2.5rem',
-      borderRadius: '{content.borderRadius}',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        focus: '{focusRing.shadow}'
-      }
-    },
-    jumpToPageInput: {
-      maxWidth: '5rem'
-    }
-  },
-  panelmenu: {
-    extend: {
-      extPanel: {
-        gap: '0.25rem'
-      },
-      extItem: {
-        activeBackground: '{navigation.item.activeBackground}',
-        activeColor: '{navigation.item.activeColor}',
-        caption: {
-          color: '{text.mutedColor}',
-          gap: '0.25rem'
-        }
-      }
-    },
-    root: {
-      gap: '0.25rem',
-      transitionDuration: '{transitionDuration}'
-    },
-    panel: {
-      background: '{transparent}',
-      borderColor: '{transparent}',
-      borderWidth: '0.07142857142857142rem',
-      color: '{content.color}',
-      padding: '0.25rem',
-      borderRadius: '{content.borderRadius}',
-      first: {
-        borderWidth: '1px 1px 0 1px',
-        topBorderRadius: '{content.borderRadius}'
-      },
-      last: {
-        borderWidth: '0 1px 1px 1px',
-        topBorderRadius: '{content.borderRadius}'
-      }
-    },
-    item: {
-      focusBackground: '{navigation.item.focusBackground}',
-      color: '{navigation.item.color}',
-      focusColor: '{navigation.item.focusColor}',
-      gap: '0.5rem',
-      padding: '{navigation.item.padding}',
-      borderRadius: '{navigation.item.borderRadius}',
-      icon: {
-        color: '{navigation.item.icon.color}',
-        focusColor: '{navigation.item.icon.focusColor}'
-      }
-    },
-    submenu: {
-      indent: '0.75rem'
-    },
-    separator: {
-      borderColor: '{content.borderColor}'
-    },
-    submenuIcon: {
-      color: '{navigation.submenuIcon.color}',
-      focusColor: '{navigation.submenuIcon.focusColor}'
-    }
-  },
-  password: {
-    colorScheme: {
-      light: {
-        strength: {
-          weakBackground: '{error.500}',
-          mediumBackground: '{warn.500}',
-          strongBackground: '{success.600}'
-        }
-      }
-    },
-    meter: {
-      background: '{content.borderColor}',
-      borderRadius: '{content.borderRadius}',
-      height: '0.5rem'
-    },
-    icon: {
-      color: '{text.color}'
-    },
-    overlay: {
-      background: '{overlay.popover.background}',
-      borderColor: '{overlay.popover.borderColor}',
-      borderRadius: '{overlay.popover.borderRadius}',
-      color: '{overlay.popover.color}',
-      padding: '{overlay.popover.padding}',
-      shadow: '{overlay.popover.shadow}'
-    },
-    content: {
-      gap: '0.5rem'
-    }
-  },
-  popover: {
-    root: {
-      background: '{overlay.popover.background}',
-      borderColor: '{datatable.filter.overlayPopover.borderColor}',
-      color: '{overlay.popover.color}',
-      borderRadius: '{overlay.popover.borderRadius}',
-      shadow: '{overlay.popover.shadow}',
-      gutter: '0.25rem',
-      arrowOffset: '1.25rem'
-    },
-    content: {
-      padding: '{overlay.popover.padding}'
-    }
-  },
-  progressbar: {
-    label: {
-      color: '{text.extend.colorPrimaryStatic}',
-      fontSize: '{fonts.fontSize.xs}',
-      fontWeight: '{fonts.fontWeight.regular}'
-    },
-    root: {
-      background: '{content.borderColor}',
-      borderRadius: '{content.borderRadius}',
-      height: '1rem'
-    },
-    value: {
-      background: '{primary.color}'
-    }
-  },
-  progressspinner: {
-    colorScheme: {
-      light: {
-        root: {
-          colorOne: '{success.500}',
-          colorTwo: '{info.500}',
-          colorThree: '{error.500}',
-          colorFour: '{warn.500}'
-        }
-      }
-    }
-  },
-  radiobutton: {
-    root: {
-      width: '1.5rem',
-      height: '1.5rem',
-      background: '{formField.background}',
-      checkedBackground: '{surface.900}',
-      checkedHoverBackground: '{surface.800}',
-      disabledBackground: '{formField.disabledBackground}',
-      filledBackground: '{formField.filledBackground}',
-      borderColor: '{formField.borderColor}',
-      hoverBorderColor: '{formField.hoverBorderPrimaryColor}',
-      focusBorderColor: '{formField.borderColor}',
-      checkedBorderColor: '{surface.900}',
-      checkedHoverBorderColor: '{formField.hoverBorderPrimaryColor}',
-      checkedFocusBorderColor: '{formField.focusBorderPrimaryColor}',
-      checkedDisabledBorderColor: '{formField.borderColor}',
-      invalidBorderColor: '{formField.invalidBorderColor}',
-      shadow: '{formField.shadow}',
-      transitionDuration: '{formField.transitionDuration}'
-    },
-    focusRing: {
-      width: '0.25rem',
-      style: '{focusRing.style}',
-      color: '{focusRing.color}',
-      offset: '{focusRing.offset}',
-      shadow: '{formField.focusRing.shadow}'
-    },
-    sm: {
-      width: '1rem',
-      height: '1rem'
-    },
-    lg: {
-      width: '1.25rem',
-      height: '1.25rem'
-    },
-    icon: {
-      size: '0.8571428571428571rem',
-      checkedColor: '{text.extend.colorInverted}',
-      checkedHoverColor: '{text.extend.colorInverted}',
-      disabledColor: '{text.mutedColor}',
-      sm: {
-        size: '0'
-      },
-      lg: {
-        size: '0'
-      }
-    }
-  },
-  rating: {
-    root: {
-      gap: '0.5rem',
-      transitionDuration: '{formField.transitionDuration}'
-    },
-    focusRing: {
-      width: '{formField.focusRing.width}',
-      style: '{formField.focusRing.style}',
-      color: '{formField.focusRing.color}',
-      offset: '{formField.focusRing.offset}',
-      shadow: '{formField.shadow}'
-    },
-    icon: {
-      size: '1.5rem',
-      color: '{surface.500}',
-      hoverColor: '{warn.500}',
-      activeColor: '{warn.500}'
-    }
-  },
-  ripple: {
-    colorScheme: {
-      light: {
-        root: {
-          background: 'rgba(255, 255, 255, 0.0100)'
-        }
-      }
-    }
-  },
-  scrollpanel: {
-    colorScheme: {
-      light: {
-        bar: {
-          background: '{surface.300}'
-        }
-      }
-    },
-    root: {
-      transitionDuration: '{transitionDuration}'
-    },
-    bar: {
-      size: '0.5rem',
-      borderRadius: '{borderRadius.sm}',
-      focusRing: {
-        width: '0',
-        style: '{focusRing.style}',
-        color: '#ffffff',
-        offset: '{focusRing.offset}',
-        shadow: '{focusRing.shadow}'
-      }
-    }
-  },
-  select: {
-    extend: {
-      extOption: {
-        background: '{list.option.background}',
-        gap: '0.5rem'
-      },
-      extOptionGroup: {
-        gap: '0.5rem'
-      },
-      readonlyBackground: '{formField.readonlyBackground}'
-    },
-    root: {
-      background: '{formField.background}',
-      disabledBackground: '{formField.disabledBackground}',
-      filledBackground: '{formField.filledBackground}',
-      filledHoverBackground: '{formField.filledHoverBackground}',
-      filledFocusBackground: '{formField.filledFocusBackground}',
-      borderColor: '{formField.borderColor}',
-      hoverBorderColor: '{formField.hoverBorderSecondaryColor}',
-      focusBorderColor: '{formField.focusBorderSecondaryColor}',
-      invalidBorderColor: '{formField.invalidBorderColor}',
-      color: '{text.color}',
-      disabledColor: '{formField.disabledColor}',
-      placeholderColor: '{formField.placeholderColor}',
-      invalidPlaceholderColor: '{formField.invalidPlaceholderColor}',
-      shadow: '{formField.shadow}',
-      paddingX: '{sizingSelect.root.paddingX}',
-      paddingY: '{sizingSelect.root.paddingY}',
-      borderRadius: '{formField.borderRadius}',
-      transitionDuration: '{formField.transitionDuration}',
-      sm: {
-        fontSize: '{sizingSelect.root.fontSize}',
-        paddingX: '{sizingSelect.root.paddingX}',
-        paddingY: '{sizingSelect.root.paddingY}'
-      },
-      lg: {
-        fontSize: '{sizingSelect.root.fontSize}',
-        paddingX: '{sizingSelect.root.paddingX}',
-        paddingY: '{sizingSelect.root.paddingY}'
-      },
-      focusRing: {
-        width: '{formField.focusRing.width}',
-        style: '{formField.focusRing.style}',
-        color: '{formField.focusRing.color}',
-        offset: '{formField.focusRing.offset}',
-        shadow: '{formField.shadow}'
-      }
-    },
-    dropdown: {
-      width: '2.5rem',
-      color: '{formField.iconColor}'
-    },
-    overlay: {
-      background: '{overlay.select.background}',
-      borderColor: '{overlay.select.borderColor}',
-      borderRadius: '{overlay.select.borderRadius}',
-      color: '{overlay.select.color}',
-      shadow: '{overlay.select.shadow}'
-    },
-    list: {
-      padding: '{list.padding}',
-      gap: '{list.gap}',
-      header: {
-        padding: '{list.header.padding}'
-      }
-    },
-    option: {
-      focusBackground: '{list.option.focusBackground}',
-      selectedBackground: '{list.option.selectedBackground}',
-      selectedFocusBackground: '{list.option.selectedFocusBackground}',
-      color: '{list.option.color}',
-      focusColor: '{list.option.focusColor}',
-      selectedColor: '{list.option.selectedColor}',
-      selectedFocusColor: '{list.option.selectedFocusColor}',
-      padding: '{list.option.padding}',
-      borderRadius: '{list.option.borderRadius}'
-    },
-    optionGroup: {
-      background: '{list.optionGroup.background}',
-      color: '{list.optionGroup.color}',
-      fontWeight: '{fonts.fontWeight.demibold}',
-      padding: '{list.option.padding}'
-    },
-    clearIcon: {
-      color: '{formField.iconColor}'
-    },
-    checkmark: {
-      color: '{list.option.color}',
-      gutterStart: '-0.5rem',
-      gutterEnd: '0.5rem'
-    },
-    emptyMessage: {
-      padding: '{list.option.padding}'
-    }
-  },
-  selectbutton: {
-    colorScheme: {
-      light: {
-        root: {
-          invalidBorderColor: '{formField.invalidBorderColor}'
-        }
-      }
-    },
-    extend: {
-      background: '{surface.200}'
-    },
-    root: {
-      borderRadius: '{borderRadius.rounded}'
-    }
-  },
-  skeleton: {
-    colorScheme: {
-      light: {
-        root: {
-          background: '{surface.200}',
-          animationBackground: '{surface.100}'
-        }
-      }
-    },
-    root: {
-      borderRadius: '{content.borderRadius}'
-    }
-  },
-  slider: {
-    colorScheme: {
-      light: {
-        handle: {
-          content: {
-            background: '{surface.0}'
-          }
-        }
-      }
-    },
-    root: {
-      transitionDuration: '{formField.transitionDuration}'
-    },
-    track: {
-      background: '{content.borderColor}',
-      borderRadius: '{content.borderRadius}',
-      size: '0.25rem'
-    },
-    range: {
-      background: '{surface.900}'
-    },
-    handle: {
-      width: '1.25rem',
-      height: '1.25rem',
-      borderRadius: '{borderRadius.xl}',
-      background: '{surface.900}',
-      hoverBackground: '{surface.900}',
-      content: {
-        borderRadius: '{borderRadius.xl}',
-        hoverBackground: '{surface.900}',
-        width: '0.75rem',
-        height: '0.75rem',
-        shadow: 'none'
-      },
-      focusRing: {
-        width: '{formField.focusRing.width}',
-        style: '{formField.focusRing.style}',
-        color: '{formField.focusRing.color}',
-        offset: '{formField.focusRing.offset}',
-        shadow: '{formField.shadow}'
-      }
-    }
-  },
-  splitter: {
-    colorScheme: {
-      light: {
-        handle: {
-          background: '{surface.900}'
-        }
-      }
-    },
-    gutter: {
-      background: '{surface.100}'
-    },
-    root: {
-      background: '{content.background}',
-      borderColor: '{content.borderColor}',
-      color: '{content.color}',
-      transitionDuration: '{transitionDuration}'
-    },
-    handle: {
-      size: '0.25rem',
-      borderRadius: '{content.borderRadius}',
-      focusRing: {
-        width: '{formField.focusRing.width}',
-        style: '{formField.focusRing.style}',
-        color: '{formField.focusRing.color}',
-        offset: '{formField.focusRing.offset}',
-        shadow: '{formField.shadow}'
-      }
-    }
-  },
-  stepper: {
-    extend: {
-      extCaption: {
-        gap: '0.25rem'
-      },
-      extStepNumber: {
-        invalidBackground: '{error.400}',
-        invalidColor: '{error.900}',
-        invalidBorderColor: '{error.400}'
-      }
-    },
-    root: {
-      transitionDuration: '{transitionDuration}'
-    },
-    separator: {
-      background: '{content.borderColor}',
-      activeBackground: '{formField.focusBorderPrimaryColor}',
-      margin: '0 0 0 1.625rem',
-      size: '0.07142857142857142rem'
-    },
-    step: {
-      padding: '0.5rem',
-      gap: '0.5rem'
-    },
-    stepHeader: {
-      padding: '0',
-      borderRadius: '0',
-      gap: '0.5rem',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: '{focusRing.shadow}'
-      }
-    },
-    stepTitle: {
-      color: '{text.color}',
-      activeColor: '{text.color}',
-      fontWeight: '{fonts.fontWeight.regular}'
-    },
-    stepNumber: {
-      background: '{content.background}',
-      activeBackground: '{primary.color}',
-      borderColor: '{content.borderColor}',
-      activeBorderColor: '{primary.color}',
-      color: '{text.color}',
-      activeColor: '{text.extend.colorPrimaryStatic}',
-      size: '1.5rem',
-      fontSize: '{fonts.fontSize.base}',
-      fontWeight: '{fonts.fontWeight.bold}',
-      borderRadius: '{content.borderRadius}',
-      shadow: 'none'
-    },
-    steppanels: {
-      padding: '1rem'
-    },
-    steppanel: {
-      background: '{content.background}',
-      color: '{content.color}',
-      padding: '0',
-      indent: '0'
-    }
-  },
-  steps: {
-    itemLink: {
-      gap: '0.5rem'
-    },
-    itemLabel: {
-      fontWeight: '{fonts.fontWeight.regular}'
-    },
-    itemNumber: {
-      background: '{content.background}',
-      size: '2.25rem',
-      fontSize: '{fonts.fontSize.base}',
-      fontWeight: '{fonts.fontWeight.bold}',
-      borderRadius: '50%',
-      shadow: 'none'
-    }
-  },
-  tabs: {
-    colorScheme: {
-      light: {
-        navButton: {
-          shadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)'
-        },
-        tab: {
-          background: '{transparent}',
-          hoverBackground: '{transparent}',
-          activeBackground: '{transparent}'
-        }
-      }
-    },
-    root: {
-      transitionDuration: '{transitionDuration}'
-    },
-    tablist: {
-      borderWidth: '0 0 2px 0',
-      background: '{transparent}',
-      borderColor: '{content.borderColor}'
-    },
-    tab: {
-      borderWidth: '0',
-      borderColor: '{content.borderColor}',
-      hoverBorderColor: '{content.borderColor}',
-      activeBorderColor: '{formField.focusBorderPrimaryColor}',
-      color: '{text.mutedColor}',
-      hoverColor: '{text.color}',
-      activeColor: '{text.color}',
-      padding: '1rem',
-      fontWeight: '{fonts.fontWeight.demibold}',
-      margin: '0 0 -1px 0',
-      gap: '0.5rem',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: '{focusRing.shadow}'
-      }
-    },
-    tabpanel: {
-      background: '{transparent}',
-      color: '{text.color}',
-      padding: '1rem',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: '{focusRing.shadow}'
-      }
-    },
-    navButton: {
-      background: '{content.background}',
-      color: '{content.color}',
-      hoverColor: '{content.hoverColor}',
-      width: '1.5rem',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        color: '{focusRing.color}',
-        offset: '{focusRing.offset}',
-        shadow: '{focusRing.shadow}'
-      }
-    },
-    activeBar: {
-      height: '0.14285714285714285rem',
-      bottom: '-1',
-      background: '{content.color}'
-    }
-  },
-  toast: {
-    colorScheme: {
-      light: {
-        info: {
-          background: '{info.50}',
-          borderColor: '{info.500}',
-          color: '{text.color}',
-          detailColor: '{text.color}',
-          shadow: '{overlay.popover.shadow}',
-          closeButton: {
-            hoverBackground: '{info.200}',
-            focusRing: {
-              color: '{focusRing.color}',
-              shadow: 'none'
-            }
-          }
-        },
-        success: {
-          background: '{success.50}',
-          borderColor: '{success.500}',
-          color: '{text.color}',
-          detailColor: '{text.color}',
-          shadow: '{overlay.popover.shadow}',
-          closeButton: {
-            hoverBackground: '{success.200}',
-            focusRing: {
-              color: '{focusRing.color}',
-              shadow: 'none'
-            }
-          }
-        },
-        warn: {
-          background: '{warn.50}',
-          borderColor: '{warn.500}',
-          color: '{text.color}',
-          detailColor: '{text.color}',
-          shadow: '{overlay.popover.shadow}',
-          closeButton: {
-            hoverBackground: '{warn.200}',
-            focusRing: {
-              color: '{focusRing.color}',
-              shadow: 'none'
-            }
-          }
-        },
-        error: {
-          background: '{error.50}',
-          borderColor: '{error.500}',
-          color: '{text.color}',
-          detailColor: '{text.color}',
-          shadow: '{overlay.popover.shadow}',
-          closeButton: {
-            hoverBackground: '{error.200}',
-            focusRing: {
-              color: '{focusRing.color}',
-              shadow: 'none'
-            }
-          }
-        },
-        secondary: {
-          shadow: '{overlay.popover.shadow}'
-        },
-        contrast: {
-          shadow: '{overlay.popover.shadow}'
-        }
-      }
-    },
-    extend: {
-      extInfo: {
-        color: '{info.500}',
-        closeButton: {
-          color: '{info.500}',
-          borderColor: '{info.500}'
-        },
-        caption: {
-          color: '{text.color}'
-        }
-      },
-      extAccentLine: {
-        width: '0.25rem'
-      },
-      extCloseButton: {
-        width: '0.07142857142857142rem'
-      },
-      extSuccess: {
-        color: '{success.500}',
-        closeButton: {
-          color: '{success.500}',
-          borderColor: '{success.500}'
-        },
-        caption: {
-          color: '{text.color}'
-        }
-      },
-      extWarn: {
-        color: '{warn.500}',
-        closeButton: {
-          color: '{warn.500}',
-          borderColor: '{warn.500}'
-        },
-        caption: {
-          color: '{text.color}'
-        }
-      },
-      extError: {
-        color: '{error.500}',
-        closeButton: {
-          color: '{error.500}',
-          borderColor: '{error.500}'
-        },
-        caption: {
-          color: '{text.color}'
-        }
-      }
-    },
-    root: {
-      width: '{sizingToast.width}',
-      borderWidth: '0.07142857142857142rem',
-      borderRadius: '{content.borderRadius}',
-      transitionDuration: '{transitionDuration}'
-    },
-    icon: {
-      size: '2.25rem'
-    },
-    content: {
-      padding: '1rem',
-      gap: '1rem'
-    },
-    text: {
-      gap: '0.25rem'
-    },
-    summary: {
-      fontWeight: '{fonts.fontWeight.bold}',
-      fontSize: '{fonts.fontSize.base}'
-    },
-    detail: {
-      fontWeight: '{fonts.fontWeight.regular}',
-      fontSize: '{fonts.fontSize.sm}'
-    },
-    closeButton: {
-      width: '2rem',
-      height: '2rem',
-      borderRadius: '{borderRadius.md}',
-      focusRing: {
-        width: '{focusRing.width}',
-        style: '{focusRing.style}',
-        offset: '{focusRing.offset}'
-      }
-    },
-    closeIcon: {
-      size: '1rem'
-    }
-  },
-  tag: {
-    colorScheme: {
-      light: {
-        primary: {
-          background: '{primary.500}',
-          color: '{text.color}'
-        },
-        secondary: {
-          background: '{surface.200}',
-          color: '{text.color}'
-        },
-        success: {
-          background: '{success.400}',
-          color: '{success.900}'
-        },
-        info: {
-          background: '{info.300}',
-          color: '{info.900}'
-        },
-        warn: {
-          background: '{warn.300}',
-          color: '{warn.900}'
-        },
-        danger: {
-          background: '{error.300}',
-          color: '{error.900}'
-        }
-      }
-    },
-    root: {
-      fontSize: '{fonts.fontSize.xs}',
-      fontWeight: '{fonts.fontWeight.regular}',
-      padding: '0.285rem 0.5rem',
-      gap: '0.25rem',
-      borderRadius: '{borderRadius.sm}',
-      roundedBorderRadius: '{borderRadius.xl}'
-    },
-    icon: {
-      size: '0.875rem'
-    }
-  },
-  textarea: {
-    extend: {
-      readonlyBackground: '{formField.readonlyBackground}'
-    },
-    root: {
-      background: '{formField.background}',
-      disabledBackground: '{formField.disabledBackground}',
-      filledBackground: '{formField.filledBackground}',
-      filledHoverBackground: '{formField.filledHoverBackground}',
-      filledFocusBackground: '{formField.filledFocusBackground}',
-      borderColor: '{formField.borderColor}',
-      hoverBorderColor: '{formField.hoverBorderSecondaryColor}',
-      focusBorderColor: '{formField.focusBorderSecondaryColor}',
-      invalidBorderColor: '{formField.invalidBorderColor}',
-      color: '{formField.color}',
-      disabledColor: '{formField.disabledColor}',
-      placeholderColor: '{formField.placeholderColor}',
-      invalidPlaceholderColor: '{formField.invalidPlaceholderColor}',
-      shadow: '{formField.shadow}',
-      paddingX: '{formField.paddingX}',
-      paddingY: '{formField.paddingY}',
-      borderRadius: '{formField.borderRadius}',
-      transitionDuration: '{formField.transitionDuration}',
-      focusRing: {
-        width: '{formField.focusRing.width}',
-        style: '{formField.focusRing.style}',
-        color: '{formField.focusRing.color}',
-        offset: '{formField.focusRing.offset}',
-        shadow: '{formField.shadow}'
-      }
-    },
-    sm: {
-      fontSize: '{fonts.fontSize.base}',
-      paddingX: '{formField.sm.paddingX}',
-      paddingY: '{formField.sm.paddingY}'
-    },
-    lg: {
-      fontSize: '{fonts.fontSize.base}',
-      paddingX: '{formField.lg.paddingX}',
-      paddingY: '{formField.lg.paddingY}'
-    }
-  },
-  tieredmenu: {
-    extend: {
-      extSubmenu: {
-        borderColor: '{content.borderColor}',
-        background: '{content.background}'
-      },
-      extItem: {
-        caption: {
-          gap: '0.25rem',
-          color: '{text.mutedColor}'
-        }
-      }
-    },
-    root: {
-      background: '{transparent}',
-      borderColor: '{transparent}',
-      color: '{content.color}',
-      borderRadius: '{content.borderRadius}',
-      shadow: '{overlay.navigation.shadow}',
-      transitionDuration: '{transitionDuration}'
-    },
-    list: {
-      padding: '{navigation.list.padding}',
-      gap: '{navigation.list.gap}'
-    },
-    item: {
-      focusBackground: '{navigation.item.focusBackground}',
-      activeBackground: '{navigation.item.activeBackground}',
-      color: '{navigation.item.color}',
-      focusColor: '{navigation.item.focusColor}',
-      activeColor: '{navigation.item.activeColor}',
-      padding: '{navigation.item.padding}',
-      borderRadius: '{navigation.item.borderRadius}',
-      gap: '{navigation.item.gap}',
-      icon: {
-        color: '{navigation.item.icon.color}',
-        focusColor: '{navigation.item.icon.focusColor}',
-        activeColor: '{navigation.item.icon.activeColor}'
-      }
-    },
-    submenu: {
-      mobileIndent: '0.75rem'
-    },
-    separator: {
-      borderColor: '{content.borderColor}'
-    }
-  },
-  timeline: {
-    event: {
-      minHeight: '3.0357142857142856rem'
-    },
-    vertical: {
-      eventContent: {
-        padding: '0 1rem'
-      }
-    },
-    horizontal: {
-      eventContent: {
-        padding: '1rem 0'
-      }
-    },
-    eventMarker: {
-      size: '1rem',
-      borderRadius: '{content.borderRadius}',
-      borderWidth: '0.25rem',
-      background: '{content.background}',
-      borderColor: '{primary.color}',
-      content: {
-        borderRadius: '{content.borderRadius}',
-        size: '0.75rem',
-        background: '{transparent}',
-        insetShadow: 'none'
-      }
-    },
-    eventConnector: {
-      color: '{content.borderColor}',
-      size: '0.07142857142857142rem'
-    }
-  },
-  togglebutton: {
-    colorScheme: {
-      light: {
-        root: {
-          background: '{surface.200}'
-        }
-      }
-    },
-    extend: {
-      gap: '0.75rem',
-      extXlg: {
-        padding: '1.25rem 1.5rem',
-        iconOnlyWidth: '4.071428571428571rem'
-      },
-      iconOnlyWidth: '2.5rem',
-      extSm: {
-        iconOnlyWidth: '2.142857142857143rem'
-      },
-      hoverBorderColor: '{surface.300}',
-      checkedHoverColor: '{text.extend.colorInverted}',
-      checkedHoverBackground: '{surface.800}',
-      checkedHoverBorderColor: '{surface.800}',
-      extLg: {
-        iconOnlyWidth: '3.5714285714285716rem'
-      }
-    },
-    root: {
-      padding: '0.5rem 1rem',
-      borderRadius: '{borderRadius.rounded}',
-      gap: '0.5rem',
-      fontWeight: '{fonts.fontWeight.demibold}',
-      hoverBackground: '{surface.300}',
-      borderColor: '{surface.200}',
-      color: '{text.color}',
-      hoverColor: '{text.color}',
-      checkedBackground: '{surface.900}',
-      checkedColor: '{text.extend.colorInverted}',
-      checkedBorderColor: '{surface.900}',
-      disabledBackground: '{formField.disabledBackground}',
-      disabledBorderColor: '{formField.disabledBackground}',
-      disabledColor: '{formField.disabledColor}',
-      invalidBorderColor: '{formField.invalidBorderColor}',
-      focusRing: {
-        width: '{formField.focusRing.width}',
-        style: '{formField.focusRing.style}',
-        color: '{formField.focusRing.color}',
-        offset: '{formField.focusRing.offset}',
-        shadow: '{formField.shadow}'
-      },
-      sm: {
-        fontSize: '{formField.sm.fontSize}',
-        padding: '0.75rem 0.25rem'
-      },
-      lg: {
-        fontSize: '{formField.sm.fontSize}',
-        padding: '1rem 1.5rem'
-      },
-      transitionDuration: '{formField.transitionDuration}'
-    },
-    icon: {
-      color: '{text.color}',
-      hoverColor: '{text.color}',
-      checkedColor: '{text.extend.colorInverted}',
-      disabledColor: '{formField.disabledColor}'
-    },
-    content: {
-      checkedBackground: '{transparent}',
-      checkedShadow: 'none',
-      padding: '0',
-      borderRadius: '0',
-      sm: {
-        padding: '0'
-      },
-      lg: {
-        padding: '0'
-      }
-    }
-  },
-  toggleswitch: {
-    colorScheme: {
-      light: {
-        root: {
-          background: '{surface.400}',
-          hoverBackground: '{surface.500}',
-          disabledBackground: '{formField.disabledBackground}',
-          checkedBackground: '{surface.900}',
-          checkedHoverBackground: '{surface.500}'
-        },
-        handle: {
-          background: '{formField.backgroundHandler}',
-          hoverBackground: '{formField.backgroundHandler}',
-          disabledBackground: '{formField.disabledColor}',
-          checkedBackground: '{surface.0}',
-          checkedHoverBackground: '{surface.0}',
-          color: '{text.color}',
-          hoverColor: '{text.color}',
-          checkedColor: '{text.color}',
-          checkedHoverColor: '{text.color}'
-        }
-      }
-    },
-    root: {
-      width: '2.5rem',
-      height: '1.5rem',
-      borderRadius: '{borderRadius.xl}',
-      gap: '0.14285714285714285rem',
-      borderWidth: '0',
-      shadow: 'none',
-      focusRing: {
-        width: '{formField.focusRing.width}',
-        style: '{formField.focusRing.style}',
-        color: '{primary.200}',
-        offset: '{formField.focusRing.offset}',
-        shadow: '{formField.shadow}'
-      },
-      borderColor: '{transparent}',
-      hoverBorderColor: '{transparent}',
-      checkedBorderColor: '{transparent}',
-      checkedHoverBorderColor: '{transparent}',
-      invalidBorderColor: '{formField.invalidBorderColor}',
-      transitionDuration: '{formField.transitionDuration}',
-      slideDuration: '0.2s'
-    },
-    handle: {
-      borderRadius: '7.142857142857143rem',
-      size: '1.25rem'
-    }
-  },
-  tooltip: {
-    colorScheme: {
-      light: {
-        root: {
-          background: '{surface.900}',
-          color: '{text.extend.colorInverted}'
-        }
-      }
-    },
-    root: {
-      maxWidth: '17rem',
-      gutter: '0.25rem',
-      shadow: '{overlay.popover.shadow}',
-      padding: '0.5rem 1rem',
-      borderRadius: '{overlay.popover.borderRadius}'
-    }
-  },
-  tree: {
-    root: {
-      background: '{content.background}',
-      color: '{content.color}',
-      padding: '1rem',
-      gap: '2px',
-      indent: '1rem'
-    },
-    node: {
-      padding: '0.375rem 0.625rem',
-      color: '{text.color}',
-      selectedColor: '{text.extend.colorInverted}',
-      gap: '0.25rem'
-    },
-    nodeIcon: {
-      selectedColor: '{text.extend.colorInverted}'
-    },
-    nodeToggleButton: {
-      borderRadius: '50%',
-      size: '1.75rem',
-      selectedHoverBackground: '{surface.900}'
-    },
-    loadingIcon: {
-      size: '2rem'
-    },
-    filter: {
-      margin: '0 0 0.5rem 0'
-    }
-  },
-  overlaybadge: {
-    root: {
-      outline: {
-        width: '0',
-        color: '{transparent}'
-      }
-    }
-  }
-};
diff --git a/src/prime-preset/map-tokens.js b/src/prime-preset/map-tokens.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/prime-preset/map-tokens.ts b/src/prime-preset/map-tokens.ts
new file mode 100644
index 0000000..4957dfd
--- /dev/null
+++ b/src/prime-preset/map-tokens.ts
@@ -0,0 +1,43 @@
+import { Preset } from '@primeuix/themes/types';
+import type { AuraBaseDesignTokens } from '@primeuix/themes/aura/base';
+
+import primitive from './tokens/primitive-default.json';
+import semantic from './tokens/semantic-default.json';
+import components from './tokens/components-default.json';
+import themeLight from './tokens/theme-light.json';
+import themeDark from './tokens/theme-dark.json';
+import sizingBase from './tokens/sizing-base.json';
+import sizingSm from './tokens/sizing-sm.json';
+import sizingLg from './tokens/sizing-lg.json';
+import sizingXlg from './tokens/sizing-xlg.json';
+
+const presetTokens: Preset<AuraBaseDesignTokens> = {
+  primitive,
+  semantic,
+  components
+};
+
+if (presetTokens?.semantic) {
+  presetTokens.semantic.colorScheme = {
+    light: themeLight,
+    dark: themeDark
+  };
+}
+
+presetTokens.semantic = { ...presetTokens.semantic, ...sizingBase };
+
+const semanticLink: Record<string, any> = presetTokens.semantic;
+
+function applySizing(semantic: Record<string, any>, sizing: Record<string, any>, sizeKey: 'sm' | 'lg' | 'xlg') {
+  Object.keys(sizing).forEach((key) => {
+    if (semantic[key]) {
+      semantic[key][sizeKey] = sizing[key]?.root ?? sizing[key];
+    }
+  });
+}
+
+applySizing(semanticLink, sizingSm, 'sm');
+applySizing(semanticLink, sizingLg, 'lg');
+applySizing(semanticLink, sizingXlg, 'xlg');
+
+export default presetTokens;
diff --git a/src/prime-preset/primitive.ts b/src/prime-preset/primitive.ts
deleted file mode 100644
index eeadb16..0000000
--- a/src/prime-preset/primitive.ts
+++ /dev/null
@@ -1,372 +0,0 @@
-export default {
-  colors: {
-    alpha: {
-      white: {
-        '10': 'rgba(255, 255, 255, 0.1000)',
-        '20': 'rgba(255, 255, 255, 0.2000)',
-        '30': 'rgba(255, 255, 255, 0.3000)',
-        '40': 'rgba(255, 255, 255, 0.4000)',
-        '50': 'rgba(255, 255, 255, 0.5000)',
-        '60': 'rgba(255, 255, 255, 0.6000)',
-        '70': 'rgba(255, 255, 255, 0.7000)',
-        '80': 'rgba(255, 255, 255, 0.8000)',
-        '90': 'rgba(255, 255, 255, 0.9000)',
-        '100': '#ffffff'
-      },
-      black: {
-        '10': 'rgba(0, 0, 0, 0.1000)',
-        '20': 'rgba(0, 0, 0, 0.2000)',
-        '30': 'rgba(0, 0, 0, 0.3000)',
-        '40': 'rgba(0, 0, 0, 0.4000)',
-        '50': 'rgba(0, 0, 0, 0.5000)',
-        '60': 'rgba(0, 0, 0, 0.6000)',
-        '70': 'rgba(0, 0, 0, 0.7000)',
-        '80': 'rgba(0, 0, 0, 0.8000)',
-        '90': 'rgba(0, 0, 0, 0.9000)',
-        '100': '#000000'
-      }
-    },
-    solid: {
-      purple: {
-        '50': '#faf5ff',
-        '100': '#f3e8ff',
-        '200': '#e9d5ff',
-        '300': '#d8b4fe',
-        '400': '#c084fc',
-        '500': '#a855f7',
-        '600': '#9333ea',
-        '700': '#7e22ce',
-        '800': '#6b21a8',
-        '900': '#581c87',
-        '950': '#3b0764'
-      },
-      fuchsia: {
-        '50': '#fdf4ff',
-        '100': '#fae8ff',
-        '200': '#f5d0fe',
-        '300': '#f0abfc',
-        '400': '#e879f9',
-        '500': '#d946ef',
-        '600': '#c026d3',
-        '700': '#a21caf',
-        '800': '#86198f',
-        '900': '#701a75',
-        '950': '#4a044e'
-      },
-      pink: {
-        '50': '#fdf2f8',
-        '100': '#fce7f3',
-        '200': '#fbcfe8',
-        '300': '#f9a8d4',
-        '400': '#f472b6',
-        '500': '#ec4899',
-        '600': '#db2777',
-        '700': '#be185d',
-        '800': '#9d174d',
-        '900': '#831843',
-        '950': '#500724'
-      },
-      rose: {
-        '50': '#fff1f2',
-        '100': '#ffe4e6',
-        '200': '#fecdd3',
-        '300': '#fda4af',
-        '400': '#fb7185',
-        '500': '#f43f5e',
-        '600': '#e11d48',
-        '700': '#be123c',
-        '800': '#9f1239',
-        '900': '#881337',
-        '950': '#4c0519'
-      },
-      teal: {
-        '50': '#f0fdfa',
-        '100': '#ccfbf1',
-        '200': '#99f6e4',
-        '300': '#5eead4',
-        '400': '#2dd4bf',
-        '500': '#14b8a6',
-        '600': '#0d9488',
-        '700': '#0f766e',
-        '800': '#115e59',
-        '900': '#134e4a',
-        '950': '#042f2e'
-      },
-      cyan: {
-        '50': '#ecfeff',
-        '100': '#cffafe',
-        '200': '#a5f3fc',
-        '300': '#67e8f9',
-        '400': '#22d3ee',
-        '500': '#06b6d4',
-        '600': '#0891b2',
-        '700': '#0e7490',
-        '800': '#155e75',
-        '900': '#164e63',
-        '950': '#083344'
-      },
-      sky: {
-        '50': '#f0f9ff',
-        '100': '#e0f2fe',
-        '200': '#bae6fd',
-        '300': '#7dd3fc',
-        '400': '#38bdf8',
-        '500': '#0ea5e9',
-        '600': '#0284c7',
-        '700': '#0369a1',
-        '800': '#075985',
-        '900': '#0c4a6e',
-        '950': '#082f49'
-      },
-      blue: {
-        '50': '#fafdff',
-        '100': '#f0f9ff',
-        '200': '#d4ecfe',
-        '300': '#aad7fb',
-        '400': '#77baf4',
-        '500': '#4496e8',
-        '600': '#1e76cd',
-        '700': '#18538d',
-        '800': '#123a61',
-        '900': '#0e2a45',
-        '950': '#0c243b'
-      },
-      indigo: {
-        '50': '#eef2ff',
-        '100': '#e0e7ff',
-        '200': '#c7d2fe',
-        '300': '#a5b4fc',
-        '400': '#818cf8',
-        '500': '#6366f1',
-        '600': '#4f46e5',
-        '700': '#4338ca',
-        '800': '#3730a3',
-        '900': '#312e81',
-        '950': '#1e1b4b'
-      },
-      violet: {
-        '50': '#fcfaff',
-        '100': '#f6f0ff',
-        '200': '#e5d4fe',
-        '300': '#cbaafb',
-        '400': '#b284f5',
-        '500': '#a265ec',
-        '600': '#9457ea',
-        '700': '#48188d',
-        '800': '#321261',
-        '900': '#240e45',
-        '950': '#1f0c3b'
-      },
-      emerald: {
-        '50': '#ecfdf5',
-        '100': '#d1fae5',
-        '200': '#a7f3d0',
-        '300': '#6ee7b7',
-        '400': '#34d399',
-        '500': '#10b981',
-        '600': '#059669',
-        '700': '#047857',
-        '800': '#065f46',
-        '900': '#064e3b',
-        '950': '#022c22'
-      },
-      green: {
-        '50': '#fafffb',
-        '100': '#f0fff3',
-        '200': '#d4fedc',
-        '300': '#aafbb7',
-        '400': '#77f48a',
-        '500': '#44e858',
-        '600': '#1dc831',
-        '700': '#168322',
-        '800': '#12611b',
-        '900': '#0e4514',
-        '950': '#0c3b11'
-      },
-      lime: {
-        '50': '#f7fee7',
-        '100': '#ecfccb',
-        '200': '#d9f99d',
-        '300': '#bef264',
-        '400': '#a3e635',
-        '500': '#84cc16',
-        '600': '#65a30d',
-        '700': '#4d7c0f',
-        '800': '#3f6212',
-        '900': '#365314',
-        '950': '#1a2e05'
-      },
-      red: {
-        '50': '#fffafa',
-        '100': '#fff0f0',
-        '200': '#fed4d4',
-        '300': '#fbacaa',
-        '400': '#f47f77',
-        '500': '#e85244',
-        '600': '#db3424',
-        '700': '#8d2218',
-        '800': '#611912',
-        '900': '#45120e',
-        '950': '#3b100c'
-      },
-      orange: {
-        '50': '#fffbfa',
-        '100': '#fff3f0',
-        '200': '#ffddd5',
-        '300': '#ffbca9',
-        '400': '#ff9273',
-        '500': '#fe6434',
-        '600': '#d53f0b',
-        '700': '#a83107',
-        '800': '#752506',
-        '900': '#561c05',
-        '950': '#4b1905'
-      },
-      amber: {
-        '50': '#fffbeb',
-        '100': '#fef3c7',
-        '200': '#fde68a',
-        '300': '#fcd34d',
-        '400': '#fbbf24',
-        '500': '#f59e0b',
-        '600': '#d97706',
-        '700': '#b45309',
-        '800': '#92400e',
-        '900': '#78350f',
-        '950': '#451a03'
-      },
-      yellow: {
-        '50': '#fffdfa',
-        '100': '#fff9f0',
-        '200': '#ffeed4',
-        '300': '#fddeaa',
-        '400': '#facb75',
-        '500': '#f5b83d',
-        '600': '#dc9710',
-        '700': '#9d6d0e',
-        '800': '#6d4c0b',
-        '900': '#4f3709',
-        '950': '#453008'
-      },
-      slate: {
-        '50': '#f8fafc',
-        '100': '#f1f5f9',
-        '200': '#e2e8f0',
-        '300': '#cbd5e1',
-        '400': '#94a3b8',
-        '500': '#64748b',
-        '600': '#475569',
-        '700': '#334155',
-        '800': '#1e293b',
-        '900': '#0f172a',
-        '950': '#020617'
-      },
-      gray: {
-        '50': '#f9fafb',
-        '100': '#f3f4f6',
-        '200': '#e5e7eb',
-        '300': '#d1d5db',
-        '400': '#9ca3af',
-        '500': '#6b7280',
-        '600': '#4b5563',
-        '700': '#374151',
-        '800': '#1f2937',
-        '900': '#111827',
-        '950': '#030712'
-      },
-      zinc: {
-        '50': '#fafafa',
-        '100': '#f0f0f1',
-        '200': '#e2e2e4',
-        '300': '#cecfd2',
-        '400': '#a2a5a9',
-        '500': '#85888e',
-        '600': '#6d7076',
-        '700': '#56595f',
-        '800': '#404348',
-        '900': '#2b2e33',
-        '950': '#181a1f'
-      },
-      neutral: {
-        '50': '#fafafa',
-        '100': '#f5f5f5',
-        '200': '#e5e5e5',
-        '300': '#d4d4d4',
-        '400': '#a3a3a3',
-        '500': '#737373',
-        '600': '#525252',
-        '700': '#404040',
-        '800': '#262626',
-        '900': '#171717',
-        '950': '#0a0a0a'
-      },
-      stone: {
-        '50': '#fafaf9',
-        '100': '#f5f5f4',
-        '200': '#e7e5e4',
-        '300': '#d6d3d1',
-        '400': '#a8a29e',
-        '500': '#78716c',
-        '600': '#57534e',
-        '700': '#44403c',
-        '800': '#292524',
-        '900': '#1c1917',
-        '950': '#0c0a09'
-      }
-    }
-  },
-  borderRadius: {
-    none: '0',
-    xs: '0.25rem',
-    sm: '0.5rem',
-    md: '0.75rem',
-    lg: '1rem',
-    xl: '1.5rem',
-    rounded: '71.35714285714286rem'
-  },
-  fonts: {
-    fontFamily: {
-      heading: 'TT Fellows',
-      base: 'PT Sans'
-    },
-    fontWeight: {
-      regular: 400,
-      medium: 500,
-      demibold: 600,
-      bold: 700
-    },
-    fontSize: {
-      xs: '0.75rem',
-      sm: '0.875rem',
-      base: '1rem',
-      lg: '1.125rem',
-      xl: '1.25rem',
-      '2xl': '1.5rem',
-      '3xl': '1.875rem',
-      '4xl': '2.25rem',
-      '5xl': '3rem',
-      '6xl': '3.75rem',
-      '7xl': '4.5rem',
-      '8xl': '6rem'
-    },
-    lineHeight: {
-      '10': '0.7857142857142857rem',
-      '15': '0.8571428571428571rem',
-      '20': '0.9285714285714286rem',
-      '25': '1rem',
-      '30': '1.0714285714285714rem',
-      '35': '1.1428571428571428rem',
-      '40': '1.2857142857142858rem',
-      '45': '1.4285714285714286rem',
-      '50': '1.5rem',
-      '55': '1.5714285714285714rem',
-      '60': '1.7142857142857142rem',
-      '65': '1.8571428571428572rem',
-      '70': '2.2857142857142856rem',
-      '75': '2.357142857142857rem',
-      '80': '2.7857142857142856rem',
-      '85': '3.357142857142857rem',
-      auto: 'auto'
-    }
-  }
-};
diff --git a/src/prime-preset/semantic.json b/src/prime-preset/semantic.json
deleted file mode 100644
index e05b2fa..0000000
--- a/src/prime-preset/semantic.json
+++ /dev/null
@@ -1,405 +0,0 @@
-{
-  "list": {
-    "padding": "0.25rem",
-    "gap": "0.25rem",
-    "header": {
-      "padding": "1rem 1rem 0 1rem"
-    },
-    "option": {
-      "padding": "0.5rem 0.75rem",
-      "borderRadius": "0.5rem"
-    },
-    "optionGroup": {
-      "padding": "0.5rem 0.75rem",
-      "fontWeight": "{fonts.fontWeight.demibold}"
-    }
-  },
-  "focusRing": {
-    "width": "0.25rem",
-    "style": "none",
-    "color": "#ffffff",
-    "offset": "0",
-    "shadow": "0 0 0 0.25rem {primary.200}"
-  },
-  "primary": {
-    "50": "{colors.solid.green.50}",
-    "100": "{colors.solid.green.100}",
-    "200": "{colors.solid.green.200}",
-    "300": "{colors.solid.green.300}",
-    "400": "{colors.solid.green.400}",
-    "500": "{colors.solid.green.500}",
-    "600": "{colors.solid.green.600}",
-    "700": "{colors.solid.green.700}",
-    "800": "{colors.solid.green.800}",
-    "900": "{colors.solid.green.900}",
-    "950": "{colors.solid.green.950}"
-  },
-  "formField": {
-    "paddingX": "0.75rem",
-    "paddingY": "0.75rem",
-    "borderRadius": "{borderRadius.md}",
-    "transitionDuration": "{transitionDuration}",
-    "sm": {
-      "fontSize": "{fonts.fontSize.base}",
-      "paddingX": "0.044642857142857144rem",
-      "paddingY": "0.03571428571428571rem"
-    },
-    "lg": {
-      "fontSize": "{fonts.fontSize.base}",
-      "paddingX": "0.0625rem",
-      "paddingY": "0.05357142857142857rem"
-    },
-    "focusRing": {
-      "width": "{focusRing.width}",
-      "style": "{focusRing.style}",
-      "color": "{focusRing.color}",
-      "offset": "{focusRing.offset}",
-      "shadow": "{focusRing.shadow}"
-    }
-  },
-  "sizingInputtext": {
-    "root": {
-      "fontSize": "1rem",
-      "paddingX": "0.75rem",
-      "paddingY": "0.75rem"
-    },
-    "sm": {
-      "fontSize": "1rem",
-      "paddingX": "0.75rem",
-      "paddingY": "0.75rem"
-    },
-    "lg": {
-      "fontSize": "1rem",
-      "paddingX": "0.75rem",
-      "paddingY": "1.25rem"
-    },
-    "xlg": {
-      "fontSize": "1rem",
-      "paddingX": "0.75rem",
-      "paddingY": "1.5rem"
-    }
-  },
-  "sizingSelect": {
-    "fontSize": "1rem",
-    "paddingX": "0.75rem",
-    "paddingY": "1rem"
-  },
-  "sizingDialog": {
-    "extra": {
-      "minWidth": "25rem"
-    },
-    "sm": {
-      "extra": {
-        "minWidth": "20rem"
-      }
-    },
-    "lg": {
-      "extra": {
-        "minWidth": "30rem"
-      }
-    },
-    "xlg": {
-      "extra": {
-        "minWidth": "45rem"
-      }
-    }
-  },
-  "sizingMessage": {
-    "width": "25rem",
-    "sm": {
-      "width": "20rem"
-    },
-    "lg": {
-      "width": "30rem"
-    },
-    "xlg": {
-      "width": "45rem"
-    }
-  },
-  "sizingToast": {
-    "width": "25rem",
-    "sm": {
-      "width": "20rem"
-    },
-    "lg": {
-      "width": "30rem"
-    },
-    "xlg": {
-      "width": "45rem"
-    }
-  },
-  "sizingDrawer": {
-    "width": "25rem",
-    "sm": {
-      "width": "20rem"
-    },
-    "lg": {
-      "width": "30rem"
-    },
-    "xlg": {
-      "width": "45rem"
-    }
-  },
-  "content": {
-    "borderRadius": "{borderRadius.md}"
-  },
-  "mask": {
-    "transitionDuration": "{transitionDuration}"
-  },
-  "navigation": {
-    "list": {
-      "padding": "0.25rem",
-      "gap": "0.25rem"
-    },
-    "item": {
-      "padding": "0.625rem 1rem",
-      "borderRadius": "{borderRadius.sm}",
-      "gap": "0.5rem"
-    },
-    "submenuLabel": {
-      "padding": "0.625rem 1rem",
-      "fontWeight": "{fonts.fontWeight.demibold}"
-    },
-    "submenuIcon": {
-      "size": "1.25rem"
-    }
-  },
-  "overlay": {
-    "select": {
-      "borderRadius": "{borderRadius.md}",
-      "shadow": "0 3.5px 7px 0 rgba(0, 0, 0, 0.2)"
-    },
-    "popover": {
-      "borderRadius": "{borderRadius.sm}",
-      "padding": "0.75rem",
-      "shadow": "0 1px 3px rgba(0, 0, 0, 0.1)"
-    },
-    "modal": {
-      "borderRadius": "{borderRadius.xl}",
-      "padding": "1.5rem",
-      "shadow": "0 1px 3px rgba(0, 0, 0, 0.3)"
-    },
-    "navigation": {
-      "shadow": "0 2px 12px 0 rgba(0, 0, 0, 0.1)"
-    }
-  },
-  "transitionDuration": "0.2s",
-  "disabledOpacity": "3.5714285714285716rem",
-  "iconSizeMedium": "1rem",
-  "iconSizeLarge": "1.25rem",
-  "anchorGutter": "0.14285714285714285rem",
-  "colorScheme": {
-    "light": {
-      "success": {
-        "50": "{colors.solid.green.50}",
-        "100": "{colors.solid.green.100}",
-        "200": "{colors.solid.green.200}",
-        "300": "{colors.solid.green.300}",
-        "400": "{colors.solid.green.400}",
-        "500": "{colors.solid.green.500}",
-        "600": "{colors.solid.green.600}",
-        "700": "{colors.solid.green.700}",
-        "800": "{colors.solid.green.800}",
-        "900": "{colors.solid.green.900}",
-        "950": "{colors.solid.green.950}"
-      },
-      "info": {
-        "50": "{colors.solid.blue.50}",
-        "100": "{colors.solid.blue.100}",
-        "200": "{colors.solid.blue.200}",
-        "300": "{colors.solid.blue.300}",
-        "400": "{colors.solid.blue.400}",
-        "500": "{colors.solid.blue.500}",
-        "600": "{colors.solid.blue.600}",
-        "700": "{colors.solid.blue.700}",
-        "800": "{colors.solid.blue.800}",
-        "900": "{colors.solid.blue.900}",
-        "950": "{colors.solid.blue.950}"
-      },
-      "warn": {
-        "50": "{colors.solid.yellow.50}",
-        "100": "{colors.solid.yellow.100}",
-        "200": "{colors.solid.yellow.200}",
-        "300": "{colors.solid.yellow.300}",
-        "400": "{colors.solid.yellow.400}",
-        "500": "{colors.solid.yellow.500}",
-        "600": "{colors.solid.yellow.600}",
-        "700": "{colors.solid.yellow.700}",
-        "800": "{colors.solid.yellow.800}",
-        "900": "{colors.solid.yellow.900}",
-        "950": "{colors.solid.yellow.950}"
-      },
-      "transparent": "rgba(255, 255, 255, 0.0001)",
-      "help": {
-        "50": "{colors.solid.purple.50}",
-        "100": "{colors.solid.purple.100}",
-        "200": "{colors.solid.purple.200}",
-        "300": "{colors.solid.purple.300}",
-        "400": "{colors.solid.purple.400}",
-        "500": "{colors.solid.purple.500}",
-        "600": "{colors.solid.purple.600}",
-        "700": "{colors.solid.purple.700}",
-        "800": "{colors.solid.purple.800}",
-        "900": "{colors.solid.purple.900}",
-        "950": "{colors.solid.purple.950}"
-      },
-      "error": {
-        "50": "{colors.solid.red.50}",
-        "100": "{colors.solid.red.100}",
-        "200": "{colors.solid.red.200}",
-        "300": "{colors.solid.red.300}",
-        "400": "{colors.solid.red.400}",
-        "500": "{colors.solid.red.500}",
-        "600": "{colors.solid.red.600}",
-        "700": "{colors.solid.red.700}",
-        "800": "{colors.solid.red.800}",
-        "900": "{colors.solid.red.900}",
-        "950": "{colors.solid.red.950}"
-      },
-      "surface": {
-        "0": "{colors.alpha.white.100}",
-        "50": "{colors.solid.zinc.50}",
-        "100": "{colors.solid.zinc.100}",
-        "200": "{colors.solid.zinc.200}",
-        "300": "{colors.solid.zinc.300}",
-        "400": "{colors.solid.zinc.400}",
-        "500": "{colors.solid.zinc.500}",
-        "600": "{colors.solid.zinc.600}",
-        "700": "{colors.solid.zinc.700}",
-        "800": "{colors.solid.zinc.800}",
-        "900": "{colors.solid.zinc.900}",
-        "950": "{colors.solid.zinc.950}"
-      },
-      "primary": {
-        "color": "{primary.500}",
-        "contrastColor": "{surface.0}",
-        "hoverColor": "{primary.600}",
-        "activeColor": "{primary.700}"
-      },
-      "highlight": {
-        "background": "{colors.solid.zinc.900}",
-        "focusBackground": "{colors.solid.zinc.800}",
-        "color": "{colors.alpha.white.100}",
-        "focusColor": "{colors.alpha.white.100}"
-      },
-      "focusRing": {
-        "shadow": "0 0 0 0.2rem {primary.200}",
-        "extend": {
-          "invalid": "{colors.solid.red.200}",
-          "success": "{colors.solid.green.200}",
-          "warning": "{colors.solid.yellow.200}",
-          "info": "{colors.solid.blue.200}"
-        }
-      },
-      "mask": {
-        "background": "{colors.alpha.black.40}",
-        "color": "{surface.200}"
-      },
-      "formField": {
-        "background": "{colors.alpha.white.100}",
-        "disabledBackground": "{colors.solid.zinc.200}",
-        "readonlyBackground": "{colors.solid.zinc.100}",
-        "filledBackground": "{colors.alpha.white.100}",
-        "filledHoverBackground": "{colors.alpha.white.100}",
-        "filledFocusBackground": "{colors.alpha.white.100}",
-        "borderColor": "{colors.solid.zinc.300}",
-        "hoverBorderPrimaryColor": "{colors.solid.zinc.900}",
-        "focusBorderPrimaryColor": "{colors.solid.zinc.900}",
-        "hoverBorderSecondaryColor": "{colors.solid.green.600}",
-        "focusBorderSecondaryColor": "{colors.solid.green.600}",
-        "invalidBorderColor": "{colors.solid.red.400}",
-        "color": "{colors.solid.zinc.950}",
-        "disabledColor": "{colors.solid.zinc.500}",
-        "placeholderColor": "{colors.solid.zinc.500}",
-        "invalidPlaceholderColor": "{colors.solid.red.600}",
-        "floatLabelColor": "{colors.solid.zinc.500}",
-        "floatLabelFocusColor": "{colors.solid.zinc.500}",
-        "floatLabelActiveColor": "{colors.solid.zinc.500}",
-        "floatLabelInvalidColor": "{formField.invalidPlaceholderColor}",
-        "iconColor": "{colors.solid.zinc.950}",
-        "shadow": "rgba(0, 0, 0, 0.0000)",
-        "backgroundHandler": "{colors.alpha.white.100}"
-      },
-      "text": {
-        "color": "{colors.solid.zinc.900}",
-        "extend": {
-          "colorPrimaryStatic": "{colors.solid.zinc.900}",
-          "colorSecondaryStatic": "{colors.alpha.white.100}",
-          "colorInverted": "{colors.alpha.white.100}"
-        },
-        "hoverColor": "{colors.solid.zinc.700}",
-        "mutedColor": "{colors.solid.zinc.500}",
-        "hoverMutedColor": "{colors.solid.zinc.300}"
-      },
-      "content": {
-        "background": "{colors.alpha.white.100}",
-        "hoverBackground": "{colors.solid.zinc.100}",
-        "borderColor": "{colors.solid.zinc.200}",
-        "color": "{text.color}",
-        "hoverColor": "{text.hoverColor}"
-      },
-      "list": {
-        "option": {
-          "background": "{colors.alpha.white.100}",
-          "focusBackground": "{colors.solid.zinc.100}",
-          "selectedBackground": "{colors.solid.zinc.900}",
-          "selectedFocusBackground": "{colors.solid.zinc.700}",
-          "color": "{text.color}",
-          "focusColor": "{text.color}",
-          "selectedColor": "{text.extend.colorInverted}",
-          "selectedFocusColor": "{text.extend.colorInverted}",
-          "icon": {
-            "color": "{text.color}",
-            "focusColor": "{text.color}"
-          }
-        },
-        "surface": "#ffffff",
-        "optionGroup": {
-          "background": "{colors.alpha.white.100}",
-          "color": "{text.mutedColor}"
-        }
-      },
-      "overlay": {
-        "select": {
-          "background": "{colors.alpha.white.100}",
-          "borderColor": "{colors.solid.zinc.200}",
-          "color": "{text.color}"
-        },
-        "popover": {
-          "background": "{colors.alpha.white.100}",
-          "borderColor": "{formField.borderColor}",
-          "color": "{text.color}",
-          "shadow": "rgba(24, 26, 31, 0.2000)"
-        },
-        "modal": {
-          "background": "{colors.alpha.white.100}",
-          "borderColor": "{colors.solid.zinc.200}",
-          "color": "{text.color}"
-        }
-      },
-      "navigation": {
-        "submenuLabel": {
-          "background": "rgba(255, 255, 255, 0.0000)",
-          "color": "{text.mutedColor}"
-        },
-        "submenuIcon": {
-          "color": "{colors.solid.zinc.900}",
-          "focusColor": "{colors.solid.zinc.900}",
-          "activeColor": "{colors.alpha.white.100}"
-        },
-        "item": {
-          "focusBackground": "{colors.solid.zinc.100}",
-          "activeBackground": "{colors.solid.zinc.900}",
-          "color": "{colors.solid.zinc.900}",
-          "focusColor": "{colors.solid.zinc.900}",
-          "icon": {
-            "color": "{colors.solid.zinc.900}",
-            "focusColor": "{colors.solid.zinc.900}",
-            "activeColor": "{colors.alpha.white.100}"
-          },
-          "activeColor": "{colors.alpha.white.100}"
-        }
-      }
-    }
-  }
-}
diff --git a/src/prime-preset/semantic.ts b/src/prime-preset/semantic.ts
deleted file mode 100644
index 951a084..0000000
--- a/src/prime-preset/semantic.ts
+++ /dev/null
@@ -1,617 +0,0 @@
-export default {
-  list: {
-    padding: '0.25rem',
-    gap: '0.25rem',
-    header: {
-      padding: '1rem 1rem 0 1rem'
-    },
-    option: {
-      padding: '0.5rem 0.75rem',
-      borderRadius: '0.5rem'
-    },
-    optionGroup: {
-      padding: '0.5rem 0.75rem',
-      fontWeight: '{fonts.fontWeight.demibold}'
-    }
-  },
-  focusRing: {
-    width: '0.25rem',
-    style: 'none',
-    color: '#ffffff',
-    offset: '0',
-    shadow: '0 0 0 0.25rem {primary.200}'
-  },
-  primary: {
-    '50': '{colors.solid.green.50}',
-    '100': '{colors.solid.green.100}',
-    '200': '{colors.solid.green.200}',
-    '300': '{colors.solid.green.300}',
-    '400': '{colors.solid.green.400}',
-    '500': '{colors.solid.green.500}',
-    '600': '{colors.solid.green.600}',
-    '700': '{colors.solid.green.700}',
-    '800': '{colors.solid.green.800}',
-    '900': '{colors.solid.green.900}',
-    '950': '{colors.solid.green.950}'
-  },
-  formField: {
-    paddingX: '0.75rem',
-    paddingY: '0.75rem',
-    borderRadius: '{borderRadius.md}',
-    transitionDuration: '{transitionDuration}',
-    sm: {
-      fontSize: '{fonts.fontSize.base}',
-      paddingX: '0.044642857142857144rem',
-      paddingY: '0.03571428571428571rem'
-    },
-    lg: {
-      fontSize: '{fonts.fontSize.base}',
-      paddingX: '0.0625rem',
-      paddingY: '0.05357142857142857rem'
-    },
-    focusRing: {
-      width: '{focusRing.width}',
-      style: '{focusRing.style}',
-      color: '{focusRing.color}',
-      offset: '{focusRing.offset}',
-      shadow: '{focusRing.shadow}'
-    }
-  },
-  sizingInputtext: {
-    root: {
-      fontSize: '1rem',
-      paddingX: '0.75rem',
-      paddingY: '0.75rem'
-    },
-    sm: {
-      fontSize: '1rem',
-      paddingX: '0.75rem',
-      paddingY: '0.75rem'
-    },
-    lg: {
-      fontSize: '1rem',
-      paddingX: '0.75rem',
-      paddingY: '1.25rem'
-    },
-    xlg: {
-      fontSize: '1rem',
-      paddingX: '0.75rem',
-      paddingY: '1.5rem'
-    }
-  },
-  sizingSelect: {
-    fontSize: '1rem',
-    paddingX: '0.75rem',
-    paddingY: '1rem'
-  },
-  sizingDialog: {
-    extra: {
-      minWidth: '25rem'
-    },
-    sm: {
-      extra: {
-        minWidth: '20rem'
-      }
-    },
-    lg: {
-      extra: {
-        minWidth: '30rem'
-      }
-    },
-    xlg: {
-      extra: {
-        minWidth: '45rem'
-      }
-    }
-  },
-  sizingMessage: {
-    width: '25rem',
-    sm: {
-      width: '20rem'
-    },
-    lg: {
-      width: '30rem'
-    },
-    xlg: {
-      width: '45rem'
-    }
-  },
-  sizingToast: {
-    width: '25rem',
-    sm: {
-      width: '20rem'
-    },
-    lg: {
-      width: '30rem'
-    },
-    xlg: {
-      width: '45rem'
-    }
-  },
-  sizingDrawer: {
-    width: '25rem',
-    sm: {
-      width: '20rem'
-    },
-    lg: {
-      width: '30rem'
-    },
-    xlg: {
-      width: '45rem'
-    }
-  },
-  content: {
-    borderRadius: '{borderRadius.md}'
-  },
-  mask: {
-    transitionDuration: '{transitionDuration}'
-  },
-  navigation: {
-    list: {
-      padding: '0.25rem',
-      gap: '0.25rem'
-    },
-    item: {
-      padding: '0.625rem 1rem',
-      borderRadius: '{borderRadius.sm}',
-      gap: '0.5rem'
-    },
-    submenuLabel: {
-      padding: '0.625rem 1rem',
-      fontWeight: '{fonts.fontWeight.demibold}'
-    },
-    submenuIcon: {
-      size: '1.25rem'
-    }
-  },
-  overlay: {
-    select: {
-      borderRadius: '{borderRadius.md}',
-      shadow: '0 3.5px 7px 0 rgba(0, 0, 0, 0.2)'
-    },
-    popover: {
-      borderRadius: '{borderRadius.sm}',
-      padding: '0.75rem',
-      shadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
-    },
-    modal: {
-      borderRadius: '{borderRadius.xl}',
-      padding: '1.5rem',
-      shadow: '0 1px 3px rgba(0, 0, 0, 0.3)'
-    },
-    navigation: {
-      shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
-    }
-  },
-  transitionDuration: '0.2s',
-  disabledOpacity: '0.5',
-  iconSizeMedium: '1rem',
-  iconSizeLarge: '1.25rem',
-  anchorGutter: '0.14285714285714285rem',
-  colorScheme: {
-    light: {
-      success: {
-        '50': '{colors.solid.green.50}',
-        '100': '{colors.solid.green.100}',
-        '200': '{colors.solid.green.200}',
-        '300': '{colors.solid.green.300}',
-        '400': '{colors.solid.green.400}',
-        '500': '{colors.solid.green.500}',
-        '600': '{colors.solid.green.600}',
-        '700': '{colors.solid.green.700}',
-        '800': '{colors.solid.green.800}',
-        '900': '{colors.solid.green.900}',
-        '950': '{colors.solid.green.950}'
-      },
-      info: {
-        '50': '{colors.solid.blue.50}',
-        '100': '{colors.solid.blue.100}',
-        '200': '{colors.solid.blue.200}',
-        '300': '{colors.solid.blue.300}',
-        '400': '{colors.solid.blue.400}',
-        '500': '{colors.solid.blue.500}',
-        '600': '{colors.solid.blue.600}',
-        '700': '{colors.solid.blue.700}',
-        '800': '{colors.solid.blue.800}',
-        '900': '{colors.solid.blue.900}',
-        '950': '{colors.solid.blue.950}'
-      },
-      warn: {
-        '50': '{colors.solid.yellow.50}',
-        '100': '{colors.solid.yellow.100}',
-        '200': '{colors.solid.yellow.200}',
-        '300': '{colors.solid.yellow.300}',
-        '400': '{colors.solid.yellow.400}',
-        '500': '{colors.solid.yellow.500}',
-        '600': '{colors.solid.yellow.600}',
-        '700': '{colors.solid.yellow.700}',
-        '800': '{colors.solid.yellow.800}',
-        '900': '{colors.solid.yellow.900}',
-        '950': '{colors.solid.yellow.950}'
-      },
-      transparent: 'rgba(255, 255, 255, 0.0001)',
-      help: {
-        '50': '{colors.solid.purple.50}',
-        '100': '{colors.solid.purple.100}',
-        '200': '{colors.solid.purple.200}',
-        '300': '{colors.solid.purple.300}',
-        '400': '{colors.solid.purple.400}',
-        '500': '{colors.solid.purple.500}',
-        '600': '{colors.solid.purple.600}',
-        '700': '{colors.solid.purple.700}',
-        '800': '{colors.solid.purple.800}',
-        '900': '{colors.solid.purple.900}',
-        '950': '{colors.solid.purple.950}'
-      },
-      error: {
-        '50': '{colors.solid.red.50}',
-        '100': '{colors.solid.red.100}',
-        '200': '{colors.solid.red.200}',
-        '300': '{colors.solid.red.300}',
-        '400': '{colors.solid.red.400}',
-        '500': '{colors.solid.red.500}',
-        '600': '{colors.solid.red.600}',
-        '700': '{colors.solid.red.700}',
-        '800': '{colors.solid.red.800}',
-        '900': '{colors.solid.red.900}',
-        '950': '{colors.solid.red.950}'
-      },
-      surface: {
-        '0': '{colors.alpha.white.100}',
-        '50': '{colors.solid.zinc.50}',
-        '100': '{colors.solid.zinc.100}',
-        '200': '{colors.solid.zinc.200}',
-        '300': '{colors.solid.zinc.300}',
-        '400': '{colors.solid.zinc.400}',
-        '500': '{colors.solid.zinc.500}',
-        '600': '{colors.solid.zinc.600}',
-        '700': '{colors.solid.zinc.700}',
-        '800': '{colors.solid.zinc.800}',
-        '900': '{colors.solid.zinc.900}',
-        '950': '{colors.solid.zinc.950}'
-      },
-      primary: {
-        color: '{primary.500}',
-        contrastColor: '{surface.0}',
-        hoverColor: '{primary.600}',
-        activeColor: '{primary.700}'
-      },
-      highlight: {
-        background: '{colors.solid.zinc.900}',
-        focusBackground: '{colors.solid.zinc.800}',
-        color: '{colors.alpha.white.100}',
-        focusColor: '{colors.alpha.white.100}'
-      },
-      focusRing: {
-        shadow: '0 0 0 0.2rem {primary.200}',
-        extend: {
-          invalid: '{colors.solid.red.200}',
-          success: '{colors.solid.green.200}',
-          warning: '{colors.solid.yellow.200}',
-          info: '{colors.solid.blue.200}'
-        }
-      },
-      mask: {
-        background: '{colors.alpha.black.40}',
-        color: '{surface.200}'
-      },
-      formField: {
-        background: '{colors.alpha.white.100}',
-        disabledBackground: '{colors.solid.zinc.200}',
-        readonlyBackground: '{colors.solid.zinc.100}',
-        filledBackground: '{colors.alpha.white.100}',
-        filledHoverBackground: '{colors.alpha.white.100}',
-        filledFocusBackground: '{colors.alpha.white.100}',
-        borderColor: '{colors.solid.zinc.300}',
-        hoverBorderPrimaryColor: '{colors.solid.zinc.900}',
-        focusBorderPrimaryColor: '{colors.solid.zinc.900}',
-        hoverBorderSecondaryColor: '{colors.solid.green.600}',
-        focusBorderSecondaryColor: '{colors.solid.green.600}',
-        invalidBorderColor: '{colors.solid.red.400}',
-        color: '{colors.solid.zinc.950}',
-        disabledColor: '{colors.solid.zinc.500}',
-        placeholderColor: '{colors.solid.zinc.500}',
-        invalidPlaceholderColor: '{colors.solid.red.600}',
-        floatLabelColor: '{colors.solid.zinc.500}',
-        floatLabelFocusColor: '{colors.solid.zinc.500}',
-        floatLabelActiveColor: '{colors.solid.zinc.500}',
-        floatLabelInvalidColor: '{formField.invalidPlaceholderColor}',
-        iconColor: '{colors.solid.zinc.950}',
-        shadow: 'rgba(0, 0, 0, 0.0000)',
-        backgroundHandler: '{colors.alpha.white.100}'
-      },
-      text: {
-        color: '{colors.solid.zinc.900}',
-        extend: {
-          colorPrimaryStatic: '{colors.solid.zinc.900}',
-          colorSecondaryStatic: '{colors.alpha.white.100}',
-          colorInverted: '{colors.alpha.white.100}'
-        },
-        hoverColor: '{colors.solid.zinc.700}',
-        mutedColor: '{colors.solid.zinc.500}',
-        hoverMutedColor: '{colors.solid.zinc.300}'
-      },
-      content: {
-        background: '{colors.alpha.white.100}',
-        hoverBackground: '{colors.solid.zinc.100}',
-        borderColor: '{colors.solid.zinc.200}',
-        color: '{text.color}',
-        hoverColor: '{text.hoverColor}'
-      },
-      list: {
-        option: {
-          background: '{colors.alpha.white.100}',
-          focusBackground: '{colors.solid.zinc.100}',
-          selectedBackground: '{colors.solid.zinc.900}',
-          selectedFocusBackground: '{colors.solid.zinc.700}',
-          color: '{text.color}',
-          focusColor: '{text.color}',
-          selectedColor: '{text.extend.colorInverted}',
-          selectedFocusColor: '{text.extend.colorInverted}',
-          icon: {
-            color: '{text.color}',
-            focusColor: '{text.color}'
-          }
-        },
-        surface: '#ffffff',
-        optionGroup: {
-          background: '{colors.alpha.white.100}',
-          color: '{text.mutedColor}'
-        }
-      },
-      overlay: {
-        select: {
-          background: '{colors.alpha.white.100}',
-          borderColor: '{colors.solid.zinc.200}',
-          color: '{text.color}'
-        },
-        popover: {
-          background: '{colors.alpha.white.100}',
-          borderColor: '{formField.borderColor}',
-          color: '{text.color}',
-          shadow: 'rgba(24, 26, 31, 0.2000)'
-        },
-        modal: {
-          background: '{colors.alpha.white.100}',
-          borderColor: '{colors.solid.zinc.200}',
-          color: '{text.color}'
-        }
-      },
-      navigation: {
-        submenuLabel: {
-          background: 'rgba(255, 255, 255, 0.0000)',
-          color: '{text.mutedColor}'
-        },
-        submenuIcon: {
-          color: '{colors.solid.zinc.900}',
-          focusColor: '{colors.solid.zinc.900}',
-          activeColor: '{colors.alpha.white.100}'
-        },
-        item: {
-          focusBackground: '{colors.solid.zinc.100}',
-          activeBackground: '{colors.solid.zinc.900}',
-          color: '{colors.solid.zinc.900}',
-          focusColor: '{colors.solid.zinc.900}',
-          icon: {
-            color: '{colors.solid.zinc.900}',
-            focusColor: '{colors.solid.zinc.900}',
-            activeColor: '{colors.alpha.white.100}'
-          },
-          activeColor: '{colors.alpha.white.100}'
-        }
-      }
-    },
-    dark: {
-      success: {
-        '50': '{colors.solid.green.950}',
-        '100': '{colors.solid.green.900}',
-        '200': '{colors.solid.green.800}',
-        '300': '{colors.solid.green.700}',
-        '400': '{colors.solid.green.600}',
-        '500': '{colors.solid.green.500}',
-        '600': '{colors.solid.green.400}',
-        '700': '{colors.solid.green.300}',
-        '800': '{colors.solid.green.200}',
-        '900': '{colors.solid.green.100}',
-        '950': '{colors.solid.green.50}'
-      },
-      info: {
-        '50': '{colors.solid.blue.950}',
-        '100': '{colors.solid.blue.900}',
-        '200': '{colors.solid.blue.800}',
-        '300': '{colors.solid.blue.700}',
-        '400': '{colors.solid.blue.600}',
-        '500': '{colors.solid.blue.500}',
-        '600': '{colors.solid.blue.400}',
-        '700': '{colors.solid.blue.300}',
-        '800': '{colors.solid.blue.200}',
-        '900': '{colors.solid.blue.100}',
-        '950': '{colors.solid.blue.50}'
-      },
-      warn: {
-        '50': '{colors.solid.yellow.950}',
-        '100': '{colors.solid.yellow.900}',
-        '200': '{colors.solid.yellow.800}',
-        '300': '{colors.solid.yellow.700}',
-        '400': '{colors.solid.yellow.600}',
-        '500': '{colors.solid.yellow.500}',
-        '600': '{colors.solid.yellow.400}',
-        '700': '{colors.solid.yellow.300}',
-        '800': '{colors.solid.yellow.200}',
-        '900': '{colors.solid.yellow.100}',
-        '950': '{colors.solid.yellow.50}'
-      },
-      transparent: 'rgba(0, 0, 0, 0.0001)',
-      help: {
-        '50': '{colors.solid.purple.950}',
-        '100': '{colors.solid.purple.900}',
-        '200': '{colors.solid.purple.800}',
-        '300': '{colors.solid.purple.700}',
-        '400': '{colors.solid.purple.600}',
-        '500': '{colors.solid.purple.500}',
-        '600': '{colors.solid.purple.400}',
-        '700': '{colors.solid.purple.300}',
-        '800': '{colors.solid.purple.200}',
-        '900': '{colors.solid.purple.100}',
-        '950': '{colors.solid.purple.50}'
-      },
-      error: {
-        '50': '{colors.solid.red.950}',
-        '100': '{colors.solid.red.900}',
-        '200': '{colors.solid.red.800}',
-        '300': '{colors.solid.red.700}',
-        '400': '{colors.solid.red.600}',
-        '500': '{colors.solid.red.500}',
-        '600': '{colors.solid.red.400}',
-        '700': '{colors.solid.red.300}',
-        '800': '{colors.solid.red.200}',
-        '900': '{colors.solid.red.100}',
-        '950': '{colors.solid.red.50}'
-      },
-      surface: {
-        '0': '{colors.alpha.black.100}',
-        '50': '{colors.solid.zinc.950}',
-        '100': '{colors.solid.zinc.900}',
-        '200': '{colors.solid.zinc.800}',
-        '300': '{colors.solid.zinc.700}',
-        '400': '{colors.solid.zinc.600}',
-        '500': '{colors.solid.zinc.500}',
-        '600': '{colors.solid.zinc.400}',
-        '700': '{colors.solid.zinc.300}',
-        '800': '{colors.solid.zinc.200}',
-        '900': '{colors.solid.zinc.100}',
-        '950': '{colors.solid.zinc.50}'
-      },
-      primary: {
-        color: '{primary.500}',
-        contrastColor: '{colors.solid.zinc.900}',
-        hoverColor: '{primary.400}',
-        activeColor: '{primary.300}'
-      },
-      highlight: {
-        background: '{colors.solid.zinc.100}',
-        focusBackground: '{colors.solid.zinc.200}',
-        color: '{colors.solid.zinc.900}',
-        focusColor: '{colors.solid.zinc.900}'
-      },
-      focusRing: {
-        shadow: '0 0 0 0.2rem {primary.800}',
-        extend: {
-          invalid: '{colors.solid.red.800}',
-          success: '{colors.solid.green.800}',
-          warning: '{colors.solid.yellow.800}',
-          info: '{colors.solid.blue.800}'
-        }
-      },
-      mask: {
-        background: '{colors.alpha.black.60}',
-        color: '{surface.800}'
-      },
-      formField: {
-        background: '{colors.solid.zinc.950}',
-        disabledBackground: '{colors.solid.zinc.800}',
-        readonlyBackground: '{colors.solid.zinc.900}',
-        filledBackground: '{colors.solid.zinc.950}',
-        filledHoverBackground: '{colors.solid.zinc.950}',
-        filledFocusBackground: '{colors.solid.zinc.950}',
-        borderColor: '{colors.solid.zinc.700}',
-        hoverBorderPrimaryColor: '{colors.solid.zinc.100}',
-        focusBorderPrimaryColor: '{colors.solid.zinc.100}',
-        hoverBorderSecondaryColor: '{colors.solid.green.400}',
-        focusBorderSecondaryColor: '{colors.solid.green.400}',
-        invalidBorderColor: '{colors.solid.red.600}',
-        color: '{colors.alpha.white.100}',
-        disabledColor: '{colors.solid.zinc.500}',
-        placeholderColor: '{colors.solid.zinc.500}',
-        invalidPlaceholderColor: '{colors.solid.red.400}',
-        floatLabelColor: '{colors.solid.zinc.500}',
-        floatLabelFocusColor: '{colors.solid.zinc.500}',
-        floatLabelActiveColor: '{colors.solid.zinc.500}',
-        floatLabelInvalidColor: '{formField.invalidPlaceholderColor}',
-        iconColor: '{colors.alpha.white.100}',
-        shadow: 'rgba(255, 255, 255, 0.0000)',
-        backgroundHandler: '{colors.alpha.white.100}'
-      },
-      text: {
-        color: '{colors.alpha.white.100}',
-        extend: {
-          colorPrimaryStatic: '{colors.solid.zinc.900}',
-          colorSecondaryStatic: '{colors.alpha.white.100}',
-          colorInverted: '{colors.solid.zinc.900}'
-        },
-        hoverColor: '{colors.solid.zinc.300}',
-        mutedColor: '{colors.solid.zinc.500}',
-        hoverMutedColor: '{colors.solid.zinc.700}'
-      },
-      content: {
-        background: '{colors.solid.zinc.900}',
-        hoverBackground: '{colors.solid.zinc.800}',
-        borderColor: '{colors.solid.zinc.800}',
-        color: '{text.color}',
-        hoverColor: '{text.hoverColor}'
-      },
-      list: {
-        option: {
-          background: '{colors.solid.zinc.900}',
-          focusBackground: '{colors.solid.zinc.800}',
-          selectedBackground: '{colors.solid.zinc.100}',
-          selectedFocusBackground: '{colors.solid.zinc.300}',
-          color: '{text.color}',
-          focusColor: '{text.color}',
-          selectedColor: '{text.extend.colorInverted}',
-          selectedFocusColor: '{text.extend.colorInverted}',
-          icon: {
-            color: '{text.color}',
-            focusColor: '{text.color}'
-          }
-        },
-        surface: '#ffffff',
-        optionGroup: {
-          background: '{colors.solid.zinc.900}',
-          color: '{text.mutedColor}'
-        }
-      },
-      overlay: {
-        select: {
-          background: '{colors.solid.zinc.900}',
-          borderColor: '{colors.solid.zinc.800}',
-          color: '{text.color}'
-        },
-        popover: {
-          background: '{colors.solid.zinc.900}',
-          borderColor: '{formField.borderColor}',
-          color: '{text.color}',
-          shadow: 'rgba(24, 26, 31, 0.2000)'
-        },
-        modal: {
-          background: '{colors.solid.zinc.900}',
-          borderColor: '{colors.solid.zinc.800}',
-          color: '{text.color}'
-        }
-      },
-      navigation: {
-        submenuLabel: {
-          background: 'rgba(255, 255, 255, 0.0000)',
-          color: '{text.mutedColor}'
-        },
-        submenuIcon: {
-          color: '{colors.solid.zinc.100}',
-          focusColor: '{colors.solid.zinc.100}',
-          activeColor: '{colors.solid.zinc.900}'
-        },
-        item: {
-          focusBackground: '{colors.solid.zinc.900}',
-          activeBackground: '{colors.solid.zinc.100}',
-          color: '{colors.alpha.white.100}',
-          focusColor: '{colors.alpha.white.100}',
-          icon: {
-            color: '{colors.alpha.white.100}',
-            focusColor: '{colors.alpha.white.100}',
-            activeColor: '{colors.solid.zinc.900}'
-          },
-          activeColor: '{colors.solid.zinc.900}'
-        }
-      }
-    }
-  }
-};
diff --git a/src/prime-preset/theme.preset.ts b/src/prime-preset/theme.preset.ts
index 29ae4eb..7b05437 100644
--- a/src/prime-preset/theme.preset.ts
+++ b/src/prime-preset/theme.preset.ts
@@ -1,13 +1,8 @@
 import { definePreset } from '@primeng/themes';
 import Aura from '@primeng/themes/aura';
-// import * as components from './components.json';
-// import * as primitive from './primitive.json';
-// import * as semantic from './semantic.json';
 
-import components from './components';
-import primitive from './primitive';
-import semantic from './semantic';
+import presetTokens from './map-tokens';
 
-const Preset = definePreset(Aura, { components, primitive, semantic });
+const Preset = definePreset(Aura, presetTokens);
 
 export default Preset;
diff --git a/src/prime-preset/components.json b/src/prime-preset/tokens/components-default.json
similarity index 92%
rename from src/prime-preset/components.json
rename to src/prime-preset/tokens/components-default.json
index fe6e543..5d8c8ce 100644
--- a/src/prime-preset/components.json
+++ b/src/prime-preset/tokens/components-default.json
@@ -36,7 +36,7 @@
       "transitionDuration": "{formField.transitionDuration}"
     },
     "panel": {
-      "borderWidth": "0.07142857142857142rem",
+      "borderWidth": "0.0625rem",
       "borderColor": "{formField.borderColor}"
     },
     "colorScheme": {
@@ -76,10 +76,10 @@
     },
     "extend": {
       "extOption": {
-        "gap": "0.5rem"
+        "gap": "0.4375rem"
       },
       "extOptionGroup": {
-        "gap": "0.5rem"
+        "gap": "0.4375rem"
       }
     },
     "root": {
@@ -144,10 +144,10 @@
         "shadow": "{formField.focusRing.shadow}"
       },
       "sm": {
-        "width": "2rem"
+        "width": "1.75rem"
       },
       "lg": {
-        "width": "3rem"
+        "width": "2.625rem"
       }
     },
     "chip": {
@@ -162,36 +162,36 @@
       "borderColor": "{formField.borderColor}"
     },
     "root": {
-      "width": "2rem",
-      "height": "2rem",
+      "width": "1.75rem",
+      "height": "1.75rem",
       "fontSize": "{fonts.fontSize.base}",
       "color": "{text.extend.colorPrimaryStatic}",
       "background": "{primary.color}",
       "borderRadius": "{borderRadius.md}"
     },
     "icon": {
-      "size": "1rem"
+      "size": "0.875rem"
     },
     "group": {
       "borderColor": "{content.background}",
       "offset": "-0.75rem"
     },
     "lg": {
-      "width": "2.5rem",
-      "height": "2.5rem",
+      "width": "2.1875rem",
+      "height": "2.1875rem",
       "fontSize": "{fonts.fontSize.base}",
       "icon": {
-        "size": "1rem"
+        "size": "0.875rem"
       },
       "group": {
         "offset": "-1rem"
       }
     },
     "xl": {
-      "width": "3.5rem",
-      "height": "3.5rem",
+      "width": "3.0625rem",
+      "height": "3.0625rem",
       "icon": {
-        "size": "1.5rem"
+        "size": "1.3125rem"
       },
       "group": {
         "offset": "-1.5rem"
@@ -243,23 +243,23 @@
           "background": "{error.400}"
         },
         "lg": {
-          "size": "0.75rem"
+          "size": "0.65625rem"
         },
         "xlg": {
-          "size": "1rem"
+          "size": "0.875rem"
         }
       }
     },
     "root": {
       "borderRadius": "{borderRadius.xl}",
-      "padding": "0.5357142857142857rem",
+      "padding": "0.46875rem",
       "fontSize": "{fonts.fontSize.xs}",
       "fontWeight": "{fonts.fontWeight.regular}",
-      "minWidth": "1.5rem",
-      "height": "1.5rem"
+      "minWidth": "1.3125rem",
+      "height": "1.3125rem"
     },
     "dot": {
-      "size": "0.5rem"
+      "size": "0.4375rem"
     },
     "sm": {
       "fontSize": "{fonts.fontSize.xs}",
@@ -268,13 +268,13 @@
     },
     "lg": {
       "fontSize": "{fonts.fontSize.xs}",
-      "minWidth": "1.75rem",
-      "height": "1.75rem"
+      "minWidth": "1.53125rem",
+      "height": "1.53125rem"
     },
     "xl": {
       "fontSize": "{fonts.fontSize.xs}",
-      "minWidth": "2rem",
-      "height": "2rem"
+      "minWidth": "1.75rem",
+      "height": "1.75rem"
     }
   },
   "breadcrumb": {
@@ -282,7 +282,7 @@
       "hoverBackground": "{surface.100}"
     },
     "root": {
-      "padding": "0.25rem",
+      "padding": "0.21875rem",
       "background": "{transparent}",
       "gap": "0",
       "transitionDuration": "{formField.transitionDuration}"
@@ -350,36 +350,36 @@
         "background": "{transparent}",
         "colorHover": "{text.hoverColor}",
         "paddingX": "0",
-        "paddingY": "0.25rem",
+        "paddingY": "0.21875rem",
         "sm": {
-          "iconOnlyWidth": "1rem"
+          "iconOnlyWidth": "0.875rem"
         },
         "base": {
-          "iconOnlyWidth": "1.5357142857142858rem"
+          "iconOnlyWidth": "1.34375rem"
         },
         "lg": {
-          "iconOnlyWidth": "1.75rem"
+          "iconOnlyWidth": "1.53125rem"
         },
         "xlg": {
-          "iconOnlyWidth": "2rem"
+          "iconOnlyWidth": "1.75rem"
         }
       },
       "extSm": {
         "borderRadius": "{borderRadius.md}",
-        "gap": "0.5rem"
+        "gap": "0.4375rem"
       },
       "extLg": {
         "borderRadius": "{borderRadius.lg}",
-        "gap": "0.75rem"
+        "gap": "0.65625rem"
       },
       "extXlg": {
         "borderRadius": "{borderRadius.lg}",
-        "gap": "0.75rem",
-        "iconOnlyWidth": "4.071428571428571rem",
-        "paddingX": "1.5rem",
-        "paddingY": "1.25rem"
+        "gap": "0.65625rem",
+        "iconOnlyWidth": "3.5625rem",
+        "paddingX": "1.3125rem",
+        "paddingY": "1.09375rem"
       },
-      "borderWidth": "0.07142857142857142rem"
+      "borderWidth": "0.0625rem"
     },
     "colorScheme": {
       "light": {
@@ -564,11 +564,11 @@
     },
     "root": {
       "borderRadius": "{borderRadius.md}",
-      "roundedBorderRadius": "2rem",
-      "gap": "0.5rem",
-      "paddingX": "1rem",
-      "paddingY": "0.5rem",
-      "iconOnlyWidth": "2.5rem",
+      "roundedBorderRadius": "1.75rem",
+      "gap": "0.4375rem",
+      "paddingX": "0.875rem",
+      "paddingY": "0.4375rem",
+      "iconOnlyWidth": "2.1875rem",
       "raisedShadow": "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
       "badgeSize": "1rem",
       "transitionDuration": "{formField.transitionDuration}",
@@ -579,15 +579,15 @@
       },
       "sm": {
         "fontSize": "{fonts.fontSize.sm}",
-        "iconOnlyWidth": "2rem",
-        "paddingX": "0.75rem",
-        "paddingY": "0.5rem"
+        "iconOnlyWidth": "1.75rem",
+        "paddingX": "0.65625rem",
+        "paddingY": "0.4375rem"
       },
       "lg": {
         "fontSize": "{fonts.fontSize.xl}",
-        "iconOnlyWidth": "3.5714285714285716rem",
-        "paddingX": "1.5rem",
-        "paddingY": "1rem"
+        "iconOnlyWidth": "3.125rem",
+        "paddingX": "1.3125rem",
+        "paddingY": "0.875rem"
       },
       "label": {
         "fontWeight": "{fonts.fontWeight.demibold}"
@@ -605,11 +605,11 @@
       "shadow": "0 .125rem .25rem rgba(0,0,0,.075)"
     },
     "body": {
-      "padding": "1rem",
-      "gap": "1rem"
+      "padding": "0.875rem",
+      "gap": "0.875rem"
     },
     "caption": {
-      "gap": "0.25rem"
+      "gap": "0.21875rem"
     },
     "title": {
       "fontSize": "{fonts.fontSize.lg}",
@@ -633,15 +633,15 @@
       "transitionDuration": "{transitionDuration}"
     },
     "content": {
-      "gap": "0.5rem"
+      "gap": "0.4375rem"
     },
     "indicatorList": {
-      "padding": "1rem",
-      "gap": "0.5rem"
+      "padding": "0.875rem",
+      "gap": "0.4375rem"
     },
     "indicator": {
-      "width": "0.5rem",
-      "height": "0.5rem",
+      "width": "0.4375rem",
+      "height": "0.4375rem",
       "borderRadius": "{borderRadius.xl}",
       "focusRing": {
         "width": "{focusRing.width}",
@@ -656,10 +656,10 @@
     "root": {
       "borderRadius": "{borderRadius.sm}",
       "extend": {
-        "borderWidth": "0.07142857142857142rem"
+        "borderWidth": "0.0625rem"
       },
-      "width": "1.5rem",
-      "height": "1.5rem",
+      "width": "1.3125rem",
+      "height": "1.3125rem",
       "background": "{formField.background}",
       "checkedBackground": "{surface.900}",
       "checkedHoverBackground": "{surface.800}",
@@ -682,26 +682,26 @@
         "shadow": "{focusRing.shadow}"
       },
       "sm": {
-        "width": "1rem",
-        "height": "1rem"
+        "width": "0.875rem",
+        "height": "0.875rem"
       },
       "lg": {
-        "width": "1.25rem",
-        "height": "1.25rem"
+        "width": "1.09375rem",
+        "height": "1.09375rem"
       },
       "transitionDuration": "{formField.transitionDuration}"
     },
     "icon": {
-      "size": "1rem",
+      "size": "0.875rem",
       "color": "{formField.color}",
       "checkedColor": "{primary.contrastColor}",
       "checkedHoverColor": "{primary.contrastColor}",
       "disabledColor": "{formField.disabledColor}",
       "sm": {
-        "size": "0.75rem"
+        "size": "0.65625rem"
       },
       "lg": {
-        "size": "1.25rem"
+        "size": "1.09375rem"
       }
     }
   },
@@ -711,9 +711,9 @@
     },
     "root": {
       "borderRadius": "{borderRadius.sm}",
-      "paddingX": "0.5rem",
-      "paddingY": "0.25rem",
-      "gap": "0.5rem",
+      "paddingX": "0.4375rem",
+      "paddingY": "0.21875rem",
+      "gap": "0.4375rem",
       "transitionDuration": "{formField.transitionDuration}"
     },
     "colorScheme": {
@@ -735,10 +735,10 @@
       "height": "0"
     },
     "icon": {
-      "size": "1rem"
+      "size": "0.875rem"
     },
     "removeIcon": {
-      "size": "1rem",
+      "size": "0.875rem",
       "focusRing": {
         "width": "{formField.focusRing.width}",
         "style": "{formField.focusRing.style}",
@@ -759,7 +759,7 @@
       }
     },
     "icon": {
-      "size": "1.5rem",
+      "size": "1.3125rem",
       "color": "{overlay.modal.color}"
     },
     "content": {
@@ -852,12 +852,12 @@
     "header": {
       "borderColor": "{content.borderColor}",
       "borderWidth": "1px 0 1px 0",
-      "padding": "1rem",
+      "padding": "0.875rem",
       "sm": {
-        "padding": "0.5rem"
+        "padding": "0.4375rem"
       },
       "lg": {
-        "padding": "1.25rem"
+        "padding": "1.09375rem"
       }
     },
     "headerCell": {
@@ -865,8 +865,8 @@
       "borderColor": "{content.borderColor}",
       "hoverColor": "{text.hoverColor}",
       "selectedColor": "{highlight.color}",
-      "gap": "0.5rem",
-      "padding": "1rem",
+      "gap": "0.4375rem",
+      "padding": "0.875rem",
       "focusRing": {
         "width": "{focusRing.width}",
         "style": "{focusRing.style}",
@@ -875,10 +875,10 @@
         "shadow": "inset {focus.ring.shadow}"
       },
       "sm": {
-        "padding": "0.5rem"
+        "padding": "0.4375rem"
       },
       "lg": {
-        "padding": "1.25rem"
+        "padding": "1.09375rem"
       }
     },
     "columnTitle": {
@@ -901,22 +901,22 @@
     },
     "bodyCell": {
       "borderColor": "{content.borderColor}",
-      "padding": "1rem",
+      "padding": "0.875rem",
       "sm": {
-        "padding": "0.5rem"
+        "padding": "0.4375rem"
       },
       "lg": {
-        "padding": "1.25rem"
+        "padding": "1.09375rem"
       }
     },
     "footerCell": {
       "borderColor": "{content.borderColor}",
-      "padding": "1rem",
+      "padding": "0.875rem",
       "sm": {
-        "padding": "0.5rem"
+        "padding": "0.4375rem"
       },
       "lg": {
-        "padding": "1.25rem"
+        "padding": "1.09375rem"
       }
     },
     "columnFooter": {
@@ -937,7 +937,7 @@
       }
     },
     "columnResizer": {
-      "width": "0.5rem"
+      "width": "0.4375rem"
     },
     "resizeIndicator": {
       "width": "1px",
@@ -946,10 +946,10 @@
     "sortIcon": {
       "color": "{text.color}",
       "hoverColor": "{text.hoverColor}",
-      "size": "1rem"
+      "size": "0.875rem"
     },
     "loadingIcon": {
-      "size": "2rem"
+      "size": "1.75rem"
     },
     "rowToggleButton": {
       "hoverBackground": "{content.hoverBackground}",
@@ -957,7 +957,7 @@
       "color": "{text.color}",
       "hoverColor": "{text.color}",
       "selectedHoverColor": "{text.color}",
-      "size": "2rem",
+      "size": "1.75rem",
       "borderRadius": "{content.borderRadius}",
       "focusRing": {
         "width": "{focusRing.width}",
@@ -968,7 +968,7 @@
       }
     },
     "filter": {
-      "inlineGap": "0.5rem",
+      "inlineGap": "0.4375rem",
       "rule": {
         "borderColor": "{content.borderColor}"
       },
@@ -1076,12 +1076,12 @@
         "borderColor": "{content.borderColor}",
         "hoverBackground": "{content.hoverBackground}"
       },
-      "extTitle": {
-        "width": "15rem"
-      },
       "extTimePicker": {
-        "minWidth": "2.857142857142857rem",
+        "minWidth": "2.5rem",
         "color": "{content.color}"
+      },
+      "extTitle": {
+        "width": "13.125rem"
       }
     },
     "panel": {
@@ -1099,7 +1099,7 @@
       "padding": "0 0 0.5rem 0"
     },
     "title": {
-      "gap": "0.5rem",
+      "gap": "0.4375rem",
       "fontWeight": "{fonts.fontWeight.bold}"
     },
     "selectMonth": {
@@ -1147,7 +1147,7 @@
       "margin": "0 0 0 0"
     },
     "weekDay": {
-      "padding": "0.25rem",
+      "padding": "0.21875rem",
       "fontWeight": "{fonts.fontWeight.bold}",
       "color": "{content.color}"
     },
@@ -1159,10 +1159,10 @@
       "hoverColor": "{content.color}",
       "selectedColor": "{text.extend.colorPrimaryStatic}",
       "rangeSelectedColor": "{text.extend.colorSecondaryStatic}",
-      "width": "2rem",
-      "height": "2rem",
-      "borderRadius": "0.375rem",
-      "padding": "0.25rem",
+      "width": "1.75rem",
+      "height": "1.75rem",
+      "borderRadius": "0.328125rem",
+      "padding": "0.21875rem",
       "focusRing": {
         "width": "{formField.focusRing.width}",
         "style": "{formField.focusRing.style}",
@@ -1192,8 +1192,8 @@
     "timePicker": {
       "padding": "1.5rem 0.75rem 0.75rem 0.75rem",
       "borderColor": "{content.borderColor}",
-      "gap": "0.5rem",
-      "buttonGap": "0.25rem"
+      "gap": "0.4375rem",
+      "buttonGap": "0.21875rem"
     },
     "root": {
       "transitionDuration": "{transitionDuration}"
@@ -1216,11 +1216,11 @@
       "fontWeight": "{fonts.fontWeight.demibold}"
     },
     "content": {
-      "padding": "1.5rem"
+      "padding": "1.3125rem"
     },
     "footer": {
       "padding": "0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}",
-      "gap": "0.5rem"
+      "gap": "0.4375rem"
     }
   },
   "divider": {
@@ -1250,7 +1250,7 @@
     "extend": {
       "borderRadius": "{overlay.popover.borderRadius}",
       "extHeader": {
-        "gap": "0.5rem",
+        "gap": "0.4375rem",
         "borderColor": "{drawer.root.borderColor}"
       },
       "width": "{sizingDrawer.width}"
@@ -1287,11 +1287,11 @@
     "extend": {
       "extDragNdrop": {
         "background": "{surface.0}",
-        "padding": "1rem",
+        "padding": "0.875rem",
         "borderRadius": "{formField.borderRadius}",
-        "gap": "0.5rem",
+        "gap": "0.4375rem",
         "info": {
-          "gap": "0.25rem"
+          "gap": "0.21875rem"
         }
       },
       "extContent": {
@@ -1311,26 +1311,26 @@
       "borderWidth": "0",
       "padding": "0",
       "borderRadius": "0",
-      "gap": "0.5rem"
+      "gap": "0.4375rem"
     },
     "content": {
       "highlightBorderColor": "{surface.900}",
       "padding": "0",
-      "gap": "0.5rem"
+      "gap": "0.4375rem"
     },
     "file": {
-      "padding": "0.5rem",
-      "gap": "0.5rem",
+      "padding": "0.4375rem",
+      "gap": "0.4375rem",
       "borderColor": "{formField.borderColor}",
       "info": {
-        "gap": "0.25rem"
+        "gap": "0.21875rem"
       }
     },
     "fileList": {
-      "gap": "0.5rem"
+      "gap": "0.4375rem"
     },
     "progressbar": {
-      "height": "0.5rem"
+      "height": "0.4375rem"
     },
     "basic": {
       "gap": "0.5rem"
@@ -1338,7 +1338,7 @@
   },
   "floatlabel": {
     "extend": {
-      "height": "4rem",
+      "height": "3.5rem",
       "iconSize": "{iconSizeLarge}"
     },
     "root": {
@@ -1362,7 +1362,7 @@
     },
     "inside": {
       "input": {
-        "paddingTop": "1.875rem",
+        "paddingTop": "1.640625rem",
         "paddingBottom": "{formField.paddingY}"
       },
       "active": {
@@ -1405,8 +1405,8 @@
       "hoverBackground": "{colors.alpha.white.20}",
       "color": "{text.extend.colorInverted}",
       "hoverColor": "{text.extend.colorInverted}",
-      "size": "4rem",
-      "gutter": "0.5rem",
+      "size": "3.5rem",
+      "gutter": "0.4375rem",
       "prev": {
         "borderRadius": "{navigation.item.borderRadius}"
       },
@@ -1422,15 +1422,15 @@
       }
     },
     "navIcon": {
-      "size": "2rem"
+      "size": "1.75rem"
     },
     "thumbnailsContent": {
-      "padding": "0.25rem"
+      "padding": "0.21875rem"
     },
     "thumbnailNavButton": {
-      "size": "2rem",
+      "size": "1.75rem",
       "borderRadius": "{content.borderRadius}",
-      "gutter": "0.5rem",
+      "gutter": "0.4375rem",
       "focusRing": {
         "width": "{focusRing.width}",
         "style": "{focusRing.style}",
@@ -1440,20 +1440,20 @@
       }
     },
     "thumbnailNavButtonIcon": {
-      "size": "1rem"
+      "size": "0.875rem"
     },
     "caption": {
       "background": "{colors.alpha.white.50}",
       "color": "{text.color}",
-      "padding": "0.5rem"
+      "padding": "0.4375rem"
     },
     "indicatorList": {
-      "gap": "0.5rem",
-      "padding": "1rem"
+      "gap": "0.4375rem",
+      "padding": "0.875rem"
     },
     "indicatorButton": {
-      "width": "0.5rem",
-      "height": "0.5rem",
+      "width": "0.4375rem",
+      "height": "0.4375rem",
       "activeBackground": "{surface.900}",
       "borderRadius": "{content.borderRadius}",
       "focusRing": {
@@ -1473,8 +1473,8 @@
       "activeBackground": "{colors.alpha.white.50}"
     },
     "closeButton": {
-      "size": "4rem",
-      "gutter": "0.5rem",
+      "size": "3.5rem",
+      "gutter": "0.4375rem",
       "background": "{colors.alpha.white.10}",
       "hoverBackground": "{colors.alpha.white.20}",
       "color": "{text.extend.colorInverted}",
@@ -1489,7 +1489,7 @@
       }
     },
     "closeButtonIcon": {
-      "size": "2rem"
+      "size": "1.75rem"
     }
   },
   "message": {
@@ -1620,6 +1620,10 @@
           "borderColor": "{info.500}",
           "color": "{text.color}",
           "shadow": "none",
+          "outlined": {
+            "color": "{text.color}",
+            "borderColor": "{info.500}"
+          },
           "closeButton": {
             "hoverBackground": "{info.200}",
             "focusRing": {
@@ -1627,10 +1631,6 @@
               "shadow": "none"
             }
           },
-          "outlined": {
-            "color": "{text.color}",
-            "borderColor": "{info.500}"
-          },
           "simple": {
             "color": "{text.color}"
           }
@@ -1640,7 +1640,7 @@
     "extend": {
       "width": "{sizingMessage.width}",
       "extText": {
-        "gap": "0.25rem"
+        "gap": "0.21875rem"
       },
       "extInfo": {
         "color": "{info.500}",
@@ -1653,10 +1653,10 @@
         }
       },
       "extAccentLine": {
-        "width": "0.25rem"
+        "width": "0.21875rem"
       },
       "extCloseButton": {
-        "width": "0.07142857142857142rem"
+        "width": "0.0625rem"
       },
       "extSuccess": {
         "color": "{success.500}",
@@ -1691,17 +1691,17 @@
     },
     "root": {
       "borderRadius": "{content.borderRadius}",
-      "borderWidth": "0.07142857142857142rem",
+      "borderWidth": "0.0625rem",
       "transitionDuration": "{transitionDuration}"
     },
     "content": {
-      "padding": "1rem",
-      "gap": "1rem",
+      "padding": "0.875rem",
+      "gap": "0.875rem",
       "sm": {
-        "padding": "1rem"
+        "padding": "0.875rem"
       },
       "lg": {
-        "padding": "1rem"
+        "padding": "0.875rem"
       }
     },
     "text": {
@@ -1715,18 +1715,18 @@
       }
     },
     "icon": {
-      "size": "2.25rem",
+      "size": "1.96875rem",
       "sm": {
-        "size": "2.25rem"
+        "size": "1.96875rem"
       },
       "lg": {
-        "size": "2.25rem"
+        "size": "1.96875rem"
       }
     },
     "closeButton": {
-      "width": "2rem",
-      "height": "2rem",
-      "borderRadius": "0.75rem",
+      "width": "1.75rem",
+      "height": "1.75rem",
+      "borderRadius": "0.65625rem",
       "focusRing": {
         "width": "{focusRing.width}",
         "style": "{focusRing.style}",
@@ -1734,12 +1734,12 @@
       }
     },
     "closeIcon": {
-      "size": "1rem",
+      "size": "0.875rem",
       "sm": {
-        "size": "1rem"
+        "size": "0.875rem"
       },
       "lg": {
-        "size": "1rem"
+        "size": "0.875rem"
       }
     }
   },
@@ -1755,8 +1755,8 @@
     },
     "addon": {
       "borderRadius": "{formField.borderRadius}",
-      "padding": "0.75rem",
-      "minWidth": "2.5rem"
+      "padding": "0.65625rem",
+      "minWidth": "2.1875rem"
     }
   },
   "inputnumber": {
@@ -1777,27 +1777,27 @@
     },
     "extend": {
       "extButton": {
-        "height": "2.5rem"
+        "height": "2.1875rem"
       }
     },
     "transitionDuration": {
       "transitionDuration": "{formField.transitionDuration}"
     },
     "button": {
-      "width": "2.5rem",
+      "width": "2.1875rem",
       "borderRadius": "{formField.borderRadius}",
       "verticalPadding": "{formField.paddingY}"
     }
   },
   "inputotp": {
     "extend": {
-      "height": "2.5rem"
+      "height": "2.1875rem"
     },
     "root": {
-      "gap": "0.5rem"
+      "gap": "0.4375rem"
     },
     "input": {
-      "width": "2.5rem"
+      "width": "2.1875rem"
     },
     "sm": {
       "width": "0"
@@ -1865,7 +1865,7 @@
     "extend": {
       "extOption": {
         "label": {
-          "gap": "0.25rem"
+          "gap": "0.21875rem"
         },
         "caption": {
           "color": "{text.mutedColor}",
@@ -1929,7 +1929,7 @@
       "extItem": {
         "caption": {
           "color": "{text.mutedColor}",
-          "gap": "0.25rem"
+          "gap": "0.21875rem"
         }
       }
     },
@@ -1937,7 +1937,7 @@
       "borderColor": "{transparent}",
       "borderRadius": "{content.borderRadius}",
       "color": "{content.color}",
-      "gap": "0.25rem",
+      "gap": "0.21875rem",
       "transitionDuration": "{transitionDuration}",
       "verticalOrientation": {
         "padding": "{navigation.list.padding}",
@@ -1968,7 +1968,7 @@
       }
     },
     "overlay": {
-      "padding": "0.25rem",
+      "padding": "0.21875rem",
       "background": "{content.background}",
       "borderColor": "{content.borderColor}",
       "borderRadius": "{content.borderRadius}",
@@ -1997,7 +1997,7 @@
     },
     "mobileButton": {
       "borderRadius": "{navigation.item.borderRadius}",
-      "size": "2rem",
+      "size": "1.75rem",
       "color": "{text.color}",
       "hoverColor": "{text.hoverColor}",
       "hoverBackground": "{content.hoverBackground}",
@@ -2012,12 +2012,12 @@
   },
   "menu": {
     "extend": {
-      "paddingX": "0.25rem",
-      "paddingY": "0.25rem",
+      "paddingX": "0.21875rem",
+      "paddingY": "0.21875rem",
       "extItem": {
         "caption": {
           "color": "{text.mutedColor}",
-          "gap": "0.25rem"
+          "gap": "0.21875rem"
         }
       }
     },
@@ -2060,7 +2060,7 @@
       "extItem": {
         "caption": {
           "color": "{text.mutedColor}",
-          "gap": "0.25rem"
+          "gap": "0.21875rem"
         }
       },
       "extSubmenuLabel": {
@@ -2081,7 +2081,7 @@
       "borderColor": "{transparent}",
       "borderRadius": "{navigation.item.borderRadius}",
       "color": "{content.color}",
-      "gap": "0.25rem",
+      "gap": "0.21875rem",
       "padding": "{navigation.list.padding}",
       "transitionDuration": "{transitionDuration}"
     },
@@ -2111,7 +2111,7 @@
       "borderColor": "{content.borderColor}",
       "borderRadius": "{content.borderRadius}",
       "shadow": "{overlay.navigation.shadow}",
-      "mobileIndent": "0.75rem",
+      "mobileIndent": "0.65625rem",
       "icon": {
         "size": "{navigation.submenuIcon.size}",
         "color": "{navigation.submenuIcon.color}",
@@ -2124,7 +2124,7 @@
     },
     "mobileButton": {
       "borderRadius": "{navigation.item.borderRadius}",
-      "size": "2rem",
+      "size": "1.75rem",
       "color": "{text.color}",
       "hoverColor": "{text.hoverColor}",
       "hoverBackground": "{content.hoverBackground}",
@@ -2145,30 +2145,30 @@
     },
     "root": {
       "borderRadius": "{content.borderRadius}",
-      "gap": "0.75rem"
+      "gap": "0.65625rem"
     },
     "meters": {
-      "size": "0.5rem",
+      "size": "0.4375rem",
       "background": "{content.borderColor}"
     },
     "label": {
-      "gap": "0.5rem"
+      "gap": "0.4375rem"
     },
     "labelMarker": {
-      "size": "0.5rem"
+      "size": "0.4375rem"
     },
     "labelIcon": {
-      "size": "1rem"
+      "size": "0.875rem"
     },
     "labelList": {
-      "verticalGap": "0.5rem",
-      "horizontalGap": "0.75rem"
+      "verticalGap": "0.4375rem",
+      "horizontalGap": "0.65625rem"
     }
   },
   "multiselect": {
     "extend": {
-      "paddingX": "0.35714285714285715rem",
-      "paddingY": "0.35714285714285715rem"
+      "paddingX": "0.3125rem",
+      "paddingY": "0.3125rem"
     },
     "root": {
       "background": "{formField.background}",
@@ -2236,7 +2236,7 @@
       "selectedFocusColor": "{list.option.selectedFocusColor}",
       "padding": "{list.option.padding}",
       "borderRadius": "{list.option.borderRadius}",
-      "gap": "0.5rem"
+      "gap": "0.4375rem"
     },
     "optionGroup": {
       "background": "{list.optionGroup.background}",
@@ -2257,12 +2257,15 @@
   "paginator": {
     "root": {
       "padding": "0 0.5rem",
-      "gap": "0.5rem",
+      "gap": "0.4375rem",
       "borderRadius": "{content.borderRadius}",
       "background": "{transparent}",
       "color": "{content.color}",
       "transitionDuration": "{transitionDuration}"
     },
+    "currentPageReport": {
+      "color": "{text.mutedColor}"
+    },
     "navButton": {
       "background": "{transparent}",
       "hoverBackground": "{content.hoverBackground}",
@@ -2270,8 +2273,8 @@
       "color": "{text.color}",
       "hoverColor": "{text.hoverColor}",
       "selectedColor": "{text.extend.colorInverted}",
-      "width": "2.5rem",
-      "height": "2.5rem",
+      "width": "2.1875rem",
+      "height": "2.1875rem",
       "borderRadius": "{content.borderRadius}",
       "focusRing": {
         "width": "{focusRing.width}",
@@ -2281,37 +2284,34 @@
         "focus": "{focusRing.shadow}"
       }
     },
-    "currentPageReport": {
-      "color": "{text.mutedColor}"
-    },
     "jumpToPageInput": {
-      "maxWidth": "5rem"
+      "maxWidth": "4.375rem"
     }
   },
   "panelmenu": {
     "extend": {
       "extPanel": {
-        "gap": "0.25rem"
+        "gap": "0.21875rem"
       },
       "extItem": {
         "activeBackground": "{navigation.item.activeBackground}",
         "activeColor": "{navigation.item.activeColor}",
         "caption": {
           "color": "{text.mutedColor}",
-          "gap": "0.25rem"
+          "gap": "0.21875rem"
         }
       }
     },
     "root": {
-      "gap": "0.25rem",
+      "gap": "0.21875rem",
       "transitionDuration": "{transitionDuration}"
     },
     "panel": {
       "background": "{transparent}",
       "borderColor": "{transparent}",
-      "borderWidth": "0.07142857142857142rem",
+      "borderWidth": "0.0625rem",
       "color": "{content.color}",
-      "padding": "0.25rem",
+      "padding": "0.21875rem",
       "borderRadius": "{content.borderRadius}",
       "first": {
         "borderWidth": "1px 1px 0 1px",
@@ -2326,7 +2326,7 @@
       "focusBackground": "{navigation.item.focusBackground}",
       "color": "{navigation.item.color}",
       "focusColor": "{navigation.item.focusColor}",
-      "gap": "0.5rem",
+      "gap": "0.4375rem",
       "padding": "{navigation.item.padding}",
       "borderRadius": "{navigation.item.borderRadius}",
       "icon": {
@@ -2335,7 +2335,7 @@
       }
     },
     "submenu": {
-      "indent": "0.75rem"
+      "indent": "0.65625rem"
     },
     "separator": {
       "borderColor": "{content.borderColor}"
@@ -2358,7 +2358,7 @@
     "meter": {
       "background": "{content.borderColor}",
       "borderRadius": "{content.borderRadius}",
-      "height": "0.5rem"
+      "height": "0.4375rem"
     },
     "icon": {
       "color": "{text.color}"
@@ -2372,7 +2372,7 @@
       "shadow": "{overlay.popover.shadow}"
     },
     "content": {
-      "gap": "0.5rem"
+      "gap": "0.4375rem"
     }
   },
   "popover": {
@@ -2382,7 +2382,7 @@
       "color": "{overlay.popover.color}",
       "borderRadius": "{overlay.popover.borderRadius}",
       "shadow": "{overlay.popover.shadow}",
-      "gutter": "0.25rem",
+      "gutter": "0.21875rem",
       "arrowOffset": "1.25rem"
     },
     "content": {
@@ -2398,7 +2398,7 @@
     "root": {
       "background": "{content.borderColor}",
       "borderRadius": "{content.borderRadius}",
-      "height": "1rem"
+      "height": "0.875rem"
     },
     "value": {
       "background": "{primary.color}"
@@ -2418,8 +2418,8 @@
   },
   "radiobutton": {
     "root": {
-      "width": "1.5rem",
-      "height": "1.5rem",
+      "width": "1.3125rem",
+      "height": "1.3125rem",
       "background": "{formField.background}",
       "checkedBackground": "{surface.900}",
       "checkedHoverBackground": "{surface.800}",
@@ -2437,22 +2437,22 @@
       "transitionDuration": "{formField.transitionDuration}"
     },
     "focusRing": {
-      "width": "0.25rem",
+      "width": "0.21875rem",
       "style": "{focusRing.style}",
       "color": "{focusRing.color}",
       "offset": "{focusRing.offset}",
       "shadow": "{formField.focusRing.shadow}"
     },
     "sm": {
-      "width": "1rem",
-      "height": "1rem"
+      "width": "0.875rem",
+      "height": "0.875rem"
     },
     "lg": {
-      "width": "1.25rem",
-      "height": "1.25rem"
+      "width": "1.09375rem",
+      "height": "1.09375rem"
     },
     "icon": {
-      "size": "0.8571428571428571rem",
+      "size": "0.75rem",
       "checkedColor": "{text.extend.colorInverted}",
       "checkedHoverColor": "{text.extend.colorInverted}",
       "disabledColor": "{text.mutedColor}",
@@ -2466,7 +2466,7 @@
   },
   "rating": {
     "root": {
-      "gap": "0.5rem",
+      "gap": "0.4375rem",
       "transitionDuration": "{formField.transitionDuration}"
     },
     "focusRing": {
@@ -2477,7 +2477,7 @@
       "shadow": "{formField.shadow}"
     },
     "icon": {
-      "size": "1.5rem",
+      "size": "1.3125rem",
       "color": "{surface.500}",
       "hoverColor": "{warn.500}",
       "activeColor": "{warn.500}"
@@ -2504,7 +2504,7 @@
       "transitionDuration": "{transitionDuration}"
     },
     "bar": {
-      "size": "0.5rem",
+      "size": "0.4375rem",
       "borderRadius": "{borderRadius.sm}",
       "focusRing": {
         "width": "0",
@@ -2519,10 +2519,10 @@
     "extend": {
       "extOption": {
         "background": "{list.option.background}",
-        "gap": "0.5rem"
+        "gap": "0.4375rem"
       },
       "extOptionGroup": {
-        "gap": "0.5rem"
+        "gap": "0.4375rem"
       },
       "readonlyBackground": "{formField.readonlyBackground}"
     },
@@ -2639,20 +2639,29 @@
     }
   },
   "slider": {
+    "colorScheme": {
+      "light": {
+        "handle": {
+          "content": {
+            "background": "{surface.0}"
+          }
+        }
+      }
+    },
     "root": {
       "transitionDuration": "{formField.transitionDuration}"
     },
     "track": {
       "background": "{content.borderColor}",
       "borderRadius": "{content.borderRadius}",
-      "size": "0.25rem"
+      "size": "0.21875rem"
     },
     "range": {
       "background": "{surface.900}"
     },
     "handle": {
-      "width": "1.25rem",
-      "height": "1.25rem",
+      "width": "1.09375rem",
+      "height": "1.09375rem",
       "borderRadius": "{borderRadius.xl}",
       "background": "{surface.900}",
       "hoverBackground": "{surface.900}",
@@ -2666,8 +2675,8 @@
       "content": {
         "borderRadius": "{borderRadius.xl}",
         "hoverBackground": "{surface.900}",
-        "width": "0.75rem",
-        "height": "0.75rem",
+        "width": "0.65625rem",
+        "height": "0.65625rem",
         "shadow": "none"
       }
     }
@@ -2690,7 +2699,7 @@
       "transitionDuration": "{transitionDuration}"
     },
     "handle": {
-      "size": "0.25rem",
+      "size": "0.21875rem",
       "borderRadius": "{content.borderRadius}",
       "focusRing": {
         "width": "{formField.focusRing.width}",
@@ -2704,7 +2713,7 @@
   "stepper": {
     "extend": {
       "extCaption": {
-        "gap": "0.25rem"
+        "gap": "0.21875rem"
       },
       "extStepNumber": {
         "invalidBackground": "{error.400}",
@@ -2719,16 +2728,16 @@
       "background": "{content.borderColor}",
       "activeBackground": "{formField.focusBorderPrimaryColor}",
       "margin": "0 0 0 1.625rem",
-      "size": "0.07142857142857142rem"
+      "size": "0.0625rem"
     },
     "step": {
-      "padding": "0.5rem",
-      "gap": "0.5rem"
+      "padding": "0.4375rem",
+      "gap": "0.4375rem"
     },
     "stepHeader": {
       "padding": "0",
       "borderRadius": "0",
-      "gap": "0.5rem",
+      "gap": "0.4375rem",
       "focusRing": {
         "width": "{focusRing.width}",
         "style": "{focusRing.style}",
@@ -2749,14 +2758,14 @@
       "activeBorderColor": "{primary.color}",
       "color": "{text.color}",
       "activeColor": "{text.extend.colorPrimaryStatic}",
-      "size": "1.5rem",
+      "size": "1.3125rem",
       "fontSize": "{fonts.fontSize.base}",
       "fontWeight": "{fonts.fontWeight.bold}",
       "borderRadius": "{content.borderRadius}",
       "shadow": "none"
     },
     "steppanels": {
-      "padding": "1rem"
+      "padding": "0.875rem"
     },
     "steppanel": {
       "background": "{content.background}",
@@ -2810,10 +2819,10 @@
       "color": "{text.mutedColor}",
       "hoverColor": "{text.color}",
       "activeColor": "{text.color}",
-      "padding": "1rem",
+      "padding": "0.875rem",
       "fontWeight": "{fonts.fontWeight.demibold}",
       "margin": "0 0 -1px 0",
-      "gap": "0.5rem",
+      "gap": "0.4375rem",
       "focusRing": {
         "width": "{focusRing.width}",
         "style": "{focusRing.style}",
@@ -2825,7 +2834,7 @@
     "tabpanel": {
       "background": "{transparent}",
       "color": "{text.color}",
-      "padding": "1rem",
+      "padding": "0.875rem",
       "focusRing": {
         "width": "{focusRing.width}",
         "style": "{focusRing.style}",
@@ -2838,7 +2847,7 @@
       "background": "{content.background}",
       "color": "{content.color}",
       "hoverColor": "{content.hoverColor}",
-      "width": "1.5rem",
+      "width": "1.3125rem",
       "focusRing": {
         "width": "{focusRing.width}",
         "style": "{focusRing.style}",
@@ -2848,7 +2857,7 @@
       }
     },
     "activeBar": {
-      "height": "0.14285714285714285rem",
+      "height": "0.125rem",
       "bottom": "-1",
       "background": "{content.color}"
     }
@@ -2932,10 +2941,10 @@
         }
       },
       "extAccentLine": {
-        "width": "0.25rem"
+        "width": "0.21875rem"
       },
       "extCloseButton": {
-        "width": "0.07142857142857142rem"
+        "width": "0.0625rem"
       },
       "extSuccess": {
         "color": "{success.500}",
@@ -2970,19 +2979,19 @@
     },
     "root": {
       "width": "{sizingToast.width}",
-      "borderWidth": "0.07142857142857142rem",
+      "borderWidth": "0.0625rem",
       "borderRadius": "{content.borderRadius}",
       "transitionDuration": "{transitionDuration}"
     },
     "icon": {
-      "size": "2.25rem"
+      "size": "1.96875rem"
     },
     "content": {
-      "padding": "1rem",
-      "gap": "1rem"
+      "padding": "0.875rem",
+      "gap": "0.875rem"
     },
     "text": {
-      "gap": "0.25rem"
+      "gap": "0.21875rem"
     },
     "summary": {
       "fontWeight": "{fonts.fontWeight.bold}",
@@ -2993,8 +3002,8 @@
       "fontSize": "{fonts.fontSize.sm}"
     },
     "closeButton": {
-      "width": "2rem",
-      "height": "2rem",
+      "width": "1.75rem",
+      "height": "1.75rem",
       "borderRadius": "{borderRadius.md}",
       "focusRing": {
         "width": "{focusRing.width}",
@@ -3003,7 +3012,7 @@
       }
     },
     "closeIcon": {
-      "size": "1rem"
+      "size": "0.875rem"
     }
   },
   "tag": {
@@ -3039,12 +3048,12 @@
       "fontSize": "{fonts.fontSize.xs}",
       "fontWeight": "{fonts.fontWeight.regular}",
       "padding": "0.285rem 0.5rem",
-      "gap": "0.25rem",
+      "gap": "0.21875rem",
       "borderRadius": "{borderRadius.sm}",
       "roundedBorderRadius": "{borderRadius.xl}"
     },
     "icon": {
-      "size": "0.875rem"
+      "size": "0.765625rem"
     }
   },
   "textarea": {
@@ -3097,7 +3106,7 @@
       },
       "extItem": {
         "caption": {
-          "gap": "0.25rem",
+          "gap": "0.21875rem",
           "color": "{text.mutedColor}"
         }
       }
@@ -3130,7 +3139,7 @@
       }
     },
     "submenu": {
-      "mobileIndent": "0.75rem"
+      "mobileIndent": "0.65625rem"
     },
     "separator": {
       "borderColor": "{content.borderColor}"
@@ -3138,7 +3147,7 @@
   },
   "timeline": {
     "event": {
-      "minHeight": "3.0357142857142856rem"
+      "minHeight": "2.65625rem"
     },
     "vertical": {
       "eventContent": {
@@ -3151,21 +3160,21 @@
       }
     },
     "eventMarker": {
-      "size": "1rem",
+      "size": "0.875rem",
       "borderRadius": "{content.borderRadius}",
-      "borderWidth": "0.25rem",
+      "borderWidth": "0.21875rem",
       "background": "{content.background}",
       "borderColor": "{primary.color}",
       "content": {
         "borderRadius": "{content.borderRadius}",
-        "size": "0.75rem",
+        "size": "0.65625rem",
         "background": "{transparent}",
         "insetShadow": "none"
       }
     },
     "eventConnector": {
       "color": "{content.borderColor}",
-      "size": "0.07142857142857142rem"
+      "size": "0.0625rem"
     }
   },
   "togglebutton": {
@@ -3177,27 +3186,27 @@
       }
     },
     "extend": {
-      "gap": "0.75rem",
-      "iconOnlyWidth": "2.5rem",
+      "gap": "0.65625rem",
       "extXlg": {
         "padding": "1.25rem 1.5rem",
-        "iconOnlyWidth": "4.071428571428571rem"
+        "iconOnlyWidth": "3.5625rem"
       },
+      "iconOnlyWidth": "2.1875rem",
       "extSm": {
-        "iconOnlyWidth": "2.142857142857143rem"
+        "iconOnlyWidth": "1.875rem"
       },
       "hoverBorderColor": "{surface.300}",
       "checkedHoverColor": "{text.extend.colorInverted}",
       "checkedHoverBackground": "{surface.800}",
       "checkedHoverBorderColor": "{surface.800}",
       "extLg": {
-        "iconOnlyWidth": "3.5714285714285716rem"
+        "iconOnlyWidth": "3.125rem"
       }
     },
     "root": {
       "padding": "0.5rem 1rem",
       "borderRadius": "{borderRadius.rounded}",
-      "gap": "0.5rem",
+      "gap": "0.4375rem",
       "fontWeight": "{fonts.fontWeight.demibold}",
       "hoverBackground": "{surface.300}",
       "borderColor": "{surface.200}",
@@ -3270,10 +3279,10 @@
       }
     },
     "root": {
-      "width": "2.5rem",
-      "height": "1.5rem",
+      "width": "2.1875rem",
+      "height": "1.3125rem",
       "borderRadius": "{borderRadius.xl}",
-      "gap": "0.14285714285714285rem",
+      "gap": "0.125rem",
       "borderWidth": "0",
       "shadow": "none",
       "focusRing": {
@@ -3292,8 +3301,8 @@
       "slideDuration": "0.2s"
     },
     "handle": {
-      "borderRadius": "7.142857142857143rem",
-      "size": "1.25rem"
+      "borderRadius": "6.25rem",
+      "size": "1.09375rem"
     }
   },
   "tooltip": {
@@ -3306,8 +3315,8 @@
       }
     },
     "root": {
-      "maxWidth": "17rem",
-      "gutter": "0.25rem",
+      "maxWidth": "14.875rem",
+      "gutter": "0.21875rem",
       "shadow": "{overlay.popover.shadow}",
       "padding": "0.5rem 1rem",
       "borderRadius": "{overlay.popover.borderRadius}"
diff --git a/src/prime-preset/primitive.json b/src/prime-preset/tokens/primitive-default.json
similarity index 86%
rename from src/prime-preset/primitive.json
rename to src/prime-preset/tokens/primitive-default.json
index 3081879..6dc1c0f 100644
--- a/src/prime-preset/primitive.json
+++ b/src/prime-preset/tokens/primitive-default.json
@@ -317,56 +317,61 @@
   },
   "borderRadius": {
     "none": "0",
-    "xs": "0.25rem",
-    "sm": "0.5rem",
-    "md": "0.75rem",
-    "lg": "1rem",
-    "xl": "1.5rem",
-    "rounded": "71.35714285714286rem"
+    "xs": "0.21875rem",
+    "sm": "0.4375rem",
+    "md": "0.65625rem",
+    "lg": "0.875rem",
+    "xl": "1.3125rem",
+    "rounded": "62.4375rem"
   },
   "fonts": {
     "fontFamily": {
-      "heading": "{font-family.heading}",
-      "base": "{font-family.base}"
+      "heading": "TT Fellows",
+      "base": "PT Sans"
     },
     "fontWeight": {
-      "regular": "28.571428571428573rem",
-      "medium": "35.714285714285715rem",
-      "demibold": "42.857142857142854rem",
-      "bold": "50rem"
+      "regular": "25rem",
+      "medium": "31.25rem",
+      "demibold": "37.5rem",
+      "bold": "43.75rem"
     },
     "fontSize": {
-      "xs": "0.75rem",
-      "sm": "0.875rem",
-      "base": "1rem",
-      "lg": "1.125rem",
-      "xl": "1.25rem",
-      "2xl": "1.5rem",
-      "3xl": "1.875rem",
-      "4xl": "2.25rem",
-      "5xl": "3rem",
-      "6xl": "3.75rem",
-      "7xl": "4.5rem",
-      "8xl": "6rem"
+      "xs": "0.65625rem",
+      "sm": "0.765625rem",
+      "base": "0.875rem",
+      "lg": "0.984375rem",
+      "xl": "1.09375rem",
+      "2xl": "1.3125rem",
+      "3xl": "1.640625rem",
+      "4xl": "1.96875rem",
+      "5xl": "2.625rem",
+      "6xl": "3.28125rem",
+      "7xl": "3.9375rem",
+      "8xl": "5.25rem"
     },
     "lineHeight": {
-      "10": "0.7857142857142857rem",
-      "15": "0.8571428571428571rem",
-      "20": "0.9285714285714286rem",
-      "25": "1rem",
-      "30": "1.0714285714285714rem",
-      "35": "1.1428571428571428rem",
-      "40": "1.2857142857142858rem",
-      "45": "1.4285714285714286rem",
-      "50": "1.5rem",
-      "55": "1.5714285714285714rem",
-      "60": "1.7142857142857142rem",
-      "65": "1.8571428571428572rem",
-      "70": "2.2857142857142856rem",
-      "75": "2.357142857142857rem",
-      "80": "2.7857142857142856rem",
-      "85": "3.357142857142857rem",
+      "10": "0.6875rem",
+      "15": "0.75rem",
+      "20": "0.8125rem",
+      "25": "0.875rem",
+      "30": "0.9375rem",
+      "35": "1rem",
+      "40": "1.125rem",
+      "45": "1.25rem",
+      "50": "1.3125rem",
+      "55": "1.375rem",
+      "60": "1.5rem",
+      "65": "1.625rem",
+      "70": "2rem",
+      "75": "2.0625rem",
+      "80": "2.4375rem",
+      "85": "2.9375rem",
       "auto": "auto"
     }
+  },
+  "opacity": {
+    "0": "0",
+    "50": "0.03125rem",
+    "100": "0.0625rem"
   }
 }
diff --git a/src/prime-preset/tokens/semantic-default.json b/src/prime-preset/tokens/semantic-default.json
new file mode 100644
index 0000000..2167ac2
--- /dev/null
+++ b/src/prime-preset/tokens/semantic-default.json
@@ -0,0 +1,112 @@
+{
+  "list": {
+    "padding": "0.21875rem",
+    "gap": "0.21875rem",
+    "header": {
+      "padding": "1rem 1rem 0 1rem"
+    },
+    "option": {
+      "padding": "0.5rem 0.75rem",
+      "borderRadius": "0.4375rem"
+    },
+    "optionGroup": {
+      "padding": "0.5rem 0.75rem",
+      "fontWeight": "{fonts.fontWeight.demibold}"
+    }
+  },
+  "focusRing": {
+    "width": "0.21875rem",
+    "style": "none",
+    "color": "#ffffff",
+    "offset": "0",
+    "shadow": "0 0 0 0.25rem {primary.200}"
+  },
+  "primary": {
+    "50": "{colors.solid.green.50}",
+    "100": "{colors.solid.green.100}",
+    "200": "{colors.solid.green.200}",
+    "300": "{colors.solid.green.300}",
+    "400": "{colors.solid.green.400}",
+    "500": "{colors.solid.green.500}",
+    "600": "{colors.solid.green.600}",
+    "700": "{colors.solid.green.700}",
+    "800": "{colors.solid.green.800}",
+    "900": "{colors.solid.green.900}",
+    "950": "{colors.solid.green.950}"
+  },
+  "formField": {
+    "paddingX": "0.65625rem",
+    "paddingY": "0.65625rem",
+    "borderRadius": "{borderRadius.md}",
+    "transitionDuration": "{transitionDuration}",
+    "sm": {
+      "fontSize": "{fonts.fontSize.base}",
+      "paddingX": "0.0390625rem",
+      "paddingY": "0.03125rem"
+    },
+    "lg": {
+      "fontSize": "{fonts.fontSize.base}",
+      "paddingX": "0.0546875rem",
+      "paddingY": "0.046875rem"
+    },
+    "focusRing": {
+      "width": "{focusRing.width}",
+      "style": "{focusRing.style}",
+      "color": "{focusRing.color}",
+      "offset": "{focusRing.offset}",
+      "shadow": "{focusRing.shadow}"
+    }
+  },
+  "content": {
+    "borderRadius": "{borderRadius.md}"
+  },
+  "mask": {
+    "transitionDuration": "{transitionDuration}"
+  },
+  "navigation": {
+    "list": {
+      "padding": "0.21875rem",
+      "gap": "0.21875rem"
+    },
+    "item": {
+      "padding": "0.625rem 1rem",
+      "borderRadius": "{borderRadius.sm}",
+      "gap": "0.4375rem"
+    },
+    "submenuLabel": {
+      "padding": "0.625rem 1rem",
+      "fontWeight": "{fonts.fontWeight.demibold}"
+    },
+    "submenuIcon": {
+      "size": "1.09375rem"
+    }
+  },
+  "overlay": {
+    "select": {
+      "borderRadius": "{borderRadius.md}",
+      "shadow": "0 3.5px 7px 0 rgba(0, 0, 0, 0.2)"
+    },
+    "popover": {
+      "borderRadius": "{borderRadius.sm}",
+      "padding": "0.65625rem",
+      "shadow": "0 1px 3px rgba(0, 0, 0, 0.1)"
+    },
+    "modal": {
+      "borderRadius": "{borderRadius.xl}",
+      "padding": "1.3125rem",
+      "shadow": "0 1px 3px rgba(0, 0, 0, 0.3)"
+    },
+    "navigation": {
+      "shadow": "0 2px 12px 0 rgba(0, 0, 0, 0.1)"
+    }
+  },
+  "transitionDuration": "0.2s",
+  "iconSizeMedium": "0.875rem",
+  "iconSizeLarge": "1.09375rem",
+  "anchorGutter": "0.125rem",
+  "opacity": {
+    "default": "{opacity.100}",
+    "muted": "{opacity.50}",
+    "disabled": "{opacity.0}"
+  }
+}
\ No newline at end of file
diff --git a/src/prime-preset/tokens/sizing-base.json b/src/prime-preset/tokens/sizing-base.json
new file mode 100644
index 0000000..cb9c0f3
--- /dev/null
+++ b/src/prime-preset/tokens/sizing-base.json
@@ -0,0 +1,30 @@
+{
+  "sizingInputtext": {
+    "root": {
+      "fontSize": "0.875rem",
+      "paddingX": "0.875rem",
+      "paddingY": "0.875rem"
+    }
+  },
+  "sizingSelect": {
+    "root": {
+      "fontSize": "0.875rem",
+      "paddingX": "0.875rem",
+      "paddingY": "0.875rem"
+    }
+  },
+  "sizingDialog": {
+    "extra": {
+      "minWidth": "21.875rem"
+    }
+  },
+  "sizingMessage": {
+    "width": "21.875rem"
+  },
+  "sizingToast": {
+    "width": "21.875rem"
+  },
+  "sizingDrawer": {
+    "width": "21.875rem"
+  }
+}
\ No newline at end of file
diff --git a/src/prime-preset/tokens/sizing-lg.json b/src/prime-preset/tokens/sizing-lg.json
new file mode 100644
index 0000000..9e2f0d6
--- /dev/null
+++ b/src/prime-preset/tokens/sizing-lg.json
@@ -0,0 +1,30 @@
+{
+  "sizingInputtext": {
+    "root": {
+      "fontSize": "0.875rem",
+      "paddingX": "1.09375rem",
+      "paddingY": "1.09375rem"
+    }
+  },
+  "sizingSelect": {
+    "root": {
+      "fontSize": "0.875rem",
+      "paddingX": "1.09375rem",
+      "paddingY": "1.09375rem"
+    }
+  },
+  "sizingDialog": {
+    "extra": {
+      "minWidth": "26.25rem"
+    }
+  },
+  "sizingMessage": {
+    "width": "26.25rem"
+  },
+  "sizingToast": {
+    "width": "26.25rem"
+  },
+  "sizingDrawer": {
+    "width": "26.25rem"
+  }
+}
\ No newline at end of file
diff --git a/src/prime-preset/tokens/sizing-sm.json b/src/prime-preset/tokens/sizing-sm.json
new file mode 100644
index 0000000..8118b77
--- /dev/null
+++ b/src/prime-preset/tokens/sizing-sm.json
@@ -0,0 +1,30 @@
+{
+  "sizingInputtext": {
+    "root": {
+      "fontSize": "0.875rem",
+      "paddingX": "0.65625rem",
+      "paddingY": "0.65625rem"
+    }
+  },
+  "sizingSelect": {
+    "root": {
+      "fontSize": "0.875rem",
+      "paddingX": "0.65625rem",
+      "paddingY": "0.65625rem"
+    }
+  },
+  "sizingDialog": {
+    "extra": {
+      "minWidth": "17.5rem"
+    }
+  },
+  "sizingMessage": {
+    "width": "17.5rem"
+  },
+  "sizingToast": {
+    "width": "17.5rem"
+  },
+  "sizingDrawer": {
+    "width": "17.5rem"
+  }
+}
\ No newline at end of file
diff --git a/src/prime-preset/tokens/sizing-xlg.json b/src/prime-preset/tokens/sizing-xlg.json
new file mode 100644
index 0000000..8dc3516
--- /dev/null
+++ b/src/prime-preset/tokens/sizing-xlg.json
@@ -0,0 +1,30 @@
+{
+  "sizingInputtext": {
+    "root": {
+      "fontSize": "0.875rem",
+      "paddingX": "1.3125rem",
+      "paddingY": "1.3125rem"
+    }
+  },
+  "sizingSelect": {
+    "root": {
+      "fontSize": "0.875rem",
+      "paddingX": "1.3125rem",
+      "paddingY": "1.3125rem"
+    }
+  },
+  "sizingDialog": {
+    "extra": {
+      "minWidth": "39.375rem"
+    }
+  },
+  "sizingMessage": {
+    "width": "39.375rem"
+  },
+  "sizingToast": {
+    "width": "39.375rem"
+  },
+  "sizingDrawer": {
+    "width": "39.375rem"
+  }
+}
\ No newline at end of file
diff --git a/src/prime-preset/tokens/theme-dark.json b/src/prime-preset/tokens/theme-dark.json
new file mode 100644
index 0000000..9e1b794
--- /dev/null
+++ b/src/prime-preset/tokens/theme-dark.json
@@ -0,0 +1,212 @@
+{
+  "success": {
+    "50": "{colors.solid.green.950}",
+    "100": "{colors.solid.green.900}",
+    "200": "{colors.solid.green.800}",
+    "300": "{colors.solid.green.700}",
+    "400": "{colors.solid.green.600}",
+    "500": "{colors.solid.green.500}",
+    "600": "{colors.solid.green.400}",
+    "700": "{colors.solid.green.300}",
+    "800": "{colors.solid.green.200}",
+    "900": "{colors.solid.green.100}",
+    "950": "{colors.solid.green.50}"
+  },
+  "info": {
+    "50": "{colors.solid.blue.950}",
+    "100": "{colors.solid.blue.900}",
+    "200": "{colors.solid.blue.800}",
+    "300": "{colors.solid.blue.700}",
+    "400": "{colors.solid.blue.600}",
+    "500": "{colors.solid.blue.500}",
+    "600": "{colors.solid.blue.400}",
+    "700": "{colors.solid.blue.300}",
+    "800": "{colors.solid.blue.200}",
+    "900": "{colors.solid.blue.100}",
+    "950": "{colors.solid.blue.50}"
+  },
+  "warn": {
+    "50": "{colors.solid.yellow.950}",
+    "100": "{colors.solid.yellow.900}",
+    "200": "{colors.solid.yellow.800}",
+    "300": "{colors.solid.yellow.700}",
+    "400": "{colors.solid.yellow.600}",
+    "500": "{colors.solid.yellow.500}",
+    "600": "{colors.solid.yellow.400}",
+    "700": "{colors.solid.yellow.300}",
+    "800": "{colors.solid.yellow.200}",
+    "900": "{colors.solid.yellow.100}",
+    "950": "{colors.solid.yellow.50}"
+  },
+  "transparent": "rgba(0, 0, 0, 0.0001)",
+  "help": {
+    "50": "{colors.solid.purple.950}",
+    "100": "{colors.solid.purple.900}",
+    "200": "{colors.solid.purple.800}",
+    "300": "{colors.solid.purple.700}",
+    "400": "{colors.solid.purple.600}",
+    "500": "{colors.solid.purple.500}",
+    "600": "{colors.solid.purple.400}",
+    "700": "{colors.solid.purple.300}",
+    "800": "{colors.solid.purple.200}",
+    "900": "{colors.solid.purple.100}",
+    "950": "{colors.solid.purple.50}"
+  },
+  "error": {
+    "50": "{colors.solid.red.950}",
+    "100": "{colors.solid.red.900}",
+    "200": "{colors.solid.red.800}",
+    "300": "{colors.solid.red.700}",
+    "400": "{colors.solid.red.600}",
+    "500": "{colors.solid.red.500}",
+    "600": "{colors.solid.red.400}",
+    "700": "{colors.solid.red.300}",
+    "800": "{colors.solid.red.200}",
+    "900": "{colors.solid.red.100}",
+    "950": "{colors.solid.red.50}"
+  },
+  "surface": {
+    "0": "{colors.alpha.black.100}",
+    "50": "{colors.solid.zinc.950}",
+    "100": "{colors.solid.zinc.900}",
+    "200": "{colors.solid.zinc.800}",
+    "300": "{colors.solid.zinc.700}",
+    "400": "{colors.solid.zinc.600}",
+    "500": "{colors.solid.zinc.500}",
+    "600": "{colors.solid.zinc.400}",
+    "700": "{colors.solid.zinc.300}",
+    "800": "{colors.solid.zinc.200}",
+    "900": "{colors.solid.zinc.100}",
+    "950": "{colors.solid.zinc.50}"
+  },
+  "primary": {
+    "color": "{primary.500}",
+    "contrastColor": "{colors.solid.zinc.900}",
+    "hoverColor": "{primary.400}",
+    "activeColor": "{primary.300}"
+  },
+  "highlight": {
+    "background": "{colors.solid.zinc.100}",
+    "focusBackground": "{colors.solid.zinc.200}",
+    "color": "{colors.solid.zinc.900}",
+    "focusColor": "{colors.solid.zinc.900}"
+  },
+  "focusRing": {
+    "shadow": "0 0 0 0.2rem {primary.800}",
+    "extend": {
+      "invalid": "{colors.solid.red.800}",
+      "success": "{colors.solid.green.800}",
+      "warning": "{colors.solid.yellow.800}",
+      "info": "{colors.solid.blue.800}"
+    }
+  },
+  "mask": {
+    "background": "{colors.alpha.black.60}",
+    "color": "{surface.800}"
+  },
+  "formField": {
+    "background": "{colors.solid.zinc.950}",
+    "disabledBackground": "{colors.solid.zinc.800}",
+    "readonlyBackground": "{colors.solid.zinc.900}",
+    "filledBackground": "{colors.solid.zinc.950}",
+    "filledHoverBackground": "{colors.solid.zinc.950}",
+    "filledFocusBackground": "{colors.solid.zinc.950}",
+    "borderColor": "{colors.solid.zinc.700}",
+    "hoverBorderPrimaryColor": "{colors.solid.zinc.100}",
+    "focusBorderPrimaryColor": "{colors.solid.zinc.100}",
+    "hoverBorderSecondaryColor": "{colors.solid.green.400}",
+    "focusBorderSecondaryColor": "{colors.solid.green.400}",
+    "invalidBorderColor": "{colors.solid.red.600}",
+    "color": "{colors.alpha.white.100}",
+    "disabledColor": "{colors.solid.zinc.500}",
+    "placeholderColor": "{colors.solid.zinc.500}",
+    "invalidPlaceholderColor": "{colors.solid.red.400}",
+    "floatLabelColor": "{colors.solid.zinc.500}",
+    "floatLabelFocusColor": "{colors.solid.zinc.500}",
+    "floatLabelActiveColor": "{colors.solid.zinc.500}",
+    "floatLabelInvalidColor": "{formField.invalidPlaceholderColor}",
+    "iconColor": "{colors.alpha.white.100}",
+    "shadow": "rgba(255, 255, 255, 0.0000)",
+    "backgroundHandler": "{colors.alpha.white.100}"
+  },
+  "text": {
+    "color": "{colors.alpha.white.100}",
+    "extend": {
+      "colorPrimaryStatic": "{colors.solid.zinc.900}",
+      "colorSecondaryStatic": "{colors.alpha.white.100}",
+      "colorInverted": "{colors.solid.zinc.900}"
+    },
+    "hoverColor": "{colors.solid.zinc.300}",
+    "mutedColor": "{colors.solid.zinc.500}",
+    "hoverMutedColor": "{colors.solid.zinc.700}"
+  },
+  "content": {
+    "background": "{colors.solid.zinc.900}",
+    "hoverBackground": "{colors.solid.zinc.800}",
+    "borderColor": "{colors.solid.zinc.800}",
+    "color": "{text.color}",
+    "hoverColor": "{text.hoverColor}"
+  },
+  "overlay": {
+    "select": {
+      "background": "{colors.solid.zinc.900}",
+      "borderColor": "{colors.solid.zinc.800}",
+      "color": "{text.color}"
+    },
+    "popover": {
+      "background": "{colors.solid.zinc.900}",
+      "borderColor": "{formField.borderColor}",
+      "color": "{text.color}",
+      "shadow": "rgba(24, 26, 31, 0.2000)"
+    },
+    "modal": {
+      "background": "{colors.solid.zinc.900}",
+      "borderColor": "{colors.solid.zinc.800}",
+      "color": "{text.color}"
+    }
+  },
+  "list": {
+    "option": {
+      "background": "{colors.solid.zinc.900}",
+      "focusBackground": "{colors.solid.zinc.800}",
+      "selectedBackground": "{colors.solid.zinc.100}",
+      "selectedFocusBackground": "{colors.solid.zinc.300}",
+      "color": "{text.color}",
+      "focusColor": "{text.color}",
+      "selectedColor": "{text.extend.colorInverted}",
+      "selectedFocusColor": "{text.extend.colorInverted}",
+      "icon": {
+        "color": "{text.color}",
+        "focusColor": "{text.color}"
+      }
+    },
+    "surface": "#ffffff",
+    "optionGroup": {
+      "background": "{colors.solid.zinc.900}",
+      "color": "{text.mutedColor}"
+    }
+  },
+  "navigation": {
+    "submenuLabel": {
+      "background": "rgba(255, 255, 255, 0.0000)",
+      "color": "{text.mutedColor}"
+    },
+    "submenuIcon": {
+      "color": "{colors.solid.zinc.100}",
+      "focusColor": "{colors.solid.zinc.100}",
+      "activeColor": "{colors.solid.zinc.900}"
+    },
+    "item": {
+      "focusBackground": "{colors.solid.zinc.900}",
+      "activeBackground": "{colors.solid.zinc.100}",
+      "color": "{colors.alpha.white.100}",
+      "focusColor": "{colors.alpha.white.100}",
+      "activeColor": "{colors.solid.zinc.900}",
+      "icon": {
+        "color": "{colors.alpha.white.100}",
+        "focusColor": "{colors.alpha.white.100}",
+        "activeColor": "{colors.solid.zinc.900}"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/prime-preset/tokens/theme-light.json b/src/prime-preset/tokens/theme-light.json
new file mode 100644
index 0000000..d06ada7
--- /dev/null
+++ b/src/prime-preset/tokens/theme-light.json
@@ -0,0 +1,212 @@
+{
+  "success": {
+    "50": "{colors.solid.green.50}",
+    "100": "{colors.solid.green.100}",
+    "200": "{colors.solid.green.200}",
+    "300": "{colors.solid.green.300}",
+    "400": "{colors.solid.green.400}",
+    "500": "{colors.solid.green.500}",
+    "600": "{colors.solid.green.600}",
+    "700": "{colors.solid.green.700}",
+    "800": "{colors.solid.green.800}",
+    "900": "{colors.solid.green.900}",
+    "950": "{colors.solid.green.950}"
+  },
+  "info": {
+    "50": "{colors.solid.blue.50}",
+    "100": "{colors.solid.blue.100}",
+    "200": "{colors.solid.blue.200}",
+    "300": "{colors.solid.blue.300}",
+    "400": "{colors.solid.blue.400}",
+    "500": "{colors.solid.blue.500}",
+    "600": "{colors.solid.blue.600}",
+    "700": "{colors.solid.blue.700}",
+    "800": "{colors.solid.blue.800}",
+    "900": "{colors.solid.blue.900}",
+    "950": "{colors.solid.blue.950}"
+  },
+  "warn": {
+    "50": "{colors.solid.yellow.50}",
+    "100": "{colors.solid.yellow.100}",
+    "200": "{colors.solid.yellow.200}",
+    "300": "{colors.solid.yellow.300}",
+    "400": "{colors.solid.yellow.400}",
+    "500": "{colors.solid.yellow.500}",
+    "600": "{colors.solid.yellow.600}",
+    "700": "{colors.solid.yellow.700}",
+    "800": "{colors.solid.yellow.800}",
+    "900": "{colors.solid.yellow.900}",
+    "950": "{colors.solid.yellow.950}"
+  },
+  "transparent": "rgba(255, 255, 255, 0.0001)",
+  "help": {
+    "50": "{colors.solid.purple.50}",
+    "100": "{colors.solid.purple.100}",
+    "200": "{colors.solid.purple.200}",
+    "300": "{colors.solid.purple.300}",
+    "400": "{colors.solid.purple.400}",
+    "500": "{colors.solid.purple.500}",
+    "600": "{colors.solid.purple.600}",
+    "700": "{colors.solid.purple.700}",
+    "800": "{colors.solid.purple.800}",
+    "900": "{colors.solid.purple.900}",
+    "950": "{colors.solid.purple.950}"
+  },
+  "error": {
+    "50": "{colors.solid.red.50}",
+    "100": "{colors.solid.red.100}",
+    "200": "{colors.solid.red.200}",
+    "300": "{colors.solid.red.300}",
+    "400": "{colors.solid.red.400}",
+    "500": "{colors.solid.red.500}",
+    "600": "{colors.solid.red.600}",
+    "700": "{colors.solid.red.700}",
+    "800": "{colors.solid.red.800}",
+    "900": "{colors.solid.red.900}",
+    "950": "{colors.solid.red.950}"
+  },
+  "surface": {
+    "0": "{colors.alpha.white.100}",
+    "50": "{colors.solid.zinc.50}",
+    "100": "{colors.solid.zinc.100}",
+    "200": "{colors.solid.zinc.200}",
+    "300": "{colors.solid.zinc.300}",
+    "400": "{colors.solid.zinc.400}",
+    "500": "{colors.solid.zinc.500}",
+    "600": "{colors.solid.zinc.600}",
+    "700": "{colors.solid.zinc.700}",
+    "800": "{colors.solid.zinc.800}",
+    "900": "{colors.solid.zinc.900}",
+    "950": "{colors.solid.zinc.950}"
+  },
+  "primary": {
+    "color": "{primary.500}",
+    "contrastColor": "{surface.0}",
+    "hoverColor": "{primary.600}",
+    "activeColor": "{primary.700}"
+  },
+  "highlight": {
+    "background": "{colors.solid.zinc.900}",
+    "focusBackground": "{colors.solid.zinc.800}",
+    "color": "{colors.alpha.white.100}",
+    "focusColor": "{colors.alpha.white.100}"
+  },
+  "focusRing": {
+    "shadow": "0 0 0 0.2rem {primary.200}",
+    "extend": {
+      "invalid": "{colors.solid.red.200}",
+      "success": "{colors.solid.green.200}",
+      "warning": "{colors.solid.yellow.200}",
+      "info": "{colors.solid.blue.200}"
+    }
+  },
+  "mask": {
+    "background": "{colors.alpha.black.40}",
+    "color": "{surface.200}"
+  },
+  "formField": {
+    "background": "{colors.alpha.white.100}",
+    "disabledBackground": "{colors.solid.zinc.200}",
+    "readonlyBackground": "{colors.solid.zinc.100}",
+    "filledBackground": "{colors.alpha.white.100}",
+    "filledHoverBackground": "{colors.alpha.white.100}",
+    "filledFocusBackground": "{colors.alpha.white.100}",
+    "borderColor": "{colors.solid.zinc.300}",
+    "hoverBorderPrimaryColor": "{colors.solid.zinc.900}",
+    "focusBorderPrimaryColor": "{colors.solid.zinc.900}",
+    "hoverBorderSecondaryColor": "{colors.solid.green.600}",
+    "focusBorderSecondaryColor": "{colors.solid.green.600}",
+    "invalidBorderColor": "{colors.solid.red.400}",
+    "color": "{colors.solid.zinc.950}",
+    "disabledColor": "{colors.solid.zinc.500}",
+    "placeholderColor": "{colors.solid.zinc.500}",
+    "invalidPlaceholderColor": "{colors.solid.red.600}",
+    "floatLabelColor": "{colors.solid.zinc.500}",
+    "floatLabelFocusColor": "{colors.solid.zinc.500}",
+    "floatLabelActiveColor": "{colors.solid.zinc.500}",
+    "floatLabelInvalidColor": "{formField.invalidPlaceholderColor}",
+    "iconColor": "{colors.solid.zinc.950}",
+    "shadow": "rgba(0, 0, 0, 0.0000)",
+    "backgroundHandler": "{colors.alpha.white.100}"
+  },
+  "text": {
+    "color": "{colors.solid.zinc.900}",
+    "extend": {
+      "colorPrimaryStatic": "{colors.solid.zinc.900}",
+      "colorSecondaryStatic": "{colors.alpha.white.100}",
+      "colorInverted": "{colors.alpha.white.100}"
+    },
+    "hoverColor": "{colors.solid.zinc.700}",
+    "mutedColor": "{colors.solid.zinc.500}",
+    "hoverMutedColor": "{colors.solid.zinc.300}"
+  },
+  "content": {
+    "background": "{colors.alpha.white.100}",
+    "hoverBackground": "{colors.solid.zinc.100}",
+    "borderColor": "{colors.solid.zinc.200}",
+    "color": "{text.color}",
+    "hoverColor": "{text.hoverColor}"
+  },
+  "overlay": {
+    "select": {
+      "background": "{colors.alpha.white.100}",
+      "borderColor": "{colors.solid.zinc.200}",
+      "color": "{text.color}"
+    },
+    "popover": {
+      "background": "{colors.alpha.white.100}",
+      "borderColor": "{formField.borderColor}",
+      "color": "{text.color}",
+      "shadow": "rgba(24, 26, 31, 0.2000)"
+    },
+    "modal": {
+      "background": "{colors.alpha.white.100}",
+      "borderColor": "{colors.solid.zinc.200}",
+      "color": "{text.color}"
+    }
+  },
+  "list": {
+    "option": {
+      "background": "{colors.alpha.white.100}",
+      "focusBackground": "{colors.solid.zinc.100}",
+      "selectedBackground": "{colors.solid.zinc.900}",
+      "selectedFocusBackground": "{colors.solid.zinc.700}",
+      "color": "{text.color}",
+      "focusColor": "{text.color}",
+      "selectedColor": "{text.extend.colorInverted}",
+      "selectedFocusColor": "{text.extend.colorInverted}",
+      "icon": {
+        "color": "{text.color}",
+        "focusColor": "{text.color}"
+      }
+    },
+    "surface": "#ffffff",
+    "optionGroup": {
+      "background": "{colors.alpha.white.100}",
+      "color": "{text.mutedColor}"
+    }
+  },
+  "navigation": {
+    "submenuLabel": {
+      "background": "rgba(255, 255, 255, 0.0000)",
+      "color": "{text.mutedColor}"
+    },
+    "submenuIcon": {
+      "color": "{colors.solid.zinc.900}",
+      "focusColor": "{colors.solid.zinc.900}",
+      "activeColor": "{colors.alpha.white.100}"
+    },
+    "item": {
+      "focusBackground": "{colors.solid.zinc.100}",
+      "activeBackground": "{colors.solid.zinc.900}",
+      "color": "{colors.solid.zinc.900}",
+      "focusColor": "{colors.solid.zinc.900}",
+      "activeColor": "{colors.alpha.white.100}",
+      "icon": {
+        "color": "{colors.solid.zinc.900}",
+        "focusColor": "{colors.solid.zinc.900}",
+        "activeColor": "{colors.alpha.white.100}"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/stories/components/button/button.stories.ts b/src/stories/components/button/button.stories.ts
index 096ade3..80c1166 100644
--- a/src/stories/components/button/button.stories.ts
+++ b/src/stories/components/button/button.stories.ts
@@ -12,6 +12,7 @@ import { ButtonDisabledComponent, Disabled } from './examples/button-disabled.co
 import { ButtonLoadingComponent, Loading } from './examples/button-loading.component';
 import { ButtonBadgeComponent, Badge } from './examples/button-badge.component';
 import { ButtonSeverityComponent, Severity } from './examples/button-severity.component';
+import { CommonModule } from '@angular/common';
 
 const meta: Meta = {
   title: 'PrimeNG/Button',
@@ -19,6 +20,7 @@ const meta: Meta = {
   decorators: [
     moduleMetadata({
       imports: [
+        CommonModule,
         ButtonModule,
         ButtonBaseComponent,
         ButtonSizesComponent,
diff --git a/src/stories/components/button/examples/button-base.component.ts b/src/stories/components/button/examples/button-base.component.ts
index bf42202..b94f4b9 100644
--- a/src/stories/components/button/examples/button-base.component.ts
+++ b/src/stories/components/button/examples/button-base.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { Button } from 'primeng/button';
+import { Button, ButtonIconPosition } from 'primeng/button';
 import { StoryObj } from '@storybook/angular';
 
 const template = `
@@ -33,12 +33,12 @@ export class ButtonBaseComponent {
   @Input() label = '';
   @Input() disabled = false;
   @Input() loading = false;
-  @Input() size: 'small' | 'large' | null = null;
+  @Input() size: 'small' | 'large' | undefined;
   @Input() rounded = false;
   @Input() outlined = false;
   @Input() text = false;
   @Input() icon: string = '';
-  @Input() iconPos: 'left' | 'right' | null = null;
+  @Input() iconPos: ButtonIconPosition = 'left';
   @Input() badge: string = '';
   @Input() severity: 'success' | 'info' | 'warn' | 'primary' | 'help' | 'danger' | null = null;
 }