@bcc-code/design-tokens 5.0.2 → 5.1.0

package/build/primevue/config.js

@@ -0,0 +1,3195 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+import "../bcc/css/auto.css";
+import { definePreset } from "@primeuix/themes";
+import Aura from "@primeuix/themes/aura";
+
+const BCCPreset = definePreset(Aura, {
+  primitive: {
+    borderRadius: {
+      none: "0",
+      xs: "0.125rem",
+      sm: "0.25rem",
+      md: "0.375rem",
+      lg: "0.5rem",
+      xl: "0.75rem"
+    },
+    emerald: {
+      "50": "#f0fcfa",
+      "100": "#d2eeeb",
+      "200": "#a0cec8",
+      "300": "#6fb5ad",
+      "400": "#3e9f97",
+      "500": "#1d7f78",
+      "600": "#0c625c",
+      "700": "#014d49",
+      "800": "#0b3633",
+      "900": "#012320",
+      "950": "#012320"
+    },
+    green: {
+      "50": "#efffed",
+      "100": "#cbf3c9",
+      "200": "#83d895",
+      "300": "#32c180",
+      "400": "#1ca673",
+      "500": "#09825d",
+      "600": "#0c6241",
+      "700": "#094c3b",
+      "800": "#073734",
+      "900": "#032429",
+      "950": "#032429"
+    },
+    lime: {
+      "50": "#f7fee7",
+      "100": "#ecfccb",
+      "200": "#d9f99d",
+      "300": "#bef264",
+      "400": "#a3e635",
+      "500": "#84cc16",
+      "600": "#65a30d",
+      "700": "#4d7c0f",
+      "800": "#3f6212",
+      "900": "#365314",
+      "950": "#1a2e05"
+    },
+    red: {
+      "50": "#fff8f3",
+      "100": "#fee2dd",
+      "200": "#fab6ad",
+      "300": "#fa877e",
+      "400": "#ed6362",
+      "500": "#ca414e",
+      "600": "#a42237",
+      "700": "#811436",
+      "800": "#630d2e",
+      "900": "#440223",
+      "950": "#440223"
+    },
+    orange: {
+      "50": "#fffaed",
+      "100": "#fee3c1",
+      "200": "#f6b981",
+      "300": "#f19457",
+      "400": "#da772e",
+      "500": "#b55919",
+      "600": "#943a14",
+      "700": "#782612",
+      "800": "#5d1712",
+      "900": "#420e0d",
+      "950": "#420e0d"
+    },
+    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": "#fdf8e9",
+      "100": "#f8e6a0",
+      "200": "#e9c348",
+      "300": "#d5a406",
+      "400": "#bc870d",
+      "500": "#a4670b",
+      "600": "#854901",
+      "700": "#653805",
+      "800": "#4b2c04",
+      "900": "#2d1f00",
+      "950": "#2d1f00"
+    },
+    teal: {
+      "50": "#f6fbff",
+      "100": "#c3f2f8",
+      "200": "#82d3e3",
+      "300": "#51b9cf",
+      "400": "#1a9eb7",
+      "500": "#0b7da1",
+      "600": "#005b81",
+      "700": "#09486b",
+      "800": "#0d324d",
+      "900": "#0c2132",
+      "950": "#0c2132"
+    },
+    cyan: {
+      "50": "#ecfeff",
+      "100": "#cffafe",
+      "200": "#a5f3fc",
+      "300": "#67e8f9",
+      "400": "#22d3ee",
+      "500": "#06b6d4",
+      "600": "#0891b2",
+      "700": "#0e7490",
+      "800": "#155e75",
+      "900": "#164e63",
+      "950": "#083344"
+    },
+    sky: {
+      "50": "#f6fbff",
+      "100": "#d9ecff",
+      "200": "#a6cdfd",
+      "300": "#7cabf9",
+      "400": "#608ef6",
+      "500": "#446add",
+      "600": "#274eb5",
+      "700": "#273c8f",
+      "800": "#212c64",
+      "900": "#091e47",
+      "950": "#091e47"
+    },
+    blue: {
+      "50": "#f6fbff",
+      "100": "#d9ecff",
+      "200": "#a6cdfd",
+      "300": "#7cabf9",
+      "400": "#608ef6",
+      "500": "#446add",
+      "600": "#274eb5",
+      "700": "#273c8f",
+      "800": "#212c64",
+      "900": "#091e47",
+      "950": "#091e47"
+    },
+    indigo: {
+      "50": "#eef2ff",
+      "100": "#e0e7ff",
+      "200": "#c7d2fe",
+      "300": "#a5b4fc",
+      "400": "#818cf8",
+      "500": "#6366f1",
+      "600": "#4f46e5",
+      "700": "#4338ca",
+      "800": "#3730a3",
+      "900": "#312e81",
+      "950": "#1e1b4b"
+    },
+    violet: {
+      "50": "#f5f3ff",
+      "100": "#ede9fe",
+      "200": "#ddd6fe",
+      "300": "#c4b5fd",
+      "400": "#a78bfa",
+      "500": "#8b5cf6",
+      "600": "#7c3aed",
+      "700": "#6d28d9",
+      "800": "#5b21b6",
+      "900": "#4c1d95",
+      "950": "#2e1065"
+    },
+    purple: {
+      "50": "#f6f9ff",
+      "100": "#e3e3fe",
+      "200": "#c9c3ec",
+      "300": "#afa0e0",
+      "400": "#9a82da",
+      "500": "#8360c3",
+      "600": "#61479c",
+      "700": "#493481",
+      "800": "#352465",
+      "900": "#1d154d",
+      "950": "#1d154d"
+    },
+    fuchsia: {
+      "50": "#fdf4ff",
+      "100": "#fae8ff",
+      "200": "#f5d0fe",
+      "300": "#f0abfc",
+      "400": "#e879f9",
+      "500": "#d946ef",
+      "600": "#c026d3",
+      "700": "#a21caf",
+      "800": "#86198f",
+      "900": "#701a75",
+      "950": "#4a044e"
+    },
+    pink: {
+      "50": "#fff8ff",
+      "100": "#fce0f8",
+      "200": "#f3b4e2",
+      "300": "#eb8acf",
+      "400": "#de66b0",
+      "500": "#be428f",
+      "600": "#952e70",
+      "700": "#751f57",
+      "800": "#5b1043",
+      "900": "#3f0534",
+      "950": "#3f0534"
+    },
+    rose: {
+      "50": "#fff1f2",
+      "100": "#ffe4e6",
+      "200": "#fecdd3",
+      "300": "#fda4af",
+      "400": "#fb7185",
+      "500": "#f43f5e",
+      "600": "#e11d48",
+      "700": "#be123c",
+      "800": "#9f1239",
+      "900": "#881337",
+      "950": "#4c0519"
+    },
+    slate: {
+      "50": "#f8f8f8",
+      "100": "#f0f1f2",
+      "200": "#dddee1",
+      "300": "#b7b9be",
+      "400": "#8c8f97",
+      "500": "#7d818a",
+      "600": "#6b6e76",
+      "700": "#505258",
+      "800": "#3b3d42",
+      "900": "#292a2e",
+      "950": "#1e1f21"
+    },
+    gray: {
+      "50": "#f9fafb",
+      "100": "#f3f4f6",
+      "200": "#e5e7eb",
+      "300": "#d1d5db",
+      "400": "#9ca3af",
+      "500": "#6b7280",
+      "600": "#4b5563",
+      "700": "#374151",
+      "800": "#1f2937",
+      "900": "#111827",
+      "950": "#030712"
+    },
+    zinc: {
+      "50": "#e2e3e4",
+      "100": "#cecfd2",
+      "200": "#bfc1c4",
+      "300": "#a9abaf",
+      "400": "#96999e",
+      "500": "#7e8188",
+      "600": "#63666b",
+      "700": "#4b4d51",
+      "800": "#303134",
+      "900": "#242528",
+      "950": "#1f1f21"
+    },
+    neutral: {
+      "50": "#fafafa",
+      "100": "#f5f5f5",
+      "200": "#e5e5e5",
+      "300": "#d4d4d4",
+      "400": "#a3a3a3",
+      "500": "#737373",
+      "600": "#525252",
+      "700": "#404040",
+      "800": "#262626",
+      "900": "#171717",
+      "950": "#0a0a0a"
+    },
+    stone: {
+      "50": "#fafaf9",
+      "100": "#f5f5f4",
+      "200": "#e7e5e4",
+      "300": "#d6d3d1",
+      "400": "#a8a29e",
+      "500": "#78716c",
+      "600": "#57534e",
+      "700": "#44403c",
+      "800": "#292524",
+      "900": "#1c1917",
+      "950": "#0c0a09"
+    },
+    color: {
+      neutral: {
+        "0": "#ffffff",
+        "100": "#f8f8f8",
+        "200": "#f0f1f2",
+        "300": "#dddee1",
+        "400": "#b7b9be",
+        "500": "#8c8f97",
+        "600": "#7d818a",
+        "700": "#6b6e76",
+        "800": "#505258",
+        "900": "#3b3d42",
+        "1000": "#292a2e",
+        "1100": "#1e1f21"
+      },
+      "neutral-alpha": {
+        "100A": "rgba(23, 23, 23, 0.03)",
+        "200A": "rgba(5, 21, 36, 0.06)",
+        "300A": "rgba(11, 18, 14, 0.14)",
+        "400A": "rgba(8, 15, 33, 0.29)",
+        "500A": "rgba(5, 12, 31, 0.46)"
+      },
+      "dark-neutral": {
+        "0": "#18191a",
+        "100": "#1f1f21",
+        "200": "#242528",
+        "250": "#2b2c2f",
+        "300": "#303134",
+        "350": "#3d3f43",
+        "400": "#4b4d51",
+        "500": "#63666b",
+        "600": "#7e8188",
+        "700": "#96999e",
+        "800": "#a9abaf",
+        "900": "#bfc1c4",
+        "1000": "#cecfd2",
+        "1100": "#e2e3e4"
+      },
+      "dark-neutral-alpha": {
+        "100A": "rgba(189, 189, 189, 0.04)",
+        "200A": "rgba(206, 206, 217, 0.07)",
+        "250A": "rgba(217, 218, 231, 0.1)",
+        "300A": "rgba(227, 228, 242, 0.12)",
+        "350A": "rgba(232, 237, 253, 0.18)",
+        "400A": "rgba(229, 233, 246, 0.25)",
+        "500A": "rgba(233, 240, 251, 0.36)"
+      },
+      blue: {
+        "100": "#f6fbff",
+        "200": "#d9ecff",
+        "300": "#a6cdfd",
+        "400": "#7cabf9",
+        "500": "#608ef6",
+        "600": "#446add",
+        "700": "#274eb5",
+        "800": "#273c8f",
+        "900": "#212c64",
+        "1000": "#091e47"
+      },
+      teal: {
+        "100": "#f6fbff",
+        "200": "#c3f2f8",
+        "300": "#82d3e3",
+        "400": "#51b9cf",
+        "500": "#1a9eb7",
+        "600": "#0b7da1",
+        "700": "#005b81",
+        "800": "#09486b",
+        "900": "#0d324d",
+        "1000": "#0c2132"
+      },
+      bcc: {
+        "100": "#f0fcfa",
+        "200": "#d2eeeb",
+        "300": "#a0cec8",
+        "400": "#6fb5ad",
+        "500": "#3e9f97",
+        "600": "#1d7f78",
+        "700": "#0c625c",
+        "800": "#014d49",
+        "900": "#0b3633",
+        "1000": "#012320"
+      },
+      green: {
+        "100": "#efffed",
+        "200": "#cbf3c9",
+        "300": "#83d895",
+        "400": "#32c180",
+        "500": "#1ca673",
+        "600": "#09825d",
+        "700": "#0c6241",
+        "800": "#094c3b",
+        "900": "#073734",
+        "1000": "#032429"
+      },
+      brown: {
+        "100": "#f9faf4",
+        "200": "#ece8dc",
+        "300": "#d1c5b0",
+        "400": "#bea889",
+        "500": "#a98c66",
+        "600": "#8b6d45",
+        "700": "#6e5232",
+        "800": "#553d28",
+        "900": "#3f2c1e",
+        "1000": "#2e1b0f"
+      },
+      yellow: {
+        "100": "#fdf8e9",
+        "200": "#f8e6a0",
+        "300": "#e9c348",
+        "400": "#d5a406",
+        "500": "#bc870d",
+        "600": "#a4670b",
+        "700": "#854901",
+        "800": "#653805",
+        "900": "#4b2c04",
+        "1000": "#2d1f00"
+      },
+      orange: {
+        "100": "#fffaed",
+        "200": "#fee3c1",
+        "300": "#f6b981",
+        "400": "#f19457",
+        "500": "#da772e",
+        "600": "#b55919",
+        "700": "#943a14",
+        "800": "#782612",
+        "900": "#5d1712",
+        "1000": "#420e0d"
+      },
+      red: {
+        "100": "#fff8f3",
+        "200": "#fee2dd",
+        "300": "#fab6ad",
+        "400": "#fa877e",
+        "500": "#ed6362",
+        "600": "#ca414e",
+        "700": "#a42237",
+        "800": "#811436",
+        "900": "#630d2e",
+        "1000": "#440223"
+      },
+      magenta: {
+        "100": "#fff8ff",
+        "200": "#fce0f8",
+        "300": "#f3b4e2",
+        "400": "#eb8acf",
+        "500": "#de66b0",
+        "600": "#be428f",
+        "700": "#952e70",
+        "800": "#751f57",
+        "900": "#5b1043",
+        "1000": "#3f0534"
+      },
+      purple: {
+        "100": "#f6f9ff",
+        "200": "#e3e3fe",
+        "300": "#c9c3ec",
+        "400": "#afa0e0",
+        "500": "#9a82da",
+        "600": "#8360c3",
+        "700": "#61479c",
+        "800": "#493481",
+        "900": "#352465",
+        "1000": "#1d154d"
+      },
+      transparent: "rgba(0, 0, 0, 0)",
+      brand: {
+        "100": "#f0fcfa",
+        "200": "#d2eeeb",
+        "300": "#a0cec8",
+        "400": "#6fb5ad",
+        "500": "#3e9f97",
+        "600": "#1d7f78",
+        "700": "#0c625c",
+        "800": "#014d49",
+        "900": "#0b3633",
+        "1000": "#012320"
+      }
+    },
+    space: {
+      "0": "0rem",
+      "25": "0.125rem",
+      "50": "0.25rem",
+      "75": "0.375rem",
+      "100": "0.5rem",
+      "150": "0.75rem",
+      "200": "1rem",
+      "250": "1.25rem",
+      "300": "1.5rem",
+      "400": "2rem",
+      "500": "2.5rem",
+      "600": "3rem",
+      "800": "4rem",
+      "1000": "5rem",
+      negative: {
+        "25": "-0.125rem",
+        "50": "-0.25rem",
+        "75": "-0.375rem",
+        "100": "-0.5rem",
+        "150": "-0.75rem",
+        "200": "-1rem",
+        "250": "-1.25rem",
+        "300": "-1.5rem",
+        "400": "-2rem"
+      }
+    },
+    "border-radius": {
+      none: "0",
+      "2xs": "0.125rem",
+      xs: "0.25rem",
+      sm: "0.375rem",
+      md: "0.5rem",
+      lg: "0.75rem",
+      xl: "1rem",
+      "2xl": "1.5rem",
+      "3xl": "2rem",
+      "4xl": "3rem",
+      full: "999px"
+    },
+    iconSize: {
+      xs: "1rem",
+      sm: "1.25rem",
+      md: "1.5rem",
+      lg: "2rem",
+      xl: "3rem"
+    },
+    "icon-size": {
+      xs: "1rem",
+      sm: "1.25rem",
+      md: "1.5rem",
+      lg: "2rem",
+      xl: "3rem"
+    },
+    borderWidth: {
+      "0": "0",
+      "1": "1px",
+      "2": "2px"
+    },
+    "border-width": {
+      "0": "0",
+      "1": "1px",
+      "2": "2px"
+    },
+    fontFamily: {
+      archivo: "Archivo"
+    },
+    "font-family": {
+      archivo: "Archivo"
+    },
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      bold: 700,
+      semibold: 600
+    },
+    "font-weight": {
+      regular: 400,
+      medium: 500,
+      bold: 700,
+      semibold: 600
+    },
+    lineHeight: {
+      "1": "14px",
+      "2": "16px",
+      "3": "20px",
+      "4": "24px",
+      "5": "28px",
+      "6": "32px",
+      "7": "36px",
+      "8": "40px",
+      "9": "56px",
+      "10": "64px",
+      none: "normal"
+    },
+    "line-height": {
+      "1": "14px",
+      "2": "16px",
+      "3": "20px",
+      "4": "24px",
+      "5": "28px",
+      "6": "32px",
+      "7": "36px",
+      "8": "40px",
+      "9": "56px",
+      "10": "64px",
+      none: "normal"
+    },
+    fontSize: {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      md: "1rem",
+      lg: "1.25rem",
+      xl: "1.5rem",
+      "2xl": "2em",
+      "3xl": "2.25rem",
+      "4xl": "3rem",
+      "5xl": "3.5rem"
+    },
+    "font-size": {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      md: "1rem",
+      lg: "1.25rem",
+      xl: "1.5rem",
+      "2xl": "2em",
+      "3xl": "2.25rem",
+      "4xl": "3rem",
+      "5xl": "3.5rem"
+    }
+  },
+  semantic: {
+    transitionDuration: "0.2s",
+    focusRing: {
+      width: "1px",
+      style: "solid",
+      color: "{surface.700}",
+      offset: "2px",
+      shadow: "0 0 0 0 rgba(0, 0, 0, 0)"
+    },
+    disabledOpacity: "0.6",
+    iconSize: "1rem",
+    anchorGutter: "0.125rem",
+    primary: {
+      "50": "{emerald.50}",
+      "100": "{emerald.100}",
+      "200": "{emerald.200}",
+      "300": "{emerald.300}",
+      "400": "{emerald.400}",
+      "500": "{emerald.500}",
+      "600": "{emerald.600}",
+      "700": "{emerald.700}",
+      "800": "{emerald.800}",
+      "900": "{emerald.900}",
+      "950": "{emerald.950}"
+    },
+    formField: {
+      paddingX: "0.75rem",
+      paddingY: "0.25rem",
+      sm: {
+        fontSize: "0.875rem",
+        paddingX: "0.75rem",
+        paddingY: "0.25rem"
+      },
+      lg: {
+        fontSize: "1rem",
+        paddingX: "0.75rem",
+        paddingY: "0.5rem"
+      },
+      borderRadius: "{border.radius.md}",
+      focusRing: {
+        width: "0",
+        style: "none",
+        color: "transparent",
+        offset: "0",
+        shadow: "0 0 0 0 rgba(0, 0, 0, 0)"
+      },
+      transitionDuration: "{transition.duration}"
+    },
+    list: {
+      padding: "0.5rem",
+      gap: "0.125rem",
+      header: {
+        padding: "0.5rem"
+      },
+      option: {
+        padding: "0.5rem 0.75rem",
+        borderRadius: "{border.radius.sm}"
+      },
+      optionGroup: {
+        padding: "0.5rem 0.75rem",
+        fontWeight: "500"
+      }
+    },
+    content: {
+      borderRadius: "{border.radius.md}"
+    },
+    navigation: {
+      list: {
+        padding: "0.25rem 0.25rem",
+        gap: "0.125rem"
+      },
+      item: {
+        padding: "0.5rem 0.75rem",
+        borderRadius: "{border.radius.sm}",
+        gap: "0.5rem"
+      },
+      submenuLabel: {
+        padding: "0.5rem 0.75rem",
+        fontWeight: "500"
+      },
+      submenuIcon: {
+        size: "0.75rem"
+      }
+    },
+    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: "1rem 0.75rem",
+        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: "1rem",
+        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": "{slate.50}",
+          "100": "{slate.100}",
+          "200": "{slate.200}",
+          "300": "{slate.300}",
+          "400": "{slate.400}",
+          "500": "{slate.500}",
+          "600": "{slate.600}",
+          "700": "{slate.700}",
+          "800": "{slate.800}",
+          "900": "{slate.900}",
+          "950": "{slate.950}"
+        },
+        primary: {
+          color: "{primary.500}",
+          contrastColor: "{surface.0}",
+          hoverColor: "{primary.600}",
+          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: "{slate.700}",
+          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: "{form.field.invalid.placeholder.color}",
+          iconColor: "{surface.400}",
+          shadow: "0 1px 2px 0 rgba(18, 18, 23, 0.05)"
+        },
+        text: {
+          color: "var(--color-text-default)",
+          hoverColor: "{surface.800}",
+          mutedColor: "{surface.500}",
+          hoverMutedColor: "{surface.600}"
+        },
+        content: {
+          background: "{surface.0}",
+          hoverBackground: "{surface.100}",
+          borderColor: "{surface.200}",
+          color: "{text.color}",
+          hoverColor: "{text.hover.color}"
+        },
+        overlay: {
+          select: {
+            background: "{surface.0}",
+            borderColor: "{surface.200}",
+            color: "{text.color}"
+          },
+          popover: {
+            background: "{surface.0}",
+            borderColor: "{surface.200}",
+            color: "{text.color}"
+          },
+          modal: {
+            background: "{surface.0}",
+            borderColor: "{surface.200}",
+            color: "{text.color}"
+          }
+        },
+        list: {
+          option: {
+            focusBackground: "{surface.100}",
+            selectedBackground: "{highlight.background}",
+            selectedFocusBackground: "{highlight.focus.background}",
+            color: "{text.color}",
+            focusColor: "{text.hover.color}",
+            selectedColor: "{highlight.color}",
+            selectedFocusColor: "{highlight.focus.color}",
+            icon: {
+              color: "{surface.400}",
+              focusColor: "{surface.500}"
+            }
+          },
+          optionGroup: {
+            background: "rgba(0, 0, 0, 0)",
+            color: "{text.muted.color}"
+          }
+        },
+        navigation: {
+          item: {
+            focusBackground: "{surface.100}",
+            activeBackground: "{surface.100}",
+            color: "{text.color}",
+            focusColor: "{text.hover.color}",
+            activeColor: "{text.hover.color}",
+            icon: {
+              color: "{surface.400}",
+              focusColor: "{surface.500}",
+              activeColor: "{surface.500}"
+            }
+          },
+          submenuLabel: {
+            background: "rgba(0, 0, 0, 0)",
+            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.400}",
+          contrastColor: "{surface.900}",
+          hoverColor: "{primary.300}",
+          activeColor: "{primary.200}"
+        },
+        highlight: {
+          background: "{primary.400}",
+          focusBackground: "{primary.400}",
+          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: "{slate.300}",
+          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 1px 2px 0 rgba(18, 18, 23, 0.05)"
+        },
+        text: {
+          color: "var(--color-text-default)",
+          hoverColor: "{surface.0}",
+          mutedColor: "{surface.400}",
+          hoverMutedColor: "{surface.300}"
+        },
+        content: {
+          background: "{surface.900}",
+          hoverBackground: "{surface.800}",
+          borderColor: "{surface.700}",
+          color: "{text.color}",
+          hoverColor: "{text.hover.color}"
+        },
+        overlay: {
+          select: {
+            background: "{surface.900}",
+            borderColor: "{surface.700}",
+            color: "{text.color}"
+          },
+          popover: {
+            background: "{surface.900}",
+            borderColor: "{surface.700}",
+            color: "{text.color}"
+          },
+          modal: {
+            background: "{surface.900}",
+            borderColor: "{surface.700}",
+            color: "{text.color}"
+          }
+        },
+        list: {
+          option: {
+            focusBackground: "{surface.800}",
+            selectedBackground: "{highlight.background}",
+            selectedFocusBackground: "{highlight.focus.background}",
+            color: "{text.color}",
+            focusColor: "{text.hover.color}",
+            selectedColor: "{highlight.color}",
+            selectedFocusColor: "{highlight.focus.color}",
+            icon: {
+              color: "{surface.500}",
+              focusColor: "{surface.400}"
+            }
+          },
+          optionGroup: {
+            background: "rgba(0, 0, 0, 0)",
+            color: "{text.muted.color}"
+          }
+        },
+        navigation: {
+          item: {
+            focusBackground: "{surface.800}",
+            activeBackground: "{surface.800}",
+            color: "{text.color}",
+            focusColor: "{text.hover.color}",
+            activeColor: "{text.hover.color}",
+            icon: {
+              color: "{surface.500}",
+              focusColor: "{surface.400}",
+              activeColor: "{surface.400}"
+            }
+          },
+          submenuLabel: {
+            background: "rgba(0, 0, 0, 0)",
+            color: "{text.muted.color}"
+          },
+          submenuIcon: {
+            color: "{surface.500}",
+            focusColor: "{surface.400}",
+            activeColor: "{surface.400}"
+          }
+        }
+      }
+    }
+  },
+  components: {
+    accordion: {
+      root: {
+        transitionDuration: "{transition.duration}"
+      },
+      panel: {
+        borderWidth: "1px",
+        borderColor: "var(--color-border-default)"
+      },
+      header: {
+        color: "var(--color-text-subtle)",
+        hoverColor: "var(--color-text-default)",
+        activeColor: "var(--color-text-default)",
+        padding: "1rem",
+        fontWeight: "700",
+        borderRadius: "0",
+        borderWidth: "0",
+        borderColor: "var(--color-elevation-surface-default)",
+        background: "var(--color-elevation-surface-default)",
+        hoverBackground: "var(--color-elevation-surface-default)",
+        activeBackground: "var(--color-elevation-surface-default)",
+        activeHoverBackground: "var(--color-elevation-surface-default)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        },
+        toggleIcon: {
+          color: "var(--color-icon-subtle)",
+          hoverColor: "var(--color-icon-default)",
+          activeColor: "var(--color-icon-default)",
+          activeHoverColor: "var(--color-icon-default)"
+        },
+        first: {
+          topBorderRadius: "0.375rem",
+          borderWidth: "0"
+        },
+        last: {
+          bottomBorderRadius: "0.375rem",
+          activeBottomBorderRadius: "0"
+        },
+        gap: "0.5rem"
+      },
+      content: {
+        borderWidth: "0",
+        borderColor: "var(--color-border-default)",
+        background: "var(--color-elevation-surface-default)",
+        color: "var(--color-text-default)",
+        padding: "1rem 0 1rem 1rem"
+      }
+    },
+    autocomplete: {
+      root: {
+        background: "var(--color-elevation-surface-default)",
+        disabledBackground: "var(--color-background-disabled-default)",
+        filledBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
+        borderColor: "var(--color-border-default)",
+        hoverBorderColor: "var(--color-border-input)",
+        focusBorderColor: "var(--color-border-focused)",
+        invalidBorderColor: "var(--color-border-danger)",
+        color: "var(--color-text-default)",
+        disabledColor: "var(--color-text-disabled)",
+        placeholderColor: "var(--color-text-subtlest)",
+        invalidPlaceholderColor: "var(--color-text-danger)",
+        shadow: "{form.field.shadow}",
+        paddingX: "0.375rem",
+        paddingY: "0.125rem",
+        borderRadius: "0.375rem",
+        focusRing: {
+          width: "{form.field.focus.ring.width}",
+          style: "{form.field.focus.ring.style}",
+          color: "transparent",
+          offset: "{form.field.focus.ring.offset}",
+          shadow: "{form.field.focus.ring.shadow}"
+        },
+        transitionDuration: "{transition.duration}"
+      },
+      overlay: {
+        background: "var(--color-elevation-surface-default)",
+        borderColor: "var(--color-border-default)",
+        borderRadius: "0.375rem",
+        color: "{overlay.select.color}",
+        shadow: "{overlay.select.shadow}"
+      },
+      list: {
+        padding: "0.5rem",
+        gap: "0.125rem"
+      },
+      option: {
+        focusBackground: "var(--color-background-accent-gray-subtle-hover)",
+        selectedBackground: "var(--color-background-brand-subtlest-default)",
+        selectedFocusBackground: "var(--color-background-brand-subtler-default)",
+        color: "var(--color-text-subtle)",
+        focusColor: "var(--color-text-default)",
+        selectedColor: "var(--color-text-selected)",
+        selectedFocusColor: "var(--color-text-selected)",
+        padding: "0.5rem 0.75rem",
+        borderRadius: "0.25rem",
+        gap: "0.5rem"
+      },
+      optionGroup: {
+        background: "var(--color-elevation-surface-default)",
+        color: "var(--color-text-subtlest)",
+        fontWeight: "{list.option.group.font.weight}",
+        padding: "0.5rem 0.75rem"
+      },
+      dropdown: {
+        width: "2.5rem",
+        sm: {
+          width: "2rem"
+        },
+        lg: {
+          width: "3rem"
+        },
+        borderColor: "var(--color-border-default)",
+        hoverBorderColor: "var(--color-border-default)",
+        activeBorderColor: "var(--color-border-default)",
+        borderRadius: "0.375rem",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      chip: {
+        borderRadius: "0.25rem"
+      },
+      emptyMessage: {
+        padding: "0.5rem 0.75rem"
+      },
+      colorScheme: {
+        light: {
+          chip: {
+            focusBackground: "var(--color-background-accent-gray-hover)",
+            focusColor: "var(--color-text-default)"
+          },
+          dropdown: {
+            background: "var(--color-background-accent-gray-subtle-default)",
+            hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
+            activeBackground: "var(--color-background-accent-gray-subtle-pressed)",
+            color: "var(--color-icon-subtlest)",
+            hoverColor: "var(--color-icon-subtle)",
+            activeColor: "var(--color-icon-default)"
+          }
+        },
+        dark: {
+          chip: {
+            focusBackground: "var(--color-background-accent-gray-hover)",
+            focusColor: "var(--color-text-default)"
+          },
+          dropdown: {
+            background: "var(--color-background-accent-gray-subtle-default)",
+            hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
+            activeBackground: "var(--color-background-accent-gray-subtle-pressed)",
+            color: "var(--color-icon-subtlest)",
+            hoverColor: "var(--color-icon-subtle)",
+            activeColor: "var(--color-icon-default)"
+          }
+        }
+      },
+      input: {
+        multiple: {
+          gap: "0.25rem",
+          minHeight: "2.5rem"
+        }
+      }
+    },
+    avatar: {
+      root: {
+        width: "2rem",
+        height: "2rem",
+        fontSize: "1rem",
+        background: "var(--color-background-accent-gray-default)",
+        color: "var(--color-text-default)",
+        borderRadius: "0.375rem"
+      },
+      icon: {
+        size: "1.25rem"
+      },
+      group: {
+        borderColor: "var(--color-border-inverse)",
+        offset: "-0.75rem"
+      },
+      lg: {
+        width: "2.5rem",
+        height: "2.5rem",
+        fontSize: "1.25rem",
+        icon: {
+          size: "1.5rem"
+        },
+        group: {
+          offset: "-1rem"
+        }
+      },
+      xl: {
+        width: "4rem",
+        height: "4rem",
+        fontSize: "2em",
+        icon: {
+          size: "2rem"
+        },
+        group: {
+          offset: "-1.5rem"
+        }
+      }
+    },
+    badge: {
+      root: {
+        borderRadius: "0.375rem",
+        padding: "0.25rem",
+        fontSize: "0.75rem",
+        fontWeight: "700",
+        minWidth: "1.25rem",
+        height: "1.25rem"
+      },
+      dot: {
+        size: "0.5rem"
+      },
+      sm: {
+        fontSize: "0.75rem",
+        minWidth: "1rem",
+        height: "1rem"
+      },
+      lg: {
+        fontSize: "0.875rem",
+        minWidth: "1.5rem",
+        height: "1.5rem"
+      },
+      xl: {
+        fontSize: "1rem",
+        minWidth: "2rem",
+        height: "2rem"
+      },
+      colorScheme: {
+        light: {
+          primary: {
+            background: "var(--color-background-brand-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          secondary: {
+            background: "var(--color-background-accent-gray-default)",
+            color: "var(--color-text-default)"
+          },
+          success: {
+            background: "var(--color-background-success-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          info: {
+            background: "var(--color-background-information-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          warn: {
+            background: "var(--color-background-warning-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          danger: {
+            background: "var(--color-background-danger-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          contrast: {
+            background: "var(--color-background-accent-gray-boldest-default)",
+            color: "var(--color-text-inverse)"
+          }
+        },
+        dark: {
+          primary: {
+            background: "var(--color-background-brand-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          secondary: {
+            background: "var(--color-background-accent-gray-default)",
+            color: "var(--color-text-default)"
+          },
+          success: {
+            background: "var(--color-background-success-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          info: {
+            background: "var(--color-background-information-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          warn: {
+            background: "var(--color-background-warning-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          danger: {
+            background: "var(--color-background-danger-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          contrast: {
+            background: "var(--color-background-accent-gray-boldest-default)",
+            color: "var(--color-text-inverse)"
+          }
+        }
+      },
+      circle: {
+        borderRadius: "9999px"
+      }
+    },
+    button: {
+      root: {
+        borderRadius: "0.5rem",
+        roundedBorderRadius: "2rem",
+        gap: "0.5rem",
+        paddingX: "1rem",
+        paddingY: "0.375rem",
+        iconOnlyWidth: "2.5rem",
+        sm: {
+          fontSize: "0.875rem",
+          paddingX: "0.75rem",
+          paddingY: "0.25rem",
+          iconOnlyWidth: "2rem",
+          minHeight: "2rem"
+        },
+        lg: {
+          fontSize: "1.25rem",
+          paddingX: "1.25rem",
+          paddingY: "0.5rem",
+          iconOnlyWidth: "3rem",
+          minHeight: "3rem"
+        },
+        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}",
+        minHeight: "2.5rem"
+      },
+      colorScheme: {
+        light: {
+          root: {
+            primary: {
+              background: "var(--color-background-brand-bolder-default)",
+              hoverBackground: "var(--color-background-brand-bolder-hover)",
+              activeBackground: "var(--color-background-brand-bolder-pressed)",
+              borderColor: "var(--color-background-brand-bolder-default)",
+              hoverBorderColor: "var(--color-background-brand-bolder-hover)",
+              activeBorderColor: "var(--color-background-brand-bolder-pressed)",
+              color: "var(--color-elevation-surface-default)",
+              hoverColor: "var(--color-elevation-surface-default)",
+              activeColor: "var(--color-elevation-surface-default)",
+              focusRing: {
+                color: "var(--color-border-focused)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            secondary: {
+              background: "var(--color-background-accent-gray-subtle-default)",
+              hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
+              activeBackground: "var(--color-background-accent-gray-subtle-pressed)",
+              borderColor: "var(--color-background-accent-gray-subtle-default)",
+              hoverBorderColor: "var(--color-background-accent-gray-subtle-hover)",
+              activeBorderColor: "var(--color-background-accent-gray-subtle-pressed)",
+              color: "var(--color-text-default)",
+              hoverColor: "var(--color-text-default)",
+              activeColor: "var(--color-text-default)",
+              focusRing: {
+                color: "var(--color-border-accent-gray)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            info: {
+              background: "var(--color-background-information-bolder-default)",
+              hoverBackground: "var(--color-background-information-bolder-hover)",
+              activeBackground: "var(--color-background-information-bolder-pressed)",
+              borderColor: "var(--color-background-information-bolder-default)",
+              hoverBorderColor: "var(--color-background-information-bolder-hover)",
+              activeBorderColor: "var(--color-background-information-bolder-pressed)",
+              color: "var(--color-text-inverse)",
+              hoverColor: "var(--color-text-inverse)",
+              activeColor: "var(--color-text-inverse)",
+              focusRing: {
+                color: "var(--color-border-information)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            success: {
+              background: "var(--color-background-success-bolder-default)",
+              hoverBackground: "var(--color-background-success-bolder-hover)",
+              activeBackground: "var(--color-background-success-bolder-pressed)",
+              borderColor: "var(--color-background-success-bolder-default)",
+              hoverBorderColor: "var(--color-background-success-bolder-hover)",
+              activeBorderColor: "var(--color-background-success-bolder-pressed)",
+              color: "var(--color-text-inverse)",
+              hoverColor: "var(--color-text-inverse)",
+              activeColor: "var(--color-text-inverse)",
+              focusRing: {
+                color: "var(--color-border-success)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            warn: {
+              background: "var(--color-background-warning-bolder-default)",
+              hoverBackground: "var(--color-background-warning-bolder-hover)",
+              activeBackground: "var(--color-background-warning-bolder-pressed)",
+              borderColor: "var(--color-background-warning-bolder-default)",
+              hoverBorderColor: "var(--color-background-warning-bolder-hover)",
+              activeBorderColor: "var(--color-background-warning-bolder-pressed)",
+              color: "var(--color-text-warning-inverse)",
+              hoverColor: "var(--color-text-warning-inverse)",
+              activeColor: "var(--color-text-warning-inverse)",
+              focusRing: {
+                color: "var(--color-border-warning)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            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: "0 0 0 0 #00000000"
+              }
+            },
+            danger: {
+              background: "var(--color-background-danger-bolder-default)",
+              hoverBackground: "var(--color-background-danger-bolder-hover)",
+              activeBackground: "var(--color-background-danger-bolder-pressed)",
+              borderColor: "var(--color-background-danger-bolder-default)",
+              hoverBorderColor: "var(--color-background-danger-bolder-hover)",
+              activeBorderColor: "var(--color-background-danger-bolder-pressed)",
+              color: "var(--color-text-inverse)",
+              hoverColor: "var(--color-text-inverse)",
+              activeColor: "var(--color-text-inverse)",
+              focusRing: {
+                color: "var(--color-border-danger)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            contrast: {
+              background: "var(--color-background-accent-gray-boldest-default)",
+              hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
+              activeBackground: "var(--color-background-accent-gray-boldest-pressed)",
+              borderColor: "var(--color-background-accent-gray-boldest-default)",
+              hoverBorderColor: "var(--color-background-accent-gray-boldest-hover)",
+              activeBorderColor: "var(--color-background-accent-gray-boldest-pressed)",
+              color: "var(--color-text-inverse)",
+              hoverColor: "var(--color-text-inverse)",
+              activeColor: "var(--color-text-inverse)",
+              focusRing: {
+                color: "var(--color-border-accent-gray)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            }
+          },
+          outlined: {
+            primary: {
+              hoverBackground: "var(--color-background-brand-subtlest-hover)",
+              activeBackground: "var(--color-background-brand-subtlest-pressed)",
+              borderColor: "var(--color-border-brand)",
+              color: "var(--color-text-brand-default)"
+            },
+            secondary: {
+              hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
+              activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
+              borderColor: "var(--color-border-accent-gray)",
+              color: "var(--color-text-default)"
+            },
+            success: {
+              hoverBackground: "var(--color-background-success-hover)",
+              activeBackground: "var(--color-background-success-pressed)",
+              borderColor: "var(--color-border-success)",
+              color: "var(--color-text-success)"
+            },
+            info: {
+              hoverBackground: "var(--color-background-information-hover)",
+              activeBackground: "var(--color-background-information-pressed)",
+              borderColor: "var(--color-border-information)",
+              color: "var(--color-text-information)"
+            },
+            warn: {
+              hoverBackground: "var(--color-background-warning-hover)",
+              activeBackground: "var(--color-background-warning-pressed)",
+              borderColor: "var(--color-border-warning)",
+              color: "var(--color-text-warning-default)"
+            },
+            help: {
+              hoverBackground: "{purple.50}",
+              activeBackground: "{purple.100}",
+              borderColor: "{purple.200}",
+              color: "{purple.500}"
+            },
+            danger: {
+              hoverBackground: "var(--color-background-danger-hover)",
+              activeBackground: "var(--color-background-danger-pressed)",
+              borderColor: "var(--color-border-danger)",
+              color: "var(--color-text-danger)"
+            },
+            contrast: {
+              hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
+              activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
+              borderColor: "var(--color-border-accent-gray)",
+              color: "var(--color-text-default)"
+            },
+            plain: {
+              hoverBackground: "{surface.50}",
+              activeBackground: "{surface.100}",
+              borderColor: "{surface.200}",
+              color: "{surface.700}"
+            }
+          },
+          text: {
+            primary: {
+              hoverBackground: "var(--color-background-brand-subtlest-hover)",
+              activeBackground: "var(--color-background-brand-subtlest-pressed)",
+              color: "var(--color-text-brand-default)"
+            },
+            secondary: {
+              hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
+              activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
+              color: "var(--color-text-default)"
+            },
+            success: {
+              hoverBackground: "var(--color-background-success-hover)",
+              activeBackground: "var(--color-background-success-pressed)",
+              color: "var(--color-text-success)"
+            },
+            info: {
+              hoverBackground: "var(--color-background-information-hover)",
+              activeBackground: "var(--color-background-information-pressed)",
+              color: "var(--color-text-information)"
+            },
+            warn: {
+              hoverBackground: "var(--color-background-warning-hover)",
+              activeBackground: "var(--color-background-warning-pressed)",
+              color: "var(--color-text-warning-default)"
+            },
+            help: {
+              hoverBackground: "{purple.50}",
+              activeBackground: "{purple.100}",
+              color: "{purple.500}"
+            },
+            danger: {
+              hoverBackground: "var(--color-background-danger-hover)",
+              activeBackground: "var(--color-background-danger-pressed)",
+              color: "var(--color-text-danger)"
+            },
+            contrast: {
+              hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
+              activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
+              color: "var(--color-text-default)"
+            },
+            plain: {
+              hoverBackground: "{surface.50}",
+              activeBackground: "{surface.100}",
+              color: "{surface.700}"
+            }
+          },
+          link: {
+            color: "{primary.color}",
+            hoverColor: "{primary.color}",
+            activeColor: "{primary.color}"
+          }
+        },
+        dark: {
+          root: {
+            primary: {
+              background: "var(--color-background-brand-bolder-default)",
+              hoverBackground: "var(--color-background-brand-bolder-hover)",
+              activeBackground: "var(--color-background-brand-bolder-pressed)",
+              borderColor: "var(--color-background-brand-bolder-default)",
+              hoverBorderColor: "var(--color-background-brand-bolder-hover)",
+              activeBorderColor: "var(--color-background-brand-bolder-pressed)",
+              color: "var(--color-elevation-surface-default)",
+              hoverColor: "var(--color-elevation-surface-default)",
+              activeColor: "var(--color-elevation-surface-default)",
+              focusRing: {
+                color: "var(--color-border-focused)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            secondary: {
+              background: "var(--color-background-accent-gray-subtle-default)",
+              hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
+              activeBackground: "var(--color-background-accent-gray-subtle-pressed)",
+              borderColor: "var(--color-background-accent-gray-subtle-default)",
+              hoverBorderColor: "var(--color-background-accent-gray-subtle-hover)",
+              activeBorderColor: "var(--color-background-accent-gray-subtle-pressed)",
+              color: "var(--color-text-default)",
+              hoverColor: "var(--color-text-default)",
+              activeColor: "var(--color-text-default)",
+              focusRing: {
+                color: "var(--color-border-accent-gray)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            info: {
+              background: "var(--color-background-information-bolder-default)",
+              hoverBackground: "var(--color-background-information-bolder-hover)",
+              activeBackground: "var(--color-background-information-bolder-pressed)",
+              borderColor: "var(--color-background-information-bolder-default)",
+              hoverBorderColor: "var(--color-background-information-bolder-hover)",
+              activeBorderColor: "var(--color-background-information-bolder-pressed)",
+              color: "var(--color-text-inverse)",
+              hoverColor: "var(--color-text-inverse)",
+              activeColor: "var(--color-text-inverse)",
+              focusRing: {
+                color: "var(--color-border-information)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            success: {
+              background: "var(--color-background-success-bolder-default)",
+              hoverBackground: "var(--color-background-success-bolder-hover)",
+              activeBackground: "var(--color-background-success-bolder-pressed)",
+              borderColor: "var(--color-background-success-bolder-default)",
+              hoverBorderColor: "var(--color-background-success-bolder-hover)",
+              activeBorderColor: "var(--color-background-success-bolder-pressed)",
+              color: "var(--color-text-inverse)",
+              hoverColor: "var(--color-text-inverse)",
+              activeColor: "var(--color-text-inverse)",
+              focusRing: {
+                color: "var(--color-border-success)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            warn: {
+              background: "var(--color-background-warning-bolder-default)",
+              hoverBackground: "var(--color-background-warning-bolder-hover)",
+              activeBackground: "var(--color-background-warning-bolder-pressed)",
+              borderColor: "var(--color-background-warning-bolder-default)",
+              hoverBorderColor: "var(--color-background-warning-bolder-hover)",
+              activeBorderColor: "var(--color-background-warning-bolder-pressed)",
+              color: "var(--color-text-warning-inverse)",
+              hoverColor: "var(--color-text-warning-inverse)",
+              activeColor: "var(--color-text-warning-inverse)",
+              focusRing: {
+                color: "var(--color-border-warning)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            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: "0 0 0 0 #00000000"
+              }
+            },
+            danger: {
+              background: "var(--color-background-danger-bolder-default)",
+              hoverBackground: "var(--color-background-danger-bolder-hover)",
+              activeBackground: "var(--color-background-danger-bolder-pressed)",
+              borderColor: "var(--color-background-danger-bolder-default)",
+              hoverBorderColor: "var(--color-background-danger-bolder-hover)",
+              activeBorderColor: "var(--color-background-danger-bolder-pressed)",
+              color: "var(--color-text-inverse)",
+              hoverColor: "var(--color-text-inverse)",
+              activeColor: "var(--color-text-inverse)",
+              focusRing: {
+                color: "var(--color-border-danger)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            contrast: {
+              background: "var(--color-background-accent-gray-boldest-default)",
+              hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
+              activeBackground: "var(--color-background-accent-gray-boldest-pressed)",
+              borderColor: "var(--color-background-accent-gray-boldest-default)",
+              hoverBorderColor: "var(--color-background-accent-gray-boldest-hover)",
+              activeBorderColor: "var(--color-background-accent-gray-boldest-pressed)",
+              color: "var(--color-text-inverse)",
+              hoverColor: "var(--color-text-inverse)",
+              activeColor: "var(--color-text-inverse)",
+              focusRing: {
+                color: "var(--color-border-accent-gray)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            }
+          },
+          outlined: {
+            primary: {
+              hoverBackground: "var(--color-background-brand-subtlest-hover)",
+              activeBackground: "var(--color-background-brand-subtlest-pressed)",
+              borderColor: "var(--color-border-brand)",
+              color: "var(--color-text-brand-default)"
+            },
+            secondary: {
+              hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
+              activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
+              borderColor: "var(--color-border-accent-gray)",
+              color: "var(--color-text-default)"
+            },
+            success: {
+              hoverBackground: "var(--color-background-success-hover)",
+              activeBackground: "var(--color-background-success-pressed)",
+              borderColor: "var(--color-border-success)",
+              color: "var(--color-text-success)"
+            },
+            info: {
+              hoverBackground: "var(--color-background-information-hover)",
+              activeBackground: "var(--color-background-information-pressed)",
+              borderColor: "var(--color-border-information)",
+              color: "var(--color-text-information)"
+            },
+            warn: {
+              hoverBackground: "var(--color-background-warning-hover)",
+              activeBackground: "var(--color-background-warning-pressed)",
+              borderColor: "var(--color-border-warning)",
+              color: "var(--color-text-warning-default)"
+            },
+            help: {
+              hoverBackground: "{purple.400}",
+              activeBackground: "{purple.400}",
+              borderColor: "{purple.700}",
+              color: "{purple.400}"
+            },
+            danger: {
+              hoverBackground: "var(--color-background-danger-hover)",
+              activeBackground: "var(--color-background-danger-pressed)",
+              borderColor: "var(--color-border-danger)",
+              color: "var(--color-text-danger)"
+            },
+            contrast: {
+              hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
+              activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
+              borderColor: "var(--color-border-accent-gray)",
+              color: "var(--color-text-default)"
+            },
+            plain: {
+              hoverBackground: "{surface.800}",
+              activeBackground: "{surface.700}",
+              borderColor: "{surface.600}",
+              color: "{surface.0}"
+            }
+          },
+          text: {
+            primary: {
+              hoverBackground: "var(--color-background-brand-subtlest-hover)",
+              activeBackground: "var(--color-background-brand-subtlest-pressed)",
+              color: "var(--color-text-brand-default)"
+            },
+            secondary: {
+              hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
+              activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
+              color: "var(--color-text-default)"
+            },
+            success: {
+              hoverBackground: "var(--color-background-success-hover)",
+              activeBackground: "var(--color-background-success-pressed)",
+              color: "var(--color-text-success)"
+            },
+            info: {
+              hoverBackground: "var(--color-background-information-hover)",
+              activeBackground: "var(--color-background-information-pressed)",
+              color: "var(--color-text-information)"
+            },
+            warn: {
+              hoverBackground: "var(--color-background-warning-hover)",
+              activeBackground: "var(--color-background-warning-pressed)",
+              color: "var(--color-text-warning-default)"
+            },
+            help: {
+              hoverBackground: "{purple.400}",
+              activeBackground: "{purple.400}",
+              color: "{purple.400}"
+            },
+            danger: {
+              hoverBackground: "var(--color-background-danger-hover)",
+              activeBackground: "var(--color-background-danger-pressed)",
+              color: "var(--color-text-danger)"
+            },
+            contrast: {
+              hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
+              activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
+              color: "var(--color-text-default)"
+            },
+            plain: {
+              hoverBackground: "{surface.800}",
+              activeBackground: "{surface.700}",
+              color: "{surface.0}"
+            }
+          },
+          link: {
+            color: "{primary.color}",
+            hoverColor: "{primary.color}",
+            activeColor: "{primary.color}"
+          }
+        }
+      }
+    },
+    checkbox: {
+      root: {
+        borderRadius: "0.25rem",
+        width: "1.25rem",
+        height: "1.25rem",
+        background: "var(--color-elevation-surface-default)",
+        checkedBackground: "var(--color-background-brand-bolder-default)",
+        checkedHoverBackground: "var(--color-background-brand-bolder-hover)",
+        disabledBackground: "var(--color-background-disabled-default)",
+        filledBackground: "var(--color-background-accent-gray-subtler-default)",
+        borderColor: "var(--color-border-default)",
+        hoverBorderColor: "var(--color-border-bold)",
+        focusBorderColor: "var(--color-border-focused)",
+        checkedBorderColor: "var(--color-background-brand-bolder-default)",
+        checkedHoverBorderColor: "var(--color-background-brand-bolder-hover)",
+        checkedFocusBorderColor: "var(--color-border-focused)",
+        checkedDisabledBorderColor: "var(--color-border-disabled)",
+        invalidBorderColor: "var(--color-border-danger)",
+        shadow: "{form.field.shadow}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        },
+        transitionDuration: "{form.field.transition.duration}",
+        sm: {
+          width: "1rem",
+          height: "1rem"
+        },
+        lg: {
+          width: "1.5rem",
+          height: "1.5rem"
+        },
+        gap: "0.5rem"
+      },
+      icon: {
+        size: "1rem",
+        color: "var(--color-icon-inverse)",
+        checkedColor: "var(--color-icon-inverse)",
+        checkedHoverColor: "var(--color-icon-inverse)",
+        disabledColor: "var(--color-icon-disabled)",
+        sm: {
+          size: "1rem"
+        },
+        lg: {
+          size: "1.25rem"
+        }
+      }
+    },
+    chip: {
+      root: {
+        borderRadius: "0.5rem",
+        paddingX: "0.75rem",
+        paddingY: "0.5rem",
+        gap: "0.5rem",
+        transitionDuration: "{transition.duration}"
+      },
+      image: {
+        width: "2rem",
+        height: "2rem"
+      },
+      icon: {
+        size: "1.25rem"
+      },
+      removeIcon: {
+        size: "1.25rem",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{form.field.focus.ring.shadow}"
+        },
+        borderRadius: "9999px"
+      },
+      colorScheme: {
+        light: {
+          root: {
+            background: "var(--color-background-accent-gray-default)",
+            color: "var(--color-text-default)"
+          },
+          icon: {
+            color: "var(--color-icon-default)"
+          },
+          removeIcon: {
+            color: "var(--color-icon-default)"
+          }
+        },
+        dark: {
+          root: {
+            background: "var(--color-background-accent-gray-default)",
+            color: "var(--color-text-default)"
+          },
+          icon: {
+            color: "var(--color-icon-default)"
+          },
+          removeIcon: {
+            color: "var(--color-icon-default)"
+          }
+        }
+      }
+    },
+    divider: {
+      root: {
+        borderColor: "var(--color-border-default)"
+      },
+      content: {
+        background: "transparent",
+        color: "var(--color-text-default)",
+        gap: "0.5rem"
+      },
+      horizontal: {
+        margin: "1rem 0",
+        padding: "0.5rem",
+        content: {
+          padding: "0 0.5rem"
+        }
+      },
+      vertical: {
+        margin: "0 1rem",
+        padding: "0.5rem",
+        content: {
+          padding: "0.5rem 0"
+        }
+      }
+    },
+    inputgroup: {
+      addon: {
+        background: "var(--color-elevation-surface-default)",
+        borderColor: "var(--color-border-input)",
+        color: "var(--color-text-subtle)",
+        borderRadius: "0.375rem",
+        padding: "0.5rem",
+        minWidth: "2.5rem",
+        minHeight: "2.5rem"
+      }
+    },
+    inputtext: {
+      root: {
+        background: "var(--color-elevation-surface-default)",
+        disabledBackground: "var(--color-background-disabled-default)",
+        filledBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
+        borderColor: "var(--color-border-default)",
+        hoverBorderColor: "var(--color-border-input)",
+        focusBorderColor: "var(--color-border-focused)",
+        invalidBorderColor: "var(--color-border-danger)",
+        color: "var(--color-text-default)",
+        disabledColor: "var(--color-text-disabled)",
+        placeholderColor: "var(--color-text-subtlest)",
+        invalidPlaceholderColor: "var(--color-text-danger)",
+        shadow: "{form.field.shadow}",
+        paddingX: "0.75rem",
+        paddingY: "0.25rem",
+        borderRadius: "0.375rem",
+        focusRing: {
+          width: "{form.field.focus.ring.width}",
+          style: "{form.field.focus.ring.style}",
+          color: "transparent",
+          offset: "{form.field.focus.ring.offset}",
+          shadow: "{form.field.focus.ring.shadow}"
+        },
+        transitionDuration: "{form.field.transition.duration}",
+        sm: {
+          fontSize: "0.875rem",
+          paddingX: "0.75rem",
+          paddingY: "0.125rem",
+          minHeight: "2rem"
+        },
+        lg: {
+          fontSize: "1.25rem",
+          paddingX: "0.75rem",
+          paddingY: "0.5rem",
+          minHeight: "3rem"
+        },
+        gap: "0.25rem",
+        minHeight: "2.5rem"
+      }
+    },
+    listbox: {
+      root: {
+        background: "var(--color-elevation-surface-default)",
+        disabledBackground: "var(--color-background-disabled-default)",
+        borderColor: "var(--color-border-default)",
+        invalidBorderColor: "var(--color-border-danger)",
+        color: "var(--color-elevation-surface-default)",
+        disabledColor: "var(--color-background-accent-gray-default)",
+        shadow: "{form.field.shadow}",
+        borderRadius: "0.375rem",
+        transitionDuration: "{form.field.transition.duration}"
+      },
+      list: {
+        padding: "0.5rem",
+        gap: "0.125rem",
+        header: {
+          padding: "0.5rem"
+        }
+      },
+      option: {
+        focusBackground: "var(--color-background-accent-gray-subtle-hover)",
+        selectedBackground: "var(--color-background-brand-subtlest-default)",
+        selectedFocusBackground: "var(--color-background-brand-subtler-default)",
+        color: "var(--color-text-subtle)",
+        focusColor: "var(--color-text-default)",
+        selectedColor: "var(--color-text-selected)",
+        selectedFocusColor: "var(--color-text-selected)",
+        padding: "0.5rem 0.75rem",
+        borderRadius: "0.25rem"
+      },
+      optionGroup: {
+        background: "var(--color-elevation-surface-default)",
+        color: "var(--color-text-subtlest)",
+        fontWeight: "{list.option.group.font.weight}",
+        padding: "0.75rem"
+      },
+      checkmark: {
+        color: "var(--color-icon-subtle)",
+        gutterStart: "-0.375rem",
+        gutterEnd: "0.375rem"
+      },
+      emptyMessage: {
+        padding: "0.5rem 0.75rem"
+      },
+      colorScheme: {
+        light: {
+          option: {
+            stripedBackground: "{surface.50}"
+          }
+        },
+        dark: {
+          option: {
+            stripedBackground: "{surface.900}"
+          }
+        }
+      }
+    },
+    message: {
+      root: {
+        borderRadius: "0.375rem",
+        borderWidth: "1px",
+        transitionDuration: "{transition.duration}"
+      },
+      content: {
+        padding: "0.375rem 0.75rem",
+        gap: "0.5rem",
+        sm: {
+          padding: "0.125rem 0.5rem",
+          minHeight: "2rem"
+        },
+        lg: {
+          padding: "0.5rem 1rem",
+          minHeight: "3rem"
+        },
+        minHeight: "2.5rem"
+      },
+      text: {
+        fontSize: "0.875rem",
+        fontWeight: "500",
+        sm: {
+          fontSize: "0.875rem"
+        },
+        lg: {
+          fontSize: "1rem"
+        }
+      },
+      icon: {
+        size: "1.25rem",
+        sm: {
+          size: "1.25rem"
+        },
+        lg: {
+          size: "1.25rem"
+        }
+      },
+      closeButton: {
+        width: "1.5rem",
+        height: "1.5rem",
+        borderRadius: "0.75rem",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          offset: "{focus.ring.offset}"
+        }
+      },
+      closeIcon: {
+        size: "1.25rem",
+        sm: {
+          size: "0.75rem"
+        },
+        lg: {
+          size: "1rem"
+        }
+      },
+      simple: {
+        content: {
+          padding: "0rem"
+        }
+      },
+      colorScheme: {
+        light: {
+          info: {
+            background: "var(--color-background-information-default)",
+            borderColor: "var(--color-border-information)",
+            color: "var(--color-text-information)",
+            shadow: "0 4px 8px 0 rgba(2, 5, 10, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-information-hover)",
+              focusRing: {
+                color: "var(--color-border-information)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-information)",
+              borderColor: "var(--color-border-information)"
+            },
+            simple: {
+              color: "var(--color-text-information)"
+            }
+          },
+          success: {
+            background: "var(--color-background-success-default)",
+            borderColor: "var(--color-border-success)",
+            color: "var(--color-text-success)",
+            shadow: "0 4px 8px 0 rgba(1, 8, 4, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-success-hover)",
+              focusRing: {
+                color: "var(--color-border-success)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-success)",
+              borderColor: "var(--color-border-success)"
+            },
+            simple: {
+              color: "var(--color-text-success)"
+            }
+          },
+          warn: {
+            background: "var(--color-background-warning-default)",
+            borderColor: "var(--color-border-warning)",
+            color: "var(--color-text-warning-default)",
+            shadow: "0 4px 8px 0 rgba(9, 7, 0, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-warning-hover)",
+              focusRing: {
+                color: "var(--color-border-warning)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-warning-default)",
+              borderColor: "var(--color-border-warning)"
+            },
+            simple: {
+              color: "var(--color-text-warning-default)"
+            }
+          },
+          error: {
+            background: "var(--color-background-danger-default)",
+            borderColor: "var(--color-border-danger)",
+            color: "var(--color-text-danger)",
+            shadow: "0 4px 8px 0 rgba(10, 3, 3, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-danger-hover)",
+              focusRing: {
+                color: "var(--color-border-danger)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-danger)",
+              borderColor: "var(--color-border-danger)"
+            },
+            simple: {
+              color: "var(--color-text-danger)"
+            }
+          },
+          secondary: {
+            background: "var(--color-background-accent-gray-subtler-default)",
+            borderColor: "var(--color-border-accent-gray)",
+            color: "var(--color-text-default)",
+            shadow: "0 4px 8px 0 rgba(4, 5, 6, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
+              focusRing: {
+                color: "var(--color-border-accent-gray)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-default)",
+              borderColor: "var(--color-border-accent-gray)"
+            },
+            simple: {
+              color: "var(--color-text-default)"
+            }
+          },
+          contrast: {
+            background: "var(--color-background-accent-gray-boldest-default)",
+            borderColor: "var(--color-icon-default)",
+            color: "var(--color-text-inverse)",
+            shadow: "0 4px 8px 0 rgba(0, 0, 1, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
+              focusRing: {
+                color: "var(--color-border-inverse)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-default)",
+              borderColor: "var(--color-background-accent-gray-boldest-default)"
+            },
+            simple: {
+              color: "var(--color-text-default)"
+            }
+          }
+        },
+        dark: {
+          info: {
+            background: "var(--color-background-information-default)",
+            borderColor: "var(--color-border-information)",
+            color: "var(--color-text-information)",
+            shadow: "0 4px 8px 0 rgba(2, 5, 10, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-information-hover)",
+              focusRing: {
+                color: "var(--color-border-information)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-information)",
+              borderColor: "var(--color-border-information)"
+            },
+            simple: {
+              color: "var(--color-text-information)"
+            }
+          },
+          success: {
+            background: "var(--color-background-success-default)",
+            borderColor: "var(--color-border-success)",
+            color: "var(--color-text-success)",
+            shadow: "0 4px 8px 0 rgba(1, 8, 4, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-success-hover)",
+              focusRing: {
+                color: "var(--color-border-success)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-success)",
+              borderColor: "var(--color-border-success)"
+            },
+            simple: {
+              color: "var(--color-text-success)"
+            }
+          },
+          warn: {
+            background: "var(--color-background-warning-default)",
+            borderColor: "var(--color-border-warning)",
+            color: "var(--color-text-warning-default)",
+            shadow: "0 4px 8px 0 rgba(9, 7, 0, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-warning-hover)",
+              focusRing: {
+                color: "var(--color-border-warning)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-warning-default)",
+              borderColor: "var(--color-border-warning)"
+            },
+            simple: {
+              color: "var(--color-text-warning-default)"
+            }
+          },
+          error: {
+            background: "var(--color-background-danger-default)",
+            borderColor: "var(--color-border-danger)",
+            color: "var(--color-text-danger)",
+            shadow: "0 4px 8px 0 rgba(10, 3, 3, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-danger-hover)",
+              focusRing: {
+                color: "var(--color-border-danger)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-danger)",
+              borderColor: "var(--color-border-danger)"
+            },
+            simple: {
+              color: "var(--color-text-danger)"
+            }
+          },
+          secondary: {
+            background: "var(--color-background-accent-gray-subtler-default)",
+            borderColor: "var(--color-border-accent-gray)",
+            color: "var(--color-text-default)",
+            shadow: "0 4px 8px 0 rgba(4, 5, 6, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
+              focusRing: {
+                color: "var(--color-border-accent-gray)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-default)",
+              borderColor: "var(--color-border-accent-gray)"
+            },
+            simple: {
+              color: "var(--color-text-default)"
+            }
+          },
+          contrast: {
+            background: "var(--color-background-accent-gray-boldest-default)",
+            borderColor: "var(--color-icon-default)",
+            color: "var(--color-text-inverse)",
+            shadow: "0 4px 8px 0 rgba(0, 0, 1, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
+              focusRing: {
+                color: "var(--color-border-inverse)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-default)",
+              borderColor: "var(--color-background-accent-gray-boldest-default)"
+            },
+            simple: {
+              color: "var(--color-text-default)"
+            }
+          }
+        }
+      }
+    },
+    multiselect: {
+      root: {
+        background: "var(--color-elevation-surface-default)",
+        disabledBackground: "var(--color-background-disabled-default)",
+        filledBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
+        borderColor: "var(--color-border-default)",
+        hoverBorderColor: "var(--color-border-input)",
+        focusBorderColor: "var(--color-border-focused)",
+        invalidBorderColor: "var(--color-border-danger)",
+        color: "var(--color-text-default)",
+        disabledColor: "var(--color-text-disabled)",
+        placeholderColor: "var(--color-text-subtlest)",
+        invalidPlaceholderColor: "var(--color-text-danger)",
+        shadow: "{form.field.shadow}",
+        paddingX: "0.75rem",
+        paddingY: "0.25rem",
+        borderRadius: "0.375rem",
+        focusRing: {
+          width: "{form.field.focus.ring.width}",
+          style: "{form.field.focus.ring.style}",
+          color: "transparent",
+          offset: "{form.field.focus.ring.offset}",
+          shadow: "{form.field.focus.ring.shadow}"
+        },
+        transitionDuration: "{form.field.transition.duration}",
+        sm: {
+          fontSize: "0.875rem",
+          paddingX: "0.75rem",
+          paddingY: "0.25rem",
+          minHeight: "2rem"
+        },
+        lg: {
+          fontSize: "1rem",
+          paddingX: "0.75rem",
+          paddingY: "0.5rem",
+          minHeight: "3rem"
+        },
+        minHeight: "2.5rem"
+      },
+      dropdown: {
+        width: "2.5rem",
+        color: "var(--color-icon-subtlest)"
+      },
+      overlay: {
+        background: "var(--color-elevation-surface-default)",
+        borderColor: "var(--color-border-default)",
+        borderRadius: "0.375rem",
+        color: "{overlay.select.color}",
+        shadow: "{overlay.select.shadow}"
+      },
+      list: {
+        padding: "0.5rem",
+        gap: "0.125rem",
+        header: {
+          padding: "0.5rem"
+        }
+      },
+      option: {
+        focusBackground: "var(--color-background-accent-gray-subtle-hover)",
+        selectedBackground: "var(--color-background-brand-subtlest-default)",
+        selectedFocusBackground: "var(--color-background-brand-subtler-default)",
+        color: "var(--color-text-subtle)",
+        focusColor: "var(--color-text-default)",
+        selectedColor: "var(--color-text-selected)",
+        selectedFocusColor: "var(--color-text-selected)",
+        padding: "0.5rem 0.75rem",
+        borderRadius: "0.25rem",
+        gap: "0.5rem"
+      },
+      optionGroup: {
+        background: "var(--color-elevation-surface-default)",
+        color: "var(--color-text-subtlest)",
+        fontWeight: "{list.option.group.font.weight}",
+        padding: "0.5rem 0.75rem"
+      },
+      chip: {
+        borderRadius: "0.25rem"
+      },
+      clearIcon: {
+        color: "var(--color-icon-subtlest)"
+      },
+      emptyMessage: {
+        padding: "0.5rem 0.75rem"
+      }
+    },
+    progressbar: {
+      root: {
+        background: "var(--color-background-accent-gray-default)",
+        borderRadius: "0.375rem",
+        height: "1.25rem"
+      },
+      value: {
+        background: "var(--color-background-brand-bolder-default)"
+      },
+      label: {
+        color: "var(--color-text-inverse)",
+        fontSize: "0.75rem",
+        fontWeight: "500"
+      }
+    },
+    radiobutton: {
+      root: {
+        width: "1.25rem",
+        height: "1.25rem",
+        background: "var(--color-elevation-surface-default)",
+        checkedBackground: "var(--color-background-brand-bolder-default)",
+        checkedHoverBackground: "var(--color-background-brand-bolder-hover)",
+        disabledBackground: "var(--color-background-disabled-default)",
+        filledBackground: "var(--color-background-accent-gray-subtler-default)",
+        borderColor: "var(--color-border-default)",
+        hoverBorderColor: "var(--color-border-bold)",
+        focusBorderColor: "var(--color-border-focused)",
+        checkedBorderColor: "var(--color-background-brand-bolder-default)",
+        checkedHoverBorderColor: "var(--color-background-brand-bolder-hover)",
+        checkedFocusBorderColor: "var(--color-border-focused)",
+        checkedDisabledBorderColor: "var(--color-border-disabled)",
+        invalidBorderColor: "var(--color-border-danger)",
+        shadow: "{form.field.shadow}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        },
+        transitionDuration: "{form.field.transition.duration}",
+        sm: {
+          width: "1rem",
+          height: "1rem"
+        },
+        lg: {
+          width: "1.5rem",
+          height: "1.5rem"
+        }
+      },
+      icon: {
+        size: "0.75rem",
+        checkedColor: "var(--color-icon-inverse)",
+        checkedHoverColor: "var(--color-icon-inverse)",
+        disabledColor: "var(--color-icon-disabled)",
+        sm: {
+          size: "0.5rem",
+          borderRadius: "9999px"
+        },
+        lg: {
+          size: "1rem",
+          borderRadius: "9999px"
+        },
+        borderRadius: "9999px"
+      },
+      gap: "0.5rem",
+      borderRadius: "9999px"
+    },
+    select: {
+      root: {
+        background: "var(--color-elevation-surface-default)",
+        disabledBackground: "var(--color-background-disabled-default)",
+        filledBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
+        borderColor: "var(--color-background-accent-gray-hover)",
+        hoverBorderColor: "var(--color-background-accent-gray-pressed)",
+        focusBorderColor: "var(--color-border-focused)",
+        invalidBorderColor: "var(--color-border-danger)",
+        color: "var(--color-text-default)",
+        disabledColor: "var(--color-text-disabled)",
+        placeholderColor: "var(--color-text-subtlest)",
+        invalidPlaceholderColor: "var(--color-text-danger)",
+        shadow: "{form.field.shadow}",
+        paddingX: "0.75rem",
+        paddingY: "0.25rem",
+        borderRadius: "0.375rem",
+        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.875rem",
+          paddingX: "0.75rem",
+          paddingY: "0.25rem",
+          minHeight: "2rem"
+        },
+        lg: {
+          fontSize: "1rem",
+          paddingX: "0.75rem",
+          paddingY: "0.5rem",
+          minHeight: "3rem"
+        },
+        minHeight: "2.5rem"
+      },
+      dropdown: {
+        width: "2.5rem",
+        color: "var(--color-icon-subtlest)"
+      },
+      overlay: {
+        background: "var(--color-elevation-surface-default)",
+        borderColor: "var(--color-border-default)",
+        borderRadius: "0.375rem",
+        color: "{overlay.select.color}",
+        shadow: "{overlay.select.shadow}"
+      },
+      list: {
+        padding: "0.5rem",
+        gap: "0.125rem",
+        header: {
+          padding: "0.5rem"
+        }
+      },
+      option: {
+        focusBackground: "var(--color-background-accent-gray-subtle-hover)",
+        selectedBackground: "var(--color-background-brand-subtlest-default)",
+        selectedFocusBackground: "var(--color-background-brand-subtler-default)",
+        color: "var(--color-text-subtle)",
+        focusColor: "var(--color-text-default)",
+        selectedColor: "var(--color-text-selected)",
+        selectedFocusColor: "var(--color-text-selected)",
+        padding: "0.5rem 0.75rem",
+        borderRadius: "0.25rem",
+        gap: "0.5rem"
+      },
+      optionGroup: {
+        background: "var(--color-elevation-surface-default)",
+        color: "var(--color-text-subtlest)",
+        fontWeight: "{list.option.group.font.weight}",
+        padding: "0.5rem 0.75rem"
+      },
+      clearIcon: {
+        color: "var(--color-icon-subtle)"
+      },
+      checkmark: {
+        color: "var(--color-text-subtle)",
+        gutterStart: "-0.375rem",
+        gutterEnd: "0.375rem"
+      },
+      emptyMessage: {
+        padding: "0.5rem 0.75rem"
+      }
+    },
+    selectbutton: {
+      root: {
+        borderRadius: "0.5rem"
+      },
+      colorScheme: {
+        light: {
+          root: {
+            invalidBorderColor: "var(--color-border-danger)"
+          }
+        },
+        dark: {
+          root: {
+            invalidBorderColor: "var(--color-border-danger)"
+          }
+        }
+      }
+    },
+    tabs: {
+      root: {
+        transitionDuration: "{transition.duration}"
+      },
+      tablist: {
+        borderWidth: "0 0 1px 0",
+        background: "transparent",
+        borderColor: "var(--color-border-default)"
+      },
+      tab: {
+        background: "transparent",
+        hoverBackground: "transparent",
+        activeBackground: "transparent",
+        borderWidth: "0 0 1px 0",
+        borderColor: "var(--color-border-default)",
+        hoverBorderColor: "var(--color-border-default)",
+        activeBorderColor: "var(--color-border-selected)",
+        color: "var(--color-text-subtlest)",
+        hoverColor: "var(--color-text-default)",
+        activeColor: "var(--color-text-selected)",
+        padding: "0.75rem",
+        fontWeight: "500",
+        margin: "0 0 -1px 0",
+        gap: "0.5rem",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "-1px",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      tabpanel: {
+        background: "transparent",
+        color: "var(--color-text-default)",
+        padding: "1rem",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      navButton: {
+        background: "{content.background}",
+        color: "{text.muted.color}",
+        hoverColor: "{text.color}",
+        width: "2.5rem",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "-1px",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      activeBar: {
+        height: "0.125rem",
+        bottom: "-1px",
+        background: "{primary.color}"
+      },
+      colorScheme: {
+        light: {
+          navButton: {
+            shadow: "0 0 10px 50px rgba(255, 255, 255, 0.6)"
+          }
+        },
+        dark: {
+          navButton: {
+            shadow: "0 0 10px 50px #0F172A80"
+          }
+        }
+      }
+    },
+    tag: {
+      root: {
+        fontSize: "0.875rem",
+        fontWeight: "400",
+        padding: "0.5rem 0.25rem",
+        gap: "0.25rem",
+        borderRadius: "0.375rem",
+        roundedBorderRadius: "999px"
+      },
+      icon: {
+        size: "1rem"
+      },
+      colorScheme: {
+        light: {
+          primary: {
+            background: "var(--color-background-brand-subtler-default)",
+            color: "var(--color-text-brand-bold)"
+          },
+          secondary: {
+            background: "var(--color-background-accent-gray-subtle-default)",
+            color: "var(--color-text-accent-gray-bold)"
+          },
+          success: {
+            background: "var(--color-background-accent-green-subtler-default)",
+            color: "var(--color-text-accent-green-bold)"
+          },
+          info: {
+            background: "var(--color-background-accent-blue-subtler-default)",
+            color: "var(--color-text-accent-blue-bold)"
+          },
+          warn: {
+            background: "var(--color-background-accent-orange-subtler-default)",
+            color: "var(--color-text-accent-orange-bold)"
+          },
+          danger: {
+            background: "var(--color-background-accent-red-subtler-default)",
+            color: "var(--color-text-accent-red-bold)"
+          },
+          contrast: {
+            background: "var(--color-background-accent-gray-bolder-default)",
+            color: "var(--color-text-inverse)"
+          }
+        },
+        dark: {
+          primary: {
+            background: "var(--color-background-brand-subtler-default)",
+            color: "var(--color-text-brand-bold)"
+          },
+          secondary: {
+            background: "var(--color-background-accent-gray-subtle-default)",
+            color: "var(--color-text-accent-gray-bold)"
+          },
+          success: {
+            background: "var(--color-background-accent-green-subtler-default)",
+            color: "var(--color-text-accent-green-bold)"
+          },
+          info: {
+            background: "var(--color-background-accent-blue-subtler-default)",
+            color: "var(--color-text-accent-blue-bold)"
+          },
+          warn: {
+            background: "var(--color-background-accent-orange-subtler-default)",
+            color: "var(--color-text-accent-orange-bold)"
+          },
+          danger: {
+            background: "var(--color-background-accent-red-subtler-default)",
+            color: "var(--color-text-accent-red-bold)"
+          },
+          contrast: {
+            background: "var(--color-background-accent-gray-bolder-default)",
+            color: "var(--color-text-inverse)"
+          }
+        }
+      },
+      sm: {
+        padding: "0.5rem 0.125rem",
+        font: {
+          size: "0.75rem"
+        },
+        icon: {
+          size: "1rem"
+        }
+      },
+      lg: {
+        padding: "0.5rem 0.25rem",
+        font: {
+          size: "1rem"
+        },
+        icon: {
+          size: "1.5rem"
+        }
+      }
+    },
+    textarea: {
+      root: {
+        background: "var(--color-elevation-surface-default)",
+        disabledBackground: "var(--color-background-disabled-default)",
+        filledBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
+        borderColor: "var(--color-border-default)",
+        hoverBorderColor: "var(--color-border-bold)",
+        focusBorderColor: "var(--color-border-focused)",
+        invalidBorderColor: "var(--color-border-danger)",
+        color: "var(--color-text-default)",
+        disabledColor: "var(--color-text-disabled)",
+        placeholderColor: "var(--color-text-subtlest)",
+        invalidPlaceholderColor: "var(--color-text-danger)",
+        shadow: "{form.field.shadow}",
+        paddingX: "0.75rem",
+        paddingY: "0.25rem",
+        borderRadius: "0.375rem",
+        focusRing: {
+          width: "{form.field.focus.ring.width}",
+          style: "{form.field.focus.ring.style}",
+          color: "transparent",
+          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: "0.75rem",
+          paddingY: "0.25rem"
+        },
+        lg: {
+          fontSize: "{form.field.lg.font.size}",
+          paddingX: "0.75rem",
+          paddingY: "0.25rem"
+        },
+        gap: "1rem",
+        minHeight: "1.5rem"
+      }
+    },
+    toast: {
+      root: {
+        width: "25rem",
+        borderRadius: "0.375rem",
+        borderWidth: "1px",
+        transitionDuration: "{transition.duration}"
+      },
+      icon: {
+        size: "1.25rem"
+      },
+      content: {
+        padding: "0.75rem 1rem",
+        gap: "0.5rem"
+      },
+      text: {
+        gap: "0.125rem"
+      },
+      summary: {
+        fontWeight: "500",
+        fontSize: "1rem"
+      },
+      detail: {
+        fontWeight: "500",
+        fontSize: "0.875rem"
+      },
+      closeButton: {
+        width: "1.5rem",
+        height: "1.5rem",
+        borderRadius: "0.75rem",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          offset: "{focus.ring.offset}"
+        }
+      },
+      closeIcon: {
+        size: "1.25rem"
+      },
+      colorScheme: {
+        light: {
+          root: {
+            blur: "1.5"
+          },
+          info: {
+            background: "var(--color-background-information-default)",
+            borderColor: "var(--color-border-information)",
+            color: "var(--color-text-information)",
+            detailColor: "var(--color-text-subtle)",
+            shadow: "0 4px 8px 0 rgba(2, 5, 10, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-information-hover)",
+              focusRing: {
+                color: "var(--color-border-information)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            }
+          },
+          success: {
+            background: "var(--color-background-success-default)",
+            borderColor: "var(--color-border-success)",
+            color: "var(--color-text-success)",
+            detailColor: "var(--color-text-subtle)",
+            shadow: "0 4px 8px 0 rgba(1, 8, 4, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-success-hover)",
+              focusRing: {
+                color: "var(--color-border-success)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            }
+          },
+          warn: {
+            background: "var(--color-background-warning-default)",
+            borderColor: "var(--color-border-warning)",
+            color: "var(--color-text-warning-default)",
+            detailColor: "var(--color-text-subtle)",
+            shadow: "0 4px 8px 0 rgba(9, 7, 0, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-warning-hover)",
+              focusRing: {
+                color: "var(--color-border-warning)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            }
+          },
+          error: {
+            background: "var(--color-background-danger-default)",
+            borderColor: "var(--color-border-danger)",
+            color: "var(--color-text-danger)",
+            detailColor: "var(--color-text-subtle)",
+            shadow: "0 4px 8px 0 rgba(10, 3, 3, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-danger-hover)",
+              focusRing: {
+                color: "var(--color-border-danger)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            }
+          },
+          secondary: {
+            background: "var(--color-background-accent-gray-subtler-default)",
+            borderColor: "var(--color-border-accent-gray)",
+            color: "var(--color-text-default)",
+            detailColor: "var(--color-text-subtle)",
+            shadow: "0 4px 8px 0 rgba(4, 5, 6, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
+              focusRing: {
+                color: "var(--color-border-accent-gray)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            }
+          },
+          contrast: {
+            background: "var(--color-background-accent-gray-boldest-default)",
+            borderColor: "var(--color-border-inverse)",
+            color: "var(--color-text-inverse)",
+            detailColor: "var(--color-text-inverse)",
+            shadow: "0 4px 8px 0 rgba(0, 0, 1, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
+              focusRing: {
+                color: "var(--color-border-inverse)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            }
+          }
+        },
+        dark: {
+          root: {
+            blur: "10"
+          },
+          info: {
+            background: "var(--color-background-information-default)",
+            borderColor: "var(--color-border-information)",
+            color: "var(--color-text-information)",
+            detailColor: "var(--color-text-subtle)",
+            shadow: "0 4px 8px 0 rgba(2, 5, 10, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-information-hover)",
+              focusRing: {
+                color: "var(--color-border-information)",
+                shadow: "none"
+              }
+            }
+          },
+          success: {
+            background: "var(--color-background-success-default)",
+            borderColor: "var(--color-border-success)",
+            color: "var(--color-text-success)",
+            detailColor: "var(--color-text-subtle)",
+            shadow: "0 4px 8px 0 rgba(1, 8, 4, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-success-hover)",
+              focusRing: {
+                color: "var(--color-border-success)",
+                shadow: "none"
+              }
+            }
+          },
+          warn: {
+            background: "var(--color-background-warning-default)",
+            borderColor: "var(--color-border-warning)",
+            color: "var(--color-text-warning-default)",
+            detailColor: "var(--color-text-subtle)",
+            shadow: "0 4px 8px 0 rgba(9, 7, 0, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-warning-hover)",
+              focusRing: {
+                color: "var(--color-border-warning)",
+                shadow: "none"
+              }
+            }
+          },
+          error: {
+            background: "var(--color-background-danger-default)",
+            borderColor: "var(--color-border-danger)",
+            color: "var(--color-text-danger)",
+            detailColor: "var(--color-text-subtle)",
+            shadow: "0 4px 8px 0 rgba(10, 3, 3, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-danger-hover)",
+              focusRing: {
+                color: "var(--color-border-danger)",
+                shadow: "none"
+              }
+            }
+          },
+          secondary: {
+            background: "var(--color-background-accent-gray-subtler-default)",
+            borderColor: "var(--color-border-accent-gray)",
+            color: "var(--color-text-default)",
+            detailColor: "var(--color-text-subtle)",
+            shadow: "0 4px 8px 0 rgba(4, 5, 6, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
+              focusRing: {
+                color: "var(--color-border-accent-gray)",
+                shadow: "none"
+              }
+            }
+          },
+          contrast: {
+            background: "var(--color-background-accent-gray-boldest-default)",
+            borderColor: "var(--color-border-inverse)",
+            color: "var(--color-text-inverse)",
+            detailColor: "var(--color-text-inverse)",
+            shadow: "0 4px 8px 0 rgba(0, 0, 1, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
+              focusRing: {
+                color: "var(--color-border-inverse)",
+                shadow: "none"
+              }
+            }
+          }
+        }
+      }
+    },
+    togglebutton: {
+      root: {
+        padding: "0.25rem",
+        borderRadius: "0.5rem",
+        gap: "0.5rem",
+        fontWeight: "500",
+        disabledBackground: "var(--color-background-disabled-default)",
+        disabledBorderColor: "var(--color-background-disabled-default)",
+        disabledColor: "var(--color-text-disabled)",
+        invalidBorderColor: "var(--color-border-danger)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        },
+        transitionDuration: "{form.field.transition.duration}",
+        sm: {
+          fontSize: "0.875rem",
+          padding: "0.25rem"
+        },
+        lg: {
+          fontSize: "{form.field.lg.font.size}",
+          padding: "0.25rem"
+        }
+      },
+      icon: {
+        disabledColor: "var(--color-icon-disabled)"
+      },
+      content: {
+        padding: "0.25rem 0.5rem",
+        borderRadius: "0.375rem",
+        checkedShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 2px 0 rgba(0, 0, 0, 0.04)",
+        sm: {
+          padding: "0.125rem 0.25rem",
+          minHeight: "1.5rem",
+          border: {
+            radius: "0.375rem"
+          }
+        },
+        lg: {
+          padding: "0.375rem 0.75rem",
+          minHeight: "2.5rem"
+        },
+        minHeight: "2rem"
+      },
+      colorScheme: {
+        light: {
+          root: {
+            background: "var(--color-background-accent-gray-default)",
+            checkedBackground: "var(--color-background-accent-gray-default)",
+            hoverBackground: "var(--color-background-accent-gray-default)",
+            borderColor: "var(--color-background-accent-gray-default)",
+            color: "var(--color-text-subtle)",
+            hoverColor: "var(--color-text-default)",
+            checkedColor: "var(--color-text-default)",
+            checkedBorderColor: "var(--color-background-accent-gray-default)"
+          },
+          content: {
+            checkedBackground: "var(--color-elevation-surface-default)"
+          },
+          icon: {
+            color: "var(--color-icon-subtle)",
+            hoverColor: "var(--color-icon-default)",
+            checkedColor: "var(--color-icon-default)"
+          }
+        },
+        dark: {
+          root: {
+            background: "var(--color-background-accent-gray-default)",
+            checkedBackground: "var(--color-background-accent-gray-default)",
+            hoverBackground: "var(--color-background-accent-gray-default)",
+            borderColor: "var(--color-background-accent-gray-default)",
+            color: "var(--color-text-subtle)",
+            hoverColor: "var(--color-text-default)",
+            checkedColor: "var(--color-text-default)",
+            checkedBorderColor: "var(--color-background-accent-gray-default)"
+          },
+          content: {
+            checkedBackground: "var(--color-elevation-surface-default)"
+          },
+          icon: {
+            color: "var(--color-icon-subtle)",
+            hoverColor: "var(--color-icon-default)",
+            checkedColor: "var(--color-icon-default)"
+          }
+        }
+      },
+      minHeight: "2.5rem",
+      lineHeight: "16px",
+      sm: {
+        minHeight: "2rem",
+        border: {
+          radius: "0.375rem"
+        }
+      },
+      lg: {
+        minHeight: "3rem"
+      }
+    },
+    toggleswitch: {
+      root: {
+        width: "2.5rem",
+        height: "1.5rem",
+        borderRadius: "2rem",
+        gap: "0.25rem",
+        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: "999px",
+        size: "1rem"
+      },
+      colorScheme: {
+        light: {
+          root: {
+            background: "var(--color-background-accent-gray-default)",
+            disabledBackground: "var(--color-background-disabled-default)",
+            hoverBackground: "var(--color-background-accent-gray-hover)",
+            checkedBackground: "var(--color-background-brand-bolder-default)",
+            checkedHoverBackground: "var(--color-background-brand-bolder-default)"
+          },
+          handle: {
+            background: "var(--color-elevation-surface-default)",
+            disabledBackground: "var(--color-icon-disabled)",
+            hoverBackground: "var(--color-elevation-surface-hovered)",
+            checkedBackground: "var(--color-elevation-surface-default)",
+            checkedHoverBackground: "var(--color-elevation-surface-default)",
+            color: "var(--color-text-subtlest)",
+            hoverColor: "var(--color-text-default)",
+            checkedColor: "var(--color-background-brand-bolder-default)",
+            checkedHoverColor: "var(--color-background-brand-bolder-hover)"
+          }
+        },
+        dark: {
+          root: {
+            background: "var(--color-background-accent-gray-default)",
+            disabledBackground: "var(--color-background-disabled-default)",
+            hoverBackground: "var(--color-background-accent-gray-hover)",
+            checkedBackground: "var(--color-background-brand-bolder-default)",
+            checkedHoverBackground: "var(--color-background-brand-bolder-default)"
+          },
+          handle: {
+            background: "var(--color-elevation-surface-default)",
+            disabledBackground: "var(--color-icon-disabled)",
+            hoverBackground: "var(--color-elevation-surface-hovered)",
+            checkedBackground: "var(--color-elevation-surface-default)",
+            checkedHoverBackground: "var(--color-elevation-surface-default)",
+            color: "var(--color-text-subtlest)",
+            hoverColor: "var(--color-text-default)",
+            checkedColor: "var(--color-background-brand-bolder-default)",
+            checkedHoverColor: "var(--color-background-brand-bolder-hover)"
+          }
+        }
+      }
+    },
+    floatlabel: {
+      on: {
+        gap: "-0.5rem"
+      }
+    }
+  }
+});
+
+export default BCCPreset;