@discourser/design-system 0.9.2 → 0.9.3

package/dist/index.cjs

@@ -8,7 +8,7 @@ var jsx = require('styled-system/jsx');
 var recipes = require('styled-system/recipes');
 var react = require('@ark-ui/react');
 var jsxRuntime = require('react/jsx-runtime');
-var field = require('@ark-ui/react/field');
+var field$1 = require('@ark-ui/react/field');
 var portal = require('@ark-ui/react/portal');
 var toast = require('@ark-ui/react/toast');
 var dialog = require('@ark-ui/react/dialog');
@@ -24,6 +24,7 @@ var progress = require('@ark-ui/react/progress');
 var popover = require('@ark-ui/react/popover');
 var tooltip = require('@ark-ui/react/tooltip');
 var clsx = require('clsx');
+var anatomy = require('@ark-ui/react/anatomy');
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -48,7 +49,7 @@ var Spinner = jsx.styled(factory.ark.span, recipes.spinner);
 var Span = jsx.styled("span");
 var Loader = react$1.forwardRef(function Loader2(props, ref) {
   const {
-    spinner: spinner2 = /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "inherit", borderWidth: "0.125em", color: "inherit" }),
+    spinner: spinner3 = /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "inherit", borderWidth: "0.125em", color: "inherit" }),
     spinnerPlacement = "start",
     children,
     text,
@@ -58,14 +59,14 @@ var Loader = react$1.forwardRef(function Loader2(props, ref) {
   if (!visible) return children;
   if (text) {
     return /* @__PURE__ */ jsxRuntime.jsxs(Span, { ref, display: "contents", ...rest, children: [
-      spinnerPlacement === "start" && spinner2,
+      spinnerPlacement === "start" && spinner3,
       text,
-      spinnerPlacement === "end" && spinner2
+      spinnerPlacement === "end" && spinner3
     ] });
   }
-  if (spinner2) {
+  if (spinner3) {
     return /* @__PURE__ */ jsxRuntime.jsxs(Span, { ref, display: "contents", ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AbsoluteCenter, { display: "inline-flex", children: spinner2 }),
+      /* @__PURE__ */ jsxRuntime.jsx(AbsoluteCenter, { display: "inline-flex", children: spinner3 }),
       /* @__PURE__ */ jsxRuntime.jsx(Span, { visibility: "hidden", display: "contents", children })
     ] });
   }
@@ -83,7 +84,7 @@ var Button = react$1.forwardRef(
       loading,
       loadingText,
       children,
-      spinner: spinner2,
+      spinner: spinner3,
       spinnerPlacement,
       colorPalette = "primary",
       className,
@@ -103,7 +104,7 @@ var Button = react$1.forwardRef(
         children: !props.asChild && loading ? /* @__PURE__ */ jsxRuntime.jsx(
           Loader,
           {
-            spinner: spinner2,
+            spinner: spinner3,
             text: loadingText,
             spinnerPlacement,
             children
@@ -133,7 +134,7 @@ var IconButton = react$1.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(Button, { px: "0", py: "0", ref, ...props });
   }
 );
-var Input = jsx.styled(field.Field.Input, recipes.input);
+var Input = jsx.styled(field$1.Field.Input, recipes.input);
 var InputAddon = jsx.styled(factory.ark.div, recipes.inputAddon);
 var { withProvider, withContext } = jsx.createStyleContext(recipes.inputGroup);
 var Root = withProvider(factory.ark.div, "root");
@@ -152,7 +153,7 @@ var InputGroup2 = Object.assign(InputGroupRoot, {
   Root,
   Element
 });
-var Textarea = jsx.styled(field.Field.Textarea, recipes.textarea);
+var Textarea = jsx.styled(field$1.Field.Textarea, recipes.textarea);
 var Heading = jsx.styled("h2", recipes.heading);
 var BaseBadge = jsx.styled(factory.ark.div, recipes.badge);
 var Badge = react$1.forwardRef(
@@ -212,10 +213,10 @@ var iconMap = {
   error: CircleXIcon
 };
 var Indicator = react$1.forwardRef(function ToastIndicator(props, ref) {
-  const toast2 = toast.useToastContext();
-  const StatusIcon = iconMap[toast2.type];
+  const toast3 = toast.useToastContext();
+  const StatusIcon = iconMap[toast3.type];
   if (!StatusIcon) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { ref, "data-type": toast2.type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { ref, "data-type": toast3.type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, {}) });
 });
 var toaster = toast.createToaster({
   placement: "bottom-end",
@@ -224,16 +225,16 @@ var toaster = toast.createToaster({
   max: 5
 });
 var Toaster = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast2) => /* @__PURE__ */ jsxRuntime.jsxs(Root2, { children: [
-    toast2.type === "loading" ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { color: "colorPalette.plain.fg" }) : /* @__PURE__ */ jsxRuntime.jsx(Indicator, {}),
+  return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast3) => /* @__PURE__ */ jsxRuntime.jsxs(Root2, { children: [
+    toast3.type === "loading" ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { color: "colorPalette.plain.fg" }) : /* @__PURE__ */ jsxRuntime.jsx(Indicator, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(jsx.Stack, { gap: "3", alignItems: "start", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(jsx.Stack, { gap: "1", children: [
-        toast2.title && /* @__PURE__ */ jsxRuntime.jsx(Title, { children: toast2.title }),
-        toast2.description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: toast2.description })
+        toast3.title && /* @__PURE__ */ jsxRuntime.jsx(Title, { children: toast3.title }),
+        toast3.description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: toast3.description })
       ] }),
-      toast2.action && /* @__PURE__ */ jsxRuntime.jsx(ActionTrigger, { children: toast2.action.label })
+      toast3.action && /* @__PURE__ */ jsxRuntime.jsx(ActionTrigger, { children: toast3.action.label })
     ] }),
-    toast2.closable && /* @__PURE__ */ jsxRuntime.jsx(CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "sm" }) })
+    toast3.closable && /* @__PURE__ */ jsxRuntime.jsx(CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "sm" }) })
   ] }) }) });
 };
 
@@ -625,8 +626,8 @@ var Marks = react$1.forwardRef(function Marks2(props, ref) {
   }) });
 });
 var Thumbs = (props) => {
-  const slider2 = slider.useSliderContext();
-  return slider2.value.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(Thumb2, { index, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(HiddenInput3, {}) }, index));
+  const slider3 = slider.useSliderContext();
+  return slider3.value.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(Thumb2, { index, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(HiddenInput3, {}) }, index));
 };
 
 // src/components/Avatar.tsx
@@ -800,6 +801,21 @@ function defineRecipe(config) {
 function defineSlotRecipe(config) {
   return config;
 }
+function createProxy() {
+  const identity = (v) => v;
+  return new Proxy(identity, {
+    get() {
+      return identity;
+    }
+  });
+}
+var defineSemanticTokens = /* @__PURE__ */ createProxy();
+function defineTextStyles(definition) {
+  return definition;
+}
+function defineLayerStyles(definition) {
+  return definition;
+}
 
 // src/recipes/button.recipe.ts
 var buttonRecipe = defineRecipe({
@@ -1873,6 +1889,3004 @@ function cn(...inputs) {
   return clsx.clsx(inputs);
 }
 
+// src/preset/colors/m3-primary.ts
+var m3 = material3Language.colors.primary;
+var primary = defineSemanticTokens.colors({
+  // Base scale mapping M3 tonal to Radix
+  "1": { value: { base: m3[99], _dark: m3[10] } },
+  "2": { value: { base: m3[95], _dark: m3[20] } },
+  "3": { value: { base: m3[90], _dark: m3[30] } },
+  "4": { value: { base: m3[80], _dark: m3[30] } },
+  "5": { value: { base: m3[70], _dark: m3[40] } },
+  "6": { value: { base: m3[60], _dark: m3[40] } },
+  "7": { value: { base: m3[50], _dark: m3[50] } },
+  "8": { value: { base: m3[40], _dark: m3[60] } },
+  "9": { value: { base: m3[40], _dark: m3[80] } },
+  // Primary action color
+  "10": { value: { base: m3[30], _dark: m3[70] } },
+  // Hover state
+  "11": { value: { base: m3[30], _dark: m3[90] } },
+  // Low-contrast text
+  "12": { value: { base: m3[10], _dark: m3[95] } },
+  // High-contrast text
+  // Alpha variants (for overlays/transparency)
+  a1: { value: { base: `${m3[40]}08`, _dark: `${m3[80]}08` } },
+  a2: { value: { base: `${m3[40]}10`, _dark: `${m3[80]}10` } },
+  a3: { value: { base: `${m3[40]}18`, _dark: `${m3[80]}18` } },
+  a4: { value: { base: `${m3[40]}24`, _dark: `${m3[80]}24` } },
+  a5: { value: { base: `${m3[40]}32`, _dark: `${m3[80]}32` } },
+  a6: { value: { base: `${m3[40]}48`, _dark: `${m3[80]}48` } },
+  a7: { value: { base: `${m3[40]}64`, _dark: `${m3[80]}64` } },
+  a8: { value: { base: `${m3[40]}80`, _dark: `${m3[80]}80` } },
+  a9: { value: { base: `${m3[40]}96`, _dark: `${m3[80]}96` } },
+  a10: { value: { base: `${m3[40]}AA`, _dark: `${m3[80]}AA` } },
+  a11: { value: { base: `${m3[40]}CC`, _dark: `${m3[80]}CC` } },
+  a12: { value: { base: `${m3[40]}EE`, _dark: `${m3[80]}EE` } },
+  // Semantic variants (Park UI component styling)
+  solid: {
+    bg: {
+      DEFAULT: { value: { base: "{colors.primary.9}", _dark: "{colors.primary.9}" } },
+      hover: { value: { base: "{colors.primary.10}", _dark: "{colors.primary.10}" } }
+    },
+    fg: {
+      DEFAULT: { value: { base: "{colors.white}", _dark: "{colors.primary.1}" } }
+    }
+  },
+  subtle: {
+    bg: {
+      DEFAULT: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } },
+      hover: { value: { base: "{colors.primary.a4}", _dark: "{colors.primary.a4}" } },
+      active: { value: { base: "{colors.primary.a5}", _dark: "{colors.primary.a5}" } }
+    },
+    fg: {
+      DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
+    }
+  },
+  surface: {
+    bg: {
+      DEFAULT: { value: { base: "{colors.primary.a2}", _dark: "{colors.primary.a2}" } },
+      active: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } }
+    },
+    border: {
+      DEFAULT: { value: { base: "{colors.primary.a6}", _dark: "{colors.primary.a6}" } },
+      hover: { value: { base: "{colors.primary.a7}", _dark: "{colors.primary.a7}" } }
+    },
+    fg: {
+      DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
+    }
+  },
+  outline: {
+    bg: {
+      hover: { value: { base: "{colors.primary.a2}", _dark: "{colors.primary.a2}" } },
+      active: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } }
+    },
+    border: {
+      DEFAULT: { value: { base: "{colors.primary.a7}", _dark: "{colors.primary.a7}" } }
+    },
+    fg: {
+      DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
+    }
+  },
+  plain: {
+    bg: {
+      hover: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } },
+      active: { value: { base: "{colors.primary.a4}", _dark: "{colors.primary.a4}" } }
+    },
+    fg: {
+      DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
+    }
+  }
+});
+
+// src/preset/colors/m3-neutral.ts
+var m32 = material3Language.colors.neutral;
+var neutral = defineSemanticTokens.colors({
+  "1": { value: { base: m32[99], _dark: m32[10] } },
+  "2": { value: { base: m32[95], _dark: m32[20] } },
+  "3": { value: { base: m32[90], _dark: m32[20] } },
+  "4": { value: { base: m32[80], _dark: m32[30] } },
+  "5": { value: { base: m32[70], _dark: m32[30] } },
+  "6": { value: { base: m32[60], _dark: m32[40] } },
+  "7": { value: { base: m32[50], _dark: m32[50] } },
+  "8": { value: { base: m32[40], _dark: m32[60] } },
+  "9": { value: { base: m32[40], _dark: m32[60] } },
+  "10": { value: { base: m32[30], _dark: m32[70] } },
+  "11": { value: { base: m32[30], _dark: m32[80] } },
+  "12": { value: { base: m32[10], _dark: m32[90] } },
+  // Alpha variants
+  a1: { value: { base: "#00000003", _dark: "#ffffff05" } },
+  a2: { value: { base: "#00000006", _dark: "#ffffff09" } },
+  a3: { value: { base: "#0000000f", _dark: "#ffffff12" } },
+  a4: { value: { base: "#00000017", _dark: "#ffffff1b" } },
+  a5: { value: { base: "#0000001f", _dark: "#ffffff22" } },
+  a6: { value: { base: "#00000026", _dark: "#ffffff2c" } },
+  a7: { value: { base: "#00000031", _dark: "#ffffff3b" } },
+  a8: { value: { base: "#00000044", _dark: "#ffffff55" } },
+  a9: { value: { base: "#00000072", _dark: "#ffffff64" } },
+  a10: { value: { base: "#0000007c", _dark: "#ffffff72" } },
+  a11: { value: { base: "#0000009b", _dark: "#ffffffaf" } },
+  a12: { value: { base: "#000000df", _dark: "#ffffffed" } },
+  // Semantic variants
+  solid: {
+    bg: {
+      DEFAULT: { value: { base: "{colors.black}", _dark: "{colors.white}" } },
+      hover: { value: { base: "{colors.neutral.12}", _dark: "{colors.neutral.12}" } }
+    },
+    fg: {
+      DEFAULT: { value: { base: "{colors.white}", _dark: "{colors.black}" } }
+    }
+  },
+  subtle: {
+    bg: {
+      DEFAULT: { value: { base: "{colors.neutral.a3}", _dark: "{colors.neutral.a3}" } },
+      hover: { value: { base: "{colors.neutral.a4}", _dark: "{colors.neutral.a4}" } },
+      active: { value: { base: "{colors.neutral.a5}", _dark: "{colors.neutral.a5}" } }
+    },
+    fg: {
+      DEFAULT: { value: { base: "{colors.neutral.12}", _dark: "{colors.neutral.12}" } }
+    }
+  },
+  surface: {
+    bg: {
+      DEFAULT: { value: { base: "{colors.white}", _dark: "{colors.neutral.1}" } },
+      hover: { value: { base: "{colors.neutral.2}", _dark: "{colors.neutral.2}" } },
+      active: { value: { base: "{colors.neutral.3}", _dark: "{colors.neutral.3}" } }
+    },
+    border: {
+      DEFAULT: { value: { base: "{colors.neutral.6}", _dark: "{colors.neutral.6}" } },
+      hover: { value: { base: "{colors.neutral.7}", _dark: "{colors.neutral.7}" } }
+    },
+    fg: {
+      DEFAULT: { value: { base: "{colors.neutral.12}", _dark: "{colors.neutral.12}" } }
+    }
+  },
+  outline: {
+    bg: {
+      hover: { value: { base: "{colors.neutral.a2}", _dark: "{colors.neutral.a2}" } },
+      active: { value: { base: "{colors.neutral.a3}", _dark: "{colors.neutral.a3}" } }
+    },
+    border: {
+      DEFAULT: { value: { base: "{colors.neutral.6}", _dark: "{colors.neutral.6}" } }
+    },
+    fg: {
+      DEFAULT: { value: { base: "{colors.neutral.12}", _dark: "{colors.neutral.12}" } }
+    }
+  },
+  plain: {
+    bg: {
+      hover: { value: { base: "{colors.neutral.a3}", _dark: "{colors.neutral.a3}" } },
+      active: { value: { base: "{colors.neutral.a4}", _dark: "{colors.neutral.a4}" } }
+    },
+    fg: {
+      DEFAULT: { value: { base: "{colors.neutral.12}", _dark: "{colors.neutral.12}" } }
+    }
+  }
+});
+
+// src/preset/colors/m3-error.ts
+var m33 = material3Language.colors.error;
+var error = defineSemanticTokens.colors({
+  "1": { value: { base: m33[99], _dark: m33[10] } },
+  "2": { value: { base: m33[95], _dark: m33[20] } },
+  "3": { value: { base: m33[90], _dark: m33[30] } },
+  "4": { value: { base: m33[80], _dark: m33[30] } },
+  "5": { value: { base: m33[70], _dark: m33[40] } },
+  "6": { value: { base: m33[60], _dark: m33[40] } },
+  "7": { value: { base: m33[50], _dark: m33[50] } },
+  "8": { value: { base: m33[40], _dark: m33[60] } },
+  "9": { value: { base: m33[40], _dark: m33[80] } },
+  "10": { value: { base: m33[30], _dark: m33[70] } },
+  "11": { value: { base: m33[30], _dark: m33[90] } },
+  "12": { value: { base: m33[10], _dark: m33[95] } },
+  // Alpha variants
+  a1: { value: { base: `${m33[40]}08`, _dark: `${m33[80]}08` } },
+  a2: { value: { base: `${m33[40]}10`, _dark: `${m33[80]}10` } },
+  a3: { value: { base: `${m33[40]}18`, _dark: `${m33[80]}18` } },
+  a4: { value: { base: `${m33[40]}24`, _dark: `${m33[80]}24` } },
+  a5: { value: { base: `${m33[40]}32`, _dark: `${m33[80]}32` } },
+  a6: { value: { base: `${m33[40]}48`, _dark: `${m33[80]}48` } },
+  a7: { value: { base: `${m33[40]}64`, _dark: `${m33[80]}64` } },
+  a8: { value: { base: `${m33[40]}80`, _dark: `${m33[80]}80` } },
+  a9: { value: { base: `${m33[40]}96`, _dark: `${m33[80]}96` } },
+  a10: { value: { base: `${m33[40]}AA`, _dark: `${m33[80]}AA` } },
+  a11: { value: { base: `${m33[40]}CC`, _dark: `${m33[80]}CC` } },
+  a12: { value: { base: `${m33[40]}EE`, _dark: `${m33[80]}EE` } },
+  // Semantic variants
+  solid: {
+    bg: {
+      DEFAULT: { value: { base: "{colors.error.9}", _dark: "{colors.error.9}" } },
+      hover: { value: { base: "{colors.error.10}", _dark: "{colors.error.10}" } }
+    },
+    fg: { DEFAULT: { value: { base: "white", _dark: "white" } } }
+  },
+  subtle: {
+    bg: {
+      DEFAULT: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } },
+      hover: { value: { base: "{colors.error.a4}", _dark: "{colors.error.a4}" } },
+      active: { value: { base: "{colors.error.a5}", _dark: "{colors.error.a5}" } }
+    },
+    fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
+  },
+  surface: {
+    bg: {
+      DEFAULT: { value: { base: "{colors.error.a2}", _dark: "{colors.error.a2}" } },
+      active: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } }
+    },
+    border: {
+      DEFAULT: { value: { base: "{colors.error.a6}", _dark: "{colors.error.a6}" } },
+      hover: { value: { base: "{colors.error.a7}", _dark: "{colors.error.a7}" } }
+    },
+    fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
+  },
+  outline: {
+    bg: {
+      hover: { value: { base: "{colors.error.a2}", _dark: "{colors.error.a2}" } },
+      active: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } }
+    },
+    border: { DEFAULT: { value: { base: "{colors.error.a7}", _dark: "{colors.error.a7}" } } },
+    fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
+  },
+  plain: {
+    bg: {
+      hover: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } },
+      active: { value: { base: "{colors.error.a4}", _dark: "{colors.error.a4}" } }
+    },
+    fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
+  }
+});
+
+// src/preset/colors/index.ts
+var colors = {
+  primary,
+  neutral,
+  error,
+  // Alias gray to neutral (Park UI expects this)
+  gray: neutral,
+  // Map red to error for Park UI compatibility
+  red: error
+};
+
+// src/preset/semantic-tokens.ts
+var semantic = material3Language.semantic;
+var semanticDark = material3Language.semanticDark;
+var m3SemanticTokens = defineSemanticTokens.colors({
+  // M3 Surface System
+  surface: {
+    DEFAULT: { value: { base: semantic.surface, _dark: semanticDark.surface } },
+    dim: { value: { base: semantic.surfaceContainerLow, _dark: semanticDark.surfaceContainerLow } },
+    bright: { value: { base: semantic.surfaceContainerHigh, _dark: semanticDark.surfaceContainerHigh } },
+    container: {
+      DEFAULT: { value: { base: semantic.surfaceContainer, _dark: semanticDark.surfaceContainer } },
+      low: { value: { base: semantic.surfaceContainerLow, _dark: semanticDark.surfaceContainerLow } },
+      lowest: { value: { base: semantic.surfaceContainerLowest, _dark: semanticDark.surfaceContainerLowest } },
+      high: { value: { base: semantic.surfaceContainerHigh, _dark: semanticDark.surfaceContainerHigh } },
+      highest: { value: { base: semantic.surfaceContainerHighest, _dark: semanticDark.surfaceContainerHighest } }
+    }
+  },
+  onSurface: {
+    DEFAULT: { value: { base: semantic.onSurface, _dark: semanticDark.onSurface } },
+    variant: { value: { base: semantic.onSurfaceVariant, _dark: semanticDark.onSurfaceVariant } }
+  },
+  // M3 Primary tokens (for explicit M3 usage)
+  m3Primary: {
+    DEFAULT: { value: { base: semantic.primary, _dark: semanticDark.primary } },
+    container: { value: { base: semantic.primaryContainer, _dark: semanticDark.primaryContainer } }
+  },
+  onM3Primary: {
+    DEFAULT: { value: { base: semantic.onPrimary, _dark: semanticDark.onPrimary } },
+    container: { value: { base: semantic.onPrimaryContainer, _dark: semanticDark.onPrimaryContainer } }
+  },
+  // M3 Secondary
+  secondary: {
+    DEFAULT: { value: { base: semantic.secondary, _dark: semanticDark.secondary } },
+    container: { value: { base: semantic.secondaryContainer, _dark: semanticDark.secondaryContainer } }
+  },
+  onSecondary: {
+    DEFAULT: { value: { base: semantic.onSecondary, _dark: semanticDark.onSecondary } },
+    container: { value: { base: semantic.onSecondaryContainer, _dark: semanticDark.onSecondaryContainer } }
+  },
+  // M3 Tertiary
+  tertiary: {
+    DEFAULT: { value: { base: semantic.tertiary, _dark: semanticDark.tertiary } },
+    container: { value: { base: semantic.tertiaryContainer, _dark: semanticDark.tertiaryContainer } }
+  },
+  onTertiary: {
+    DEFAULT: { value: { base: semantic.onTertiary, _dark: semanticDark.onTertiary } },
+    container: { value: { base: semantic.onTertiaryContainer, _dark: semanticDark.onTertiaryContainer } }
+  },
+  // M3 Outline
+  outline: {
+    DEFAULT: { value: { base: semantic.outline, _dark: semanticDark.outline } },
+    variant: { value: { base: semantic.outlineVariant, _dark: semanticDark.outlineVariant } }
+  },
+  // M3 Inverse
+  inverseSurface: { value: { base: semantic.inverseSurface, _dark: semanticDark.inverseSurface } },
+  inverseOnSurface: { value: { base: semantic.inverseOnSurface, _dark: semanticDark.inverseOnSurface } },
+  inversePrimary: { value: { base: semantic.inversePrimary, _dark: semanticDark.inversePrimary } },
+  // Scrim/Shadow
+  scrim: { value: { base: semantic.scrim, _dark: semanticDark.scrim } }
+});
+
+// src/preset/recipes/button.ts
+var button2 = defineRecipe({
+  className: "button",
+  jsx: ["Button", "IconButton", "CloseButton", "ButtonGroup"],
+  base: {
+    alignItems: "center",
+    appearance: "none",
+    borderRadius: "l2",
+    cursor: "pointer",
+    display: "inline-flex",
+    flexShrink: "0",
+    fontWeight: "semibold",
+    gap: "2",
+    isolation: "isolate",
+    justifyContent: "center",
+    outline: "0",
+    position: "relative",
+    transition: "colors",
+    transitionProperty: "background-color, border-color, color, box-shadow",
+    userSelect: "none",
+    verticalAlign: "middle",
+    whiteSpace: "nowrap",
+    _icon: {
+      flexShrink: "0"
+    },
+    _disabled: {
+      layerStyle: "disabled"
+    },
+    focusVisibleRing: "outside"
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "md"
+  },
+  variants: {
+    variant: {
+      solid: {
+        bg: "colorPalette.solid.bg",
+        color: "colorPalette.solid.fg",
+        _hover: {
+          bg: "colorPalette.solid.bg.hover"
+        }
+      },
+      surface: {
+        bg: "colorPalette.surface.bg",
+        borderWidth: "1px",
+        borderColor: "colorPalette.surface.border",
+        color: "colorPalette.surface.fg",
+        _hover: {
+          borderColor: "colorPalette.surface.border.hover"
+        },
+        _active: {
+          bg: "colorPalette.surface.bg.active"
+        },
+        _on: {
+          bg: "colorPalette.surface.bg.active"
+        }
+      },
+      subtle: {
+        bg: "colorPalette.subtle.bg",
+        color: "colorPalette.subtle.fg",
+        _hover: {
+          bg: "colorPalette.subtle.bg.hover"
+        },
+        _active: {
+          bg: "colorPalette.subtle.bg.active"
+        },
+        _on: {
+          bg: "colorPalette.subtle.bg.active"
+        }
+      },
+      outline: {
+        borderWidth: "1px",
+        borderColor: "colorPalette.outline.border",
+        color: "colorPalette.outline.fg",
+        _hover: {
+          bg: "colorPalette.outline.bg.hover"
+        },
+        _active: {
+          bg: "colorPalette.outline.bg.active"
+        },
+        _on: {
+          bg: "colorPalette.outline.bg.active"
+        }
+      },
+      plain: {
+        color: "colorPalette.plain.fg",
+        _hover: {
+          bg: "colorPalette.plain.bg.hover"
+        },
+        _active: {
+          bg: "colorPalette.plain.bg.active"
+        },
+        _on: {
+          bg: "colorPalette.plain.bg.active"
+        }
+      }
+    },
+    size: {
+      "2xs": { h: "6", minW: "6", textStyle: "xs", px: "2", _icon: { boxSize: "3.5" } },
+      xs: { h: "8", minW: "8", textStyle: "sm", px: "2.5", _icon: { boxSize: "4" } },
+      sm: { h: "9", minW: "9", textStyle: "sm", px: "3", _icon: { boxSize: "4" } },
+      md: { h: "10", minW: "10", textStyle: "sm", px: "3.5", _icon: { boxSize: "5" } },
+      lg: { h: "11", minW: "11", textStyle: "md", px: "4", _icon: { boxSize: "5" } },
+      xl: { h: "12", minW: "12", textStyle: "md", px: "4.5", _icon: { boxSize: "5.5" } },
+      "2xl": { h: "16", minW: "16", textStyle: "xl", px: "6", _icon: { boxSize: "6" } }
+    }
+  }
+});
+
+// src/preset/recipes/input.ts
+var input2 = {
+  className: "input",
+  jsx: ["Input", "Field.Input"],
+  base: {
+    appearance: "none",
+    borderRadius: "l2",
+    height: "var(--input-height)",
+    minHeight: "var(--input-height)",
+    minW: "var(--input-height)",
+    outline: "0",
+    position: "relative",
+    textAlign: "start",
+    transition: "colors",
+    width: "100%",
+    _disabled: {
+      layerStyle: "disabled"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  },
+  variants: {
+    variant: {
+      outline: {
+        borderWidth: "1px",
+        borderColor: "neutral.outline.border",
+        focusVisibleRing: "inside",
+        _invalid: {
+          focusRingColor: "error",
+          borderColor: "error"
+        }
+      },
+      surface: {
+        bg: "neutral.surface.bg",
+        borderWidth: "1px",
+        borderColor: "neutral.surface.border",
+        focusVisibleRing: "inside",
+        _invalid: {
+          focusRingColor: "error",
+          borderColor: "error"
+        }
+      },
+      subtle: {
+        borderWidth: "1px",
+        borderColor: "transparent",
+        bg: "neutral.subtle.bg",
+        color: "neutral.subtle.fg",
+        focusVisibleRing: "inside",
+        _invalid: {
+          focusRingColor: "error",
+          borderColor: "error"
+        }
+      },
+      flushed: {
+        borderBottomWidth: "1px",
+        borderBottomColor: "neutral.outline.border",
+        borderRadius: "0",
+        color: "fg.default",
+        px: "0",
+        _invalid: {
+          borderColor: "error"
+        },
+        _focus: {
+          borderColor: "colorPalette.solid.bg",
+          boxShadowColor: "colorPalette.solid.bg",
+          boxShadow: "0 1px 0 0 var(--shadow-color)",
+          _invalid: {
+            borderColor: "error",
+            boxShadowColor: "error"
+          }
+        }
+      }
+    },
+    size: {
+      "2xs": { textStyle: "xs", px: "1.5", "--input-height": "sizes.7" },
+      xs: { textStyle: "sm", px: "2", "--input-height": "sizes.8" },
+      sm: { textStyle: "sm", px: "2.5", "--input-height": "sizes.9" },
+      md: { textStyle: "md", px: "3", "--input-height": "sizes.10" },
+      lg: { textStyle: "md", px: "3.5", "--input-height": "sizes.11" },
+      xl: { textStyle: "lg", px: "4", "--input-height": "sizes.12" },
+      "2xl": { textStyle: "3xl", px: "4.5", "--input-height": "sizes.16" }
+    }
+  }
+};
+
+// src/preset/recipes/input-addon.ts
+var inputAddon2 = defineRecipe({
+  className: "input-addon",
+  base: {
+    alignItems: "center",
+    alignSelf: "stretch",
+    borderRadius: "l2",
+    color: "fg.muted",
+    display: "flex",
+    flex: "0 0 auto",
+    whiteSpace: "nowrap",
+    width: "auto"
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  },
+  variants: {
+    variant: {
+      outline: {
+        borderWidth: "thin",
+        borderColor: "neutral.outline.border"
+      },
+      surface: {
+        bg: "neutral.surface.bg",
+        borderWidth: "thin",
+        borderColor: "neutral.surface.border"
+      },
+      subtle: {
+        bg: "neutral.subtle.bg"
+      }
+    },
+    size: {
+      xs: { textStyle: "sm", px: "2", _icon: { boxSize: "4" } },
+      sm: { textStyle: "sm", px: "2.5", _icon: { boxSize: "4.5" } },
+      md: { textStyle: "md", px: "3", _icon: { boxSize: "5" } },
+      lg: { textStyle: "md", px: "3.5", _icon: { boxSize: "5" } },
+      xl: { textStyle: "lg", px: "4", _icon: { boxSize: "5.5" } }
+    }
+  }
+});
+
+// src/preset/recipes/input-group.ts
+var inputGroup2 = defineSlotRecipe({
+  className: "input-group",
+  slots: ["root", "element"],
+  base: {
+    root: {
+      position: "relative",
+      width: "full"
+    },
+    element: {
+      alignItems: "center",
+      color: "fg.muted",
+      display: "flex",
+      height: "full",
+      justifyContent: "center",
+      position: "absolute",
+      zIndex: "2",
+      _icon: {
+        color: "fg.subtle"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  },
+  variants: {
+    size: {
+      xs: {
+        element: { minW: "8", _icon: { boxSize: "4" } },
+        root: {
+          "& > input:not(:first-child)": { ps: "7!" },
+          "& > input:not(:last-child)": { pe: "7!" }
+        }
+      },
+      sm: {
+        root: {
+          "& > input:not(:first-child)": { ps: "8!" },
+          "& > input:not(:last-child)": { pe: "8!" }
+        },
+        element: { minW: "9", _icon: { boxSize: "4.5" } }
+      },
+      md: {
+        root: {
+          "& > input:not(:first-child)": { ps: "9!" },
+          "& > input:not(:last-child)": { pe: "9!" }
+        },
+        element: { minW: "10", _icon: { boxSize: "5" } }
+      },
+      lg: {
+        root: {
+          "& > input:not(:first-child)": { ps: "10!" },
+          "& > input:not(:last-child)": { pe: "10!" }
+        },
+        element: { minW: "11", _icon: { boxSize: "5" } }
+      },
+      xl: {
+        root: {
+          "& > input:not(:first-child)": { ps: "11!" },
+          "& > input:not(:last-child)": { pe: "11!" }
+        },
+        element: { minW: "11", _icon: { boxSize: "5.5" } }
+      }
+    }
+  }
+});
+var field = defineSlotRecipe({
+  className: "field",
+  slots: anatomy.fieldAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1.5"
+    },
+    label: {
+      alignItems: "center",
+      color: "fg.default",
+      display: "flex",
+      gap: "0.5",
+      textAlign: "start",
+      userSelect: "none",
+      textStyle: "label",
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    requiredIndicator: {
+      color: "colorPalette.solid"
+    },
+    helperText: {
+      color: "fg.muted",
+      textStyle: "sm",
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    errorText: {
+      color: "error",
+      textStyle: "sm"
+    }
+  }
+});
+
+// src/preset/recipes/group.ts
+var group2 = defineRecipe({
+  className: "group",
+  base: {
+    display: "inline-flex",
+    position: "relative",
+    gap: "2",
+    "& > *": {
+      _focusVisible: {
+        zIndex: 1
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        flexDirection: "row"
+      },
+      vertical: {
+        flexDirection: "column"
+      }
+    },
+    attached: {
+      true: {
+        gap: "0"
+      }
+    },
+    grow: {
+      true: {
+        display: "flex",
+        "& > *": {
+          flex: 1
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      attached: true,
+      css: {
+        "& > *:first-child": {
+          borderEndRadius: "0",
+          marginEnd: "-1px"
+        },
+        "& > *:last-child": {
+          borderStartRadius: "0"
+        },
+        "& > *:not(:first-child):not(:last-child)": {
+          borderRadius: "0",
+          marginEnd: "-1px"
+        }
+      }
+    },
+    {
+      orientation: "vertical",
+      attached: true,
+      css: {
+        "& > *:first-child": {
+          borderBottomRadius: "0",
+          marginBottom: "-1px"
+        },
+        "& > *:last-child": {
+          borderTopRadius: "0"
+        },
+        "& > *:not(:first-child):not(:last-child)": {
+          borderRadius: "0",
+          marginBottom: "-1px"
+        }
+      }
+    }
+  ]
+});
+
+// src/preset/recipes/spinner.ts
+var spinner2 = defineRecipe({
+  className: "spinner",
+  base: {
+    "--spinner-track-color": "transparent",
+    animation: "spin",
+    animationDuration: "slowest",
+    borderBottomColor: "var(--spinner-track-color)",
+    borderColor: "currentColor",
+    borderInlineStartColor: "var(--spinner-track-color)",
+    borderRadius: "full",
+    borderStyle: "solid",
+    borderWidth: "medium",
+    display: "inline-block",
+    height: "var(--spinner-size)",
+    width: "var(--spinner-size)"
+  },
+  defaultVariants: {
+    size: "md"
+  },
+  variants: {
+    size: {
+      inherit: { "--spinner-size": "1em" },
+      xs: { "--spinner-size": "sizes.3" },
+      sm: { "--spinner-size": "sizes.4" },
+      md: { "--spinner-size": "sizes.5" },
+      lg: { "--spinner-size": "sizes.6" },
+      xl: { "--spinner-size": "sizes.7" },
+      "2xl": { "--spinner-size": "sizes.8" }
+    }
+  }
+});
+
+// src/preset/recipes/absolute-center.ts
+var absoluteCenter2 = defineRecipe({
+  className: "absolute-center",
+  base: {
+    position: "absolute",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  defaultVariants: {
+    axis: "both"
+  },
+  variants: {
+    axis: {
+      horizontal: {
+        insetStart: "50%",
+        translate: "-50%",
+        _rtl: {
+          translate: "50%"
+        }
+      },
+      vertical: {
+        top: "50%",
+        translate: "0 -50%"
+      },
+      both: {
+        insetStart: "50%",
+        top: "50%",
+        translate: "-50% -50%",
+        _rtl: {
+          translate: "50% -50%"
+        }
+      }
+    }
+  }
+});
+
+// src/preset/recipes/card.ts
+var card2 = defineSlotRecipe({
+  className: "card",
+  slots: ["root", "header", "body", "footer", "title", "description"],
+  base: {
+    root: {
+      borderRadius: "l3",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      position: "relative"
+    },
+    header: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1",
+      p: "6"
+    },
+    body: {
+      display: "flex",
+      flex: "1",
+      flexDirection: "column",
+      pb: "6",
+      px: "6"
+    },
+    footer: {
+      display: "flex",
+      justifyContent: "flex-end",
+      gap: "3",
+      pb: "6",
+      pt: "2",
+      px: "6"
+    },
+    title: {
+      textStyle: "lg",
+      fontWeight: "semibold"
+    },
+    description: {
+      color: "fg.muted",
+      textStyle: "sm"
+    }
+  },
+  defaultVariants: {
+    variant: "outline"
+  },
+  variants: {
+    variant: {
+      elevated: {
+        root: {
+          bg: "neutral.surface.bg",
+          boxShadow: "lg"
+        }
+      },
+      outline: {
+        root: {
+          bg: "neutral.surface.bg",
+          borderWidth: "1px",
+          borderColor: "border.default"
+        }
+      },
+      subtle: {
+        root: {
+          bg: "neutral.subtle.bg"
+        }
+      }
+    }
+  }
+});
+var accordion2 = defineSlotRecipe({
+  className: "accordion",
+  slots: anatomy.accordionAnatomy.extendWith("itemBody").keys(),
+  base: {
+    root: {
+      width: "full",
+      "--accordion-radius": "radii.l2"
+    },
+    item: {
+      overflowAnchor: "none"
+    },
+    itemTrigger: {
+      alignItems: "center",
+      borderRadius: "var(--accordion-radius)",
+      color: "fg.default",
+      cursor: "pointer",
+      display: "flex",
+      fontWeight: "semibold",
+      gap: "3",
+      justifyContent: "space-between",
+      textAlign: "start",
+      textStyle: "lg",
+      width: "full",
+      _focusVisible: {
+        outlineWidth: "medium",
+        outlineStyle: "solid",
+        outlineColor: "colorPalette.focusRing"
+      },
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    itemIndicator: {
+      transition: "rotate 0.2s",
+      transformOrigin: "center",
+      color: "fg.subtle",
+      _open: {
+        rotate: "180deg"
+      },
+      _icon: {
+        width: "1.2em",
+        height: "1.2em"
+      }
+    },
+    itemBody: {
+      pb: "calc(var(--accordion-padding-y) * 2)",
+      color: "fg.muted"
+    },
+    itemContent: {
+      overflow: "hidden",
+      borderRadius: "var(--accordion-radius)",
+      _open: {
+        animationName: "expand-height, fade-in",
+        animationDuration: "normal"
+      },
+      _closed: {
+        animationName: "collapse-height, fade-out",
+        animationDuration: "normal",
+        display: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  },
+  variants: {
+    variant: {
+      outline: {
+        item: {
+          borderBottomWidth: "1px"
+        }
+      },
+      plain: {}
+    },
+    size: {
+      md: {
+        root: {
+          "--accordion-padding-x": "spacing.4",
+          "--accordion-padding-y": "spacing.3"
+        },
+        itemTrigger: {
+          textStyle: "md",
+          py: "var(--accordion-padding-y)"
+        }
+      }
+    }
+  }
+});
+var drawer2 = defineSlotRecipe({
+  className: "drawer",
+  slots: anatomy.dialogAnatomy.extendWith("header", "body", "footer").keys(),
+  base: {
+    backdrop: {
+      background: "black.a7",
+      position: "fixed",
+      insetInlineStart: "0",
+      top: "0",
+      width: "100vw",
+      height: "100dvh",
+      zIndex: "overlay",
+      _open: {
+        animationName: "fade-in",
+        animationTimingFunction: "emphasized-in",
+        animationDuration: "slow"
+      },
+      _closed: {
+        animationName: "fade-out",
+        animationTimingFunction: "emphasized-out",
+        animationDuration: "normal"
+      }
+    },
+    positioner: {
+      display: "flex",
+      width: "100vw",
+      height: "100dvh",
+      position: "fixed",
+      insetInlineStart: "0",
+      top: "0",
+      zIndex: "modal",
+      overscrollBehaviorY: "none"
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      width: "100%",
+      outline: 0,
+      zIndex: "modal",
+      maxH: "100dvh",
+      color: "inherit",
+      bg: "gray.surface.bg",
+      boxShadow: "lg",
+      _open: {
+        animationDuration: "slowest",
+        animationTimingFunction: "cubic-bezier(0.05, 0.7, 0.1, 1.0)"
+      },
+      _closed: {
+        animationDuration: "normal",
+        animationTimingFunction: "cubic-bezier(0.3, 0.0, 0.8, 0.15)",
+        display: "none"
+      }
+    },
+    header: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1",
+      pt: { base: "4", md: "6" },
+      pb: "4",
+      px: { base: "4", md: "6" },
+      flex: "0"
+    },
+    body: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      flex: "1",
+      overflow: "auto",
+      p: { base: "4", md: "6" }
+    },
+    footer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      flex: "0",
+      gap: "3",
+      py: "4",
+      px: { base: "4", md: "6" }
+    },
+    title: {
+      color: "fg.default",
+      fontWeight: "semibold",
+      textStyle: "xl"
+    },
+    description: {
+      color: "fg.muted",
+      textStyle: "sm"
+    },
+    closeTrigger: {
+      pos: "absolute",
+      top: "3",
+      insetEnd: "3"
+    }
+  },
+  defaultVariants: {
+    placement: "end",
+    size: "sm"
+  },
+  variants: {
+    size: {
+      xs: {
+        content: {
+          maxW: "xs"
+        }
+      },
+      sm: {
+        content: {
+          maxW: "sm"
+        }
+      },
+      md: {
+        content: {
+          maxW: "md"
+        }
+      },
+      lg: {
+        content: {
+          maxW: "lg"
+        }
+      },
+      xl: {
+        content: {
+          maxW: "xl"
+        }
+      },
+      full: {
+        content: {
+          maxW: "100vw",
+          h: "100dvh"
+        }
+      }
+    },
+    placement: {
+      start: {
+        positioner: {
+          justifyContent: "flex-start",
+          alignItems: "stretch"
+        },
+        content: {
+          _open: {
+            animationName: {
+              base: "slide-from-left-full, fade-in",
+              _rtl: "slide-from-right-full, fade-in"
+            }
+          },
+          _closed: {
+            animationName: {
+              base: "slide-to-left-full, fade-out",
+              _rtl: "slide-to-right-full, fade-out"
+            }
+          }
+        }
+      },
+      end: {
+        positioner: {
+          justifyContent: "flex-end",
+          alignItems: "stretch"
+        },
+        content: {
+          _open: {
+            animationName: {
+              base: "slide-from-right-full, fade-in",
+              _rtl: "slide-from-left-full, fade-in"
+            }
+          },
+          _closed: {
+            animationName: {
+              base: "slide-to-right-full, fade-out",
+              _rtl: "slide-to-left-full, fade-out"
+            }
+          }
+        }
+      },
+      top: {
+        positioner: {
+          justifyContent: "stretch",
+          alignItems: "flex-start"
+        },
+        content: {
+          maxW: "100%",
+          _open: { animationName: "slide-from-top-full, fade-in" },
+          _closed: { animationName: "slide-to-top-full, fade-out" }
+        }
+      },
+      bottom: {
+        positioner: {
+          justifyContent: "stretch",
+          alignItems: "flex-end"
+        },
+        content: {
+          maxW: "100%",
+          _open: { animationName: "slide-from-bottom-full, fade-in" },
+          _closed: { animationName: "slide-to-bottom-full, fade-out" }
+        }
+      }
+    }
+  }
+});
+var tabs2 = defineSlotRecipe({
+  slots: anatomy.tabsAnatomy.keys(),
+  className: "tabs",
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      alignItems: "start",
+      _horizontal: {
+        flexDirection: "column",
+        gap: "2"
+      },
+      _vertical: {
+        flexDirection: "row",
+        gap: "4"
+      }
+    },
+    list: {
+      display: "flex",
+      position: "relative",
+      isolation: "isolate",
+      _horizontal: {
+        flexDirection: "row"
+      },
+      _vertical: {
+        flexDirection: "column"
+      }
+    },
+    trigger: {
+      alignItems: "center",
+      cursor: "pointer",
+      display: "flex",
+      fontWeight: "semibold",
+      outline: "0",
+      position: "relative",
+      _focusVisible: {
+        zIndex: 1,
+        focusVisibleRing: "outside"
+      },
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    content: {
+      focusVisibleRing: "inside",
+      _horizontal: {
+        width: "100%"
+      },
+      _vertical: {
+        height: "100%"
+      }
+    },
+    indicator: {
+      width: "var(--width)",
+      height: "var(--height)",
+      zIndex: -1
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        list: { gap: "1" },
+        trigger: { h: "8", minW: "8", textStyle: "xs", px: "3", gap: "2" }
+      },
+      sm: {
+        list: { gap: "1" },
+        trigger: { h: "9", minW: "9", textStyle: "sm", px: "3.5", gap: "2" }
+      },
+      md: {
+        list: { gap: "1" },
+        trigger: { h: "10", minW: "10", textStyle: "sm", px: "4", gap: "2" }
+      },
+      lg: {
+        list: { gap: "1" },
+        trigger: { h: "11", minW: "11", textStyle: "md", px: "4.5", gap: "2" }
+      }
+    },
+    variant: {
+      line: {
+        root: {
+          alignItems: "stretch"
+        },
+        list: {
+          _horizontal: {
+            borderBottomWidth: "thin"
+          },
+          _vertical: {
+            borderStartWidth: "thin"
+          }
+        },
+        indicator: {
+          background: "colorPalette.solid.bg",
+          _horizontal: {
+            bottom: "0",
+            height: "xxs",
+            transform: "translateY(1px)"
+          },
+          _vertical: {
+            left: "0",
+            width: "xxs",
+            transform: "translateX(-1px)"
+          }
+        },
+        trigger: {
+          color: "fg.muted",
+          _selected: {
+            color: "colorPalette.plain.fg"
+          }
+        }
+      },
+      subtle: {
+        trigger: {
+          color: "fg.muted",
+          _selected: {
+            color: "colorPalette.subtle.fg"
+          }
+        },
+        indicator: {
+          bg: "colorPalette.subtle.bg",
+          color: "colorPalette.subtle.fg",
+          borderRadius: "l2"
+        }
+      },
+      enclosed: {
+        list: {
+          bg: {
+            _light: "gray.2",
+            _dark: "gray.1"
+          },
+          boxShadow: "inset 0 0 0px 1px var(--shadow-color)",
+          boxShadowColor: "border",
+          borderRadius: "l3",
+          p: "1"
+        },
+        trigger: {
+          color: "fg.muted",
+          _selected: {
+            color: "colorPalette.surface.fg"
+          }
+        },
+        indicator: {
+          borderRadius: "l2",
+          boxShadow: {
+            _light: "xs",
+            _dark: "none"
+          },
+          bg: {
+            _light: "white",
+            _dark: "gray.2"
+          }
+        }
+      }
+    },
+    fitted: {
+      true: {
+        root: {
+          alignItems: "stretch"
+        },
+        trigger: {
+          flex: 1,
+          textAlign: "center",
+          justifyContent: "center"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "line"
+  }
+});
+var switchRecipe2 = defineSlotRecipe({
+  className: "switchComponent",
+  jsx: ["Switch", /Switch\.+/],
+  slots: anatomy.switchAnatomy.extendWith("indicator").keys(),
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      position: "relative",
+      verticalAlign: "middle",
+      "--switch-diff": "calc(var(--switch-width) - var(--switch-height))",
+      "--switch-x": {
+        base: "var(--switch-diff)",
+        _rtl: "calc(var(--switch-diff) * -1)"
+      }
+    },
+    label: {
+      fontWeight: "medium",
+      userSelect: "none",
+      lineHeight: "1"
+    },
+    indicator: {
+      position: "absolute",
+      height: "var(--switch-height)",
+      width: "var(--switch-height)",
+      fontSize: "var(--switch-indicator-font-size)",
+      fontWeight: "medium",
+      flexShrink: 0,
+      userSelect: "none",
+      display: "grid",
+      placeContent: "center",
+      transition: "inset-inline-start 0.12s ease",
+      insetInlineStart: "calc(var(--switch-x) - {spacing.xxs})",
+      _checked: {
+        insetInlineStart: "xxs"
+      }
+    },
+    control: {
+      display: "inline-flex",
+      gap: "sm",
+      flexShrink: 0,
+      justifyContent: "flex-start",
+      cursor: "pointer",
+      borderRadius: "full",
+      position: "relative",
+      width: "var(--switch-width)",
+      height: "var(--switch-height)",
+      transition: "backgrounds",
+      focusVisibleRing: "outside",
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    thumb: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      transitionProperty: "translate",
+      transitionDuration: "fast",
+      borderRadius: "inherit",
+      _checked: {
+        translate: "var(--switch-x) 0"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "md"
+  },
+  variants: {
+    variant: {
+      solid: {
+        control: {
+          borderRadius: "full",
+          bg: "neutral.subtle.bg",
+          focusVisibleRing: "outside",
+          _checked: {
+            bg: "colorPalette.solid.bg"
+          }
+        },
+        thumb: {
+          bg: "white",
+          _checked: {
+            bg: "colorPalette.solid.fg"
+          },
+          width: "var(--switch-height)",
+          height: "var(--switch-height)",
+          scale: "0.8",
+          boxShadow: "xs"
+        }
+      }
+    },
+    size: {
+      xs: {
+        root: {
+          gap: "2",
+          "--switch-width": "sizes.8",
+          "--switch-height": "sizes.4",
+          "--switch-indicator-font-size": "fontSizes.xs"
+        },
+        label: { fontSize: "sm" }
+      },
+      sm: {
+        root: {
+          gap: "2",
+          "--switch-width": "sizes.9",
+          "--switch-height": "sizes.4.5",
+          "--switch-indicator-font-size": "fontSizes.xs"
+        },
+        label: { fontSize: "sm" }
+      },
+      md: {
+        root: {
+          gap: "3",
+          "--switch-width": "sizes.10",
+          "--switch-height": "sizes.5",
+          "--switch-indicator-font-size": "fontSizes.sm"
+        },
+        label: { fontSize: "md" }
+      },
+      lg: {
+        root: {
+          gap: "3",
+          "--switch-width": "sizes.11",
+          "--switch-height": "sizes.5.5",
+          "--switch-indicator-font-size": "fontSizes.md"
+        },
+        label: { fontSize: "lg" }
+      }
+    }
+  }
+});
+var checkbox2 = defineSlotRecipe({
+  slots: anatomy.checkboxAnatomy.keys(),
+  className: "checkbox",
+  base: {
+    root: {
+      display: "inline-flex",
+      gap: "2",
+      alignItems: "center",
+      verticalAlign: "top",
+      position: "relative",
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    control: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: "0",
+      borderWidth: "1px",
+      borderColor: "border",
+      borderRadius: "l1",
+      cursor: "pointer",
+      focusVisibleRing: "outside",
+      bg: "canvas",
+      _icon: {
+        boxSize: "full"
+      }
+    },
+    label: {
+      fontWeight: "medium",
+      userSelect: "none"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        root: { gap: "2" },
+        label: { textStyle: "sm" },
+        control: { boxSize: "4.5", _icon: { boxSize: "3" } }
+      },
+      md: {
+        root: { gap: "3" },
+        label: { textStyle: "md" },
+        control: { boxSize: "5", _icon: { boxSize: "3.5" } }
+      },
+      lg: {
+        root: { gap: "3" },
+        label: { textStyle: "lg" },
+        control: { boxSize: "5.5", _icon: { boxSize: "4" } }
+      }
+    },
+    variant: {
+      solid: {
+        control: {
+          borderColor: "border",
+          _checked: {
+            bg: "colorPalette.solid.bg",
+            borderColor: "colorPalette.solid.bg",
+            color: "colorPalette.solid.fg"
+          },
+          _invalid: {
+            background: "error"
+          }
+        }
+      },
+      surface: {
+        control: {
+          bg: "colorPalette.surface.bg",
+          borderWidth: "1px",
+          borderColor: "colorPalette.surface.border",
+          color: "colorPalette.surface.fg"
+        }
+      },
+      subtle: {
+        control: {
+          bg: "colorPalette.subtle.bg",
+          color: "colorPalette.subtle.fg"
+        }
+      },
+      outline: {
+        control: {
+          borderWidth: "1px",
+          borderColor: "colorPalette.outline.border",
+          color: "colorPalette.outline.fg",
+          _checked: {
+            borderColor: "colorPalette.solid.bg"
+          }
+        }
+      },
+      plain: {
+        control: {
+          color: "colorPalette.plain.fg"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "md"
+  }
+});
+var radioGroup2 = defineSlotRecipe({
+  className: "radio-group",
+  slots: anatomy.radioGroupAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "3"
+    },
+    itemControl: {
+      alignItems: "center",
+      borderRadius: "full",
+      display: "inline-flex",
+      flexShrink: 0,
+      justifyContent: "center",
+      verticalAlign: "top",
+      boxShadow: "inset 0 0 0 1px var(--shadow-color)",
+      boxShadowColor: "gray.surface.border",
+      _after: {
+        content: '""',
+        display: "block",
+        borderRadius: "full",
+        boxSize: "40%"
+      },
+      _focusVisible: {
+        focusVisibleRing: "outside"
+      },
+      _checked: {
+        bg: "colorPalette.solid.bg",
+        color: "colorPalette.solid.fg",
+        boxShadowColor: "colorPalette.solid.bg",
+        _after: {
+          background: "colorPalette.solid.fg"
+        }
+      }
+    },
+    item: {
+      alignItems: "center",
+      cursor: "pointer",
+      display: "flex",
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    itemText: {
+      fontWeight: "medium",
+      userSelect: "none"
+    },
+    label: {
+      fontWeight: "semibold",
+      textStyle: "sm",
+      mb: "1"
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "md",
+    orientation: "vertical"
+  },
+  variants: {
+    variant: {
+      solid: {
+        itemControl: {}
+      }
+    },
+    size: {
+      sm: {
+        item: { gap: "2" },
+        itemControl: { boxSize: "4.5" },
+        itemText: { textStyle: "sm" }
+      },
+      md: {
+        item: { gap: "3" },
+        itemControl: { boxSize: "5" },
+        itemText: { textStyle: "md" }
+      },
+      lg: {
+        item: { gap: "3" },
+        itemControl: { boxSize: "5.5" },
+        itemText: { textStyle: "lg" }
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: {
+          flexDirection: "row"
+        }
+      },
+      vertical: {
+        root: {
+          flexDirection: "column"
+        }
+      }
+    }
+  }
+});
+var select2 = defineSlotRecipe({
+  className: "select",
+  slots: anatomy.selectAnatomy.extendWith("indicatorGroup").keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1.5",
+      width: "full"
+    },
+    content: {
+      background: "gray.surface.bg",
+      borderRadius: "l2",
+      boxShadow: "md",
+      display: "flex",
+      flexDirection: "column",
+      maxH: "min(var(--available-height), {sizes.96})",
+      minWidth: "max(var(--reference-width), {sizes.40})",
+      outline: 0,
+      overflowY: "auto",
+      zIndex: "dropdown",
+      _open: {
+        animationStyle: "slide-fade-in",
+        animationDuration: "slow"
+      },
+      _closed: {
+        animationStyle: "slide-fade-out",
+        animationDuration: "fastest"
+      }
+    },
+    item: {
+      alignItems: "center",
+      borderRadius: "l1",
+      cursor: "pointer",
+      display: "flex",
+      justifyContent: "space-between",
+      userSelect: "none",
+      _hover: {
+        background: "gray.surface.bg.hover"
+      },
+      _highlighted: {
+        background: "gray.surface.bg.hover"
+      },
+      _selected: {},
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    indicatorGroup: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1",
+      pointerEvents: "none"
+    },
+    indicator: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: { base: "fg.subtle" }
+    },
+    itemGroupLabel: {
+      alignItems: "flex-start",
+      color: "fg.subtle",
+      display: "flex",
+      flexDirection: "column",
+      fontWeight: "medium",
+      gap: "1px",
+      justifyContent: "center",
+      _after: {
+        content: '""',
+        width: "100%",
+        height: "1px",
+        bg: "gray.4"
+      }
+    },
+    itemIndicator: {
+      color: "colorPalette.plain.fg"
+    },
+    label: {
+      fontWeight: "medium",
+      userSelect: "none",
+      textStyle: "sm"
+    },
+    trigger: {
+      alignItems: "center",
+      borderRadius: "l2",
+      cursor: "pointer",
+      display: "flex",
+      justifyContent: "space-between",
+      minWidth: "0",
+      outline: "0",
+      textAlign: "start",
+      transition: "common",
+      userSelect: "none",
+      width: "full",
+      _placeholderShown: {
+        color: "fg.subtle"
+      },
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    valueText: {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      color: "fg.default"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  },
+  variants: {
+    variant: {
+      outline: {
+        trigger: {
+          borderWidth: "thin",
+          borderColor: "gray.outline.border",
+          focusVisibleRing: "inside"
+        }
+      },
+      surface: {
+        trigger: {
+          bg: "gray.surface.bg",
+          borderWidth: "thin",
+          borderColor: "gray.surface.border",
+          focusVisibleRing: "inside"
+        }
+      }
+    },
+    size: {
+      xs: {
+        content: { p: "1", gap: "0.5", textStyle: "sm" },
+        item: { px: "1", minH: "8", gap: "2", _icon: { boxSize: "3.5" } },
+        itemGroup: { gap: "0.5" },
+        itemGroupLabel: { px: "1", height: "8" },
+        trigger: { px: "2", h: "8", textStyle: "sm", gap: "2", _icon: { boxSize: "3.5" } }
+      },
+      sm: {
+        content: { p: "1", gap: "0.5", textStyle: "sm" },
+        item: { px: "1.5", minH: "9", gap: "2", _icon: { boxSize: "4" } },
+        itemGroup: { gap: "0.5" },
+        itemGroupLabel: { px: "1.5", height: "9" },
+        trigger: { px: "2.5", h: "9", textStyle: "sm", gap: "2", _icon: { boxSize: "4" } }
+      },
+      md: {
+        content: { p: "1", gap: "0.5", textStyle: "md" },
+        item: { px: "2", minH: "10", gap: "2", _icon: { boxSize: "4" } },
+        itemGroup: { gap: "0.5" },
+        itemGroupLabel: { px: "2", height: "10" },
+        trigger: { px: "3", h: "10", textStyle: "md", gap: "2", _icon: { boxSize: "4" } }
+      },
+      lg: {
+        content: { p: "1", gap: "0.5", textStyle: "md" },
+        item: { px: "2.5", minH: "11", gap: "2", _icon: { boxSize: "4.5" } },
+        itemGroup: { gap: "0.5" },
+        itemGroupLabel: { px: "2.5", height: "11" },
+        trigger: { px: "3.5", h: "11", textStyle: "md", gap: "2", _icon: { boxSize: "4.5" } }
+      },
+      xl: {
+        content: { p: "1", gap: "1", textStyle: "lg" },
+        item: { px: "3", minH: "12", gap: "3", _icon: { boxSize: "5" } },
+        itemGroup: { gap: "1" },
+        itemGroupLabel: { px: "3", height: "12" },
+        trigger: { px: "4", h: "12", textStyle: "lg", gap: "3", _icon: { boxSize: "5" } }
+      }
+    }
+  }
+});
+
+// src/preset/recipes/textarea.ts
+var textarea2 = defineRecipe({
+  className: "textarea",
+  base: {
+    appearance: "none",
+    borderRadius: "l2",
+    minWidth: "0",
+    outline: "0",
+    position: "relative",
+    transition: "colors",
+    transitionProperty: "box-shadow, border-color",
+    width: "100%",
+    _disabled: {
+      layerStyle: "disabled"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "surface"
+  },
+  variants: {
+    variant: {
+      outline: {
+        borderWidth: "thin",
+        borderColor: "gray.outline.border",
+        focusVisibleRing: "inside",
+        _invalid: {
+          borderColor: "error",
+          focusRingColor: "error"
+        }
+      },
+      surface: {
+        bg: "gray.surface.bg",
+        borderWidth: "thin",
+        borderColor: "gray.surface.border",
+        focusVisibleRing: "inside",
+        _invalid: {
+          borderColor: "error",
+          focusRingColor: "error"
+        }
+      },
+      subtle: {
+        borderWidth: "thin",
+        borderColor: "transparent",
+        bg: "gray.subtle.bg",
+        color: "gray.subtle.fg",
+        focusVisibleRing: "inside",
+        _invalid: {
+          borderColor: "error",
+          focusRingColor: "error"
+        }
+      },
+      flushed: {
+        borderBottomWidth: "thin",
+        borderBottomColor: "gray.outline.border",
+        borderRadius: "0",
+        color: "fg.default",
+        px: "0",
+        _invalid: {
+          borderColor: "error"
+        },
+        _focus: {
+          borderColor: "colorPalette.solid.bg",
+          boxShadowColor: "colorPalette.solid.bg",
+          boxShadow: "0 1px 0 0 var(--shadow-color)",
+          _invalid: {
+            borderColor: "error",
+            boxShadowColor: "error"
+          }
+        }
+      }
+    },
+    size: {
+      xs: { textStyle: "sm", px: "2", py: "sm", scrollPaddingBottom: "sm" },
+      sm: { textStyle: "sm", px: "2.5", py: "sm", scrollPaddingBottom: "sm" },
+      md: { textStyle: "md", px: "3", py: "sm", scrollPaddingBottom: "sm" },
+      lg: { textStyle: "md", px: "3.5", py: "sm", scrollPaddingBottom: "sm" },
+      xl: { textStyle: "lg", px: "4", py: "sm", scrollPaddingBottom: "sm" }
+    }
+  }
+});
+var slider2 = defineSlotRecipe({
+  className: "slider",
+  slots: anatomy.sliderAnatomy.extendWith("markerIndicator").keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1",
+      textStyle: "sm",
+      position: "relative",
+      isolation: "isolate",
+      touchAction: "none",
+      width: "full"
+    },
+    label: {
+      fontWeight: "medium",
+      textStyle: "sm"
+    },
+    control: {
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    track: {
+      overflow: "hidden",
+      borderRadius: "full",
+      flex: "1"
+    },
+    range: {
+      width: "inherit",
+      height: "inherit"
+    },
+    markerGroup: {
+      position: "absolute!",
+      zIndex: "1"
+    },
+    marker: {
+      display: "flex",
+      alignItems: "center",
+      gap: "calc(var(--slider-thumb-size) / 2)",
+      color: "fg.muted",
+      textStyle: "xs"
+    },
+    markerIndicator: {
+      width: "var(--slider-marker-size)",
+      height: "var(--slider-marker-size)",
+      borderRadius: "full",
+      bg: "colorPalette.solid.fg"
+    },
+    thumb: {
+      width: "var(--slider-thumb-size)",
+      height: "var(--slider-thumb-size)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      outline: 0,
+      zIndex: "2",
+      borderRadius: "full",
+      _focusVisible: {
+        ring: "2px",
+        ringColor: "colorPalette.solid",
+        ringOffset: "2px",
+        ringOffsetColor: "bg"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline",
+    orientation: "horizontal"
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          "--slider-thumb-size": "sizes.5",
+          "--slider-track-size": "sizes.2",
+          "--slider-marker-center": "{spacing.sm}",
+          "--slider-marker-size": "sizes.1",
+          "--slider-marker-inset": "{spacing.xs}"
+        }
+      },
+      md: {
+        root: {
+          "--slider-thumb-size": "sizes.5",
+          "--slider-track-size": "sizes.2",
+          "--slider-marker-center": "{spacing.sm}",
+          "--slider-marker-size": "sizes.1",
+          "--slider-marker-inset": "{spacing.xs}"
+        }
+      },
+      lg: {
+        root: {
+          "--slider-thumb-size": "sizes.5",
+          "--slider-track-size": "sizes.2",
+          "--slider-marker-center": "{spacing.sm}",
+          "--slider-marker-size": "sizes.1",
+          "--slider-marker-inset": "{spacing.xs}"
+        }
+      }
+    },
+    variant: {
+      outline: {
+        thumb: {
+          bg: "gray.surface.bg",
+          borderWidth: "medium",
+          borderColor: "colorPalette.solid.bg",
+          boxShadow: "xs"
+        },
+        range: {
+          bg: "colorPalette.solid.bg"
+        },
+        track: {
+          bg: "border"
+        }
+      }
+    },
+    orientation: {
+      vertical: {
+        root: {
+          display: "inline-flex"
+        },
+        control: {
+          flexDirection: "column",
+          height: "100%",
+          minWidth: "var(--slider-thumb-size)",
+          "&[data-has-mark-label]": {
+            marginEnd: "4"
+          }
+        },
+        track: {
+          width: "var(--slider-track-size)"
+        },
+        thumb: {
+          left: "50%",
+          translate: "-50% 0"
+        },
+        markerGroup: {
+          insetStart: "var(--slider-marker-center)",
+          insetBlock: "var(--slider-marker-inset)"
+        },
+        marker: {
+          flexDirection: "row"
+        }
+      },
+      horizontal: {
+        control: {
+          flexDirection: "row",
+          width: "100%",
+          minHeight: "var(--slider-thumb-size)",
+          "&[data-has-mark-label]": {
+            marginBottom: "4"
+          }
+        },
+        track: {
+          height: "var(--slider-track-size)"
+        },
+        thumb: {
+          top: "50%",
+          translate: "0 -50%"
+        },
+        markerGroup: {
+          top: "var(--slider-marker-center)",
+          insetInline: "var(--slider-marker-inset)"
+        },
+        marker: {
+          flexDirection: "column"
+        }
+      }
+    }
+  }
+});
+var avatar2 = defineSlotRecipe({
+  className: "avatar",
+  slots: anatomy.avatarAnatomy.keys(),
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontWeight: "medium",
+      position: "relative",
+      verticalAlign: "top",
+      flexShrink: "0",
+      userSelect: "none",
+      width: "var(--avatar-size)",
+      height: "var(--avatar-size)",
+      fontSize: "var(--avatar-font-size)",
+      borderRadius: "var(--avatar-radius)"
+    },
+    fallback: {
+      lineHeight: "1",
+      textTransform: "uppercase",
+      fontWeight: "medium",
+      fontSize: "var(--avatar-font-size)",
+      borderRadius: "var(--avatar-radius)"
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      borderRadius: "var(--avatar-radius)"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "full",
+    variant: "subtle"
+  },
+  variants: {
+    size: {
+      full: {
+        root: {
+          "--avatar-size": "100%",
+          "--avatar-font-size": "100%"
+        }
+      },
+      "2xs": {
+        root: {
+          "--avatar-font-size": "fontSizes.2xs",
+          "--avatar-size": "sizes.6"
+        },
+        fallback: {
+          _icon: { width: "3", height: "3" }
+        }
+      },
+      xs: {
+        root: {
+          "--avatar-font-size": "fontSizes.xs",
+          "--avatar-size": "sizes.8"
+        },
+        fallback: {
+          _icon: { width: "4", height: "4" }
+        }
+      },
+      sm: {
+        root: {
+          "--avatar-font-size": "fontSizes.sm",
+          "--avatar-size": "sizes.9"
+        },
+        fallback: {
+          _icon: { width: "4.5", height: "4.5" }
+        }
+      },
+      md: {
+        root: {
+          "--avatar-font-size": "fontSizes.md",
+          "--avatar-size": "sizes.10"
+        },
+        fallback: {
+          _icon: { width: "5", height: "5" }
+        }
+      },
+      lg: {
+        root: {
+          "--avatar-font-size": "fontSizes.md",
+          "--avatar-size": "sizes.11"
+        },
+        fallback: {
+          _icon: { width: "5.5", height: "5.5" }
+        }
+      },
+      xl: {
+        root: {
+          "--avatar-font-size": "fontSizes.lg",
+          "--avatar-size": "sizes.12"
+        },
+        fallback: {
+          _icon: { width: "6", height: "6" }
+        }
+      },
+      "2xl": {
+        root: {
+          "--avatar-font-size": "fontSizes.xl",
+          "--avatar-size": "sizes.16"
+        },
+        fallback: {
+          _icon: { width: "8", height: "8" }
+        }
+      }
+    },
+    variant: {
+      solid: {
+        root: {
+          bg: "colorPalette.solid.bg",
+          color: "colorPalette.solid.fg"
+        }
+      },
+      surface: {
+        root: {
+          bg: "colorPalette.surface.bg",
+          borderWidth: "1px",
+          borderColor: "colorPalette.surface.border",
+          color: "colorPalette.surface.fg"
+        }
+      },
+      subtle: {
+        root: {
+          bg: "colorPalette.subtle.bg",
+          color: "colorPalette.subtle.fg"
+        }
+      },
+      outline: {
+        root: {
+          borderWidth: "1px",
+          borderColor: "colorPalette.outline.border",
+          color: "colorPalette.outline.fg"
+        }
+      }
+    },
+    shape: {
+      square: {},
+      rounded: {
+        root: { "--avatar-radius": "radii.l3" }
+      },
+      full: {
+        root: { "--avatar-radius": "radii.full" }
+      }
+    }
+  }
+});
+
+// src/preset/recipes/badge.ts
+var badge2 = defineRecipe({
+  className: "badge",
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    borderRadius: "l2",
+    lineHeight: "1",
+    fontWeight: "medium",
+    fontVariantNumeric: "tabular-nums",
+    whiteSpace: "nowrap",
+    userSelect: "none"
+  },
+  defaultVariants: {
+    variant: "subtle",
+    size: "md"
+  },
+  variants: {
+    variant: {
+      solid: {
+        bg: "colorPalette.solid.bg",
+        color: "colorPalette.solid.fg"
+      },
+      surface: {
+        bg: "colorPalette.surface.bg",
+        borderWidth: "1px",
+        borderColor: "colorPalette.surface.border",
+        color: "colorPalette.surface.fg"
+      },
+      subtle: {
+        bg: "colorPalette.subtle.bg",
+        color: "colorPalette.subtle.fg"
+      },
+      outline: {
+        borderWidth: "1px",
+        borderColor: "colorPalette.outline.border",
+        color: "colorPalette.outline.fg"
+      }
+    },
+    size: {
+      sm: { fontSize: "xs", px: "1.5", h: "4.5", gap: "0.5", _icon: { boxSize: "2.5" } },
+      md: { fontSize: "xs", px: "2", h: "5", gap: "1", _icon: { boxSize: "3" } },
+      lg: { fontSize: "xs", px: "2.5", h: "5.5", gap: "1", _icon: { boxSize: "3.5" } },
+      xl: { fontSize: "sm", px: "2.5", h: "6", gap: "1.5", _icon: { boxSize: "4" } },
+      "2xl": { fontSize: "md", px: "3", h: "7", gap: "1.5", _icon: { boxSize: "4.5" } }
+    }
+  }
+});
+var progress2 = defineSlotRecipe({
+  slots: anatomy.progressAnatomy.keys(),
+  className: "progress",
+  base: {
+    root: {
+      textStyle: "sm",
+      position: "relative"
+    },
+    track: {
+      overflow: "hidden",
+      position: "relative"
+    },
+    range: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      transitionProperty: "width, height",
+      transitionDuration: "slow",
+      height: "100%",
+      bgColor: "var(--track-color)",
+      _indeterminate: {
+        "--animate-from-x": "-40%",
+        "--animate-to-x": "100%",
+        position: "absolute",
+        willChange: "left",
+        minWidth: "50%",
+        animation: "position 1s ease infinite normal none running",
+        backgroundImage: `linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%)`
+      }
+    },
+    label: {
+      display: "inline-flex",
+      fontWeight: "medium",
+      alignItems: "center",
+      gap: "1"
+    },
+    valueText: {
+      textStyle: "xs",
+      lineHeight: "1",
+      fontWeight: "medium"
+    }
+  },
+  variants: {
+    variant: {
+      solid: {
+        track: {
+          bgColor: "gray.subtle.bg"
+        },
+        range: {
+          bgColor: "colorPalette.solid.bg",
+          color: "colorPalette.solid.fg"
+        }
+      },
+      subtle: {
+        track: {
+          bgColor: "colorPalette.subtle.bg.active"
+        },
+        range: {
+          bgColor: "colorPalette.solid.bg",
+          color: "colorPalette.solid.fg"
+        }
+      }
+    },
+    shape: {
+      square: {},
+      rounded: {
+        track: {
+          borderRadius: "l1"
+        }
+      },
+      full: {
+        track: {
+          borderRadius: "full"
+        }
+      }
+    },
+    striped: {
+      true: {
+        range: {
+          backgroundImage: `linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent)`,
+          backgroundSize: `var(--stripe-size) var(--stripe-size)`,
+          "--stripe-size": "1rem",
+          "--stripe-color": {
+            _light: "rgba(255, 255, 255, 0.3)",
+            _dark: "rgba(0, 0, 0, 0.3)"
+          }
+        }
+      }
+    },
+    animated: {
+      true: {
+        range: {
+          "--animate-from": "var(--stripe-size)",
+          animation: "bg-position 1s linear infinite"
+        }
+      }
+    },
+    size: {
+      xs: { track: { h: "1.5" } },
+      sm: { track: { h: "2" } },
+      md: { track: { h: "2.5" } },
+      lg: { track: { h: "3" } },
+      xl: { track: { h: "3.5" } }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "md",
+    shape: "rounded"
+  }
+});
+
+// src/preset/recipes/skeleton.ts
+var skeleton2 = defineRecipe({
+  className: "skeleton",
+  jsx: ["Skeleton", "SkeletonCircle", "SkeletonText"],
+  base: {},
+  variants: {
+    loading: {
+      true: {
+        borderRadius: "l2",
+        boxShadow: "none",
+        backgroundClip: "padding-box",
+        cursor: "default",
+        color: "transparent",
+        pointerEvents: "none",
+        userSelect: "none",
+        flexShrink: "0",
+        "&::before, &::after, *": {
+          visibility: "hidden"
+        }
+      },
+      false: {
+        background: "unset",
+        animation: "fade-in var(--fade-duration, 0.1s) ease-out !important"
+      }
+    },
+    circle: {
+      true: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flex: "0 0 auto",
+        borderRadius: "9999px"
+      }
+    },
+    variant: {
+      pulse: {
+        background: "gray.subtle.bg.active",
+        animation: "pulse",
+        animationDuration: "var(--duration, 1.2s)"
+      },
+      shine: {
+        "--animate-from": "200%",
+        "--animate-to": "-200%",
+        "--start-color": "colors.gray.subtle.bg",
+        "--end-color": "colors.gray.subtle.bg.active",
+        backgroundImage: "linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))",
+        backgroundSize: "400% 100%",
+        animation: "bg-position var(--duration, 5s) ease-in-out infinite"
+      },
+      none: {
+        animation: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "pulse",
+    loading: true
+  }
+});
+var toast2 = defineSlotRecipe({
+  className: "toast",
+  slots: anatomy.toastAnatomy.keys(),
+  base: {
+    root: {
+      alignItems: "start",
+      background: "gray.surface.bg",
+      borderRadius: "l3",
+      boxShadow: "lg",
+      display: "flex",
+      gap: "4",
+      height: "var(--height)",
+      minWidth: "sm",
+      opacity: "var(--opacity)",
+      overflowWrap: "anywhere",
+      p: "4",
+      position: "relative",
+      scale: "var(--scale)",
+      transitionDuration: "slow",
+      transitionProperty: "translate, scale, opacity, height",
+      transitionTimingFunction: "default",
+      translate: "var(--x) var(--y)",
+      width: "full",
+      willChange: "translate, opacity, scale",
+      zIndex: "var(--z-index)"
+    },
+    title: {
+      color: "fg.default",
+      fontWeight: "medium",
+      textStyle: "sm"
+    },
+    description: {
+      color: "fg.muted",
+      textStyle: "sm"
+    },
+    actionTrigger: {
+      color: "colorPalette.plain.fg",
+      cursor: "pointer",
+      fontWeight: "semibold",
+      textStyle: "sm"
+    },
+    closeTrigger: {
+      position: "absolute",
+      top: "2",
+      insetEnd: "2"
+    }
+  }
+});
+var dialog2 = defineSlotRecipe({
+  className: "dialog",
+  slots: anatomy.dialogAnatomy.extendWith("header", "body", "footer").keys(),
+  base: {
+    backdrop: {
+      background: "neutral.a7",
+      height: "100dvh",
+      left: "0",
+      position: "fixed",
+      top: "0",
+      width: "100dvw",
+      zIndex: "overlay",
+      _open: {
+        animationDuration: "normal"
+      },
+      _closed: {
+        animationDuration: "fast"
+      }
+    },
+    positioner: {
+      display: "flex",
+      height: "100dvh",
+      justifyContent: "center",
+      left: 0,
+      overscrollBehaviorY: "none",
+      position: "fixed",
+      top: 0,
+      width: "100dvw",
+      zIndex: "modal"
+    },
+    title: {
+      fontWeight: "semibold",
+      textStyle: "lg"
+    },
+    description: {
+      color: "fg.muted",
+      textStyle: "sm"
+    },
+    closeTrigger: {},
+    content: {
+      bg: "neutral.surface.bg",
+      borderRadius: "l3",
+      boxShadow: "lg",
+      display: "flex",
+      flexDirection: "column",
+      my: "auto",
+      outline: 0,
+      position: "relative",
+      textStyle: "sm",
+      width: "100%",
+      zIndex: "modal",
+      py: { base: "4", md: "6" },
+      gap: { base: "4", md: "6" },
+      _open: {
+        animationDuration: "slowest"
+      },
+      _closed: {
+        animationDuration: "normal",
+        display: "none"
+      }
+    },
+    header: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+      px: { base: "4", md: "6" },
+      flex: "0"
+    },
+    body: {
+      display: "flex",
+      flex: "1",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      px: { base: "4", md: "6" }
+    },
+    footer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      flex: "0",
+      gap: "3",
+      px: { base: "4", md: "6" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    scrollBehavior: "outside",
+    placement: "center"
+  },
+  variants: {
+    size: {
+      xs: { content: { maxW: "xs" } },
+      sm: { content: { maxW: "sm" } },
+      md: { content: { maxW: "md" } },
+      lg: { content: { maxW: "lg" } },
+      xl: { content: { maxW: "xl" } },
+      full: {
+        content: {
+          maxW: "100dvw",
+          minH: "100dvh",
+          borderRadius: "0"
+        }
+      }
+    },
+    placement: {
+      center: {
+        positioner: {
+          alignItems: "center"
+        },
+        content: {
+          mx: "auto"
+        }
+      },
+      top: {
+        positioner: {
+          alignItems: "flex-start"
+        },
+        content: {
+          mt: "16",
+          mx: "auto"
+        }
+      },
+      bottom: {
+        positioner: {
+          alignItems: "flex-end"
+        },
+        content: {
+          mb: "16",
+          mx: "auto"
+        }
+      }
+    },
+    scrollBehavior: {
+      inside: {
+        positioner: {
+          overflow: "hidden"
+        },
+        content: {
+          maxH: "calc(100% - 7.5rem)"
+        },
+        body: {
+          overflow: "auto"
+        }
+      },
+      outside: {
+        positioner: {
+          overflow: "auto",
+          pointerEvents: "auto"
+        }
+      }
+    }
+  }
+});
+var popover2 = defineSlotRecipe({
+  className: "popover",
+  slots: anatomy.popoverAnatomy.extendWith("header", "body", "footer").keys(),
+  base: {
+    positioner: {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      zIndex: "popover"
+    },
+    content: {
+      "--popover-bg": "colors.gray.surface.bg",
+      "--popover-padding": "spacing.md",
+      background: "var(--popover-bg)",
+      borderRadius: "l3",
+      boxShadow: "lg",
+      display: "flex",
+      flexDirection: "column",
+      maxHeight: "var(--available-height)",
+      outline: "0",
+      position: "relative",
+      textStyle: "sm",
+      transformOrigin: "var(--transform-origin)",
+      width: "sm",
+      zIndex: "calc(var(--z-index-popover) + var(--layer-index, 0))",
+      _open: {
+        animationStyle: "scale-fade-in",
+        animationDuration: "fast"
+      },
+      _closed: {
+        animationStyle: "scale-fade-out",
+        animationDuration: "faster"
+      }
+    },
+    title: {
+      color: "fg.default",
+      fontWeight: "medium",
+      textStyle: "md"
+    },
+    description: {
+      color: "fg.muted",
+      textStyle: "sm"
+    },
+    closeTrigger: {
+      position: "absolute",
+      top: "1",
+      right: "1"
+    },
+    header: {
+      display: "flex",
+      flexDirection: "column",
+      p: "var(--popover-padding)"
+    },
+    body: { p: "var(--popover-padding)", display: "flex", flex: "1", flexDirection: "column" },
+    footer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      gap: "3",
+      paddingInline: "var(--popover-padding)",
+      paddingBottom: "var(--popover-padding)"
+    },
+    arrow: {
+      "--arrow-size": "sizes.3",
+      "--arrow-background": "var(--popover-bg)"
+    },
+    arrowTip: {
+      borderTopWidth: "thin",
+      borderInlineStartWidth: "thin",
+      borderColor: "var(--popover-bg)"
+    }
+  }
+});
+var tooltip2 = defineSlotRecipe({
+  className: "tooltip",
+  slots: anatomy.tooltipAnatomy.keys(),
+  base: {
+    content: {
+      "--tooltip-bg": "colors.gray.solid.bg",
+      bg: "var(--tooltip-bg)",
+      color: "gray.solid.fg",
+      borderRadius: "l2",
+      boxShadow: "sm",
+      fontWeight: "semibold",
+      px: "2",
+      py: "1.5",
+      textStyle: "xs",
+      maxWidth: "xs",
+      _open: {
+        animationStyle: "scale-fade-in",
+        animationDuration: "fast"
+      },
+      _closed: {
+        animationStyle: "scale-fade-out",
+        animationDuration: "faster"
+      }
+    },
+    arrow: {
+      "--arrow-size": "sizes.2",
+      "--arrow-background": "var(--tooltip-bg)"
+    },
+    arrowTip: {
+      borderTopWidth: "thin",
+      borderInlineStartWidth: "thin",
+      borderColor: "var(--tooltip-bg)"
+    }
+  }
+});
+
+// src/preset/recipes/heading.ts
+var heading2 = defineRecipe({
+  className: "heading",
+  base: {
+    color: "fg.default"
+  },
+  defaultVariants: {
+    size: "xl"
+  },
+  variants: {
+    size: {
+      xs: { textStyle: "labelLarge" },
+      sm: { textStyle: "titleSmall" },
+      md: { textStyle: "titleMedium" },
+      lg: { textStyle: "titleLarge" },
+      xl: { textStyle: "headlineSmall" },
+      "2xl": { textStyle: "headlineMedium" },
+      "3xl": { textStyle: "headlineLarge" },
+      "4xl": { textStyle: "displaySmall" },
+      "5xl": { textStyle: "displayMedium" },
+      "6xl": { textStyle: "displayLarge" },
+      "7xl": { textStyle: "displayLarge" }
+    }
+  }
+});
+
+// src/preset/layer-styles.ts
+var layerStyles = defineLayerStyles({
+  disabled: {
+    value: {
+      cursor: "not-allowed",
+      opacity: "0.5"
+    }
+  }
+});
+
+// src/preset/text-styles.ts
+var textStyles = defineTextStyles({
+  xs: { value: { fontSize: "xs", lineHeight: "1.125rem" } },
+  sm: { value: { fontSize: "sm", lineHeight: "1.25rem" } },
+  md: { value: { fontSize: "md", lineHeight: "1.5rem" } },
+  lg: { value: { fontSize: "lg", lineHeight: "1.75rem" } },
+  xl: { value: { fontSize: "xl", lineHeight: "1.875rem" } },
+  "2xl": { value: { fontSize: "2xl", lineHeight: "2rem" } },
+  "3xl": { value: { fontSize: "3xl", lineHeight: "2.375rem" } },
+  "4xl": { value: { fontSize: "4xl", lineHeight: "2.75rem", letterSpacing: "-0.02em" } },
+  "5xl": { value: { fontSize: "5xl", lineHeight: "3.75rem", letterSpacing: "-0.02em" } },
+  "6xl": { value: { fontSize: "6xl", lineHeight: "4.5rem", letterSpacing: "-0.02em" } },
+  "7xl": { value: { fontSize: "7xl", lineHeight: "5.75rem", letterSpacing: "-0.02em" } },
+  label: { value: { fontSize: "sm", lineHeight: "1.25rem", fontWeight: "medium" } }
+});
+
+// src/preset/shadows.ts
+var shadows = defineSemanticTokens.shadows({
+  xs: {
+    value: {
+      base: "0px 1px 2px {colors.neutral.a6}, 0px 0px 1px {colors.neutral.a7}",
+      _dark: "0px 1px 1px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
+    }
+  },
+  sm: {
+    value: {
+      base: "0px 2px 4px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
+      _dark: "0px 2px 4px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
+    }
+  },
+  md: {
+    value: {
+      base: "0px 4px 8px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
+      _dark: "0px 4px 8px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
+    }
+  },
+  lg: {
+    value: {
+      base: "0px 8px 16px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
+      _dark: "0px 8px 16px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
+    }
+  },
+  xl: {
+    value: {
+      base: "0px 16px 24px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
+      _dark: "0px 16px 24px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
+    }
+  },
+  "2xl": {
+    value: {
+      base: "0px 24px 40px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
+      _dark: "0px 24px 40px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
+    }
+  },
+  inset: {
+    value: {
+      base: "inset 8px 0 12px -8px {colors.neutral.a4}",
+      _dark: "inset 8px 0 12px -8px {colors.neutral.a6}"
+    }
+  }
+});
+
+// src/preset/index.ts
+var theme = transformToPandaTheme(material3Language);
+var discourserPandaPreset = {
+  name: "discourser-design-system-preset",
+  theme: {
+    extend: {
+      // Add M3 tokens to Panda preset (colors, fonts, spacing, etc.)
+      tokens: {
+        colors: theme.tokens.colors,
+        fonts: theme.tokens.fonts,
+        fontSizes: theme.tokens.fontSizes,
+        lineHeights: theme.tokens.lineHeights,
+        fontWeights: theme.tokens.fontWeights,
+        letterSpacings: theme.tokens.letterSpacings,
+        spacing: theme.tokens.spacing,
+        radii: theme.tokens.radii,
+        shadows: theme.tokens.shadows,
+        durations: theme.tokens.durations,
+        easings: theme.tokens.easings,
+        borderWidths: theme.tokens.borderWidths
+      },
+      // Park UI layer styles for common UI patterns (disabled, etc.)
+      layerStyles,
+      // Combined text styles: M3 + Park UI
+      textStyles: {
+        ...theme.textStyles,
+        ...textStyles
+      },
+      // Semantic tokens: M3 colors + Park UI aliases + shadows + radii
+      semanticTokens: {
+        colors: {
+          // M3-to-Radix color bridges
+          ...colors,
+          // Park UI-style aliases for component compatibility
+          fg: {
+            default: {
+              value: { base: "{colors.gray.12}", _dark: "{colors.gray.12}" }
+            },
+            muted: {
+              value: { base: "{colors.gray.11}", _dark: "{colors.gray.11}" }
+            },
+            subtle: {
+              value: { base: "{colors.gray.10}", _dark: "{colors.gray.10}" }
+            }
+          },
+          canvas: {
+            value: { base: "{colors.gray.1}", _dark: "{colors.gray.1}" }
+          },
+          border: {
+            default: {
+              value: { base: "{colors.gray.6}", _dark: "{colors.gray.6}" }
+            },
+            muted: {
+              value: { base: "{colors.gray.4}", _dark: "{colors.gray.4}" }
+            }
+          },
+          // M3 semantic tokens (surface, onSurface, etc.)
+          ...m3SemanticTokens,
+          // Base colors
+          white: { value: "#FFFFFF" },
+          black: { value: "#000000" }
+        },
+        // Park UI shadow tokens
+        shadows,
+        // Park UI radii tokens (l1, l2, l3 for consistent border radius)
+        radii: {
+          l1: { value: "0.125rem" },
+          // 2px (xs)
+          l2: { value: "0.375rem" },
+          // 6px (sm)
+          l3: { value: "0.5rem" }
+          // 8px (md)
+        }
+      },
+      // Recipes: Park UI components (simple recipes)
+      recipes: {
+        // Core
+        button: button2,
+        input: input2,
+        inputAddon: inputAddon2,
+        group: group2,
+        spinner: spinner2,
+        absoluteCenter: absoluteCenter2,
+        // Typography
+        heading: heading2,
+        // Feedback & Status
+        badge: badge2,
+        skeleton: skeleton2,
+        textarea: textarea2
+      },
+      slotRecipes: {
+        // Core
+        field,
+        inputGroup: inputGroup2,
+        // Layout & Containers
+        card: card2,
+        accordion: accordion2,
+        drawer: drawer2,
+        tabs: tabs2,
+        // Form Elements
+        switchComponent: switchRecipe2,
+        checkbox: checkbox2,
+        radioGroup: radioGroup2,
+        select: select2,
+        slider: slider2,
+        // Feedback & Status
+        avatar: avatar2,
+        progress: progress2,
+        toast: toast2,
+        // Overlays
+        dialog: dialog2,
+        popover: popover2,
+        tooltip: tooltip2
+      }
+    }
+  },
+  conditions: {
+    light: "[data-theme=light] &, .light &",
+    dark: "[data-theme=dark] &, .dark &"
+  },
+  globalCss: {
+    html: {
+      colorScheme: "light dark",
+      bg: "canvas",
+      color: "fg.default"
+    },
+    body: {
+      fontFamily: "body",
+      textStyle: "bodyMedium"
+    }
+  }
+};
+
 exports.AbsoluteCenter = AbsoluteCenter_exports;
 exports.Accordion = Accordion_exports;
 exports.Avatar = Avatar_exports;
@@ -1908,6 +4922,7 @@ exports.buttonRecipe = buttonRecipe;
 exports.cardRecipe = cardRecipe;
 exports.cn = cn;
 exports.dialogRecipe = dialogRecipe;
+exports.discourserPandaPreset = discourserPandaPreset;
 exports.iconButtonRecipe = iconButtonRecipe;
 exports.inputRecipe = inputRecipe;
 exports.switchRecipe = switchRecipe;