// THIS FILE IS AUTOMATICALLY GENERATED IN:
//
//   scripts/figma-to-prime-vue/index.ts
//
// YOU SHOULD NEVER UPDATE THIS FILE DIRECTLY

import type { Preset } from '@primeuix/themes/types';

import type { LoopAdminTokens } from './types';

export const LoopAdmin: Preset<LoopAdminTokens> = {
  css: '\n    li.p-autocomplete-option,\n    div.p-cascadeselect-option-content,\n    li.p-listbox-option,\n    li.p-multiselect-option,\n    li.p-select-option,\n    li.p-listbox-option,\n    div.p-tree-node-content,\n    li.p-datatable-filter-constraint,\n    .p-datatable .p-datatable-tbody > tr,\n    .p-treetable .p-treetable-tbody > tr,\n    div.p-menu-item-content,\n    div.p-tieredmenu-item-content,\n    div.p-contextmenu-item-content,\n    div.p-menubar-item-content,\n    div.p-megamenu-item-content,\n    div.p-panelmenu-header-content,\n    div.p-panelmenu-item-content,\n    th.p-datatable-header-cell,\n    th.p-treetable-header-cell,\n    thead.p-datatable-thead > tr > th,\n    .p-treetable thead.p-treetable-thead>tr>th {\n        transition: none;\n    }\n',
  primitive: {
    borderRadius: {
      none: '0',
      xs: '2px',
      sm: '4px',
      md: '6px',
      lg: '8px',
      xl: '12px',
    },
    green: {
      50: '#f0fdf4',
      100: '#dcfce7',
      200: '#bbf7d0',
      300: '#86efac',
      400: '#4ade80',
      500: '#22c55e',
      600: '#16a34a',
      700: '#15803d',
      800: '#166534',
      900: '#14532d',
      950: '#052e16',
    },
    red: {
      50: '#fef2f2',
      100: '#fee2e2',
      200: '#fecaca',
      300: '#fca5a5',
      400: '#f87171',
      500: '#ef4444',
      600: '#dc2626',
      700: '#b91c1c',
      800: '#991b1b',
      900: '#7f1d1d',
      950: '#450a0a',
    },
    orange: {
      50: '#fff7ed',
      100: '#ffedd5',
      200: '#fed7aa',
      300: '#fdba74',
      400: '#fb923c',
      500: '#f97316',
      600: '#ea580c',
      700: '#c2410c',
      800: '#9a3412',
      900: '#7c2d12',
      950: '#431407',
    },
    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: '#fefce8',
      100: '#fef9c3',
      200: '#fef08a',
      300: '#fde047',
      400: '#facc15',
      500: '#eab308',
      600: '#ca8a04',
      700: '#a16207',
      800: '#854d0e',
      900: '#713f12',
      950: '#422006',
    },
    sky: {
      50: '#f0f9ff',
      100: '#e0f2fe',
      200: '#bae6fd',
      300: '#7dd3fc',
      400: '#38bdf8',
      500: '#0ea5e9',
      600: '#0284c7',
      700: '#0369a1',
      800: '#075985',
      900: '#0c4a6e',
      950: '#082f49',
    },
    bloop: {
      50: '#ebf3ff',
      100: '#dbe7ff',
      200: '#bed3ff',
      300: '#97b5ff',
      400: '#6e8aff',
      500: '#4c61ff',
      600: '#2b33ff',
      700: '#2023e2',
      800: '#1d22b6',
      900: '#20268f',
      950: '#131553',
    },
    purple: {
      50: '#faf5ff',
      100: '#f3e8ff',
      200: '#e9d5ff',
      300: '#d8b4fe',
      400: '#c084fc',
      500: '#a855f7',
      600: '#9333ea',
      700: '#7e22ce',
      800: '#6b21a8',
      900: '#581c87',
      950: '#3b0764',
    },
    zinc: {
      50: '#fafafa',
      100: '#f4f4f5',
      200: '#e4e4e7',
      300: '#d4d4d8',
      400: '#a1a1aa',
      500: '#71717a',
      600: '#52525b',
      700: '#3f3f46',
      800: '#27272a',
      900: '#18181b',
      950: '#09090b',
    },
    neutral: {
      50: '#f7f8f8',
      100: '#edeef1',
      200: '#d8dbdf',
      300: '#b6bac3',
      400: '#8e95a2',
      500: '#6b7280',
      600: '#5b616e',
      700: '#4a4e5a',
      800: '#40444c',
      900: '#383a42',
      950: '#25272c',
    },
  },
  semantic: {
    transitionDuration: '0.2s',
    focusRing: {
      width: '1px',
      style: 'solid',
      color: '{primary.color}',
      offset: '2px',
      shadow: 'none',
    },
    disabledOpacity: '0.6',
    iconSize: '0.875rem',
    anchorGutter: '2px',
    primary: {
      50: '{bloop.50}',
      100: '{bloop.100}',
      200: '{bloop.200}',
      300: '{bloop.300}',
      400: '{bloop.400}',
      500: '{bloop.500}',
      600: '{bloop.600}',
      700: '{bloop.700}',
      800: '{bloop.800}',
      900: '{bloop.900}',
      950: '{bloop.950}',
    },
    formField: {
      paddingX: '0.65625rem',
      paddingY: '0.4375rem',
      sm: {
        fontSize: '0.765625rem',
        paddingX: '0.546875rem',
        paddingY: '0.328125rem',
      },
      lg: {
        fontSize: '0.984375rem',
        paddingX: '0.765625rem',
        paddingY: '0.546875rem',
      },
      borderRadius: '{border.radius.md}',
      focusRing: {
        width: '0',
        style: 'none',
        color: 'transparent',
        offset: '0',
        shadow: 'none',
      },
      transitionDuration: '{transition.duration}',
    },
    list: {
      padding: '0.25rem 0.25rem',
      gap: '2px',
      header: {
        padding: '0.5rem 1rem 0.25rem 1rem',
      },
      option: {
        padding: '0.5rem 0.75rem',
        borderRadius: '{border.radius.sm}',
      },
      optionGroup: {
        padding: '0.5rem 0.75rem',
        fontWeight: '600',
      },
    },
    content: {
      borderRadius: '{border.radius.md}',
    },
    mask: {
      transitionDuration: '0.3s',
    },
    navigation: {
      list: {
        padding: '0.25rem 0.25rem',
        gap: '2px',
      },
      item: {
        padding: '0.5rem 0.75rem',
        borderRadius: '{border.radius.sm}',
        gap: '0.4375rem',
      },
      submenuLabel: {
        padding: '0.5rem 0.75rem',
        fontWeight: '600',
      },
      submenuIcon: {
        size: '0.765625rem',
      },
    },
    overlay: {
      select: {
        borderRadius: '{border.radius.md}',
        shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
      },
      popover: {
        borderRadius: '{border.radius.md}',
        padding: '0.65625rem',
        shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
      },
      modal: {
        borderRadius: '{border.radius.xl}',
        padding: '1.09375rem',
        shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
      },
      navigation: {
        shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
      },
    },
    colorScheme: {
      light: {
        surface: {
          0: '#ffffff',
          50: '{neutral.50}',
          100: '{neutral.100}',
          200: '{neutral.200}',
          300: '{neutral.300}',
          400: '{neutral.400}',
          500: '{neutral.500}',
          600: '{neutral.600}',
          700: '{neutral.700}',
          800: '{neutral.800}',
          900: '{neutral.900}',
          950: '{neutral.950}',
        },
        primary: {
          color: '{primary.600}',
          contrastColor: '#ffffff',
          hoverColor: '{primary.500}',
          activeColor: '{primary.700}',
        },
        highlight: {
          background: '{primary.50}',
          focusBackground: '{primary.100}',
          color: '{primary.700}',
          focusColor: '{primary.800}',
        },
        mask: {
          background: 'rgba(0,0,0,0.4)',
          color: '{surface.200}',
        },
        formField: {
          background: '{surface.0}',
          disabledBackground: '{surface.200}',
          filledBackground: '{surface.50}',
          filledHoverBackground: '{surface.50}',
          filledFocusBackground: '{surface.50}',
          borderColor: '{surface.300}',
          hoverBorderColor: '{surface.400}',
          focusBorderColor: '{primary.color}',
          invalidBorderColor: '{red.400}',
          color: '{surface.700}',
          disabledColor: '{surface.500}',
          placeholderColor: '{surface.500}',
          invalidPlaceholderColor: '{red.600}',
          floatLabelColor: '{surface.500}',
          floatLabelFocusColor: '{surface.500}',
          floatLabelActiveColor: '{surface.500}',
          floatLabelInvalidColor: '{red.600}',
          iconColor: '{surface.400}',
          shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)',
        },
        text: {
          color: '{surface.700}',
          hoverColor: '{surface.800}',
          mutedColor: '{surface.500}',
          hoverMutedColor: '{surface.600}',
        },
        content: {
          background: '{surface.0}',
          hoverBackground: '{surface.100}',
          borderColor: '{surface.200}',
          color: '{surface.800}',
          hoverColor: '{surface.800}',
        },
        overlay: {
          select: {
            background: '{surface.0}',
            borderColor: '{surface.200}',
            color: '{surface.800}',
          },
          popover: {
            background: '{surface.0}',
            borderColor: '{surface.200}',
            color: '{surface.800}',
          },
          modal: {
            background: '{surface.0}',
            borderColor: '{surface.200}',
            color: '{surface.800}',
          },
        },
        list: {
          option: {
            focusBackground: '{surface.100}',
            selectedBackground: '{highlight.background}',
            selectedFocusBackground: '{highlight.focus.background}',
            color: '{surface.800}',
            focusColor: '{text.hover.color}',
            selectedColor: '{highlight.color}',
            selectedFocusColor: '{highlight.focus.color}',
            icon: {
              color: '{surface.400}',
              focusColor: '{surface.500}',
            },
          },
          optionGroup: {
            background: 'transparent',
            color: '{text.muted.color}',
          },
        },
        navigation: {
          item: {
            focusBackground: '{surface.100}',
            activeBackground: '{surface.100}',
            color: '{surface.800}',
            focusColor: '{surface.800}',
            activeColor: '{text.hover.color}',
            icon: {
              color: '{surface.400}',
              focusColor: '{surface.500}',
              activeColor: '{surface.500}',
            },
          },
          submenuLabel: {
            background: 'transparent',
            color: '{text.muted.color}',
          },
          submenuIcon: {
            color: '{surface.400}',
            focusColor: '{surface.500}',
            activeColor: '{surface.500}',
          },
        },
      },
      dark: {
        surface: {
          0: '#ffffff',
          50: '{zinc.50}',
          100: '{zinc.100}',
          200: '{zinc.200}',
          300: '{zinc.300}',
          400: '{zinc.400}',
          500: '{zinc.500}',
          600: '{zinc.600}',
          700: '{zinc.700}',
          800: '{zinc.800}',
          900: '{zinc.900}',
          950: '{zinc.950}',
        },
        primary: {
          color: '{primary.600}',
          contrastColor: '{surface.900}',
          hoverColor: '{primary.300}',
          activeColor: '{primary.200}',
        },
        highlight: {
          background: 'rgba(110,138,255,0.16)',
          focusBackground: 'rgba(110, 138, 255, 0.24)',
          color: 'rgba(255,255,255,0.87)',
          focusColor: 'rgba(255,255,255,0.87)',
        },
        mask: {
          background: 'rgba(0,0,0,0.6)',
          color: '{surface.200}',
        },
        formField: {
          background: '{surface.950}',
          disabledBackground: '{surface.700}',
          filledBackground: '{surface.800}',
          filledHoverBackground: '{surface.800}',
          filledFocusBackground: '{surface.800}',
          borderColor: '{surface.600}',
          hoverBorderColor: '{surface.500}',
          focusBorderColor: '{primary.color}',
          invalidBorderColor: '{red.300}',
          color: '{surface.0}',
          disabledColor: '{surface.400}',
          placeholderColor: '{surface.400}',
          invalidPlaceholderColor: '{red.400}',
          floatLabelColor: '{surface.400}',
          floatLabelFocusColor: '{surface.400}',
          floatLabelActiveColor: '{surface.400}',
          floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
          iconColor: '{surface.400}',
          shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)',
        },
        text: {
          color: '{surface.0}',
          hoverColor: '{surface.0}',
          mutedColor: '{surface.400}',
          hoverMutedColor: '{surface.300}',
        },
        content: {
          background: '{surface.900}',
          hoverBackground: '{surface.800}',
          borderColor: '{surface.700}',
          color: '{surface.50}',
          hoverColor: '{surface.50}',
        },
        overlay: {
          select: {
            background: '{surface.900}',
            borderColor: '{surface.700}',
            color: '{surface.0}',
          },
          popover: {
            background: '{surface.900}',
            borderColor: '{surface.700}',
            color: '{surface.0}',
          },
          modal: {
            background: '{surface.900}',
            borderColor: '{surface.700}',
            color: '{surface.0}',
          },
        },
        list: {
          option: {
            focusBackground: '{surface.800}',
            selectedBackground: '{highlight.background}',
            selectedFocusBackground: '{highlight.focus.background}',
            color: '{surface.0}',
            focusColor: '{text.hover.color}',
            selectedColor: '{highlight.color}',
            selectedFocusColor: '{highlight.focus.color}',
            icon: {
              color: '{surface.500}',
              focusColor: '{surface.400}',
            },
          },
          optionGroup: {
            background: 'transparent',
            color: '{text.muted.color}',
          },
        },
        navigation: {
          item: {
            focusBackground: '{surface.800}',
            activeBackground: '{surface.800}',
            color: '{surface.0}',
            focusColor: '{text.hover.color}',
            activeColor: '{text.hover.color}',
            icon: {
              color: '{surface.500}',
              focusColor: '{surface.400}',
              activeColor: '{surface.400}',
            },
          },
          submenuLabel: {
            background: 'transparent',
            color: '{text.muted.color}',
          },
          submenuIcon: {
            color: '{surface.500}',
            focusColor: '{surface.400}',
            activeColor: '{surface.400}',
          },
        },
      },
    },
  },
  components: {
    inlinemessage: {
      root: {
        padding: '{form.field.padding.y} {form.field.padding.x}',
        borderRadius: '{content.border.radius}',
        gap: '0.5rem',
      },
      text: {
        fontWeight: '500',
      },
      icon: {
        size: '1rem',
      },
      colorScheme: {
        light: {
          info: {
            background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
            borderColor: '{blue.200}',
            color: '{blue.600}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
          },
          success: {
            background: 'color-mix(in srgb, {green.50}, transparent 5%)',
            borderColor: '{green.200}',
            color: '{green.600}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
          },
          warn: {
            background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
            borderColor: '{yellow.200}',
            color: '{yellow.600}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
          },
          error: {
            background: 'color-mix(in srgb, {red.50}, transparent 5%)',
            borderColor: '{red.200}',
            color: '{red.600}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
          },
          secondary: {
            background: '{surface.100}',
            borderColor: '{surface.200}',
            color: '{surface.600}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
          },
          contrast: {
            background: '{surface.900}',
            borderColor: '{surface.950}',
            color: '{surface.50}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
          },
        },
        dark: {
          info: {
            background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
            borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
            color: '{blue.500}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
          },
          success: {
            background: 'color-mix(in srgb, {green.500}, transparent 84%)',
            borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
            color: '{green.500}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
          },
          warn: {
            background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
            borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
            color: '{yellow.500}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
          },
          error: {
            background: 'color-mix(in srgb, {red.500}, transparent 84%)',
            borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
            color: '{red.500}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
          },
          secondary: {
            background: '{surface.800}',
            borderColor: '{surface.700}',
            color: '{surface.300}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
          },
          contrast: {
            background: '{surface.0}',
            borderColor: '{surface.100}',
            color: '{surface.950}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
          },
        },
      },
    },
    inputchips: {
      root: {
        background: '{form.field.background}',
        disabledBackground: '{form.field.disabled.background}',
        filledBackground: '{form.field.filled.background}',
        filledFocusBackground: '{form.field.filled.focus.background}',
        borderColor: '{form.field.border.color}',
        hoverBorderColor: '{form.field.hover.border.color}',
        focusBorderColor: '{form.field.focus.border.color}',
        invalidBorderColor: '{form.field.invalid.border.color}',
        color: '{form.field.color}',
        disabledColor: '{form.field.disabled.color}',
        placeholderColor: '{form.field.placeholder.color}',
        shadow: '{form.field.shadow}',
        paddingX: '{form.field.padding.x}',
        paddingY: '{form.field.padding.y}',
        borderRadius: '{form.field.border.radius}',
        focusRing: {
          width: '{form.field.focus.ring.width}',
          style: '{form.field.focus.ring.style}',
          color: '{form.field.focus.ring.color}',
          offset: '{form.field.focus.ring.offset}',
          shadow: '{form.field.focus.ring.shadow}',
        },
        transitionDuration: '{form.field.transition.duration}',
      },
      chip: {
        borderRadius: '{border.radius.sm}',
      },
      colorScheme: {
        light: {
          chip: {
            focusBackground: '{surface.200}',
            color: '{surface.800}',
          },
        },
        dark: {
          chip: {
            focusBackground: '{surface.700}',
            color: '{surface.0}',
          },
        },
      },
    },
    overlaybadge: {
      root: {
        outline: {
          width: '2px',
          color: '{content.background}',
        },
      },
    },
    steps: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      separator: {
        background: '{content.border.color}',
      },
      itemLink: {
        borderRadius: '{content.border.radius}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
        gap: '0.5rem',
      },
      itemLabel: {
        color: '{text.muted.color}',
        activeColor: '{primary.color}',
        fontWeight: '500',
      },
      itemNumber: {
        background: '{content.background}',
        activeBackground: '{content.background}',
        borderColor: '{content.border.color}',
        activeBorderColor: '{content.border.color}',
        color: '{text.muted.color}',
        activeColor: '{primary.color}',
        size: '2rem',
        fontSize: '1.143rem',
        fontWeight: '500',
        borderRadius: '50%',
        shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)',
      },
    },
    tabmenu: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      tablist: {
        borderWidth: '0 0 1px 0',
        background: '{content.background}',
        borderColor: '{content.border.color}',
      },
      item: {
        background: 'transparent',
        hoverBackground: 'transparent',
        activeBackground: 'transparent',
        borderWidth: '0 0 1px 0',
        borderColor: '{content.border.color}',
        hoverBorderColor: '{content.border.color}',
        activeBorderColor: '{primary.color}',
        color: '{text.muted.color}',
        hoverColor: '{text.color}',
        activeColor: '{primary.color}',
        padding: '1rem 1.125rem',
        fontWeight: '600',
        margin: '0 0 -1px 0',
        gap: '0.5rem',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      itemIcon: {
        color: '{text.muted.color}',
        hoverColor: '{text.color}',
        activeColor: '{primary.color}',
      },
      activeBar: {
        height: '1px',
        bottom: '-1px',
        background: '{primary.color}',
      },
    },
    tabview: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      tabList: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
      },
      tab: {
        borderColor: '{content.border.color}',
        activeBorderColor: '{primary.color}',
        color: '{text.muted.color}',
        hoverColor: '{text.color}',
        activeColor: '{primary.color}',
      },
      tabPanel: {
        background: '{content.background}',
        color: '{content.color}',
      },
      navButton: {
        background: '{content.background}',
        color: '{text.muted.color}',
        hoverColor: '{text.color}',
      },
      colorScheme: {
        light: {
          navButton: {
            shadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)',
          },
        },
        dark: {
          navButton: {
            shadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)',
          },
        },
      },
    },
    button: {
      root: {
        borderRadius: '{form.field.border.radius}',
        roundedBorderRadius: '1.75rem',
        gap: '0.4375rem',
        paddingX: '{form.field.padding.x}',
        paddingY: '{form.field.padding.y}',
        iconOnlyWidth: '2.1875rem',
        sm: {
          fontSize: '0.765625rem',
          paddingX: '0.546875rem',
          paddingY: '0.328125rem',
          iconOnlyWidth: '1.75rem',
        },
        lg: {
          fontSize: '0.984375rem',
          paddingX: '0.765625rem',
          paddingY: '0.546875rem',
          iconOnlyWidth: '2.625rem',
        },
        label: {
          fontWeight: '500',
        },
        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)',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          offset: '{focus.ring.offset}',
        },
        badgeSize: '1rem',
        transitionDuration: '{form.field.transition.duration}',
      },
      colorScheme: {
        light: {
          root: {
            primary: {
              background: '{primary.color}',
              hoverBackground: '{primary.hover.color}',
              activeBackground: '{primary.active.color}',
              borderColor: '{primary.color}',
              hoverBorderColor: '{primary.hover.color}',
              activeBorderColor: '{primary.active.color}',
              color: '{primary.contrast.color}',
              hoverColor: '{primary.contrast.color}',
              activeColor: '{primary.contrast.color}',
              focusRing: {
                color: '{primary.color}',
                shadow: 'none',
              },
            },
            secondary: {
              background: '{surface.100}',
              hoverBackground: '{surface.200}',
              activeBackground: '{surface.300}',
              borderColor: '{surface.100}',
              hoverBorderColor: '{surface.200}',
              activeBorderColor: '{surface.300}',
              color: '{surface.600}',
              hoverColor: '{surface.700}',
              activeColor: '{surface.800}',
              focusRing: {
                color: '{surface.600}',
                shadow: 'none',
              },
            },
            info: {
              background: '{sky.500}',
              hoverBackground: '{sky.600}',
              activeBackground: '{sky.700}',
              borderColor: '{sky.500}',
              hoverBorderColor: '{sky.600}',
              activeBorderColor: '{sky.700}',
              color: '#ffffff',
              hoverColor: '#ffffff',
              activeColor: '#ffffff',
              focusRing: {
                color: '{sky.500}',
                shadow: 'none',
              },
            },
            success: {
              background: '{green.500}',
              hoverBackground: '{green.600}',
              activeBackground: '{green.700}',
              borderColor: '{green.500}',
              hoverBorderColor: '{green.600}',
              activeBorderColor: '{green.700}',
              color: '#ffffff',
              hoverColor: '#ffffff',
              activeColor: '#ffffff',
              focusRing: {
                color: '{green.500}',
                shadow: 'none',
              },
            },
            warn: {
              background: '{orange.500}',
              hoverBackground: '{orange.600}',
              activeBackground: '{orange.700}',
              borderColor: '{orange.500}',
              hoverBorderColor: '{orange.600}',
              activeBorderColor: '{orange.700}',
              color: '#ffffff',
              hoverColor: '#ffffff',
              activeColor: '#ffffff',
              focusRing: {
                color: '{orange.500}',
                shadow: 'none',
              },
            },
            help: {
              background: '{purple.500}',
              hoverBackground: '{purple.600}',
              activeBackground: '{purple.700}',
              borderColor: '{purple.500}',
              hoverBorderColor: '{purple.600}',
              activeBorderColor: '{purple.700}',
              color: '#ffffff',
              hoverColor: '#ffffff',
              activeColor: '#ffffff',
              focusRing: {
                color: '{purple.500}',
                shadow: 'none',
              },
            },
            danger: {
              background: '{red.500}',
              hoverBackground: '{red.600}',
              activeBackground: '{red.700}',
              borderColor: '{red.500}',
              hoverBorderColor: '{red.600}',
              activeBorderColor: '{red.700}',
              color: '#ffffff',
              hoverColor: '#ffffff',
              activeColor: '#ffffff',
              focusRing: {
                color: '{red.500}',
                shadow: 'none',
              },
            },
            contrast: {
              background: '{surface.950}',
              hoverBackground: '{surface.900}',
              activeBackground: '{surface.800}',
              borderColor: '{surface.950}',
              hoverBorderColor: '{surface.900}',
              activeBorderColor: '{surface.800}',
              color: '{surface.0}',
              hoverColor: '{surface.0}',
              activeColor: '{surface.0}',
              focusRing: {
                color: '{surface.950}',
                shadow: 'none',
              },
            },
          },
          outlined: {
            primary: {
              hoverBackground: '{primary.50}',
              activeBackground: '{primary.100}',
              borderColor: '{primary.200}',
              color: '{primary.color}',
            },
            secondary: {
              hoverBackground: '{surface.50}',
              activeBackground: '{surface.100}',
              borderColor: '{surface.200}',
              color: '{surface.500}',
            },
            info: {
              hoverBackground: '{sky.50}',
              activeBackground: '{sky.100}',
              borderColor: '{sky.200}',
              color: '{sky.500}',
            },
            success: {
              hoverBackground: '{green.50}',
              activeBackground: '{green.100}',
              borderColor: '{green.200}',
              color: '{green.500}',
            },
            warn: {
              hoverBackground: '{orange.50}',
              activeBackground: '{orange.100}',
              borderColor: '{orange.200}',
              color: '{orange.500}',
            },
            help: {
              hoverBackground: '{purple.50}',
              activeBackground: '{purple.100}',
              borderColor: '{purple.200}',
              color: '{purple.500}',
            },
            danger: {
              hoverBackground: '{red.50}',
              activeBackground: '{red.100}',
              borderColor: '{red.200}',
              color: '{red.500}',
            },
            contrast: {
              hoverBackground: '{surface.50}',
              activeBackground: '{surface.100}',
              borderColor: '{surface.700}',
              color: '{surface.950}',
            },
            plain: {
              hoverBackground: '{surface.50}',
              activeBackground: '{surface.100}',
              borderColor: '{surface.200}',
              color: '{surface.700}',
            },
          },
          text: {
            primary: {
              hoverBackground: '{primary.50}',
              activeBackground: '{primary.100}',
              color: '{primary.color}',
            },
            secondary: {
              hoverBackground: '{surface.50}',
              activeBackground: '{surface.100}',
              color: '{surface.500}',
            },
            info: {
              hoverBackground: '{sky.50}',
              activeBackground: '{sky.100}',
              color: '{sky.500}',
            },
            success: {
              hoverBackground: '{green.50}',
              activeBackground: '{green.100}',
              color: '{green.500}',
            },
            warn: {
              hoverBackground: '{orange.50}',
              activeBackground: '{orange.100}',
              color: '{orange.500}',
            },
            help: {
              hoverBackground: '{purple.50}',
              activeBackground: '{purple.100}',
              color: '{purple.500}',
            },
            danger: {
              hoverBackground: '{red.50}',
              activeBackground: '{red.100}',
              color: '{red.500}',
            },
            contrast: {
              hoverBackground: '{surface.50}',
              activeBackground: '{surface.100}',
              color: '{surface.950}',
            },
            plain: {
              hoverBackground: '{surface.50}',
              activeBackground: '{surface.100}',
              color: '{surface.700}',
            },
          },
          link: {
            color: '{primary.color}',
            hoverColor: '{primary.color}',
            activeColor: '{primary.color}',
          },
        },
        dark: {
          root: {
            primary: {
              background: '{primary.color}',
              hoverBackground: '{primary.hover.color}',
              activeBackground: '{primary.active.color}',
              borderColor: '{primary.color}',
              hoverBorderColor: '{primary.hover.color}',
              activeBorderColor: '{primary.active.color}',
              color: '{primary.contrast.color}',
              hoverColor: '{primary.contrast.color}',
              activeColor: '{primary.contrast.color}',
              focusRing: {
                color: '{primary.color}',
                shadow: 'none',
              },
            },
            secondary: {
              background: '{surface.800}',
              hoverBackground: '{surface.700}',
              activeBackground: '{surface.600}',
              borderColor: '{surface.800}',
              hoverBorderColor: '{surface.700}',
              activeBorderColor: '{surface.600}',
              color: '{surface.300}',
              hoverColor: '{surface.200}',
              activeColor: '{surface.100}',
              focusRing: {
                color: '{surface.300}',
                shadow: 'none',
              },
            },
            info: {
              background: '{sky.400}',
              hoverBackground: '{sky.300}',
              activeBackground: '{sky.200}',
              borderColor: '{sky.400}',
              hoverBorderColor: '{sky.300}',
              activeBorderColor: '{sky.200}',
              color: '{sky.950}',
              hoverColor: '{sky.950}',
              activeColor: '{sky.950}',
              focusRing: {
                color: '{sky.400}',
                shadow: 'none',
              },
            },
            success: {
              background: '{green.400}',
              hoverBackground: '{green.300}',
              activeBackground: '{green.200}',
              borderColor: '{green.400}',
              hoverBorderColor: '{green.300}',
              activeBorderColor: '{green.200}',
              color: '{green.950}',
              hoverColor: '{green.950}',
              activeColor: '{green.950}',
              focusRing: {
                color: '{green.400}',
                shadow: 'none',
              },
            },
            warn: {
              background: '{orange.400}',
              hoverBackground: '{orange.300}',
              activeBackground: '{orange.200}',
              borderColor: '{orange.400}',
              hoverBorderColor: '{orange.300}',
              activeBorderColor: '{orange.200}',
              color: '{orange.950}',
              hoverColor: '{orange.950}',
              activeColor: '{orange.950}',
              focusRing: {
                color: '{orange.400}',
                shadow: 'none',
              },
            },
            help: {
              background: '{purple.400}',
              hoverBackground: '{purple.300}',
              activeBackground: '{purple.200}',
              borderColor: '{purple.400}',
              hoverBorderColor: '{purple.300}',
              activeBorderColor: '{purple.200}',
              color: '{purple.950}',
              hoverColor: '{purple.950}',
              activeColor: '{purple.950}',
              focusRing: {
                color: '{purple.400}',
                shadow: 'none',
              },
            },
            danger: {
              background: '{red.400}',
              hoverBackground: '{red.300}',
              activeBackground: '{red.200}',
              borderColor: '{red.400}',
              hoverBorderColor: '{red.300}',
              activeBorderColor: '{red.200}',
              color: '{red.950}',
              hoverColor: '{red.950}',
              activeColor: '{red.950}',
              focusRing: {
                color: '{red.400}',
                shadow: 'none',
              },
            },
            contrast: {
              background: '{surface.0}',
              hoverBackground: '{surface.100}',
              activeBackground: '{surface.200}',
              borderColor: '{surface.0}',
              hoverBorderColor: '{surface.100}',
              activeBorderColor: '{surface.200}',
              color: '{surface.950}',
              hoverColor: '{surface.950}',
              activeColor: '{surface.950}',
              focusRing: {
                color: '{surface.0}',
                shadow: 'none',
              },
            },
          },
          outlined: {
            primary: {
              hoverBackground: 'rgba(110, 138, 255, 0.04)',
              activeBackground: 'rgba(110, 138, 255, 0.16)',
              borderColor: '{primary.700}',
              color: '{primary.color}',
            },
            secondary: {
              hoverBackground: 'rgba(255, 255, 255, 0.04)',
              activeBackground: 'rgba(255, 255, 255, 0.16)',
              borderColor: '{surface.700}',
              color: '{surface.400}',
            },
            info: {
              hoverBackground: 'rgba(56, 189, 248, 0.04)',
              activeBackground: 'rgba(56, 189, 248, 0.16)',
              borderColor: '{sky.700}',
              color: '{sky.400}',
            },
            success: {
              hoverBackground: 'rgba(74, 222, 128, 0.04)',
              activeBackground: 'rgba(74, 222, 128, 0.16)',
              borderColor: '{green.700}',
              color: '{green.400}',
            },
            warn: {
              hoverBackground: 'rgba(251, 146, 60, 0.04)',
              activeBackground: 'rgba(251, 146, 60, 0.16)',
              borderColor: '{orange.700}',
              color: '{orange.400}',
            },
            help: {
              hoverBackground: 'rgba(192, 132, 252, 0.04)',
              activeBackground: 'rgba(192, 132, 252, 0.16)',
              borderColor: '{purple.700}',
              color: '{purple.400}',
            },
            danger: {
              hoverBackground: 'rgba(248, 113, 113, 0.04)',
              activeBackground: 'rgba(248, 113, 113, 0.16)',
              borderColor: '{red.700}',
              color: '{red.400}',
            },
            contrast: {
              hoverBackground: '{surface.800}',
              activeBackground: '{surface.700}',
              borderColor: '{surface.500}',
              color: '{surface.0}',
            },
            plain: {
              hoverBackground: '{surface.800}',
              activeBackground: '{surface.700}',
              borderColor: '{surface.600}',
              color: '{surface.0}',
            },
          },
          text: {
            primary: {
              hoverBackground: 'rgba(110, 138, 255, 0.04)',
              activeBackground: 'rgba(52, 211, 153, 0.16)',
              color: '{primary.color}',
            },
            secondary: {
              hoverBackground: '{surface.800}',
              activeBackground: '{surface.700}',
              color: '{surface.400}',
            },
            info: {
              hoverBackground: 'rgba(56, 189, 248, 0.04)',
              activeBackground: 'rgba(56, 189, 248, 0.16)',
              color: '{sky.400}',
            },
            success: {
              hoverBackground: 'rgba(74, 222, 128, 0.04)',
              activeBackground: 'rgba(74, 222, 128, 0.16)',
              color: '{green.400}',
            },
            warn: {
              hoverBackground: 'rgba(251, 146, 60, 0.04)',
              activeBackground: 'rgba(251, 146, 60, 0.16)',
              color: '{orange.400}',
            },
            help: {
              hoverBackground: 'rgba(192, 132, 252, 0.04)',
              activeBackground: 'rgba(192, 132, 252, 0.16)',
              color: '{purple.400}',
            },
            danger: {
              hoverBackground: 'rgba(248, 113, 113, 0.04)',
              activeBackground: 'rgba(248, 113, 113, 0.16)',
              color: '{red.400}',
            },
            contrast: {
              hoverBackground: '{surface.800}',
              activeBackground: '{surface.700}',
              color: '{surface.0}',
            },
            plain: {
              hoverBackground: '{surface.800}',
              activeBackground: '{surface.700}',
              color: '{surface.0}',
            },
          },
          link: {
            color: '{primary.color}',
            hoverColor: '{primary.color}',
            activeColor: '{primary.color}',
          },
        },
      },
    },
    speeddial: {
      root: {
        gap: '0.4375rem',
        transitionDuration: '{transition.duration}',
      },
    },
    splitbutton: {
      root: {
        borderRadius: '{form.field.border.radius}',
        roundedBorderRadius: '1.75rem',
        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)',
      },
    },
    datatable: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      header: {
        background: '{content.background}',
        borderColor: '{datatable.border.color}',
        color: '{content.color}',
        borderWidth: '0 0 1px 0',
        padding: '0.75rem 1rem',
        sm: {
          padding: '0.375rem 0.5rem',
        },
        lg: {
          padding: '1rem 1.25rem',
        },
      },
      headerCell: {
        background: '{content.background}',
        hoverBackground: '{content.hover.background}',
        selectedBackground: '{highlight.background}',
        borderColor: '{datatable.border.color}',
        color: '{content.color}',
        hoverColor: '{content.hover.color}',
        selectedColor: '{highlight.color}',
        gap: '0.4375rem',
        padding: '0.75rem 1rem',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '-1px',
          shadow: '{focus.ring.shadow}',
        },
        sm: {
          padding: '0.375rem 0.5rem',
        },
        lg: {
          padding: '1rem 1.25rem',
        },
      },
      columnTitle: {
        fontWeight: '600',
      },
      row: {
        background: '{content.background}',
        hoverBackground: '{content.hover.background}',
        selectedBackground: '{highlight.background}',
        color: '{content.color}',
        hoverColor: '{content.hover.color}',
        selectedColor: '{highlight.color}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '-1px',
          shadow: '{focus.ring.shadow}',
        },
      },
      bodyCell: {
        borderColor: '{datatable.border.color}',
        padding: '0.75rem 1rem',
        sm: {
          padding: '0.375rem 0.5rem',
        },
        lg: {
          padding: '1rem 1.25rem',
        },
      },
      footerCell: {
        background: '{content.background}',
        borderColor: '{datatable.border.color}',
        color: '{content.color}',
        padding: '0.75rem 1rem',
        sm: {
          padding: '0.375rem 0.5rem',
        },
        lg: {
          padding: '1rem 1.25rem',
        },
      },
      columnFooter: {
        fontWeight: '600',
      },
      footer: {
        background: '{content.background}',
        borderColor: '{datatable.border.color}',
        color: '{content.color}',
        borderWidth: '0 0 1px 0',
        padding: '0.75rem 1rem',
        sm: {
          padding: '0.375rem 0.5rem',
        },
        lg: {
          padding: '1rem 1.25rem',
        },
      },
      dropPoint: {
        color: '{primary.color}',
      },
      columnResizer: {
        width: '0.4375rem',
      },
      resizeIndicator: {
        width: '1px',
        color: '{primary.color}',
      },
      sortIcon: {
        color: '{text.muted.color}',
        hoverColor: '{text.hover.muted.color}',
        size: '0.765625rem',
      },
      loadingIcon: {
        size: '1.75rem',
      },
      rowToggleButton: {
        hoverBackground: '{content.hover.background}',
        selectedHoverBackground: '{content.background}',
        color: '{text.muted.color}',
        hoverColor: '{surface.800}',
        selectedHoverColor: '{primary.color}',
        size: '1.53125rem',
        borderRadius: '50%',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      filter: {
        inlineGap: '0.4375rem',
        overlaySelect: {
          background: '{overlay.select.background}',
          borderColor: '{overlay.select.border.color}',
          borderRadius: '{overlay.select.border.radius}',
          color: '{overlay.select.color}',
          shadow: '{overlay.select.shadow}',
        },
        overlayPopover: {
          background: '{overlay.popover.background}',
          borderColor: '{overlay.popover.border.color}',
          borderRadius: '{overlay.popover.border.radius}',
          color: '{overlay.popover.color}',
          shadow: '{overlay.popover.shadow}',
          padding: '{overlay.popover.padding}',
          gap: '0.4375rem',
        },
        rule: {
          borderColor: '{content.border.color}',
        },
        constraintList: {
          padding: '{list.padding}',
          gap: '{list.gap}',
        },
        constraint: {
          focusBackground: '{list.option.focus.background}',
          selectedBackground: '{list.option.selected.background}',
          selectedFocusBackground: '{list.option.selected.focus.background}',
          color: '{list.option.color}',
          focusColor: '{list.option.focus.color}',
          selectedColor: '{list.option.selected.color}',
          selectedFocusColor: '{list.option.selected.focus.color}',
          separator: {
            borderColor: '{content.border.color}',
          },
          padding: '{list.option.padding}',
          borderRadius: '{list.option.border.radius}',
        },
      },
      paginatorTop: {
        borderColor: '{datatable.border.color}',
        borderWidth: '0 0 1px 0',
      },
      paginatorBottom: {
        borderColor: '{datatable.border.color}',
        borderWidth: '0 0 1px 0',
      },
      colorScheme: {
        light: {
          root: {
            borderColor: '{content.border.color}',
          },
          row: {
            stripedBackground: '{surface.50}',
          },
          bodyCell: {
            selectedBorderColor: '{primary.100}',
          },
        },
        dark: {
          root: {
            borderColor: '{surface.800}',
          },
          row: {
            stripedBackground: '{surface.950}',
          },
          bodyCell: {
            selectedBorderColor: '{primary.900}',
          },
        },
      },
      css: '\n    .p-datatable-mask.p-overlay-mask {\n        --px-mask-background: light-dark(rgba(255,255,255,0.5),rgba(0,0,0,0.3));\n    }\n',
    },
    dataview: {
      root: {
        borderColor: 'rgba(0, 0, 0, 0.00)',
        borderWidth: '0',
        borderRadius: '0',
        padding: '0',
      },
      header: {
        background: '{content.background}',
        color: '{content.color}',
        borderColor: '{content.border.color}',
        borderWidth: '0 0 1px 0',
        padding: '0.75rem 1rem',
        borderRadius: '0',
      },
      content: {
        background: '{content.background}',
        color: '{content.color}',
        borderColor: 'rgba(0, 0, 0, 0.00)',
        borderWidth: '0',
        padding: '0',
        borderRadius: '0',
      },
      footer: {
        background: '{content.background}',
        color: '{content.color}',
        borderColor: '{content.border.color}',
        borderWidth: '1px 0 0 0',
        padding: '0.75rem 1rem',
        borderRadius: '0',
      },
      paginatorTop: {
        borderColor: '{content.border.color}',
        borderWidth: '0 0 1px 0',
      },
      paginatorBottom: {
        borderColor: '{content.border.color}',
        borderWidth: '1px 0 0 0',
      },
    },
    orderlist: {
      root: {
        gap: '0.984375rem',
      },
      controls: {
        gap: '0.4375rem',
      },
    },
    organizationchart: {
      root: {
        gutter: '0.65625rem',
        transitionDuration: '{transition.duration}',
      },
      node: {
        background: '{content.background}',
        hoverBackground: '{content.hover.background}',
        selectedBackground: '{highlight.background}',
        borderColor: '{content.border.color}',
        color: '{content.color}',
        selectedColor: '{highlight.color}',
        hoverColor: '{content.hover.color}',
        padding: '0.75rem 1rem',
        toggleablePadding: '0.75rem 1rem 1.25rem 1rem',
        borderRadius: '{content.border.radius}',
      },
      nodeToggleButton: {
        background: '{content.background}',
        hoverBackground: '{content.hover.background}',
        borderColor: '{content.border.color}',
        color: '{text.muted.color}',
        hoverColor: '{surface.800}',
        size: '1.3125rem',
        borderRadius: '50%',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      connector: {
        color: '{content.border.color}',
        borderRadius: '{content.border.radius}',
        height: '24px',
      },
    },
    paginator: {
      root: {
        padding: '0.5rem 1rem',
        gap: '0.21875rem',
        borderRadius: '{content.border.radius}',
        background: '{content.background}',
        color: '{content.color}',
        transitionDuration: '{transition.duration}',
      },
      navButton: {
        background: 'rgba(0, 0, 0, 0.00)',
        hoverBackground: '{content.hover.background}',
        selectedBackground: '{highlight.background}',
        color: '{text.muted.color}',
        hoverColor: '{text.hover.muted.color}',
        selectedColor: '{highlight.color}',
        width: '2.1875rem',
        height: '2.1875rem',
        borderRadius: '50%',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      currentPageReport: {
        color: '{text.muted.color}',
      },
      jumpToPageInput: {
        maxWidth: '2.1875rem',
      },
    },
    picklist: {
      root: {
        gap: '0.984375rem',
      },
      controls: {
        gap: '0.4375rem',
      },
    },
    timeline: {
      event: {
        minHeight: '4.375rem',
      },
      horizontal: {
        eventContent: {
          padding: '1rem 0',
        },
      },
      vertical: {
        eventContent: {
          padding: '0 1rem',
        },
      },
      eventMarker: {
        size: '0.984375rem',
        borderRadius: '7.875px',
        borderWidth: '2px',
        background: '{content.background}',
        borderColor: '{content.border.color}',
        content: {
          borderRadius: '2.625px',
          size: '0.328125rem',
          background: '{primary.color}',
          insetShadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)',
        },
      },
      eventConnector: {
        color: '{content.border.color}',
        size: '2px',
      },
    },
    tree: {
      root: {
        background: '{content.background}',
        color: '{content.color}',
        padding: '0.875rem',
        gap: '2px',
        indent: '0.875rem',
        transitionDuration: '{transition.duration}',
      },
      node: {
        padding: '0.25rem 0.5rem',
        borderRadius: '{content.border.radius}',
        hoverBackground: '{content.hover.background}',
        selectedBackground: '{highlight.background}',
        color: '{surface.800}',
        hoverColor: '{text.hover.color}',
        selectedColor: '{highlight.color}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '-1px',
          shadow: '{focus.ring.shadow}',
        },
        gap: '0.21875rem',
      },
      nodeIcon: {
        color: '{text.muted.color}',
        hoverColor: '{text.hover.muted.color}',
        selectedColor: '{highlight.color}',
      },
      nodeToggleButton: {
        borderRadius: '12.25px',
        size: '1.53125rem',
        hoverBackground: '{content.hover.background}',
        selectedHoverBackground: '{content.background}',
        color: '{text.muted.color}',
        hoverColor: '{text.hover.muted.color}',
        selectedHoverColor: '{primary.color}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      loadingIcon: {
        size: '1.75rem',
      },
      filter: {
        margin: '0 0 0.5rem 0',
      },
      css: '\n    .p-tree-mask.p-overlay-mask {\n        --px-mask-background: light-dark(rgba(255,255,255,0.5),rgba(0,0,0,0.3));\n    }\n',
    },
    treetable: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      header: {
        background: '{content.background}',
        borderColor: '{treetable.border.color}',
        color: '{content.color}',
        borderWidth: '0 0 1px 0',
        padding: '0.75rem 1rem',
      },
      headerCell: {
        background: '{content.background}',
        hoverBackground: '{content.hover.background}',
        selectedBackground: '{highlight.background}',
        borderColor: '{treetable.border.color}',
        color: '{content.color}',
        hoverColor: '{content.hover.color}',
        selectedColor: '{highlight.color}',
        gap: '0.5rem',
        padding: '0.75rem 1rem',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '-1px',
          shadow: '{focus.ring.shadow}',
        },
      },
      columnTitle: {
        fontWeight: '600',
      },
      row: {
        background: '{content.background}',
        hoverBackground: '{content.hover.background}',
        selectedBackground: '{highlight.background}',
        color: '{content.color}',
        hoverColor: '{content.hover.color}',
        selectedColor: '{highlight.color}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '-1px',
          shadow: '{focus.ring.shadow}',
        },
      },
      bodyCell: {
        borderColor: '{treetable.border.color}',
        padding: '0.75rem 1rem',
        gap: '0.5rem',
      },
      footerCell: {
        background: '{content.background}',
        borderColor: '{treetable.border.color}',
        color: '{content.color}',
        padding: '0.75rem 1rem',
      },
      columnFooter: {
        fontWeight: '600',
      },
      footer: {
        background: '{content.background}',
        borderColor: '{treetable.border.color}',
        color: '{content.color}',
        borderWidth: '0 0 1px 0',
        padding: '0.75rem 1rem',
      },
      columnResizer: {
        width: '0.5rem',
      },
      resizeIndicator: {
        width: '1px',
        color: '{primary.color}',
      },
      sortIcon: {
        color: '{text.muted.color}',
        hoverColor: '{text.hover.muted.color}',
        size: '0.875rem',
      },
      loadingIcon: {
        size: '2rem',
      },
      nodeToggleButton: {
        hoverBackground: '{content.hover.background}',
        selectedHoverBackground: '{content.background}',
        color: '{text.muted.color}',
        hoverColor: '{surface.800}',
        selectedHoverColor: '{primary.color}',
        size: '1.75rem',
        borderRadius: '50%',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      paginatorTop: {
        borderColor: '{content.border.color}',
        borderWidth: '0 0 1px 0',
      },
      paginatorBottom: {
        borderColor: '{content.border.color}',
        borderWidth: '0 0 1px 0',
      },
      colorScheme: {
        light: {
          root: {
            borderColor: '{content.border.color}',
          },
          bodyCell: {
            selectedBorderColor: '{primary.100}',
          },
        },
        dark: {
          root: {
            borderColor: '{surface.800}',
          },
          bodyCell: {
            selectedBorderColor: '{primary.900}',
          },
        },
      },
      css: '\n    .p-treetable-mask.p-overlay-mask {\n        --px-mask-background: light-dark(rgba(255,255,255,0.5),rgba(0,0,0,0.3));\n    }\n',
    },
    virtualscroller: {
      loader: {
        mask: {
          background: '{content.background}',
          color: '{text.muted.color}',
        },
        icon: {
          size: '1.75rem',
        },
      },
    },
    fileupload: {
      root: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        color: '{content.color}',
        borderRadius: '{content.border.radius}',
        transitionDuration: '{transition.duration}',
      },
      header: {
        background: 'rgba(0, 0, 0, 0.00)',
        color: '{surface.800}',
        padding: '0.984375rem',
        borderColor: 'rgba(0, 0, 0, 0.00)',
        borderWidth: '0',
        borderRadius: '0',
        gap: '0.4375rem',
      },
      content: {
        highlightBorderColor: '{primary.color}',
        padding: '0 1.125rem 1.125rem 1.125rem',
        gap: '0.875rem',
      },
      file: {
        padding: '1rem',
        gap: '0.875rem',
        borderColor: '{content.border.color}',
        info: {
          gap: '0.4375rem',
        },
      },
      fileList: {
        gap: '0.4375rem',
      },
      progressbar: {
        height: '0.21875rem',
      },
      basic: {
        gap: '0.4375rem',
      },
    },
    autocomplete: {
      root: {
        background: '{surface.0}',
        disabledBackground: '{surface.200}',
        filledBackground: '{surface.50}',
        filledHoverBackground: '{surface.50}',
        filledFocusBackground: '{surface.50}',
        borderColor: '{surface.300}',
        hoverBorderColor: '{surface.400}',
        focusBorderColor: '{primary.color}',
        invalidBorderColor: '{red.400}',
        color: '{surface.700}',
        disabledColor: '{surface.500}',
        placeholderColor: '{surface.500}',
        invalidPlaceholderColor: '{red.600}',
        shadow: '{form.field.shadow}',
        paddingX: '0.65625rem',
        paddingY: '0.4375rem',
        borderRadius: '{border.radius.md}',
        focusRing: {
          width: '0',
          style: '{form.field.focus.ring.style}',
          color: 'rgba(0, 0, 0, 0.00)',
          offset: '0',
          shadow: '{form.field.focus.ring.shadow}',
        },
        transitionDuration: '{form.field.transition.duration}',
      },
      overlay: {
        background: '{overlay.select.background}',
        borderColor: '{overlay.select.border.color}',
        borderRadius: '{overlay.select.border.radius}',
        color: '{overlay.select.color}',
        shadow: '{overlay.select.shadow}',
      },
      list: {
        padding: '{list.padding}',
        gap: '{list.gap}',
      },
      option: {
        focusBackground: '{list.option.focus.background}',
        selectedBackground: '{list.option.selected.background}',
        selectedFocusBackground: '{list.option.selected.focus.background}',
        color: '{list.option.color}',
        focusColor: '{list.option.focus.color}',
        selectedColor: '{list.option.selected.color}',
        selectedFocusColor: '{list.option.selected.focus.color}',
        padding: '{list.option.padding}',
        borderRadius: '{list.option.border.radius}',
      },
      optionGroup: {
        background: '{list.option.group.background}',
        color: '{list.option.group.color}',
        fontWeight: '{list.option.group.font.weight}',
        padding: '{list.option.group.padding}',
      },
      dropdown: {
        width: '2.1875rem',
        sm: {
          width: '1.75rem',
        },
        lg: {
          width: '2.625rem',
        },
        borderColor: '{form.field.border.color}',
        hoverBorderColor: '{form.field.border.color}',
        activeBorderColor: '{form.field.border.color}',
        borderRadius: '{form.field.border.radius}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      chip: {
        borderRadius: '{border.radius.sm}',
      },
      emptyMessage: {
        padding: '{list.option.padding}',
      },
      colorScheme: {
        light: {
          chip: {
            focusBackground: '{surface.200}',
            focusColor: '{surface.800}',
          },
          dropdown: {
            background: '{surface.100}',
            hoverBackground: '{surface.200}',
            activeBackground: '{surface.300}',
            color: '{surface.600}',
            hoverColor: '{surface.700}',
            activeColor: '{surface.800}',
          },
        },
        dark: {
          chip: {
            focusBackground: '{surface.700}',
            focusColor: '{surface.0}',
          },
          dropdown: {
            background: '{surface.800}',
            hoverBackground: '{surface.700}',
            activeBackground: '{surface.600}',
            color: '{surface.300}',
            hoverColor: '{surface.200}',
            activeColor: '{surface.100}',
          },
        },
      },
    },
    cascadeselect: {
      root: {
        background: '{form.field.background}',
        disabledBackground: '{form.field.disabled.background}',
        filledBackground: '{form.field.filled.background}',
        filledHoverBackground: '{form.field.filled.hover.background}',
        filledFocusBackground: '{form.field.filled.focus.background}',
        borderColor: '{form.field.border.color}',
        hoverBorderColor: '{form.field.hover.border.color}',
        focusBorderColor: '{form.field.focus.border.color}',
        invalidBorderColor: '{form.field.invalid.border.color}',
        color: '{form.field.color}',
        disabledColor: '{form.field.disabled.color}',
        placeholderColor: '{form.field.placeholder.color}',
        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
        shadow: '{form.field.shadow}',
        paddingX: '{form.field.padding.x}',
        paddingY: '{form.field.padding.y}',
        borderRadius: '{form.field.border.radius}',
        focusRing: {
          width: '{form.field.focus.ring.width}',
          style: '{form.field.focus.ring.style}',
          color: '{form.field.focus.ring.color}',
          offset: '{form.field.focus.ring.offset}',
          shadow: '{form.field.focus.ring.shadow}',
        },
        transitionDuration: '{form.field.transition.duration}',
        sm: {
          fontSize: '{form.field.sm.font.size}',
          paddingX: '{form.field.sm.padding.x}',
          paddingY: '{form.field.sm.padding.y}',
        },
        lg: {
          fontSize: '{form.field.lg.font.size}',
          paddingX: '{form.field.lg.padding.x}',
          paddingY: '{form.field.lg.padding.y}',
        },
      },
      dropdown: {
        width: '2.1875rem',
        color: '{form.field.icon.color}',
      },
      overlay: {
        background: '{overlay.select.background}',
        borderColor: '{overlay.select.border.color}',
        borderRadius: '{overlay.select.border.radius}',
        color: '{overlay.select.color}',
        shadow: '{overlay.select.shadow}',
      },
      list: {
        padding: '{list.padding}',
        gap: '2px',
        mobileIndent: '0.875rem',
      },
      option: {
        focusBackground: '{list.option.focus.background}',
        selectedBackground: '{list.option.selected.background}',
        selectedFocusBackground: '{list.option.selected.focus.background}',
        color: '{list.option.color}',
        focusColor: '{list.option.focus.color}',
        selectedColor: '{list.option.selected.color}',
        selectedFocusColor: '{list.option.selected.focus.color}',
        padding: '{list.option.padding}',
        borderRadius: '{list.option.border.radius}',
        icon: {
          color: '{list.option.icon.color}',
          focusColor: '{list.option.icon.focus.color}',
          size: '0.765625rem',
        },
      },
      clearIcon: {
        color: '{form.field.icon.color}',
      },
    },
    checkbox: {
      root: {
        borderRadius: '{border.radius.sm}',
        width: '1.09375rem',
        height: '1.09375rem',
        background: '{form.field.background}',
        checkedBackground: '{primary.color}',
        checkedHoverBackground: '{primary.hover.color}',
        disabledBackground: '{form.field.disabled.background}',
        filledBackground: '{form.field.filled.background}',
        borderColor: '{form.field.border.color}',
        hoverBorderColor: '{form.field.hover.border.color}',
        focusBorderColor: '{form.field.border.color}',
        checkedBorderColor: '{primary.color}',
        checkedHoverBorderColor: '{primary.hover.color}',
        checkedFocusBorderColor: '{primary.color}',
        checkedDisabledBorderColor: '{form.field.border.color}',
        invalidBorderColor: '{form.field.invalid.border.color}',
        shadow: '{form.field.shadow}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
        transitionDuration: '{form.field.transition.duration}',
        sm: {
          width: '0.875rem',
          height: '0.875rem',
        },
        lg: {
          width: '1.3125rem',
          height: '1.3125rem',
        },
      },
      icon: {
        size: '0.765625rem',
        color: '{form.field.color}',
        checkedColor: '{primary.contrast.color}',
        checkedHoverColor: '{primary.contrast.color}',
        disabledColor: '{form.field.disabled.color}',
        sm: {
          size: '0.65625rem',
        },
        lg: {
          size: '0.875rem',
        },
      },
    },
    colorpicker: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      preview: {
        width: '1.3125rem',
        height: '1.3125rem',
        borderRadius: '{form.field.border.radius}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      panel: {
        shadow: '{overlay.popover.shadow}',
        borderRadius: '{border.radius.md}',
      },
      colorScheme: {
        light: {
          panel: {
            background: '{surface.800}',
            borderColor: '{surface.900}',
          },
          handle: {
            color: '{surface.0}',
          },
        },
        dark: {
          panel: {
            background: '{surface.900}',
            borderColor: '{surface.700}',
          },
          handle: {
            color: '{surface.0}',
          },
        },
      },
    },
    datepicker: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      panel: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        color: '{content.color}',
        borderRadius: '{content.border.radius}',
        shadow: '{overlay.popover.shadow}',
        padding: '{overlay.popover.padding}',
      },
      header: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        color: '{content.color}',
        padding: '0 0 0.5rem 0',
      },
      title: {
        gap: '0.4375rem',
        fontWeight: '500',
      },
      dropdown: {
        width: '2.1875rem',
        sm: {
          width: '1.75rem',
        },
        lg: {
          width: '2.625rem',
        },
        borderColor: '{form.field.border.color}',
        hoverBorderColor: '{form.field.border.color}',
        activeBorderColor: '{form.field.border.color}',
        borderRadius: '{form.field.border.radius}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      inputIcon: {
        color: '{form.field.icon.color}',
      },
      selectMonth: {
        hoverBackground: '{content.hover.background}',
        color: '{content.color}',
        hoverColor: '{content.hover.color}',
        borderRadius: '{content.border.radius}',
        padding: '0.25rem 0.5rem',
      },
      selectYear: {
        hoverBackground: '{content.hover.background}',
        color: '{content.color}',
        hoverColor: '{content.hover.color}',
        borderRadius: '{content.border.radius}',
        padding: '0.25rem 0.5rem',
      },
      group: {
        borderColor: '{content.border.color}',
        gap: '{overlay.popover.padding}',
      },
      dayView: {
        margin: '0.5rem 0 0 0',
      },
      weekDay: {
        padding: '0.21875rem',
        fontWeight: '500',
        color: '{content.color}',
      },
      date: {
        hoverBackground: '{content.hover.background}',
        selectedBackground: '{primary.color}',
        rangeSelectedBackground: '{highlight.background}',
        color: '{content.color}',
        hoverColor: '{content.hover.color}',
        selectedColor: '{primary.contrast.color}',
        rangeSelectedColor: '{highlight.color}',
        width: '1.75rem',
        height: '1.75rem',
        borderRadius: '14px',
        padding: '0.21875rem',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      month: {
        padding: '0.328125rem',
        borderRadius: '{content.border.radius}',
      },
      monthView: {
        margin: '0.5rem 0 0 0',
      },
      yearView: {
        margin: '0.5rem 0 0 0',
      },
      year: {
        padding: '0.328125rem',
        borderRadius: '{content.border.radius}',
      },
      buttonbar: {
        borderColor: '{content.border.color}',
        padding: '0.5rem 0 0 0',
      },
      timePicker: {
        borderColor: '{content.border.color}',
        gap: '0.4375rem',
        buttonGap: '0.21875rem',
        padding: '0.5rem 0 0 0',
      },
      colorScheme: {
        light: {
          dropdown: {
            background: '{surface.100}',
            hoverBackground: '{surface.200}',
            activeBackground: '{surface.300}',
            color: '{surface.600}',
            hoverColor: '{surface.700}',
            activeColor: '{surface.800}',
          },
          today: {
            background: '{surface.200}',
            color: '{surface.900}',
          },
        },
        dark: {
          dropdown: {
            background: '{surface.800}',
            hoverBackground: '{surface.700}',
            activeBackground: '{surface.600}',
            color: '{surface.300}',
            hoverColor: '{surface.200}',
            activeColor: '{surface.100}',
          },
          today: {
            background: '{surface.700}',
            color: '{surface.0}',
          },
        },
      },
    },
    editor: {
      toolbar: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        borderRadius: '{content.border.radius}',
      },
      toolbarItem: {
        color: '{text.muted.color}',
        hoverColor: '{surface.800}',
        activeColor: '{primary.color}',
      },
      overlay: {
        background: '{overlay.select.background}',
        borderColor: '{overlay.select.border.color}',
        borderRadius: '{overlay.select.border.radius}',
        color: '{overlay.select.color}',
        shadow: '{overlay.select.shadow}',
        padding: '{list.padding}',
      },
      overlayOption: {
        focusBackground: '{list.option.focus.background}',
        color: '{list.option.color}',
        focusColor: '{list.option.focus.color}',
        padding: '{list.option.padding}',
        borderRadius: '{list.option.border.radius}',
      },
      content: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        color: '{content.color}',
        borderRadius: '{content.border.radius}',
      },
    },
    floatlabel: {
      root: {
        color: '{form.field.float.label.color}',
        focusColor: '{form.field.float.label.focus.color}',
        activeColor: '{form.field.float.label.active.color}',
        invalidColor: '{form.field.float.label.invalid.color}',
        transitionDuration: '0.2s',
        positionX: '{form.field.padding.x}',
        positionY: '{form.field.padding.y}',
        fontWeight: '500',
        active: {
          fontSize: '0.65625rem',
          fontWeight: '400',
        },
      },
      over: {
        active: {
          top: '-1.09375rem',
        },
      },
      in: {
        input: {
          paddingTop: '1.3125rem',
          paddingBottom: '0.4375rem',
        },
        active: {
          top: '0.4375rem',
        },
      },
      on: {
        borderRadius: '0.125rem',
        active: {
          background: '{form.field.background}',
          padding: '0 0.125rem',
        },
      },
    },
    iconfield: {
      icon: {
        color: '{form.field.icon.color}',
      },
    },
    iftalabel: {
      root: {
        color: '{form.field.float.label.color}',
        focusColor: '{form.field.float.label.focus.color}',
        invalidColor: '{form.field.float.label.invalid.color}',
        transitionDuration: '0.2s',
        positionX: '{form.field.padding.x}',
        top: '{form.field.padding.y}',
        fontSize: '0.65625rem',
        fontWeight: '400',
      },
      input: {
        paddingTop: '1.3125rem',
        paddingBottom: '{form.field.padding.y}',
      },
    },
    inputgroup: {
      addon: {
        background: '{form.field.background}',
        borderColor: '{form.field.border.color}',
        color: '{form.field.icon.color}',
        borderRadius: '{form.field.border.radius}',
        padding: '0.4375rem',
        minWidth: '2.1875rem',
      },
    },
    inputnumber: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      button: {
        width: '2.1875rem',
        borderRadius: '{form.field.border.radius}',
        verticalPadding: '{form.field.padding.y}',
      },
      colorScheme: {
        light: {
          button: {
            background: 'rgba(0, 0, 0, 0.00)',
            hoverBackground: '{surface.100}',
            activeBackground: '{surface.200}',
            borderColor: '{form.field.border.color}',
            hoverBorderColor: '{form.field.border.color}',
            activeBorderColor: '{form.field.border.color}',
            color: '{surface.400}',
            hoverColor: '{surface.500}',
            activeColor: '{surface.600}',
          },
        },
        dark: {
          button: {
            background: 'rgba(0, 0, 0, 0.00)',
            hoverBackground: '{surface.800}',
            activeBackground: '{surface.700}',
            borderColor: '{form.field.border.color}',
            hoverBorderColor: '{form.field.border.color}',
            activeBorderColor: '{form.field.border.color}',
            color: '{surface.400}',
            hoverColor: '{surface.300}',
            activeColor: '{surface.200}',
          },
        },
      },
    },
    inputotp: {
      root: {
        gap: '0.4375rem',
      },
      input: {
        width: '2.1875rem',
        sm: {
          width: '1.75rem',
        },
        lg: {
          width: '2.625rem',
        },
      },
    },
    inputtext: {
      root: {
        background: '{form.field.background}',
        disabledBackground: '{form.field.disabled.background}',
        filledBackground: '{form.field.filled.background}',
        filledHoverBackground: '{form.field.filled.hover.background}',
        filledFocusBackground: '{form.field.filled.focus.background}',
        borderColor: '{form.field.border.color}',
        hoverBorderColor: '{form.field.hover.border.color}',
        focusBorderColor: '{form.field.focus.border.color}',
        invalidBorderColor: '{form.field.invalid.border.color}',
        color: '{form.field.color}',
        disabledColor: '{form.field.disabled.color}',
        placeholderColor: '{form.field.placeholder.color}',
        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
        shadow: '{form.field.shadow}',
        paddingX: '{form.field.padding.x}',
        paddingY: '{form.field.padding.y}',
        borderRadius: '{form.field.border.radius}',
        focusRing: {
          width: '{form.field.focus.ring.width}',
          style: '{form.field.focus.ring.style}',
          color: '{form.field.focus.ring.color}',
          offset: '{form.field.focus.ring.offset}',
          shadow: '{form.field.focus.ring.shadow}',
        },
        transitionDuration: '{form.field.transition.duration}',
        sm: {
          fontSize: '0.765625rem',
          paddingX: '{form.field.sm.padding.x}',
          paddingY: '{form.field.sm.padding.y}',
        },
        lg: {
          fontSize: '0.984375rem',
          paddingX: '{form.field.lg.padding.x}',
          paddingY: '{form.field.lg.padding.y}',
        },
      },
    },
    knob: {
      root: {
        transitionDuration: '{transition.duration}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      value: {
        background: '{primary.color}',
      },
      range: {
        background: '{content.border.color}',
      },
      text: {
        color: '{text.muted.color}',
      },
    },
    listbox: {
      root: {
        background: '{form.field.background}',
        disabledBackground: '{form.field.disabled.background}',
        borderColor: '{form.field.border.color}',
        invalidBorderColor: '{form.field.invalid.border.color}',
        color: '{form.field.color}',
        disabledColor: '{form.field.disabled.color}',
        shadow: '{form.field.shadow}',
        borderRadius: '{form.field.border.radius}',
        transitionDuration: '{form.field.transition.duration}',
      },
      list: {
        padding: '{list.padding}',
        gap: '2px',
        header: {
          padding: '{list.header.padding}',
        },
      },
      option: {
        focusBackground: '{list.option.focus.background}',
        selectedBackground: '{list.option.selected.background}',
        selectedFocusBackground: '{list.option.selected.focus.background}',
        color: '{list.option.color}',
        focusColor: '{list.option.focus.color}',
        selectedColor: '{list.option.selected.color}',
        selectedFocusColor: '{list.option.selected.focus.color}',
        padding: '{list.option.padding}',
        borderRadius: '{list.option.border.radius}',
      },
      optionGroup: {
        background: '{list.option.group.background}',
        color: '{list.option.group.color}',
        fontWeight: '{list.option.group.font.weight}',
        padding: '{list.option.group.padding}',
      },
      checkmark: {
        color: '{list.option.color}',
        gutterStart: '-0.328125rem',
        gutterEnd: '0.328125rem',
      },
      emptyMessage: {
        padding: '{list.option.padding}',
      },
      colorScheme: {
        light: {
          option: {
            stripedBackground: '{surface.50}',
          },
        },
        dark: {
          option: {
            stripedBackground: '{surface.900}',
          },
        },
      },
    },
    multiselect: {
      root: {
        background: '{form.field.background}',
        disabledBackground: '{form.field.disabled.background}',
        filledBackground: '{form.field.filled.background}',
        filledHoverBackground: '{form.field.filled.hover.background}',
        filledFocusBackground: '{form.field.filled.focus.background}',
        borderColor: '{form.field.border.color}',
        hoverBorderColor: '{form.field.hover.border.color}',
        focusBorderColor: '{form.field.focus.border.color}',
        invalidBorderColor: '{form.field.invalid.border.color}',
        color: '{form.field.color}',
        disabledColor: '{form.field.disabled.color}',
        placeholderColor: '{form.field.placeholder.color}',
        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
        shadow: '{form.field.shadow}',
        paddingX: '{form.field.padding.x}',
        paddingY: '{form.field.padding.y}',
        borderRadius: '{form.field.border.radius}',
        focusRing: {
          width: '{form.field.focus.ring.width}',
          style: '{form.field.focus.ring.style}',
          color: '{form.field.focus.ring.color}',
          offset: '{form.field.focus.ring.offset}',
          shadow: '{form.field.focus.ring.shadow}',
        },
        transitionDuration: '{form.field.transition.duration}',
        sm: {
          fontSize: '{form.field.sm.font.size}',
          paddingX: '{form.field.sm.padding.x}',
          paddingY: '{form.field.sm.padding.y}',
        },
        lg: {
          fontSize: '{form.field.lg.font.size}',
          paddingX: '{form.field.lg.padding.x}',
          paddingY: '{form.field.lg.padding.y}',
        },
      },
      dropdown: {
        width: '2.1875rem',
        color: '{form.field.icon.color}',
      },
      overlay: {
        background: '{overlay.select.background}',
        borderColor: '{overlay.select.border.color}',
        borderRadius: '{overlay.select.border.radius}',
        color: '{overlay.select.color}',
        shadow: '{overlay.select.shadow}',
      },
      list: {
        padding: '{list.padding}',
        gap: '{list.gap}',
        header: {
          padding: '{list.header.padding}',
        },
      },
      option: {
        focusBackground: '{list.option.focus.background}',
        selectedBackground: '{list.option.selected.background}',
        selectedFocusBackground: '{list.option.selected.focus.background}',
        color: '{list.option.color}',
        focusColor: '{list.option.focus.color}',
        selectedColor: '{list.option.selected.color}',
        selectedFocusColor: '{list.option.selected.focus.color}',
        padding: '{list.option.padding}',
        borderRadius: '{list.option.border.radius}',
        gap: '0.4375rem',
      },
      optionGroup: {
        background: '{list.option.group.background}',
        color: '{list.option.group.color}',
        fontWeight: '{list.option.group.font.weight}',
        padding: '{list.option.group.padding}',
      },
      chip: {
        borderRadius: '{border.radius.sm}',
      },
      clearIcon: {
        color: '{form.field.icon.color}',
      },
      emptyMessage: {
        padding: '{list.option.padding}',
      },
    },
    password: {
      meter: {
        background: '{content.border.color}',
        borderRadius: '{content.border.radius}',
        height: '0.65625rem',
      },
      icon: {
        color: '{form.field.icon.color}',
      },
      overlay: {
        background: '{overlay.popover.background}',
        borderColor: '{overlay.popover.border.color}',
        borderRadius: '{overlay.popover.border.radius}',
        color: '{overlay.popover.color}',
        padding: '{overlay.popover.padding}',
        shadow: '{overlay.popover.shadow}',
      },
      content: {
        gap: '0.4375rem',
      },
      colorScheme: {
        light: {
          strength: {
            weakBackground: '{red.500}',
            mediumBackground: '{amber.500}',
            strongBackground: '{green.500}',
          },
        },
        dark: {
          strength: {
            weakBackground: '{red.400}',
            mediumBackground: '{amber.400}',
            strongBackground: '{green.400}',
          },
        },
      },
    },
    radiobutton: {
      root: {
        width: '1.09375rem',
        height: '1.09375rem',
        background: '{form.field.background}',
        checkedBackground: '{primary.color}',
        checkedHoverBackground: '{primary.hover.color}',
        disabledBackground: '{form.field.disabled.background}',
        filledBackground: '{form.field.filled.background}',
        borderColor: '{form.field.border.color}',
        hoverBorderColor: '{form.field.hover.border.color}',
        focusBorderColor: '{form.field.border.color}',
        checkedBorderColor: '{primary.color}',
        checkedHoverBorderColor: '{primary.hover.color}',
        checkedFocusBorderColor: '{primary.color}',
        checkedDisabledBorderColor: '{form.field.border.color}',
        invalidBorderColor: '{form.field.invalid.border.color}',
        shadow: '{form.field.shadow}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
        transitionDuration: '{form.field.transition.duration}',
        sm: {
          width: '0.875rem',
          height: '0.875rem',
        },
        lg: {
          width: '1.3125rem',
          height: '1.3125rem',
        },
      },
      icon: {
        size: '0.65625rem',
        checkedColor: '{primary.contrast.color}',
        checkedHoverColor: '{primary.contrast.color}',
        disabledColor: '{form.field.disabled.color}',
        sm: {
          size: '0.4375rem',
        },
        lg: {
          size: '0.875rem',
        },
      },
    },
    rating: {
      root: {
        gap: '0.21875rem',
        transitionDuration: '{transition.duration}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      icon: {
        size: '0.875rem',
        color: '{text.muted.color}',
        hoverColor: '{primary.color}',
        activeColor: '{primary.color}',
      },
    },
    select: {
      root: {
        background: '{form.field.background}',
        disabledBackground: '{form.field.disabled.background}',
        filledBackground: '{form.field.filled.background}',
        filledHoverBackground: '{form.field.filled.hover.background}',
        filledFocusBackground: '{form.field.filled.focus.background}',
        borderColor: '{form.field.border.color}',
        hoverBorderColor: '{form.field.hover.border.color}',
        focusBorderColor: '{form.field.focus.border.color}',
        invalidBorderColor: '{form.field.invalid.border.color}',
        color: '{form.field.color}',
        disabledColor: '{form.field.disabled.color}',
        placeholderColor: '{form.field.placeholder.color}',
        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
        shadow: '{form.field.shadow}',
        paddingX: '{form.field.padding.x}',
        paddingY: '{form.field.padding.y}',
        borderRadius: '{form.field.border.radius}',
        focusRing: {
          width: '{form.field.focus.ring.width}',
          style: '{form.field.focus.ring.style}',
          color: '{form.field.focus.ring.color}',
          offset: '{form.field.focus.ring.offset}',
          shadow: '{form.field.focus.ring.shadow}',
        },
        transitionDuration: '{form.field.transition.duration}',
        sm: {
          fontSize: '{form.field.sm.font.size}',
          paddingX: '{form.field.sm.padding.x}',
          paddingY: '{form.field.sm.padding.y}',
        },
        lg: {
          fontSize: '{form.field.lg.font.size}',
          paddingX: '{form.field.lg.padding.x}',
          paddingY: '{form.field.lg.padding.y}',
        },
      },
      dropdown: {
        width: '2.1875rem',
        color: '{form.field.icon.color}',
      },
      overlay: {
        background: '{overlay.select.background}',
        borderColor: '{overlay.select.border.color}',
        borderRadius: '{overlay.select.border.radius}',
        color: '{overlay.select.color}',
        shadow: '{overlay.select.shadow}',
      },
      list: {
        padding: '{list.padding}',
        gap: '2px',
        header: {
          padding: '{list.header.padding}',
        },
      },
      option: {
        focusBackground: '{list.option.focus.background}',
        selectedBackground: '{list.option.selected.background}',
        selectedFocusBackground: '{list.option.selected.focus.background}',
        color: '{list.option.color}',
        focusColor: '{list.option.focus.color}',
        selectedColor: '{list.option.selected.color}',
        selectedFocusColor: '{list.option.selected.focus.color}',
        padding: '{list.option.padding}',
        borderRadius: '{list.option.border.radius}',
      },
      optionGroup: {
        background: '{list.option.group.background}',
        color: '{list.option.group.color}',
        fontWeight: '{list.option.group.font.weight}',
        padding: '{list.option.group.padding}',
      },
      clearIcon: {
        color: '{form.field.icon.color}',
      },
      checkmark: {
        color: '{list.option.color}',
        gutterStart: '-0.328125rem',
        gutterEnd: '0.328125rem',
      },
      emptyMessage: {
        padding: '{list.option.padding}',
      },
    },
    selectbutton: {
      root: {
        borderRadius: '{form.field.border.radius}',
      },
      colorScheme: {
        light: {
          root: {
            invalidBorderColor: '{form.field.invalid.border.color}',
          },
        },
        dark: {
          root: {
            invalidBorderColor: '{form.field.invalid.border.color}',
          },
        },
      },
    },
    slider: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      track: {
        background: '{content.border.color}',
        borderRadius: '{content.border.radius}',
        size: '3px',
      },
      range: {
        background: '{primary.color}',
      },
      handle: {
        width: '20px',
        height: '20px',
        borderRadius: '10px',
        background: '{content.border.color}',
        hoverBackground: '{content.border.color}',
        content: {
          borderRadius: '8px',
          hoverBackground: '{content.background}',
          width: '16px',
          height: '16px',
          shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)',
        },
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      colorScheme: {
        light: {
          handle: {
            content: {
              background: '{surface.0}',
            },
          },
        },
        dark: {
          handle: {
            content: {
              background: '{surface.950}',
            },
          },
        },
      },
    },
    textarea: {
      root: {
        background: '{form.field.background}',
        disabledBackground: '{form.field.disabled.background}',
        filledBackground: '{form.field.filled.background}',
        filledHoverBackground: '{form.field.filled.hover.background}',
        filledFocusBackground: '{form.field.filled.focus.background}',
        borderColor: '{form.field.border.color}',
        hoverBorderColor: '{form.field.hover.border.color}',
        focusBorderColor: '{form.field.focus.border.color}',
        invalidBorderColor: '{form.field.invalid.border.color}',
        color: '{form.field.color}',
        disabledColor: '{form.field.disabled.color}',
        placeholderColor: '{form.field.placeholder.color}',
        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
        shadow: '{form.field.shadow}',
        paddingX: '{form.field.padding.x}',
        paddingY: '{form.field.padding.y}',
        borderRadius: '{form.field.border.radius}',
        focusRing: {
          width: '{form.field.focus.ring.width}',
          style: '{form.field.focus.ring.style}',
          color: '{form.field.focus.ring.color}',
          offset: '{form.field.focus.ring.offset}',
          shadow: '{form.field.focus.ring.shadow}',
        },
        transitionDuration: '{form.field.transition.duration}',
        sm: {
          fontSize: '{form.field.sm.font.size}',
          paddingX: '{form.field.sm.padding.x}',
          paddingY: '{form.field.sm.padding.y}',
        },
        lg: {
          fontSize: '{form.field.lg.font.size}',
          paddingX: '{form.field.lg.padding.x}',
          paddingY: '{form.field.lg.padding.y}',
        },
      },
    },
    togglebutton: {
      root: {
        padding: '0.21875rem',
        borderRadius: '{content.border.radius}',
        gap: '0.4375rem',
        fontWeight: '500',
        disabledBackground: '{form.field.disabled.background}',
        disabledBorderColor: '{form.field.disabled.background}',
        disabledColor: '{form.field.disabled.color}',
        invalidBorderColor: '{form.field.invalid.border.color}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
        transitionDuration: '{form.field.transition.duration}',
        sm: {
          fontSize: '{form.field.sm.font.size}',
          padding: '0.21875rem',
        },
        lg: {
          fontSize: '{form.field.lg.font.size}',
          padding: '0.21875rem',
        },
      },
      icon: {
        disabledColor: '{form.field.disabled.color}',
      },
      content: {
        padding: '0.25rem 0.75rem',
        borderRadius: '{content.border.radius}',
        checkedShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04)',
        sm: {
          padding: '0.25rem 0.75rem',
        },
        lg: {
          padding: '0.25rem 0.75rem',
        },
      },
      colorScheme: {
        light: {
          root: {
            background: '{surface.100}',
            checkedBackground: '{surface.100}',
            hoverBackground: '{surface.100}',
            borderColor: '{surface.100}',
            color: '{surface.500}',
            hoverColor: '{surface.700}',
            checkedColor: '{surface.900}',
            checkedBorderColor: '{surface.100}',
          },
          content: {
            checkedBackground: '{surface.0}',
          },
          icon: {
            color: '{surface.500}',
            hoverColor: '{surface.700}',
            checkedColor: '{surface.900}',
          },
        },
        dark: {
          root: {
            background: '{surface.950}',
            checkedBackground: '{surface.950}',
            hoverBackground: '{surface.950}',
            borderColor: '{surface.950}',
            color: '{surface.400}',
            hoverColor: '{surface.300}',
            checkedColor: '{surface.0}',
            checkedBorderColor: '{surface.950}',
          },
          content: {
            checkedBackground: '{surface.800}',
          },
          icon: {
            color: '{surface.400}',
            hoverColor: '{surface.300}',
            checkedColor: '{surface.0}',
          },
        },
      },
    },
    toggleswitch: {
      root: {
        width: '2.1875rem',
        height: '1.3125rem',
        borderRadius: '30px',
        gap: '0.21875rem',
        shadow: '{form.field.shadow}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
        borderWidth: '1px',
        borderColor: 'transparent',
        hoverBorderColor: 'transparent',
        checkedBorderColor: 'transparent',
        checkedHoverBorderColor: 'transparent',
        invalidBorderColor: '{form.field.invalid.border.color}',
        transitionDuration: '{form.field.transition.duration}',
        slideDuration: '0.2s',
      },
      handle: {
        borderRadius: '50%',
        size: '0.875rem',
      },
      colorScheme: {
        light: {
          root: {
            background: '{surface.300}',
            disabledBackground: '{form.field.disabled.background}',
            hoverBackground: '{surface.400}',
            checkedBackground: '{primary.color}',
            checkedHoverBackground: '{primary.hover.color}',
          },
          handle: {
            background: '{surface.0}',
            disabledBackground: '{form.field.disabled.color}',
            hoverBackground: '{surface.0}',
            checkedBackground: '{surface.0}',
            checkedHoverBackground: '{surface.0}',
            color: '{text.muted.color}',
            hoverColor: '{surface.800}',
            checkedColor: '{primary.color}',
            checkedHoverColor: '{primary.hover.color}',
          },
        },
        dark: {
          root: {
            background: '{surface.700}',
            disabledBackground: '{surface.600}',
            hoverBackground: '{surface.600}',
            checkedBackground: '{primary.color}',
            checkedHoverBackground: '{primary.hover.color}',
          },
          handle: {
            background: '{surface.400}',
            disabledBackground: '{surface.900}',
            hoverBackground: '{surface.300}',
            checkedBackground: '{surface.900}',
            checkedHoverBackground: '{surface.900}',
            color: '{surface.900}',
            hoverColor: '{surface.800}',
            checkedColor: '{primary.color}',
            checkedHoverColor: '{primary.hover.color}',
          },
        },
      },
    },
    treeselect: {
      root: {
        background: '{form.field.background}',
        disabledBackground: '{form.field.disabled.background}',
        filledBackground: '{form.field.filled.background}',
        filledHoverBackground: '{form.field.filled.hover.background}',
        filledFocusBackground: '{form.field.filled.focus.background}',
        borderColor: '{form.field.border.color}',
        hoverBorderColor: '{form.field.hover.border.color}',
        focusBorderColor: '{form.field.focus.border.color}',
        invalidBorderColor: '{form.field.invalid.border.color}',
        color: '{form.field.color}',
        disabledColor: '{form.field.disabled.color}',
        placeholderColor: '{form.field.placeholder.color}',
        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
        shadow: '{form.field.shadow}',
        paddingX: '{form.field.padding.x}',
        paddingY: '{form.field.padding.y}',
        borderRadius: '{form.field.border.radius}',
        focusRing: {
          width: '{form.field.focus.ring.width}',
          style: '{form.field.focus.ring.style}',
          color: '{form.field.focus.ring.color}',
          offset: '{form.field.focus.ring.offset}',
          shadow: '{form.field.focus.ring.shadow}',
        },
        transitionDuration: '{form.field.transition.duration}',
        sm: {
          fontSize: '{form.field.sm.font.size}',
          paddingX: '{form.field.sm.padding.x}',
          paddingY: '{form.field.sm.padding.y}',
        },
        lg: {
          fontSize: '{form.field.lg.font.size}',
          paddingX: '{form.field.lg.padding.x}',
          paddingY: '{form.field.lg.padding.y}',
        },
      },
      dropdown: {
        width: '2.1875rem',
        color: '{form.field.icon.color}',
      },
      overlay: {
        background: '{overlay.select.background}',
        borderColor: '{overlay.select.border.color}',
        borderRadius: '{overlay.select.border.radius}',
        color: '{overlay.select.color}',
        shadow: '{overlay.select.shadow}',
      },
      tree: {
        padding: '{list.padding}',
      },
      emptyMessage: {
        padding: '{list.option.padding}',
      },
      chip: {
        borderRadius: '{border.radius.sm}',
      },
      clearIcon: {
        color: '{form.field.icon.color}',
      },
    },
    carousel: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      content: {
        gap: '0.21875rem',
      },
      indicatorList: {
        padding: '0.875rem',
        gap: '0.4375rem',
      },
      indicator: {
        width: '1.75rem',
        height: '0.4375rem',
        borderRadius: '{content.border.radius}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      colorScheme: {
        light: {
          indicator: {
            background: '{surface.200}',
            hoverBackground: '{surface.300}',
            activeBackground: '{primary.color}',
          },
        },
        dark: {
          indicator: {
            background: '{surface.700}',
            hoverBackground: '{surface.600}',
            activeBackground: '{primary.color}',
          },
        },
      },
    },
    galleria: {
      root: {
        borderWidth: '1px',
        borderColor: '{content.border.color}',
        borderRadius: '{content.border.radius}',
        transitionDuration: '{transition.duration}',
      },
      navButton: {
        background: 'rgba(255, 255, 255, 0.10)',
        hoverBackground: 'rgba(255, 255, 255, 0.20)',
        color: '{surface.100}',
        hoverColor: '{surface.0}',
        size: '2.625rem',
        gutter: '0.4375rem',
        prev: {
          borderRadius: '1.3125rem',
        },
        next: {
          borderRadius: '1.3125rem',
        },
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      navIcon: {
        size: '1.3125rem',
      },
      thumbnailsContent: {
        background: '{content.background}',
        padding: '1rem 0.25rem',
      },
      thumbnailNavButton: {
        size: '1.75rem',
        borderRadius: '{content.border.radius}',
        gutter: '0.4375rem',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      thumbnailNavButtonIcon: {
        size: '0.875rem',
      },
      caption: {
        background: 'rgba(0, 0, 0, 0.50)',
        color: '{surface.100}',
        padding: '0.875rem',
      },
      indicatorList: {
        gap: '0.4375rem',
        padding: '0.875rem',
      },
      indicatorButton: {
        width: '0.875rem',
        height: '0.875rem',
        activeBackground: '{primary.color}',
        borderRadius: '0.4375rem',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      insetIndicatorList: {
        background: 'rgba(0, 0, 0, 0.50)',
      },
      insetIndicatorButton: {
        background: 'rgba(255, 255, 255, 0.40)',
        hoverBackground: 'rgba(255, 255, 255, 0.60)',
        activeBackground: 'rgba(255, 255, 255, 0.90)',
      },
      closeButton: {
        size: '2.625rem',
        gutter: '0.4375rem',
        background: 'rgba(255, 255, 255, 0.10)',
        hoverBackground: 'rgba(255, 255, 255, 0.20)',
        color: '{surface.50}',
        hoverColor: '{surface.0}',
        borderRadius: '21px',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      closeButtonIcon: {
        size: '1.3125rem',
      },
      colorScheme: {
        light: {
          thumbnailNavButton: {
            hoverBackground: '{surface.100}',
            color: '{surface.600}',
            hoverColor: '{surface.700}',
          },
          indicatorButton: {
            background: '{surface.200}',
            hoverBackground: '{surface.300}',
          },
        },
        dark: {
          thumbnailNavButton: {
            hoverBackground: '{surface.700}',
            color: '{surface.400}',
            hoverColor: '{surface.0}',
          },
          indicatorButton: {
            background: '{surface.700}',
            hoverBackground: '{surface.600}',
          },
        },
      },
    },
    image: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      preview: {
        icon: {
          size: '1.3125rem',
        },
        mask: {
          background: '{mask.background}',
          color: '{mask.color}',
        },
      },
      toolbar: {
        position: {
          left: 'auto',
          right: '0.875rem',
          top: '0.875rem',
          bottom: 'auto',
        },
        blur: '8px',
        background: 'rgba(255, 255, 255, 0.10)',
        borderColor: 'rgba(255, 255, 255, 0.20)',
        borderWidth: '1px',
        borderRadius: '1.875rem',
        padding: '0.4375rem',
        gap: '0.4375rem',
      },
      action: {
        hoverBackground: 'rgba(255, 255, 255, 0.10)',
        color: '{surface.50}',
        hoverColor: '{surface.0}',
        size: '2.625rem',
        iconSize: '1.3125rem',
        borderRadius: '1.3125rem',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
    },
    imagecompare: {
      handle: {
        size: '15px',
        hoverSize: '30px',
        background: 'rgba(255, 255, 255, 0.30)',
        hoverBackground: 'rgba(255, 255, 255, 0.30)',
        borderColor: 'rgba(0, 0, 0, 0.00)',
        hoverBorderColor: 'rgba(0, 0, 0, 0.00)',
        borderWidth: '0',
        borderRadius: '7.5px',
        transitionDuration: '{transition.duration}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: 'rgba(255, 255, 255, 0.30)',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
    },
    breadcrumb: {
      root: {
        padding: '0.875rem',
        background: '{content.background}',
        gap: '0.4375rem',
        transitionDuration: '{transition.duration}',
      },
      item: {
        color: '{text.muted.color}',
        hoverColor: '{text.color}',
        borderRadius: '{content.border.radius}',
        gap: '{navigation.item.gap}',
        icon: {
          color: '{navigation.item.icon.color}',
          hoverColor: '{navigation.item.icon.focus.color}',
        },
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      separator: {
        color: '{navigation.item.icon.color}',
      },
    },
    contextmenu: {
      root: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        color: '{content.color}',
        borderRadius: '{content.border.radius}',
        shadow: '{overlay.navigation.shadow}',
        transitionDuration: '{transition.duration}',
      },
      list: {
        padding: '{navigation.list.padding}',
        gap: '{navigation.list.gap}',
      },
      item: {
        focusBackground: '{navigation.item.focus.background}',
        activeBackground: '{navigation.item.active.background}',
        color: '{navigation.item.color}',
        focusColor: '{navigation.item.focus.color}',
        activeColor: '{navigation.item.active.color}',
        padding: '{navigation.item.padding}',
        borderRadius: '{navigation.item.border.radius}',
        gap: '{navigation.item.gap}',
        icon: {
          color: '{navigation.item.icon.color}',
          focusColor: '{navigation.item.icon.focus.color}',
          activeColor: '{navigation.item.icon.active.color}',
        },
      },
      submenu: {
        mobileIndent: '0.875rem',
      },
      submenuIcon: {
        size: '{navigation.submenu.icon.size}',
        color: '{navigation.submenu.icon.color}',
        focusColor: '{navigation.submenu.icon.focus.color}',
        activeColor: '{navigation.submenu.icon.active.color}',
      },
      separator: {
        borderColor: '{content.border.color}',
      },
    },
    dock: {
      root: {
        background: 'rgba(255, 255, 255, 0.10)',
        borderColor: 'rgba(255, 255, 255, 0.20)',
        padding: '0.4375rem',
        borderRadius: '{border.radius.xl}',
      },
      item: {
        borderRadius: '{content.border.radius}',
        padding: '0.4375rem',
        size: '2.625rem',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
    },
    megamenu: {
      root: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        borderRadius: '{content.border.radius}',
        color: '{content.color}',
        gap: '0.4375rem',
        verticalOrientation: {
          padding: '{navigation.list.padding}',
          gap: '{navigation.list.gap}',
        },
        horizontalOrientation: {
          padding: '0.5rem 0.75rem',
          gap: '0.5rem',
        },
        transitionDuration: '{transition.duration}',
      },
      baseItem: {
        borderRadius: '{content.border.radius}',
        padding: '{navigation.item.padding}',
      },
      item: {
        focusBackground: '{navigation.item.focus.background}',
        activeBackground: '{navigation.item.active.background}',
        color: '{navigation.item.color}',
        focusColor: '{navigation.item.focus.color}',
        activeColor: '{navigation.item.active.color}',
        padding: '{navigation.item.padding}',
        borderRadius: '{navigation.item.border.radius}',
        gap: '{navigation.item.gap}',
        icon: {
          color: '{navigation.item.icon.color}',
          focusColor: '{navigation.item.icon.focus.color}',
          activeColor: '{navigation.item.icon.active.color}',
        },
      },
      overlay: {
        padding: '0',
        background: '{content.background}',
        borderColor: '{content.border.color}',
        borderRadius: '{content.border.radius}',
        color: '{content.color}',
        shadow: '{overlay.navigation.shadow}',
        gap: '0.5rem',
      },
      submenu: {
        padding: '{navigation.list.padding}',
        gap: '{navigation.list.gap}',
      },
      submenuLabel: {
        padding: '{navigation.submenu.label.padding}',
        fontWeight: '{navigation.submenu.label.font.weight}',
        background: '{navigation.submenu.label.background}',
        color: '{navigation.submenu.label.color}',
      },
      submenuIcon: {
        size: '{navigation.submenu.icon.size}',
        color: '{navigation.submenu.icon.color}',
        focusColor: '{navigation.submenu.icon.focus.color}',
        activeColor: '{navigation.submenu.icon.active.color}',
      },
      separator: {
        borderColor: '{content.border.color}',
      },
      mobileButton: {
        borderRadius: '12.25px',
        size: '1.53125rem',
        color: '{text.muted.color}',
        hoverColor: '{text.hover.muted.color}',
        hoverBackground: '{content.hover.background}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
    },
    menu: {
      root: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        color: '{content.color}',
        borderRadius: '{content.border.radius}',
        shadow: '{overlay.navigation.shadow}',
        transitionDuration: '{transition.duration}',
      },
      list: {
        padding: '{navigation.list.padding}',
        gap: '{navigation.list.gap}',
      },
      item: {
        focusBackground: '{navigation.item.focus.background}',
        color: '{navigation.item.color}',
        focusColor: '{navigation.item.focus.color}',
        padding: '{navigation.item.padding}',
        borderRadius: '{navigation.item.border.radius}',
        gap: '{navigation.item.gap}',
        icon: {
          color: '{navigation.item.icon.color}',
          focusColor: '{navigation.item.icon.focus.color}',
        },
      },
      submenuLabel: {
        padding: '{navigation.submenu.label.padding}',
        fontWeight: '{navigation.submenu.label.font.weight}',
        background: '{navigation.submenu.label.background}',
        color: '{navigation.submenu.label.color}',
      },
      separator: {
        borderColor: '{content.border.color}',
      },
    },
    menubar: {
      root: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        borderRadius: '{content.border.radius}',
        color: '{content.color}',
        gap: '0.4375rem',
        padding: '0.5rem 0.75rem',
        transitionDuration: '{transition.duration}',
      },
      baseItem: {
        borderRadius: '{content.border.radius}',
        padding: '{navigation.item.padding}',
      },
      item: {
        focusBackground: '{navigation.item.focus.background}',
        activeBackground: '{navigation.item.active.background}',
        color: '{navigation.item.color}',
        focusColor: '{navigation.item.focus.color}',
        activeColor: '{navigation.item.active.color}',
        padding: '{navigation.item.padding}',
        borderRadius: '{navigation.item.border.radius}',
        gap: '{navigation.item.gap}',
        icon: {
          color: '{navigation.item.icon.color}',
          focusColor: '{navigation.item.icon.focus.color}',
          activeColor: '{navigation.item.icon.active.color}',
        },
      },
      submenu: {
        padding: '{navigation.list.padding}',
        gap: '{navigation.list.gap}',
        background: '{content.background}',
        borderColor: '{content.border.color}',
        borderRadius: '{content.border.radius}',
        shadow: '{overlay.navigation.shadow}',
        mobileIndent: '0.875rem',
        icon: {
          size: '{navigation.submenu.icon.size}',
          color: '{navigation.submenu.icon.color}',
          focusColor: '{navigation.submenu.icon.focus.color}',
          activeColor: '{navigation.submenu.icon.active.color}',
        },
      },
      separator: {
        borderColor: '{content.border.color}',
      },
      mobileButton: {
        borderRadius: '12.25px',
        size: '1.53125rem',
        color: '{text.muted.color}',
        hoverColor: '{text.hover.muted.color}',
        hoverBackground: '{content.hover.background}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
    },
    panelmenu: {
      root: {
        gap: '0.4375rem',
        transitionDuration: '{transition.duration}',
      },
      panel: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        borderWidth: '1px',
        color: '{content.color}',
        padding: '0.25rem 0.25rem',
        borderRadius: '{content.border.radius}',
        first: {
          borderWidth: '1px',
          topBorderRadius: '{content.border.radius}',
        },
        last: {
          borderWidth: '1px',
          bottomBorderRadius: '{content.border.radius}',
        },
      },
      item: {
        focusBackground: '{navigation.item.focus.background}',
        color: '{navigation.item.color}',
        focusColor: '{navigation.item.focus.color}',
        gap: '0.4375rem',
        padding: '{navigation.item.padding}',
        borderRadius: '{content.border.radius}',
        icon: {
          color: '{navigation.item.icon.color}',
          focusColor: '{navigation.item.icon.focus.color}',
        },
      },
      submenu: {
        indent: '0.875rem',
      },
      submenuIcon: {
        color: '{navigation.submenu.icon.color}',
        focusColor: '{navigation.submenu.icon.focus.color}',
      },
    },
    tieredmenu: {
      root: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        color: '{content.color}',
        borderRadius: '{content.border.radius}',
        shadow: '{overlay.navigation.shadow}',
        transitionDuration: '{transition.duration}',
      },
      list: {
        padding: '{navigation.list.padding}',
        gap: '{navigation.list.gap}',
      },
      item: {
        focusBackground: '{navigation.item.focus.background}',
        activeBackground: '{navigation.item.active.background}',
        color: '{navigation.item.color}',
        focusColor: '{navigation.item.focus.color}',
        activeColor: '{navigation.item.active.color}',
        padding: '{navigation.item.padding}',
        borderRadius: '{navigation.item.border.radius}',
        gap: '{navigation.item.gap}',
        icon: {
          color: '{navigation.item.icon.color}',
          focusColor: '{navigation.item.icon.focus.color}',
          activeColor: '{navigation.item.icon.active.color}',
        },
      },
      submenu: {
        mobileIndent: '0.875rem',
      },
      submenuIcon: {
        size: '{navigation.submenu.icon.size}',
        color: '{navigation.submenu.icon.color}',
        focusColor: '{navigation.submenu.icon.focus.color}',
        activeColor: '{navigation.submenu.icon.active.color}',
      },
      separator: {
        borderColor: '{content.border.color}',
      },
    },
    message: {
      root: {
        borderRadius: '{content.border.radius}',
        borderWidth: '1px',
        transitionDuration: '{transition.duration}',
      },
      content: {
        padding: '0.5rem 0.75rem',
        gap: '0.4375rem',
        sm: {
          padding: '0.375rem 0.625rem',
        },
        lg: {
          padding: '0.625rem 0.875rem',
        },
      },
      text: {
        fontSize: '0.875rem',
        fontWeight: '500',
        sm: {
          fontSize: '0.765625rem',
        },
        lg: {
          fontSize: '0.984375rem',
        },
      },
      icon: {
        size: '0.984375rem',
        sm: {
          size: '0.875rem',
        },
        lg: {
          size: '1.09375rem',
        },
      },
      closeButton: {
        width: '1.53125rem',
        height: '1.53125rem',
        borderRadius: '0.765625rem',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          offset: '{focus.ring.offset}',
        },
      },
      closeIcon: {
        size: '0.875rem',
        sm: {
          size: '0.765625rem',
        },
        lg: {
          size: '0.984375rem',
        },
      },
      outlined: {
        root: {
          borderWidth: '1px',
        },
      },
      simple: {
        content: {
          padding: '0',
        },
      },
      colorScheme: {
        light: {
          info: {
            background: 'rgba(239, 246, 255, 0.95)',
            borderColor: '{bloop.200}',
            color: '{bloop.600}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
            closeButton: {
              hoverBackground: '{bloop.100}',
              focusRing: {
                color: '{bloop.600}',
                shadow: 'none',
              },
            },
            outlined: {
              color: '{bloop.600}',
              borderColor: '{bloop.600}',
            },
            simple: {
              color: '{bloop.600}',
            },
          },
          success: {
            background: 'rgba(240, 253, 244, 0.95)',
            borderColor: '{green.200}',
            color: '{green.600}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
            closeButton: {
              hoverBackground: '{green.100}',
              focusRing: {
                color: '{green.600}',
                shadow: 'none',
              },
            },
            outlined: {
              color: '{green.600}',
              borderColor: '{green.600}',
            },
            simple: {
              color: '{green.600}',
            },
          },
          warn: {
            background: 'rgba(254, 252, 232, 0.95)',
            borderColor: '{yellow.200}',
            color: '{yellow.600}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
            closeButton: {
              hoverBackground: '{yellow.100}',
              focusRing: {
                color: '{yellow.600}',
                shadow: 'none',
              },
            },
            outlined: {
              color: '{yellow.600}',
              borderColor: '{yellow.600}',
            },
            simple: {
              color: '{yellow.600}',
            },
          },
          error: {
            background: 'rgba(254, 242, 242, 0.95)',
            borderColor: '{red.200}',
            color: '{red.600}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
            closeButton: {
              hoverBackground: '{red.100}',
              focusRing: {
                color: '{red.600}',
                shadow: 'none',
              },
            },
            outlined: {
              color: '{red.600}',
              borderColor: '{red.600}',
            },
            simple: {
              color: '{red.600}',
            },
          },
          secondary: {
            background: '{surface.100}',
            borderColor: '{surface.200}',
            color: '{surface.600}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
            closeButton: {
              hoverBackground: '{surface.200}',
              focusRing: {
                color: '{surface.600}',
                shadow: 'none',
              },
            },
            outlined: {
              color: '{surface.500}',
              borderColor: '{surface.500}',
            },
            simple: {
              color: '{surface.500}',
            },
          },
          contrast: {
            background: '{surface.900}',
            borderColor: '{surface.950}',
            color: '{surface.50}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
            closeButton: {
              hoverBackground: '{surface.800}',
              focusRing: {
                color: '{surface.50}',
                shadow: 'none',
              },
            },
            outlined: {
              color: '{surface.950}',
              borderColor: '{surface.950}',
            },
            simple: {
              color: '{surface.950}',
            },
          },
        },
        dark: {
          info: {
            background: 'rgba(59, 130, 246, 0.16)',
            borderColor: 'rgba(29, 78, 216, 0.36)',
            color: '{bloop.500}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
            closeButton: {
              hoverBackground: 'rgba(255, 255, 255, 0.05)',
              focusRing: {
                color: '{bloop.500}',
                shadow: 'none',
              },
            },
            outlined: {
              color: '{bloop.500}',
              borderColor: '{bloop.500}',
            },
            simple: {
              color: '{bloop.500}',
            },
          },
          success: {
            background: 'rgba(34, 197, 94, 0.16)',
            borderColor: 'rgba(21, 128, 61, 0.36)',
            color: '{green.500}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
            closeButton: {
              hoverBackground: 'rgba(255, 255, 255, 0.05)',
              focusRing: {
                color: '{green.500}',
                shadow: 'none',
              },
            },
            outlined: {
              color: '{green.500}',
              borderColor: '{green.500}',
            },
            simple: {
              color: '{green.500}',
            },
          },
          warn: {
            background: 'rgba(234, 179, 8, 0.16)',
            borderColor: 'rgba(161, 98, 7, 0.36)',
            color: '{yellow.500}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
            closeButton: {
              hoverBackground: 'rgba(255, 255, 255, 0.05)',
              focusRing: {
                color: '{yellow.500}',
                shadow: 'none',
              },
            },
            outlined: {
              color: '{yellow.500}',
              borderColor: '{yellow.500}',
            },
            simple: {
              color: '{yellow.500}',
            },
          },
          error: {
            background: 'rgba(239, 68, 68, 0.16)',
            borderColor: 'rgba(185, 28, 28, 0.36)',
            color: '{red.500}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
            closeButton: {
              hoverBackground: 'rgba(255, 255, 255, 0.05)',
              focusRing: {
                color: '{red.500}',
                shadow: 'none',
              },
            },
            outlined: {
              color: '{red.500}',
              borderColor: '{red.500}',
            },
            simple: {
              color: '{red.500}',
            },
          },
          secondary: {
            background: '{surface.800}',
            borderColor: '{surface.700}',
            color: '{surface.300}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
            closeButton: {
              hoverBackground: '{surface.700}',
              focusRing: {
                color: '{surface.300}',
                shadow: 'none',
              },
            },
            outlined: {
              color: '{surface.400}',
              borderColor: '{surface.400}',
            },
            simple: {
              color: '{surface.400}',
            },
          },
          contrast: {
            background: '{surface.0}',
            borderColor: '{surface.100}',
            color: '{surface.950}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
            closeButton: {
              hoverBackground: '{surface.100}',
              focusRing: {
                color: '{surface.950}',
                shadow: 'none',
              },
            },
            outlined: {
              color: '{surface.0}',
              borderColor: '{surface.0}',
            },
            simple: {
              color: '{surface.0}',
            },
          },
        },
      },
    },
    toast: {
      root: {
        width: '21.875rem',
        borderRadius: '{content.border.radius}',
        borderWidth: '1px',
        transitionDuration: '{transition.duration}',
      },
      icon: {
        size: '0.984375rem',
      },
      content: {
        padding: '{overlay.popover.padding}',
        gap: '0.4375rem',
      },
      text: {
        gap: '0.4375rem',
      },
      summary: {
        fontWeight: '500',
        fontSize: '0.875rem',
      },
      detail: {
        fontWeight: '500',
        fontSize: '0.765625rem',
      },
      closeButton: {
        width: '1.53125rem',
        height: '1.53125rem',
        borderRadius: '50%',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          offset: '{focus.ring.offset}',
        },
      },
      closeIcon: {
        size: '0.875rem',
      },
      colorScheme: {
        light: {
          root: {
            blur: '1.5px',
          },
          info: {
            background: 'rgba(239,246,255,0.95)',
            borderColor: '{bloop.200}',
            color: '{bloop.600}',
            detailColor: '{surface.700}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
            closeButton: {
              hoverBackground: '{bloop.100}',
              focusRing: {
                color: '{bloop.600}',
                shadow: 'none',
              },
            },
          },
          success: {
            background: 'rgba(240,253,244,0.95)',
            borderColor: '{green.200}',
            color: '{green.600}',
            detailColor: '{surface.700}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
            closeButton: {
              hoverBackground: '{green.100}',
              focusRing: {
                color: '{green.600}',
                shadow: 'none',
              },
            },
          },
          warn: {
            background: 'rgba(254,252,232,0.95)',
            borderColor: '{yellow.200}',
            color: '{yellow.600}',
            detailColor: '{surface.700}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
            closeButton: {
              hoverBackground: '{yellow.100}',
              focusRing: {
                color: '{yellow.600}',
                shadow: 'none',
              },
            },
          },
          error: {
            background: 'rgba(254,242,242,0.95)',
            borderColor: '{red.200}',
            color: '{red.600}',
            detailColor: '{surface.700}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
            closeButton: {
              hoverBackground: '{red.100}',
              focusRing: {
                color: '{red.600}',
                shadow: 'none',
              },
            },
          },
          secondary: {
            background: '{surface.100}',
            borderColor: '{surface.200}',
            color: '{surface.600}',
            detailColor: '{surface.700}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
            closeButton: {
              hoverBackground: '{surface.200}',
              focusRing: {
                color: '{surface.600}',
                shadow: 'none',
              },
            },
          },
          contrast: {
            background: '{surface.900}',
            borderColor: '{surface.950}',
            color: '{surface.50}',
            detailColor: '{surface.0}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
            closeButton: {
              hoverBackground: '{surface.800}',
              focusRing: {
                color: '{surface.50}',
                shadow: 'none',
              },
            },
          },
        },
        dark: {
          root: {
            blur: '10px',
          },
          info: {
            background: 'rgba(59,130,246,0.16)',
            borderColor: 'rgba(29,78,216,0.36)',
            color: '{bloop.500}',
            detailColor: '{surface.0}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
            closeButton: {
              hoverBackground: 'rgba(255, 255, 255, 0.05)',
              focusRing: {
                color: '{bloop.500}',
                shadow: 'none',
              },
            },
          },
          success: {
            background: 'rgba(34,197,94,0.16)',
            borderColor: 'rgba(21,128,61,0.36)',
            color: '{green.500}',
            detailColor: '{surface.0}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
            closeButton: {
              hoverBackground: 'rgba(255, 255, 255, 0.05)',
              focusRing: {
                color: '{green.500}',
                shadow: 'none',
              },
            },
          },
          warn: {
            background: 'rgba(234,179,8,0.16)',
            borderColor: 'rgba(161,98,7,0.36)',
            color: '{yellow.500}',
            detailColor: '{surface.0}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
            closeButton: {
              hoverBackground: 'rgba(255, 255, 255, 0.05)',
              focusRing: {
                color: '{yellow.500}',
                shadow: 'none',
              },
            },
          },
          error: {
            background: 'rgba(239,68,68,0.16)',
            borderColor: 'rgba(185,28,28,0.36)',
            color: '{red.500}',
            detailColor: '{surface.0}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
            closeButton: {
              hoverBackground: 'rgba(255, 255, 255, 0.05)',
              focusRing: {
                color: '{red.500}',
                shadow: 'none',
              },
            },
          },
          secondary: {
            background: '{surface.800}',
            borderColor: '{surface.700}',
            color: '{surface.300}',
            detailColor: '{surface.0}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
            closeButton: {
              hoverBackground: '{surface.700}',
              focusRing: {
                color: '{surface.300}',
                shadow: 'none',
              },
            },
          },
          contrast: {
            background: '{surface.0}',
            borderColor: '{surface.100}',
            color: '{surface.950}',
            detailColor: '{surface.950}',
            shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
            closeButton: {
              hoverBackground: '{surface.100}',
              focusRing: {
                color: '{surface.950}',
                shadow: 'none',
              },
            },
          },
        },
      },
    },
    avatar: {
      root: {
        width: '1.75rem',
        height: '1.75rem',
        fontSize: '0.875rem',
        background: '{content.border.color}',
        color: '{content.color}',
        borderRadius: '{content.border.radius}',
      },
      icon: {
        size: '0.875rem',
      },
      group: {
        borderColor: '{content.background}',
        offset: '-0.65625rem',
      },
      lg: {
        width: '2.625rem',
        height: '2.625rem',
        fontSize: '1.3125rem',
        icon: {
          size: '1.3125rem',
        },
        group: {
          offset: '-0.875rem',
        },
      },
      xl: {
        width: '3.5rem',
        height: '3.5rem',
        fontSize: '1.75rem',
        icon: {
          size: '1.75rem',
        },
        group: {
          offset: '-1.3125rem',
        },
      },
    },
    badge: {
      root: {
        borderRadius: '{border.radius.md}',
        padding: '0 0.5rem',
        fontSize: '0.65625rem',
        fontWeight: '700',
        minWidth: '1.3125rem',
        height: '1.3125rem',
      },
      dot: {
        size: '0.4375rem',
      },
      sm: {
        fontSize: '0.546875rem',
        minWidth: '1.09375rem',
        height: '1.09375rem',
      },
      lg: {
        fontSize: '0.765625rem',
        minWidth: '1.53125rem',
        height: '1.53125rem',
      },
      xl: {
        fontSize: '0.875rem',
        minWidth: '1.75rem',
        height: '1.75rem',
      },
      colorScheme: {
        light: {
          primary: {
            background: '{primary.color}',
            color: '{primary.contrast.color}',
          },
          secondary: {
            background: '{surface.100}',
            color: '{surface.600}',
          },
          success: {
            background: '{green.500}',
            color: '{surface.0}',
          },
          info: {
            background: '{sky.500}',
            color: '{surface.0}',
          },
          warn: {
            background: '{orange.500}',
            color: '{surface.0}',
          },
          danger: {
            background: '{red.500}',
            color: '{surface.0}',
          },
          contrast: {
            background: '{surface.950}',
            color: '{surface.0}',
          },
        },
        dark: {
          primary: {
            background: '{primary.color}',
            color: '{primary.contrast.color}',
          },
          secondary: {
            background: '{surface.800}',
            color: '{surface.300}',
          },
          success: {
            background: '{green.400}',
            color: '{green.950}',
          },
          info: {
            background: '{sky.400}',
            color: '{sky.950}',
          },
          warn: {
            background: '{orange.400}',
            color: '{orange.950}',
          },
          danger: {
            background: '{red.400}',
            color: '{red.950}',
          },
          contrast: {
            background: '{surface.0}',
            color: '{surface.950}',
          },
        },
      },
    },
    blockui: {
      root: {
        borderRadius: '{content.border.radius}',
      },
    },
    chip: {
      root: {
        borderRadius: '16px',
        paddingX: '0.65625rem',
        paddingY: '0.4375rem',
        gap: '0.4375rem',
        transitionDuration: '{transition.duration}',
      },
      image: {
        width: '1.75rem',
        height: '1.75rem',
      },
      icon: {
        size: '0.875rem',
      },
      removeIcon: {
        size: '0.875rem',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{form.field.focus.ring.shadow}',
        },
      },
      colorScheme: {
        light: {
          root: {
            background: '{surface.100}',
            color: '{surface.800}',
          },
          icon: {
            color: '{surface.800}',
          },
          removeIcon: {
            color: '{surface.800}',
          },
        },
        dark: {
          root: {
            background: '{surface.800}',
            color: '{surface.0}',
          },
          icon: {
            color: '{surface.0}',
          },
          removeIcon: {
            color: '{surface.0}',
          },
        },
      },
    },
    inplace: {
      root: {
        padding: '{form.field.padding.y} {form.field.padding.x}',
        borderRadius: '{content.border.radius}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
        transitionDuration: '{transition.duration}',
      },
      display: {
        hoverBackground: '{content.hover.background}',
        hoverColor: '{content.hover.color}',
      },
    },
    metergroup: {
      root: {
        borderRadius: '{content.border.radius}',
        gap: '0.875rem',
      },
      meters: {
        background: '{content.border.color}',
        size: '0.4375rem',
      },
      label: {
        gap: '0.4375rem',
      },
      labelMarker: {
        size: '0.4375rem',
      },
      labelIcon: {
        size: '0.875rem',
      },
      labelList: {
        verticalGap: '0.4375rem',
        horizontalGap: '0.875rem',
      },
    },
    progressbar: {
      root: {
        background: '{content.border.color}',
        borderRadius: '{content.border.radius}',
        height: '1.09375rem',
      },
      value: {
        background: '{primary.color}',
      },
      label: {
        color: '{primary.contrast.color}',
        fontSize: '0.65625rem',
        fontWeight: '600',
      },
    },
    progressspinner: {
      colorScheme: {
        light: {
          root: {
            colorOne: '{red.500}',
            colorTwo: '{bloop.500}',
            colorThree: '{green.500}',
            colorFour: '{yellow.500}',
          },
        },
        dark: {
          root: {
            colorOne: '{red.400}',
            colorTwo: '{bloop.400}',
            colorThree: '{green.400}',
            colorFour: '{yellow.400}',
          },
        },
      },
    },
    ripple: {
      colorScheme: {
        light: {
          root: {
            background: 'rgba(0,0,0,0.1)',
          },
        },
        dark: {
          root: {
            background: 'rgba(255,255,255,0.3)',
          },
        },
      },
    },
    skeleton: {
      root: {
        borderRadius: '{content.border.radius}',
      },
      colorScheme: {
        light: {
          root: {
            background: '{surface.200}',
            animationBackground: 'rgba(255,255,255,0.4)',
          },
        },
        dark: {
          root: {
            background: 'rgba(255, 255, 255, 0.06)',
            animationBackground: 'rgba(255, 255, 255, 0.04)',
          },
        },
      },
    },
    tag: {
      root: {
        fontSize: '0.765625rem',
        fontWeight: '700',
        padding: '0.25rem 0.5rem',
        gap: '0.21875rem',
        borderRadius: '{content.border.radius}',
        roundedBorderRadius: '{border.radius.xl}',
      },
      icon: {
        size: '0.65625rem',
      },
      colorScheme: {
        light: {
          primary: {
            background: '{primary.100}',
            color: '{primary.700}',
          },
          secondary: {
            background: '{surface.100}',
            color: '{surface.600}',
          },
          success: {
            background: '{green.100}',
            color: '{green.700}',
          },
          info: {
            background: '{sky.100}',
            color: '{sky.700}',
          },
          warn: {
            background: '{orange.100}',
            color: '{orange.700}',
          },
          danger: {
            background: '{red.100}',
            color: '{red.700}',
          },
          contrast: {
            background: '{surface.950}',
            color: '{surface.0}',
          },
        },
        dark: {
          primary: {
            background: 'rgba(76, 97, 255, 0.16)',
            color: '{primary.300}',
          },
          secondary: {
            background: '{surface.800}',
            color: '{surface.300}',
          },
          success: {
            background: 'rgba(34, 197, 94, 0.16)',
            color: '{green.300}',
          },
          info: {
            background: 'rgba(14, 165, 233, 0.16)',
            color: '{sky.300}',
          },
          warn: {
            background: 'rgba(249, 115, 22, 0.16)',
            color: '{orange.300}',
          },
          danger: {
            background: 'rgba(239, 68, 68, 0.16)',
            color: '{red.300}',
          },
          contrast: {
            background: '{surface.0}',
            color: '{surface.950}',
          },
        },
      },
    },
    terminal: {
      root: {
        background: '{form.field.background}',
        borderColor: '{form.field.border.color}',
        color: '{form.field.color}',
        height: '15.75rem',
        padding: '{form.field.padding.y} {form.field.padding.x}',
        borderRadius: '{form.field.border.radius}',
      },
      prompt: {
        gap: '0.21875rem',
      },
      commandResponse: {
        margin: '2px 0',
      },
    },
    confirmdialog: {
      icon: {
        size: '1.75rem',
        color: '{overlay.modal.color}',
      },
      content: {
        gap: '0.875rem',
      },
    },
    confirmpopup: {
      root: {
        background: '{overlay.popover.background}',
        borderColor: '{overlay.popover.border.color}',
        color: '{overlay.popover.color}',
        borderRadius: '{overlay.popover.border.radius}',
        shadow: '{overlay.popover.shadow}',
        gutter: '10px',
        arrowOffset: '1.09375rem',
      },
      content: {
        padding: '{overlay.popover.padding}',
        gap: '0.875rem',
      },
      icon: {
        size: '1.3125rem',
        color: '{overlay.popover.color}',
      },
      footer: {
        gap: '0.4375rem',
        padding: '0 {overlay.popover.padding} {overlay.popover.padding} {overlay.popover.padding}',
      },
    },
    dialog: {
      root: {
        background: '{overlay.modal.background}',
        borderColor: '{overlay.modal.border.color}',
        color: '{overlay.modal.color}',
        borderRadius: '{overlay.modal.border.radius}',
        shadow: '{overlay.modal.shadow}',
      },
      header: {
        padding: '{overlay.modal.padding}',
        gap: '0.4375rem',
      },
      title: {
        fontSize: '1.09375rem',
        fontWeight: '600',
      },
      content: {
        padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}',
      },
      footer: {
        padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}',
        gap: '0.4375rem',
      },
    },
    drawer: {
      root: {
        background: '{overlay.modal.background}',
        borderColor: '{overlay.modal.border.color}',
        color: '{overlay.modal.color}',
        shadow: '{overlay.modal.shadow}',
      },
      header: {
        padding: '{overlay.modal.padding}',
      },
      title: {
        fontSize: '1.3125rem',
        fontWeight: '600',
      },
      content: {
        padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}',
      },
      footer: {
        padding: '{overlay.modal.padding}',
      },
    },
    popover: {
      root: {
        background: '{overlay.popover.background}',
        borderColor: '{overlay.popover.border.color}',
        color: '{overlay.popover.color}',
        borderRadius: '{overlay.popover.border.radius}',
        shadow: '{overlay.popover.shadow}',
        gutter: '10px',
        arrowOffset: '1.25rem',
      },
      content: {
        padding: '{overlay.popover.padding}',
      },
    },
    tooltip: {
      root: {
        maxWidth: '10.9375rem',
        gutter: '0.21875rem',
        shadow: '{overlay.popover.shadow}',
        padding: '0.5rem 0.75rem',
        borderRadius: '{overlay.popover.border.radius}',
      },
      colorScheme: {
        light: {
          root: {
            background: '{surface.700}',
            color: '{surface.0}',
          },
        },
        dark: {
          root: {
            background: '{surface.700}',
            color: '{surface.0}',
          },
        },
      },
    },
    accordion: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      panel: {
        borderWidth: '0 0 1px 0',
        borderColor: '{content.border.color}',
      },
      header: {
        color: '{text.muted.color}',
        hoverColor: '{surface.800}',
        activeColor: '{surface.800}',
        activeHoverColor: '{text.color}',
        padding: '1.125rem',
        fontWeight: '600',
        borderRadius: '0',
        borderWidth: '0',
        borderColor: '{content.border.color}',
        background: '{content.background}',
        hoverBackground: '{content.background}',
        activeBackground: '{content.background}',
        activeHoverBackground: '{content.background}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '-1px',
          shadow: '{focus.ring.shadow}',
        },
        toggleIcon: {
          color: '{text.muted.color}',
          hoverColor: '{surface.800}',
          activeColor: '{surface.800}',
          activeHoverColor: '{surface.800}',
        },
        first: {
          topBorderRadius: '{content.border.radius}',
          borderWidth: '0',
        },
        last: {
          bottomBorderRadius: '{content.border.radius}',
          activeBottomBorderRadius: '0',
        },
      },
      content: {
        borderWidth: '0',
        borderColor: '{content.border.color}',
        background: '{content.background}',
        color: '{surface.800}',
        padding: '0 1.125rem 1.125rem 1.125rem',
      },
    },
    card: {
      root: {
        background: '{content.background}',
        borderRadius: '{border.radius.xl}',
        color: '{content.color}',
        shadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
      },
      body: {
        padding: '1.09375rem',
        gap: '0.4375rem',
      },
      caption: {
        gap: '0.4375rem',
      },
      title: {
        fontSize: '1.09375rem',
        fontWeight: '500',
      },
      subtitle: {
        color: '{text.muted.color}',
      },
    },
    divider: {
      root: {
        borderColor: '{content.border.color}',
      },
      content: {
        background: '{content.background}',
        color: '{surface.800}',
      },
      horizontal: {
        margin: '1rem 0',
        padding: '0 1rem',
        content: {
          padding: '0 0.5rem',
        },
      },
      vertical: {
        margin: '0 1rem',
        padding: '0.5rem 0',
        content: {
          padding: '0.5rem 0',
        },
      },
    },
    fieldset: {
      root: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        borderRadius: '{content.border.radius}',
        color: '{content.color}',
        padding: '0 1.125rem 1.125rem 1.125rem',
        transitionDuration: '{transition.duration}',
      },
      legend: {
        background: '{content.background}',
        hoverBackground: '{content.hover.background}',
        color: '{content.color}',
        hoverColor: '{content.hover.color}',
        borderRadius: '{content.border.radius}',
        borderWidth: '1px',
        borderColor: 'transparent',
        padding: '0.5rem 0.75rem',
        gap: '0.4375rem',
        fontWeight: '600',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      toggleIcon: {
        color: '{text.muted.color}',
        hoverColor: '{text.hover.muted.color}',
      },
      content: {
        padding: '0',
      },
    },
    panel: {
      root: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        color: '{content.color}',
        borderRadius: '{content.border.radius}',
      },
      header: {
        background: 'rgba(0, 0, 0, 0.00)',
        color: '{surface.800}',
        padding: '1.125rem',
        borderColor: '{content.border.color}',
        borderWidth: '0',
        borderRadius: '0',
      },
      toggleableHeader: {
        padding: '0.375rem 1.125rem',
      },
      title: {
        fontWeight: '600',
      },
      content: {
        padding: '0 1.125rem 1.125rem 1.125rem',
      },
      footer: {
        padding: '0 1.125rem 1.125rem 1.125rem',
      },
    },
    scrollpanel: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      bar: {
        size: '9px',
        borderRadius: '{border.radius.sm}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
      colorScheme: {
        light: {
          bar: {
            background: '{surface.100}',
          },
        },
        dark: {
          bar: {
            background: '{surface.800}',
          },
        },
      },
    },
    splitter: {
      root: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        color: '{content.color}',
        transitionDuration: '{transition.duration}',
      },
      gutter: {
        background: '{content.border.color}',
      },
      handle: {
        size: '24px',
        background: 'rgba(0, 0, 0, 0.00)',
        borderRadius: '{content.border.radius}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
      },
    },
    stepper: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      separator: {
        background: '{content.border.color}',
        activeBackground: '{primary.color}',
        margin: '0 0 0 1.625rem',
        size: '2px',
      },
      step: {
        padding: '0.4375rem',
        gap: '0.875rem',
      },
      stepHeader: {
        padding: '0',
        borderRadius: '{content.border.radius}',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: '{focus.ring.shadow}',
        },
        gap: '0.4375rem',
      },
      stepTitle: {
        color: '{text.muted.color}',
        activeColor: '{primary.color}',
        fontWeight: '500',
      },
      stepNumber: {
        background: '{content.background}',
        activeBackground: '{content.background}',
        borderColor: '{content.border.color}',
        activeBorderColor: '{content.border.color}',
        color: '{text.muted.color}',
        activeColor: '{primary.color}',
        size: '1.75rem',
        fontSize: '1.0001250505447388rem',
        fontWeight: '500',
        borderRadius: '14px',
        shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)',
      },
      steppanels: {
        padding: '0.875rem 0.5rem 1.125rem 0.5rem',
      },
      steppanel: {
        background: '{content.background}',
        color: '{content.color}',
        padding: '0',
        indent: '1rem',
      },
    },
    tabs: {
      root: {
        transitionDuration: '{transition.duration}',
      },
      tablist: {
        borderWidth: '0 0 1px 0',
        background: '{content.background}',
        borderColor: '{content.border.color}',
      },
      tab: {
        background: 'rgba(0, 0, 0, 0.00)',
        hoverBackground: 'rgba(0, 0, 0, 0.00)',
        activeBackground: 'rgba(0, 0, 0, 0.00)',
        borderWidth: '0 0 1px 0',
        borderColor: '{content.border.color}',
        hoverBorderColor: '{content.border.color}',
        activeBorderColor: '{primary.color}',
        color: '{text.muted.color}',
        hoverColor: '{surface.800}',
        activeColor: '{primary.color}',
        padding: '1rem 1.125rem',
        fontWeight: '600',
        margin: '0 0 -1px 0',
        gap: '0.4375rem',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '-1px',
          shadow: '{focus.ring.shadow}',
        },
      },
      tabpanel: {
        background: '{content.background}',
        color: '{content.color}',
        padding: '0.875rem 1.125rem 1.125rem 1.125rem',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '{focus.ring.offset}',
          shadow: 'inset {focus.ring.shadow}',
        },
      },
      navButton: {
        background: '{content.background}',
        color: '{text.muted.color}',
        hoverColor: '{surface.800}',
        width: '2.1875rem',
        focusRing: {
          width: '{focus.ring.width}',
          style: '{focus.ring.style}',
          color: '{focus.ring.color}',
          offset: '-1px',
          shadow: '{focus.ring.shadow}',
        },
      },
      activeBar: {
        height: '1px',
        bottom: '-1px',
        background: '{primary.color}',
      },
      colorScheme: {
        light: {
          navButton: {
            shadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)',
          },
        },
        dark: {
          navButton: {
            shadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)',
          },
        },
      },
    },
    toolbar: {
      root: {
        background: '{content.background}',
        borderColor: '{content.border.color}',
        borderRadius: '{content.border.radius}',
        color: '{content.color}',
        gap: '0.4375rem',
        padding: '0.65625rem',
      },
    },
  },
};