@mastra/playground-ui 52.0.0 → 53.0.0-alpha.1

package/dist/components/PageLayout.es.js

@@ -1,3 +1,3 @@
-export { N as NoDataPageLayout, P as PageLayout } from '../no-data-page-layout-CkhD1Xwb.js';
+export { N as NoDataPageLayout, P as PageLayout } from '../no-data-page-layout-BB6l1JBu.js';
 export { P as PageHeadingContext, u as usePageHeading } from '../page-heading-context-D3yjYoJE.js';
 //# sourceMappingURL=PageLayout.es.js.map

package/dist/components/ScrollArea.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const scrollArea = require('../scroll-area-D_-TyC0c.cjs');
+const scrollArea = require('../scroll-area-B1vdOFuC.cjs');
 
 
 

package/dist/components/ScrollArea.es.js

@@ -1,2 +1,2 @@
-export { S as ScrollArea, a as ScrollBar } from '../scroll-area-DVSQTnjk.js';
+export { S as ScrollArea, a as ScrollBar } from '../scroll-area-BiHnOfzg.js';
 //# sourceMappingURL=ScrollArea.es.js.map

package/dist/components/ThemeToggle.cjs.js

@@ -15,12 +15,34 @@ const DEFAULT_OPTIONS = [
   { value: "light", label: "Light", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, {}) },
   { value: "dark", label: "Dark", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, {}) }
 ];
-const ITEM_WIDTH = 28;
-const ITEM_GAP = 2;
+const SIZE_CONFIG = {
+  md: {
+    itemGap: 2,
+    itemWidth: 28,
+    root: "gap-0.5 p-0.5",
+    indicator: "inset-y-0.5 left-0.5",
+    item: "h-6 [&_svg]:size-3.5"
+  },
+  xs: {
+    itemGap: 1,
+    itemWidth: 20,
+    root: "gap-px p-px",
+    indicator: "inset-y-px left-px",
+    item: "h-4 [&_svg]:h-icon-sm [&_svg]:w-icon-sm"
+  },
+  sm: {
+    itemGap: 1,
+    itemWidth: 24,
+    root: "gap-px p-px",
+    indicator: "inset-y-px left-px",
+    item: "h-5 [&_svg]:h-icon-sm [&_svg]:w-icon-sm"
+  }
+};
 const ThemeToggle = ({
   value,
   onChange,
   options = DEFAULT_OPTIONS,
+  size = "md",
   className,
   "aria-label": ariaLabel = "Theme",
   ...rest
@@ -37,7 +59,8 @@ const ThemeToggle = ({
     0,
     options.findIndex((option) => option.value === effectiveCurrent)
   );
-  const indicatorOffset = activeIndex * (ITEM_WIDTH + ITEM_GAP);
+  const sizeConfig = SIZE_CONFIG[size];
+  const indicatorOffset = activeIndex * (sizeConfig.itemWidth + sizeConfig.itemGap);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     radioGroup.RadioGroup,
     {
@@ -46,7 +69,8 @@ const ThemeToggle = ({
       onValueChange: handleChange,
       "aria-label": ariaLabel,
       className: utils_cn.cn(
-        "relative inline-flex w-fit items-center gap-0.5 rounded-full border border-border1 bg-surface3 p-0.5",
+        "relative inline-flex w-fit items-center rounded-full border border-border1 bg-surface3",
+        sizeConfig.root,
         className
       ),
       children: [
@@ -55,10 +79,11 @@ const ThemeToggle = ({
           {
             "aria-hidden": "true",
             className: utils_cn.cn(
-              "pointer-events-none absolute inset-y-0.5 left-0.5 rounded-full bg-surface5 motion-reduce:transition-none",
-              primitives_transitions.transitions.transform
+              "pointer-events-none absolute rounded-full bg-surface5 motion-reduce:transition-none",
+              primitives_transitions.transitions.transform,
+              sizeConfig.indicator
             ),
-            style: { width: ITEM_WIDTH, transform: `translateX(${indicatorOffset}px)` }
+            style: { width: sizeConfig.itemWidth, transform: `translateX(${indicatorOffset}px)` }
           }
         ),
         options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -66,11 +91,12 @@ const ThemeToggle = ({
           {
             value: option.value,
             "aria-label": option.label,
-            style: { width: ITEM_WIDTH },
+            style: { width: sizeConfig.itemWidth },
             className: utils_cn.cn(
-              "relative inline-flex h-6 cursor-pointer items-center justify-center rounded-full",
+              "relative inline-flex cursor-pointer items-center justify-center rounded-full",
               // Base UI exposes `data-checked` instead of Radix's `data-state="checked"`.
-              "text-icon3 hover:text-icon6 data-[checked]:text-icon6 [&_svg]:size-3.5",
+              "text-icon3 hover:text-icon6 data-[checked]:text-icon6",
+              sizeConfig.item,
               "focus-visible:outline-hidden",
               "active:scale-90 motion-reduce:transition-none",
               primitives_transitions.transitions.colors,

package/dist/components/ThemeToggle.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeToggle.cjs.js","sources":["../../src/ds/components/ThemeToggle/theme-toggle.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { Monitor, Moon, Sun } from 'lucide-react';\n\nimport { useTheme } from '../ThemeProvider';\nimport type { Theme } from '../ThemeProvider/theme-context';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface ThemeToggleOption {\n  value: Theme;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst DEFAULT_OPTIONS: ReadonlyArray<ThemeToggleOption> = [\n  { value: 'system', label: 'System', icon: <Monitor /> },\n  { value: 'light', label: 'Light', icon: <Sun /> },\n  { value: 'dark', label: 'Dark', icon: <Moon /> },\n];\n\nconst ITEM_WIDTH = 28;\nconst ITEM_GAP = 2;\n\ntype RadioRootProps = Omit<\n  RadioGroupPrimitive.Props,\n  'value' | 'onChange' | 'onValueChange' | 'defaultValue' | 'className'\n> & {\n  className?: string;\n};\n\ntype ControlledProps = { value: Theme; onChange: (next: Theme) => void };\ntype UncontrolledProps = { value?: undefined; onChange?: undefined };\n\nexport type ThemeToggleProps = RadioRootProps & {\n  options?: ReadonlyArray<ThemeToggleOption>;\n} & (ControlledProps | UncontrolledProps);\n\nexport const ThemeToggle = ({\n  value,\n  onChange,\n  options = DEFAULT_OPTIONS,\n  className,\n  'aria-label': ariaLabel = 'Theme',\n  ...rest\n}: ThemeToggleProps) => {\n  const { theme, setTheme } = useTheme();\n  const current = value ?? theme;\n  const commit = onChange ?? setTheme;\n  const effectiveCurrent = options.some(option => option.value === current) ? current : (options[0]?.value ?? 'system');\n\n  const handleChange = (next: unknown) => {\n    const match = options.find(opt => opt.value === next);\n    if (match) commit(match.value);\n  };\n\n  const activeIndex = Math.max(\n    0,\n    options.findIndex(option => option.value === effectiveCurrent),\n  );\n  const indicatorOffset = activeIndex * (ITEM_WIDTH + ITEM_GAP);\n\n  return (\n    <RadioGroupPrimitive\n      {...rest}\n      value={effectiveCurrent}\n      onValueChange={handleChange}\n      aria-label={ariaLabel}\n      className={cn(\n        'relative inline-flex w-fit items-center gap-0.5 rounded-full border border-border1 bg-surface3 p-0.5',\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'pointer-events-none absolute inset-y-0.5 left-0.5 rounded-full bg-surface5 motion-reduce:transition-none',\n          transitions.transform,\n        )}\n        style={{ width: ITEM_WIDTH, transform: `translateX(${indicatorOffset}px)` }}\n      />\n      {options.map(option => (\n        <RadioPrimitive.Root\n          key={option.value}\n          value={option.value}\n          aria-label={option.label}\n          style={{ width: ITEM_WIDTH }}\n          className={cn(\n            'relative inline-flex h-6 cursor-pointer items-center justify-center rounded-full',\n            // Base UI exposes `data-checked` instead of Radix's `data-state=\"checked\"`.\n            'text-icon3 hover:text-icon6 data-[checked]:text-icon6 [&_svg]:size-3.5',\n            'focus-visible:outline-hidden',\n            'active:scale-90 motion-reduce:transition-none',\n            transitions.colors,\n            transitions.transform,\n          )}\n        >\n          <span aria-hidden=\"true\" className=\"pointer-events-none inline-flex items-center justify-center\">\n            {option.icon}\n          </span>\n        </RadioPrimitive.Root>\n      ))}\n    </RadioGroupPrimitive>\n  );\n};\n"],"names":["jsx","Monitor","Sun","Moon","useTheme","jsxs","RadioGroupPrimitive","cn","transitions","RadioPrimitive"],"mappings":"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"}
+{"version":3,"file":"ThemeToggle.cjs.js","sources":["../../src/ds/components/ThemeToggle/theme-toggle.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { Monitor, Moon, Sun } from 'lucide-react';\n\nimport { useTheme } from '../ThemeProvider';\nimport type { Theme } from '../ThemeProvider/theme-context';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface ThemeToggleOption {\n  value: Theme;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst DEFAULT_OPTIONS: ReadonlyArray<ThemeToggleOption> = [\n  { value: 'system', label: 'System', icon: <Monitor /> },\n  { value: 'light', label: 'Light', icon: <Sun /> },\n  { value: 'dark', label: 'Dark', icon: <Moon /> },\n];\n\nconst SIZE_CONFIG = {\n  md: {\n    itemGap: 2,\n    itemWidth: 28,\n    root: 'gap-0.5 p-0.5',\n    indicator: 'inset-y-0.5 left-0.5',\n    item: 'h-6 [&_svg]:size-3.5',\n  },\n  xs: {\n    itemGap: 1,\n    itemWidth: 20,\n    root: 'gap-px p-px',\n    indicator: 'inset-y-px left-px',\n    item: 'h-4 [&_svg]:h-icon-sm [&_svg]:w-icon-sm',\n  },\n  sm: {\n    itemGap: 1,\n    itemWidth: 24,\n    root: 'gap-px p-px',\n    indicator: 'inset-y-px left-px',\n    item: 'h-5 [&_svg]:h-icon-sm [&_svg]:w-icon-sm',\n  },\n} as const;\n\ntype RadioRootProps = Omit<\n  RadioGroupPrimitive.Props,\n  'value' | 'onChange' | 'onValueChange' | 'defaultValue' | 'className'\n> & {\n  className?: string;\n};\n\ntype ControlledProps = { value: Theme; onChange: (next: Theme) => void };\ntype UncontrolledProps = { value?: undefined; onChange?: undefined };\n\nexport type ThemeToggleProps = RadioRootProps & {\n  options?: ReadonlyArray<ThemeToggleOption>;\n  size?: keyof typeof SIZE_CONFIG;\n} & (ControlledProps | UncontrolledProps);\n\nexport const ThemeToggle = ({\n  value,\n  onChange,\n  options = DEFAULT_OPTIONS,\n  size = 'md',\n  className,\n  'aria-label': ariaLabel = 'Theme',\n  ...rest\n}: ThemeToggleProps) => {\n  const { theme, setTheme } = useTheme();\n  const current = value ?? theme;\n  const commit = onChange ?? setTheme;\n  const effectiveCurrent = options.some(option => option.value === current) ? current : (options[0]?.value ?? 'system');\n\n  const handleChange = (next: unknown) => {\n    const match = options.find(opt => opt.value === next);\n    if (match) commit(match.value);\n  };\n\n  const activeIndex = Math.max(\n    0,\n    options.findIndex(option => option.value === effectiveCurrent),\n  );\n  const sizeConfig = SIZE_CONFIG[size];\n  const indicatorOffset = activeIndex * (sizeConfig.itemWidth + sizeConfig.itemGap);\n\n  return (\n    <RadioGroupPrimitive\n      {...rest}\n      value={effectiveCurrent}\n      onValueChange={handleChange}\n      aria-label={ariaLabel}\n      className={cn(\n        'relative inline-flex w-fit items-center rounded-full border border-border1 bg-surface3',\n        sizeConfig.root,\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'pointer-events-none absolute rounded-full bg-surface5 motion-reduce:transition-none',\n          transitions.transform,\n          sizeConfig.indicator,\n        )}\n        style={{ width: sizeConfig.itemWidth, transform: `translateX(${indicatorOffset}px)` }}\n      />\n      {options.map(option => (\n        <RadioPrimitive.Root\n          key={option.value}\n          value={option.value}\n          aria-label={option.label}\n          style={{ width: sizeConfig.itemWidth }}\n          className={cn(\n            'relative inline-flex cursor-pointer items-center justify-center rounded-full',\n            // Base UI exposes `data-checked` instead of Radix's `data-state=\"checked\"`.\n            'text-icon3 hover:text-icon6 data-[checked]:text-icon6',\n            sizeConfig.item,\n            'focus-visible:outline-hidden',\n            'active:scale-90 motion-reduce:transition-none',\n            transitions.colors,\n            transitions.transform,\n          )}\n        >\n          <span aria-hidden=\"true\" className=\"pointer-events-none inline-flex items-center justify-center\">\n            {option.icon}\n          </span>\n        </RadioPrimitive.Root>\n      ))}\n    </RadioGroupPrimitive>\n  );\n};\n"],"names":["jsx","Monitor","Sun","Moon","useTheme","jsxs","RadioGroupPrimitive","cn","transitions","RadioPrimitive"],"mappings":"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"}

package/dist/components/ThemeToggle.es.js

@@ -11,12 +11,34 @@ const DEFAULT_OPTIONS = [
   { value: "light", label: "Light", icon: /* @__PURE__ */ jsx(Sun, {}) },
   { value: "dark", label: "Dark", icon: /* @__PURE__ */ jsx(Moon, {}) }
 ];
-const ITEM_WIDTH = 28;
-const ITEM_GAP = 2;
+const SIZE_CONFIG = {
+  md: {
+    itemGap: 2,
+    itemWidth: 28,
+    root: "gap-0.5 p-0.5",
+    indicator: "inset-y-0.5 left-0.5",
+    item: "h-6 [&_svg]:size-3.5"
+  },
+  xs: {
+    itemGap: 1,
+    itemWidth: 20,
+    root: "gap-px p-px",
+    indicator: "inset-y-px left-px",
+    item: "h-4 [&_svg]:h-icon-sm [&_svg]:w-icon-sm"
+  },
+  sm: {
+    itemGap: 1,
+    itemWidth: 24,
+    root: "gap-px p-px",
+    indicator: "inset-y-px left-px",
+    item: "h-5 [&_svg]:h-icon-sm [&_svg]:w-icon-sm"
+  }
+};
 const ThemeToggle = ({
   value,
   onChange,
   options = DEFAULT_OPTIONS,
+  size = "md",
   className,
   "aria-label": ariaLabel = "Theme",
   ...rest
@@ -33,7 +55,8 @@ const ThemeToggle = ({
     0,
     options.findIndex((option) => option.value === effectiveCurrent)
   );
-  const indicatorOffset = activeIndex * (ITEM_WIDTH + ITEM_GAP);
+  const sizeConfig = SIZE_CONFIG[size];
+  const indicatorOffset = activeIndex * (sizeConfig.itemWidth + sizeConfig.itemGap);
   return /* @__PURE__ */ jsxs(
     RadioGroup,
     {
@@ -42,7 +65,8 @@ const ThemeToggle = ({
       onValueChange: handleChange,
       "aria-label": ariaLabel,
       className: cn(
-        "relative inline-flex w-fit items-center gap-0.5 rounded-full border border-border1 bg-surface3 p-0.5",
+        "relative inline-flex w-fit items-center rounded-full border border-border1 bg-surface3",
+        sizeConfig.root,
         className
       ),
       children: [
@@ -51,10 +75,11 @@ const ThemeToggle = ({
           {
             "aria-hidden": "true",
             className: cn(
-              "pointer-events-none absolute inset-y-0.5 left-0.5 rounded-full bg-surface5 motion-reduce:transition-none",
-              transitions.transform
+              "pointer-events-none absolute rounded-full bg-surface5 motion-reduce:transition-none",
+              transitions.transform,
+              sizeConfig.indicator
             ),
-            style: { width: ITEM_WIDTH, transform: `translateX(${indicatorOffset}px)` }
+            style: { width: sizeConfig.itemWidth, transform: `translateX(${indicatorOffset}px)` }
           }
         ),
         options.map((option) => /* @__PURE__ */ jsx(
@@ -62,11 +87,12 @@ const ThemeToggle = ({
           {
             value: option.value,
             "aria-label": option.label,
-            style: { width: ITEM_WIDTH },
+            style: { width: sizeConfig.itemWidth },
             className: cn(
-              "relative inline-flex h-6 cursor-pointer items-center justify-center rounded-full",
+              "relative inline-flex cursor-pointer items-center justify-center rounded-full",
               // Base UI exposes `data-checked` instead of Radix's `data-state="checked"`.
-              "text-icon3 hover:text-icon6 data-[checked]:text-icon6 [&_svg]:size-3.5",
+              "text-icon3 hover:text-icon6 data-[checked]:text-icon6",
+              sizeConfig.item,
               "focus-visible:outline-hidden",
               "active:scale-90 motion-reduce:transition-none",
               transitions.colors,

package/dist/components/ThemeToggle.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeToggle.es.js","sources":["../../src/ds/components/ThemeToggle/theme-toggle.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { Monitor, Moon, Sun } from 'lucide-react';\n\nimport { useTheme } from '../ThemeProvider';\nimport type { Theme } from '../ThemeProvider/theme-context';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface ThemeToggleOption {\n  value: Theme;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst DEFAULT_OPTIONS: ReadonlyArray<ThemeToggleOption> = [\n  { value: 'system', label: 'System', icon: <Monitor /> },\n  { value: 'light', label: 'Light', icon: <Sun /> },\n  { value: 'dark', label: 'Dark', icon: <Moon /> },\n];\n\nconst ITEM_WIDTH = 28;\nconst ITEM_GAP = 2;\n\ntype RadioRootProps = Omit<\n  RadioGroupPrimitive.Props,\n  'value' | 'onChange' | 'onValueChange' | 'defaultValue' | 'className'\n> & {\n  className?: string;\n};\n\ntype ControlledProps = { value: Theme; onChange: (next: Theme) => void };\ntype UncontrolledProps = { value?: undefined; onChange?: undefined };\n\nexport type ThemeToggleProps = RadioRootProps & {\n  options?: ReadonlyArray<ThemeToggleOption>;\n} & (ControlledProps | UncontrolledProps);\n\nexport const ThemeToggle = ({\n  value,\n  onChange,\n  options = DEFAULT_OPTIONS,\n  className,\n  'aria-label': ariaLabel = 'Theme',\n  ...rest\n}: ThemeToggleProps) => {\n  const { theme, setTheme } = useTheme();\n  const current = value ?? theme;\n  const commit = onChange ?? setTheme;\n  const effectiveCurrent = options.some(option => option.value === current) ? current : (options[0]?.value ?? 'system');\n\n  const handleChange = (next: unknown) => {\n    const match = options.find(opt => opt.value === next);\n    if (match) commit(match.value);\n  };\n\n  const activeIndex = Math.max(\n    0,\n    options.findIndex(option => option.value === effectiveCurrent),\n  );\n  const indicatorOffset = activeIndex * (ITEM_WIDTH + ITEM_GAP);\n\n  return (\n    <RadioGroupPrimitive\n      {...rest}\n      value={effectiveCurrent}\n      onValueChange={handleChange}\n      aria-label={ariaLabel}\n      className={cn(\n        'relative inline-flex w-fit items-center gap-0.5 rounded-full border border-border1 bg-surface3 p-0.5',\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'pointer-events-none absolute inset-y-0.5 left-0.5 rounded-full bg-surface5 motion-reduce:transition-none',\n          transitions.transform,\n        )}\n        style={{ width: ITEM_WIDTH, transform: `translateX(${indicatorOffset}px)` }}\n      />\n      {options.map(option => (\n        <RadioPrimitive.Root\n          key={option.value}\n          value={option.value}\n          aria-label={option.label}\n          style={{ width: ITEM_WIDTH }}\n          className={cn(\n            'relative inline-flex h-6 cursor-pointer items-center justify-center rounded-full',\n            // Base UI exposes `data-checked` instead of Radix's `data-state=\"checked\"`.\n            'text-icon3 hover:text-icon6 data-[checked]:text-icon6 [&_svg]:size-3.5',\n            'focus-visible:outline-hidden',\n            'active:scale-90 motion-reduce:transition-none',\n            transitions.colors,\n            transitions.transform,\n          )}\n        >\n          <span aria-hidden=\"true\" className=\"pointer-events-none inline-flex items-center justify-center\">\n            {option.icon}\n          </span>\n        </RadioPrimitive.Root>\n      ))}\n    </RadioGroupPrimitive>\n  );\n};\n"],"names":["RadioGroupPrimitive","RadioPrimitive"],"mappings":"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"}
+{"version":3,"file":"ThemeToggle.es.js","sources":["../../src/ds/components/ThemeToggle/theme-toggle.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { Monitor, Moon, Sun } from 'lucide-react';\n\nimport { useTheme } from '../ThemeProvider';\nimport type { Theme } from '../ThemeProvider/theme-context';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface ThemeToggleOption {\n  value: Theme;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst DEFAULT_OPTIONS: ReadonlyArray<ThemeToggleOption> = [\n  { value: 'system', label: 'System', icon: <Monitor /> },\n  { value: 'light', label: 'Light', icon: <Sun /> },\n  { value: 'dark', label: 'Dark', icon: <Moon /> },\n];\n\nconst SIZE_CONFIG = {\n  md: {\n    itemGap: 2,\n    itemWidth: 28,\n    root: 'gap-0.5 p-0.5',\n    indicator: 'inset-y-0.5 left-0.5',\n    item: 'h-6 [&_svg]:size-3.5',\n  },\n  xs: {\n    itemGap: 1,\n    itemWidth: 20,\n    root: 'gap-px p-px',\n    indicator: 'inset-y-px left-px',\n    item: 'h-4 [&_svg]:h-icon-sm [&_svg]:w-icon-sm',\n  },\n  sm: {\n    itemGap: 1,\n    itemWidth: 24,\n    root: 'gap-px p-px',\n    indicator: 'inset-y-px left-px',\n    item: 'h-5 [&_svg]:h-icon-sm [&_svg]:w-icon-sm',\n  },\n} as const;\n\ntype RadioRootProps = Omit<\n  RadioGroupPrimitive.Props,\n  'value' | 'onChange' | 'onValueChange' | 'defaultValue' | 'className'\n> & {\n  className?: string;\n};\n\ntype ControlledProps = { value: Theme; onChange: (next: Theme) => void };\ntype UncontrolledProps = { value?: undefined; onChange?: undefined };\n\nexport type ThemeToggleProps = RadioRootProps & {\n  options?: ReadonlyArray<ThemeToggleOption>;\n  size?: keyof typeof SIZE_CONFIG;\n} & (ControlledProps | UncontrolledProps);\n\nexport const ThemeToggle = ({\n  value,\n  onChange,\n  options = DEFAULT_OPTIONS,\n  size = 'md',\n  className,\n  'aria-label': ariaLabel = 'Theme',\n  ...rest\n}: ThemeToggleProps) => {\n  const { theme, setTheme } = useTheme();\n  const current = value ?? theme;\n  const commit = onChange ?? setTheme;\n  const effectiveCurrent = options.some(option => option.value === current) ? current : (options[0]?.value ?? 'system');\n\n  const handleChange = (next: unknown) => {\n    const match = options.find(opt => opt.value === next);\n    if (match) commit(match.value);\n  };\n\n  const activeIndex = Math.max(\n    0,\n    options.findIndex(option => option.value === effectiveCurrent),\n  );\n  const sizeConfig = SIZE_CONFIG[size];\n  const indicatorOffset = activeIndex * (sizeConfig.itemWidth + sizeConfig.itemGap);\n\n  return (\n    <RadioGroupPrimitive\n      {...rest}\n      value={effectiveCurrent}\n      onValueChange={handleChange}\n      aria-label={ariaLabel}\n      className={cn(\n        'relative inline-flex w-fit items-center rounded-full border border-border1 bg-surface3',\n        sizeConfig.root,\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'pointer-events-none absolute rounded-full bg-surface5 motion-reduce:transition-none',\n          transitions.transform,\n          sizeConfig.indicator,\n        )}\n        style={{ width: sizeConfig.itemWidth, transform: `translateX(${indicatorOffset}px)` }}\n      />\n      {options.map(option => (\n        <RadioPrimitive.Root\n          key={option.value}\n          value={option.value}\n          aria-label={option.label}\n          style={{ width: sizeConfig.itemWidth }}\n          className={cn(\n            'relative inline-flex cursor-pointer items-center justify-center rounded-full',\n            // Base UI exposes `data-checked` instead of Radix's `data-state=\"checked\"`.\n            'text-icon3 hover:text-icon6 data-[checked]:text-icon6',\n            sizeConfig.item,\n            'focus-visible:outline-hidden',\n            'active:scale-90 motion-reduce:transition-none',\n            transitions.colors,\n            transitions.transform,\n          )}\n        >\n          <span aria-hidden=\"true\" className=\"pointer-events-none inline-flex items-center justify-center\">\n            {option.icon}\n          </span>\n        </RadioPrimitive.Root>\n      ))}\n    </RadioGroupPrimitive>\n  );\n};\n"],"names":["RadioGroupPrimitive","RadioPrimitive"],"mappings":"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"}

package/dist/components/ThreadRail.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const messageScrollerHooks = require('../message-scroller-hooks-BxAf8k0Y.cjs');
-const scrollArea = require('../scroll-area-D_-TyC0c.cjs');
+const scrollArea = require('../scroll-area-B1vdOFuC.cjs');
 const hooks_useMeasuredAutoHeight = require('../hooks/use-measured-auto-height.cjs.js');
 const utils_cn = require('../cn-DCPcv4xv.cjs');
 

package/dist/components/ThreadRail.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { FileText } from 'lucide-react';
 import * as React from 'react';
 import { c as useOptionalMessageScroller, e as useOptionalMessageScrollerVisibility } from '../message-scroller-hooks-BEeE1WE6.js';
-import { S as ScrollArea } from '../scroll-area-DVSQTnjk.js';
+import { S as ScrollArea } from '../scroll-area-BiHnOfzg.js';
 import { useMeasuredAutoHeight } from '../hooks/use-measured-auto-height.es.js';
 import { c as cn } from '../cn-B4oPhFx9.js';
 

package/dist/components/ai/task-list.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const collapsible = require('../../collapsible-CLPRijls.cjs');
-const scrollArea = require('../../scroll-area-D_-TyC0c.cjs');
+const scrollArea = require('../../scroll-area-B1vdOFuC.cjs');
 const tooltip = require('../../tooltip-DIi_oOxO.cjs');
 const utils_cn = require('../../cn-DCPcv4xv.cjs');
 

package/dist/components/ai/task-list.es.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { ChevronRight, ListChecks, Circle, Loader2, CheckCircle2 } from 'lucide-react';
 import { useState } from 'react';
 import { C as Collapsible, a as CollapsibleContent, b as CollapsibleTrigger } from '../../collapsible-igib7hFh.js';
-import { S as ScrollArea } from '../../scroll-area-DVSQTnjk.js';
+import { S as ScrollArea } from '../../scroll-area-BiHnOfzg.js';
 import { b as TooltipProvider, T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../tooltip-Bi0pDO5P.js';
 import { c as cn } from '../../cn-B4oPhFx9.js';
 

package/dist/{data-list-CB-W-syo.cjs → data-list-B5Wicaoc.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-const dataListTopCell = require('./data-list-top-cell-B4H5BBGd.cjs');
+const dataListTopCell = require('./data-list-top-cell-CIs1L8gy.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const Button = require('./Button-D10WB4vc.cjs');
@@ -37,14 +37,12 @@ const DataListRowStatic = React.forwardRef(
       {
         ref,
         className: utils_cn.cn(
-          isWrapped ? "grid grid-cols-subgrid gap-8 rounded-lg px-5 transition-colors duration-200" : dataListTopCell.dataListRowStaticStyles,
-          // `!` so the selection fill wins over borderless table root styling
-          // (higher-specificity descendant rules); same color in `default`.
-          featured && "bg-surface-row-featured!",
-          dataListTopCell.dataListRowVariants({ variant }),
+          isWrapped ? "grid grid-cols-subgrid gap-8 px-5 transition-colors duration-200" : dataListTopCell.dataListRowStaticStyles,
           className
         ),
         style: resolvedStyle,
+        "data-featured": featured || void 0,
+        "data-variant": variant ?? "default",
         ...rest,
         children
       }
@@ -60,8 +58,8 @@ const DataListSubheader = React.forwardRef(
       {
         ref,
         className: utils_cn.cn(
-          "relative isolate col-span-full mt-2 border-none px-5 py-3 text-ui-md font-medium text-neutral4",
-          "before:absolute before:inset-0 before:-z-1 before:rounded-lg before:bg-[var(--data-list-sticky-header-background)]",
+          "data-list-subheader relative isolate col-span-full px-5 py-3 text-ui-md font-medium text-neutral4",
+          "bg-(--data-list-background)",
           className
         ),
         ...rest,
@@ -130,4 +128,4 @@ const DataList = Object.assign(dataListTopCell.DataListRoot, {
 exports.DataList = DataList;
 exports.DataListSubHeading = DataListSubHeading;
 exports.DataListSubheader = DataListSubheader;
-//# sourceMappingURL=data-list-CB-W-syo.cjs.map
+//# sourceMappingURL=data-list-B5Wicaoc.cjs.map

package/dist/data-list-B5Wicaoc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-B5Wicaoc.cjs","sources":["../src/ds/components/DataList/data-list-pagination.tsx","../src/ds/components/DataList/data-list-row-static.tsx","../src/ds/components/DataList/data-list-subheader.tsx","../src/ds/components/DataList/data-list-subheading.tsx","../src/ds/components/DataList/data-list-top-cells.tsx","../src/ds/components/DataList/data-list.tsx"],"sourcesContent":["import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\n\nexport type DataListPaginationProps = {\n  currentPage?: number;\n  hasMore?: boolean;\n  onNextPage?: () => void;\n  onPrevPage?: () => void;\n};\n\nexport function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }: DataListPaginationProps) {\n  const showNavigation = (typeof currentPage === 'number' && currentPage > 0) || hasMore;\n\n  return (\n    <div className=\"text-ui-md text-neutral3 col-span-full flex items-center justify-center gap-8 py-4\">\n      <span>\n        Page <b>{currentPage ? currentPage + 1 : '1'}</b>\n      </span>\n      {showNavigation && (\n        <div className=\"flex gap-4\">\n          {typeof currentPage === 'number' && currentPage > 0 && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onPrevPage}>\n              <ArrowLeftIcon />\n              Previous\n            </Button>\n          )}\n          {hasMore && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onNextPage}>\n              Next\n              <ArrowRightIcon />\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { useDataListRowWrapperContext } from './data-list-row-wrapper-context';\nimport { dataListRowStaticStyles } from './shared';\nimport type { DataListRowSharedProps } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type DataListRowStaticProps = ComponentPropsWithoutRef<'div'> & DataListRowSharedProps;\n\n/**\n * Non-interactive row. Use when a row should *display* like a regular row but\n * has no link target or click handler\n */\nexport const DataListRowStatic = forwardRef<HTMLDivElement, DataListRowStaticProps>(\n  ({ children, className, colStart, colEnd, featured, variant, style, ...rest }, ref) => {\n    const isWrapped = useDataListRowWrapperContext();\n    const hasColumnOverride = colStart !== undefined || colEnd !== undefined;\n    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          isWrapped ? 'grid grid-cols-subgrid gap-8 px-5 transition-colors duration-200' : dataListRowStaticStyles,\n          className,\n        )}\n        style={resolvedStyle}\n        data-featured={featured || undefined}\n        data-variant={variant ?? 'default'}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListRowStatic.displayName = 'DataListRowStatic';\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSubheaderProps = ComponentPropsWithoutRef<'div'>;\n\nexport const DataListSubheader = forwardRef<HTMLDivElement, DataListSubheaderProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'data-list-subheader relative isolate col-span-full px-5 py-3 text-ui-md font-medium text-neutral4',\n          'bg-(--data-list-background)',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListSubheader.displayName = 'DataListSubheader';\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSubHeadingProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nexport function DataListSubHeading({ children, className }: DataListSubHeadingProps) {\n  return <span className={cn('text-ui-sm font-normal text-neutral2', className)}>{children}</span>;\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListTopCellsProps = ComponentPropsWithoutRef<'div'> & {\n  /**\n   * Drop the group's default left margin. Use when this sits as the second\n   * child of a gap-0 `DataList.Top`, beside a `DataList.TopSelectCell` that\n   * owns the leading column.\n   */\n  flushLeft?: boolean;\n  /**\n   * Place the group starting at this column line, spanning through to the\n   * last column. Defaults to the full grid (`col-span-full`). Use when this\n   * sits beside a leading cell that owns column 1.\n   */\n  colStart?: number;\n};\n\n/**\n * Non-interactive header equivalent of `DataList.RowButton`. Groups a set of\n * `DataList.TopCell`s with the same horizontal layout (gap, mx, px) as\n * `RowButton`, so columns inside a wrapped `Top` line up cell-for-cell with the\n * columns inside a wrapped `Row`.\n */\nexport const DataListTopCells = forwardRef<HTMLDivElement, DataListTopCellsProps>(\n  ({ children, className, flushLeft, colStart, style, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'pointer-events-none grid grid-cols-subgrid gap-8 px-5 [&>*]:pointer-events-auto',\n          !colStart && 'col-span-full',\n          flushLeft && 'pl-0!',\n          className,\n        )}\n        style={colStart ? { ...style, gridColumn: `${colStart} / -1` } : style}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListTopCells.displayName = 'DataListTopCells';\n","import {\n  DataListActionsCell,\n  DataListCell,\n  DataListTextCell,\n  DataListNameCell,\n  DataListDescriptionCell,\n  DataListIdCell,\n  DataListRowHeaderCell,\n  DataListNumberCell,\n  DataListSelectCell,\n  DataListDateCell,\n  DataListTimeCell,\n} from './data-list-cells';\nimport { DataListNextPageLoading } from './data-list-next-page-loading';\nimport { DataListNoMatch } from './data-list-no-match';\nimport { DataListPagination } from './data-list-pagination';\nimport { DataListRoot } from './data-list-root';\nimport { DataListRowButton } from './data-list-row-button';\nimport { DataListRowLink } from './data-list-row-link';\nimport { DataListRowStatic } from './data-list-row-static';\nimport { DataListRowWrapper } from './data-list-row-wrapper';\nimport { DataListSpacer } from './data-list-spacer';\nimport { DataListSubheader } from './data-list-subheader';\nimport { DataListSubHeading } from './data-list-subheading';\nimport { DataListTop } from './data-list-top';\nimport {\n  DataListTopCell,\n  DataListTopCellWithTooltip,\n  DataListTopCellSmart,\n  DataListTopSelectCell,\n} from './data-list-top-cell';\nimport { DataListTopCells } from './data-list-top-cells';\n\nexport type { DataListRootProps, DataListVariant } from './data-list-root';\n\nexport const DataList = Object.assign(DataListRoot, {\n  Top: DataListTop,\n  TopCells: DataListTopCells,\n  TopCell: DataListTopCell,\n  TopCellWithTooltip: DataListTopCellWithTooltip,\n  TopCellSmart: DataListTopCellSmart,\n  RowWrapper: DataListRowWrapper,\n  RowButton: DataListRowButton,\n  RowLink: DataListRowLink,\n  RowStatic: DataListRowStatic,\n  Cell: DataListCell,\n  ActionsCell: DataListActionsCell,\n  TextCell: DataListTextCell,\n  NameCell: DataListNameCell,\n  DescriptionCell: DataListDescriptionCell,\n  IdCell: DataListIdCell,\n  RowHeaderCell: DataListRowHeaderCell,\n  NumberCell: DataListNumberCell,\n  DateCell: DataListDateCell,\n  TimeCell: DataListTimeCell,\n  SelectCell: DataListSelectCell,\n  TopSelectCell: DataListTopSelectCell,\n  NoMatch: DataListNoMatch,\n  Subheader: DataListSubheader,\n  SubHeading: DataListSubHeading,\n  Spacer: DataListSpacer,\n  NextPageLoading: DataListNextPageLoading,\n  Pagination: DataListPagination,\n});\n"],"names":["jsxs","jsx","Button","ArrowLeftIcon","ArrowRightIcon","forwardRef","useDataListRowWrapperContext","cn","dataListRowStaticStyles","DataListRoot","DataListTop","DataListTopCell","DataListTopCellWithTooltip","DataListTopCellSmart","DataListRowWrapper","DataListRowButton","DataListRowLink","DataListCell","DataListActionsCell","DataListTextCell","DataListNameCell","DataListDescriptionCell","DataListIdCell","DataListRowHeaderCell","DataListNumberCell","DataListDateCell","DataListTimeCell","DataListSelectCell","DataListTopSelectCell","DataListNoMatch","DataListSpacer","DataListNextPageLoading"],"mappings":"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"}

package/dist/{data-list-DX6y3EFQ.js → data-list-BUK_v9ax.js}

@@ -1,4 +1,4 @@
-import { u as useDataListRowWrapperContext, r as dataListRowVariants, s as dataListRowStaticStyles, D as DataListRoot, c as DataListNextPageLoading, h as DataListSpacer, g as DataListNoMatch, t as DataListTopSelectCell, v as DataListSelectCell, e as DataListTimeCell, f as DataListDateCell, w as DataListNumberCell, x as DataListRowHeaderCell, q as DataListIdCell, y as DataListDescriptionCell, z as DataListNameCell, b as DataListTextCell, A as DataListActionsCell, a as DataListCell, i as DataListRowLink, j as DataListRowButton, k as DataListRowWrapper, l as DataListTopCellSmart, m as DataListTopCellWithTooltip, n as DataListTopCell, o as DataListTop } from './data-list-top-cell-CDYczhpP.js';
+import { u as useDataListRowWrapperContext, r as dataListRowStaticStyles, D as DataListRoot, f as DataListNextPageLoading, j as DataListSpacer, i as DataListNoMatch, s as DataListTopSelectCell, t as DataListSelectCell, g as DataListTimeCell, h as DataListDateCell, v as DataListNumberCell, w as DataListRowHeaderCell, q as DataListIdCell, x as DataListDescriptionCell, y as DataListNameCell, e as DataListTextCell, z as DataListActionsCell, c as DataListCell, k as DataListRowLink, l as DataListRowButton, m as DataListRowWrapper, n as DataListTopCellSmart, o as DataListTopCellWithTooltip, b as DataListTopCell, a as DataListTop } from './data-list-top-cell-D4-Hbz2H.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';
 import { B as Button } from './Button-BsfLQEC6.js';
@@ -35,14 +35,12 @@ const DataListRowStatic = forwardRef(
       {
         ref,
         className: cn(
-          isWrapped ? "grid grid-cols-subgrid gap-8 rounded-lg px-5 transition-colors duration-200" : dataListRowStaticStyles,
-          // `!` so the selection fill wins over borderless table root styling
-          // (higher-specificity descendant rules); same color in `default`.
-          featured && "bg-surface-row-featured!",
-          dataListRowVariants({ variant }),
+          isWrapped ? "grid grid-cols-subgrid gap-8 px-5 transition-colors duration-200" : dataListRowStaticStyles,
           className
         ),
         style: resolvedStyle,
+        "data-featured": featured || void 0,
+        "data-variant": variant ?? "default",
         ...rest,
         children
       }
@@ -58,8 +56,8 @@ const DataListSubheader = forwardRef(
       {
         ref,
         className: cn(
-          "relative isolate col-span-full mt-2 border-none px-5 py-3 text-ui-md font-medium text-neutral4",
-          "before:absolute before:inset-0 before:-z-1 before:rounded-lg before:bg-[var(--data-list-sticky-header-background)]",
+          "data-list-subheader relative isolate col-span-full px-5 py-3 text-ui-md font-medium text-neutral4",
+          "bg-(--data-list-background)",
           className
         ),
         ...rest,
@@ -126,4 +124,4 @@ const DataList = Object.assign(DataListRoot, {
 });
 
 export { DataList as D, DataListSubHeading as a, DataListSubheader as b };
-//# sourceMappingURL=data-list-DX6y3EFQ.js.map
+//# sourceMappingURL=data-list-BUK_v9ax.js.map

package/dist/data-list-BUK_v9ax.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-BUK_v9ax.js","sources":["../src/ds/components/DataList/data-list-pagination.tsx","../src/ds/components/DataList/data-list-row-static.tsx","../src/ds/components/DataList/data-list-subheader.tsx","../src/ds/components/DataList/data-list-subheading.tsx","../src/ds/components/DataList/data-list-top-cells.tsx","../src/ds/components/DataList/data-list.tsx"],"sourcesContent":["import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\n\nexport type DataListPaginationProps = {\n  currentPage?: number;\n  hasMore?: boolean;\n  onNextPage?: () => void;\n  onPrevPage?: () => void;\n};\n\nexport function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }: DataListPaginationProps) {\n  const showNavigation = (typeof currentPage === 'number' && currentPage > 0) || hasMore;\n\n  return (\n    <div className=\"text-ui-md text-neutral3 col-span-full flex items-center justify-center gap-8 py-4\">\n      <span>\n        Page <b>{currentPage ? currentPage + 1 : '1'}</b>\n      </span>\n      {showNavigation && (\n        <div className=\"flex gap-4\">\n          {typeof currentPage === 'number' && currentPage > 0 && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onPrevPage}>\n              <ArrowLeftIcon />\n              Previous\n            </Button>\n          )}\n          {hasMore && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onNextPage}>\n              Next\n              <ArrowRightIcon />\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { useDataListRowWrapperContext } from './data-list-row-wrapper-context';\nimport { dataListRowStaticStyles } from './shared';\nimport type { DataListRowSharedProps } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type DataListRowStaticProps = ComponentPropsWithoutRef<'div'> & DataListRowSharedProps;\n\n/**\n * Non-interactive row. Use when a row should *display* like a regular row but\n * has no link target or click handler\n */\nexport const DataListRowStatic = forwardRef<HTMLDivElement, DataListRowStaticProps>(\n  ({ children, className, colStart, colEnd, featured, variant, style, ...rest }, ref) => {\n    const isWrapped = useDataListRowWrapperContext();\n    const hasColumnOverride = colStart !== undefined || colEnd !== undefined;\n    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          isWrapped ? 'grid grid-cols-subgrid gap-8 px-5 transition-colors duration-200' : dataListRowStaticStyles,\n          className,\n        )}\n        style={resolvedStyle}\n        data-featured={featured || undefined}\n        data-variant={variant ?? 'default'}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListRowStatic.displayName = 'DataListRowStatic';\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSubheaderProps = ComponentPropsWithoutRef<'div'>;\n\nexport const DataListSubheader = forwardRef<HTMLDivElement, DataListSubheaderProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'data-list-subheader relative isolate col-span-full px-5 py-3 text-ui-md font-medium text-neutral4',\n          'bg-(--data-list-background)',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListSubheader.displayName = 'DataListSubheader';\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSubHeadingProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nexport function DataListSubHeading({ children, className }: DataListSubHeadingProps) {\n  return <span className={cn('text-ui-sm font-normal text-neutral2', className)}>{children}</span>;\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListTopCellsProps = ComponentPropsWithoutRef<'div'> & {\n  /**\n   * Drop the group's default left margin. Use when this sits as the second\n   * child of a gap-0 `DataList.Top`, beside a `DataList.TopSelectCell` that\n   * owns the leading column.\n   */\n  flushLeft?: boolean;\n  /**\n   * Place the group starting at this column line, spanning through to the\n   * last column. Defaults to the full grid (`col-span-full`). Use when this\n   * sits beside a leading cell that owns column 1.\n   */\n  colStart?: number;\n};\n\n/**\n * Non-interactive header equivalent of `DataList.RowButton`. Groups a set of\n * `DataList.TopCell`s with the same horizontal layout (gap, mx, px) as\n * `RowButton`, so columns inside a wrapped `Top` line up cell-for-cell with the\n * columns inside a wrapped `Row`.\n */\nexport const DataListTopCells = forwardRef<HTMLDivElement, DataListTopCellsProps>(\n  ({ children, className, flushLeft, colStart, style, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'pointer-events-none grid grid-cols-subgrid gap-8 px-5 [&>*]:pointer-events-auto',\n          !colStart && 'col-span-full',\n          flushLeft && 'pl-0!',\n          className,\n        )}\n        style={colStart ? { ...style, gridColumn: `${colStart} / -1` } : style}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListTopCells.displayName = 'DataListTopCells';\n","import {\n  DataListActionsCell,\n  DataListCell,\n  DataListTextCell,\n  DataListNameCell,\n  DataListDescriptionCell,\n  DataListIdCell,\n  DataListRowHeaderCell,\n  DataListNumberCell,\n  DataListSelectCell,\n  DataListDateCell,\n  DataListTimeCell,\n} from './data-list-cells';\nimport { DataListNextPageLoading } from './data-list-next-page-loading';\nimport { DataListNoMatch } from './data-list-no-match';\nimport { DataListPagination } from './data-list-pagination';\nimport { DataListRoot } from './data-list-root';\nimport { DataListRowButton } from './data-list-row-button';\nimport { DataListRowLink } from './data-list-row-link';\nimport { DataListRowStatic } from './data-list-row-static';\nimport { DataListRowWrapper } from './data-list-row-wrapper';\nimport { DataListSpacer } from './data-list-spacer';\nimport { DataListSubheader } from './data-list-subheader';\nimport { DataListSubHeading } from './data-list-subheading';\nimport { DataListTop } from './data-list-top';\nimport {\n  DataListTopCell,\n  DataListTopCellWithTooltip,\n  DataListTopCellSmart,\n  DataListTopSelectCell,\n} from './data-list-top-cell';\nimport { DataListTopCells } from './data-list-top-cells';\n\nexport type { DataListRootProps, DataListVariant } from './data-list-root';\n\nexport const DataList = Object.assign(DataListRoot, {\n  Top: DataListTop,\n  TopCells: DataListTopCells,\n  TopCell: DataListTopCell,\n  TopCellWithTooltip: DataListTopCellWithTooltip,\n  TopCellSmart: DataListTopCellSmart,\n  RowWrapper: DataListRowWrapper,\n  RowButton: DataListRowButton,\n  RowLink: DataListRowLink,\n  RowStatic: DataListRowStatic,\n  Cell: DataListCell,\n  ActionsCell: DataListActionsCell,\n  TextCell: DataListTextCell,\n  NameCell: DataListNameCell,\n  DescriptionCell: DataListDescriptionCell,\n  IdCell: DataListIdCell,\n  RowHeaderCell: DataListRowHeaderCell,\n  NumberCell: DataListNumberCell,\n  DateCell: DataListDateCell,\n  TimeCell: DataListTimeCell,\n  SelectCell: DataListSelectCell,\n  TopSelectCell: DataListTopSelectCell,\n  NoMatch: DataListNoMatch,\n  Subheader: DataListSubheader,\n  SubHeading: DataListSubHeading,\n  Spacer: DataListSpacer,\n  NextPageLoading: DataListNextPageLoading,\n  Pagination: DataListPagination,\n});\n"],"names":[],"mappings":"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"}

package/dist/data-list-skeleton-BZR_Hkvj.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const dataListTopCell = require('./data-list-top-cell-CIs1L8gy.cjs');
+const utils_cn = require('./cn-DCPcv4xv.cjs');
+
+const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
+const headerWidths = ["3rem", "5rem", "4rem", "3.5rem", "4.5rem", "3rem"];
+function SkeletonBar({ width, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.cn("h-4 animate-pulse rounded-lg bg-(--data-list-background) text-transparent select-none", className),
+      style: { width }
+    }
+  );
+}
+function DataListSkeleton({
+  columns = "auto 1fr auto auto",
+  numberOfRows = 3,
+  fit,
+  variant
+}) {
+  const columnParts = columns.trim().split(/\s+/);
+  const columnCount = columnParts.length;
+  const skeletonColumns = columnParts.map((col) => col === "auto" ? "minmax(6rem, auto)" : col).join(" ");
+  const getPseudoRandomWidth = (rowIdx, colIdx) => {
+    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;
+    return widths[index] ?? widths[0];
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(dataListTopCell.DataListRoot, { columns: skeletonColumns, fit, variant, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dataListTopCell.DataListTop, { children: Array.from({ length: columnCount }).map((_, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(dataListTopCell.DataListTopCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonBar, { width: headerWidths[colIdx % headerWidths.length] ?? headerWidths[0], className: "h-3" }) }, colIdx)) }),
+    Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("grid grid-cols-subgrid gap-8 px-5", ...dataListTopCell.dataListRowOuterStyles), children: Array.from({ length: columnCount }).map((_2, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(dataListTopCell.DataListCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonBar, { width: getPseudoRandomWidth(rowIdx, colIdx) }) }, colIdx)) }, rowIdx))
+  ] });
+}
+
+exports.DataListSkeleton = DataListSkeleton;
+//# sourceMappingURL=data-list-skeleton-BZR_Hkvj.cjs.map

package/dist/data-list-skeleton-BZR_Hkvj.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-skeleton-BZR_Hkvj.cjs","sources":["../src/ds/components/DataList/data-list-skeleton.tsx"],"sourcesContent":["import { DataListCell } from './data-list-cells';\nimport { DataListRoot } from './data-list-root';\nimport type { DataListFit, DataListVariant } from './data-list-root';\nimport { DataListTop } from './data-list-top';\nimport { DataListTopCell } from './data-list-top-cell';\nimport { dataListRowOuterStyles } from './shared';\nimport { cn } from '@/lib/utils';\n\nconst widths = ['75%', '50%', '65%', '90%', '60%', '80%'] as const;\nconst headerWidths = ['3rem', '5rem', '4rem', '3.5rem', '4.5rem', '3rem'] as const;\n\nexport type DataListSkeletonProps = {\n  columns?: string;\n  numberOfRows?: number;\n  fit?: DataListFit;\n  variant?: DataListVariant;\n};\n\nfunction SkeletonBar({ width, className }: { width: string; className?: string }) {\n  return (\n    <div\n      className={cn('h-4 animate-pulse rounded-lg bg-(--data-list-background) text-transparent select-none', className)}\n      style={{ width }}\n    />\n  );\n}\n\n/**\n * Loading placeholder mirroring the real list: same root, a sticky header\n * band with one placeholder label per column, then rows of placeholder cells.\n */\nexport function DataListSkeleton({\n  columns = 'auto 1fr auto auto',\n  numberOfRows = 3,\n  fit,\n  variant,\n}: DataListSkeletonProps) {\n  const columnParts = columns.trim().split(/\\s+/);\n  const columnCount = columnParts.length;\n  const skeletonColumns = columnParts.map(col => (col === 'auto' ? 'minmax(6rem, auto)' : col)).join(' ');\n\n  const getPseudoRandomWidth = (rowIdx: number, colIdx: number) => {\n    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;\n    return widths[index] ?? widths[0];\n  };\n\n  return (\n    <DataListRoot columns={skeletonColumns} fit={fit} variant={variant}>\n      <DataListTop>\n        {Array.from({ length: columnCount }).map((_, colIdx) => (\n          <DataListTopCell key={colIdx}>\n            <SkeletonBar width={headerWidths[colIdx % headerWidths.length] ?? headerWidths[0]} className=\"h-3\" />\n          </DataListTopCell>\n        ))}\n      </DataListTop>\n      {Array.from({ length: numberOfRows }).map((_, rowIdx) => (\n        <div key={rowIdx} className={cn('grid grid-cols-subgrid gap-8 px-5', ...dataListRowOuterStyles)}>\n          {Array.from({ length: columnCount }).map((_, colIdx) => (\n            <DataListCell key={colIdx}>\n              <SkeletonBar width={getPseudoRandomWidth(rowIdx, colIdx)} />\n            </DataListCell>\n          ))}\n        </div>\n      ))}\n    </DataListRoot>\n  );\n}\n"],"names":["jsx","cn","jsxs","DataListRoot","DataListTop","DataListTopCell","dataListRowOuterStyles","_","DataListCell"],"mappings":";;;;;;AAQA,MAAM,SAAS,CAAC,KAAA,EAAO,OAAO,KAAA,EAAO,KAAA,EAAO,OAAO,KAAK,CAAA;AACxD,MAAM,eAAe,CAAC,MAAA,EAAQ,QAAQ,MAAA,EAAQ,QAAA,EAAU,UAAU,MAAM,CAAA;AASxE,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,SAAA,EAAU,EAA0C;AAChF,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA,CAAG,uFAAA,EAAyF,SAAS,CAAA;AAAA,MAChH,KAAA,EAAO,EAAE,KAAA;AAAM;AAAA,GACjB;AAEJ;AAMO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,OAAA,GAAU,oBAAA;AAAA,EACV,YAAA,GAAe,CAAA;AAAA,EACf,GAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,IAAA,EAAK,CAAE,MAAM,KAAK,CAAA;AAC9C,EAAA,MAAM,cAAc,WAAA,CAAY,MAAA;AAChC,EAAA,MAAM,eAAA,GAAkB,WAAA,CAAY,GAAA,CAAI,CAAA,GAAA,KAAQ,GAAA,KAAQ,SAAS,oBAAA,GAAuB,GAAI,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAEtG,EAAA,MAAM,oBAAA,GAAuB,CAAC,MAAA,EAAgB,MAAA,KAAmB;AAC/D,IAAA,MAAM,KAAA,GAAA,CAAS,MAAA,GAAS,MAAA,GAAS,WAAA,GAAc,gBAAgB,MAAA,CAAO,MAAA;AACtE,IAAA,OAAO,MAAA,CAAO,KAAK,CAAA,IAAK,MAAA,CAAO,CAAC,CAAA;AAAA,EAClC,CAAA;AAEA,EAAA,uBACEC,eAAA,CAACC,4BAAA,EAAA,EAAa,OAAA,EAAS,eAAA,EAAiB,KAAU,OAAA,EAChD,QAAA,EAAA;AAAA,oBAAAH,cAAA,CAACI,2BAAA,EAAA,EACE,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,WAAA,EAAa,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,EAAG,MAAA,oCAC1CC,+BAAA,EAAA,EACC,QAAA,kBAAAL,cAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAO,YAAA,CAAa,MAAA,GAAS,YAAA,CAAa,MAAM,CAAA,IAAK,YAAA,CAAa,CAAC,CAAA,EAAG,SAAA,EAAU,KAAA,EAAM,CAAA,EAAA,EAD/E,MAEtB,CACD,CAAA,EACH,CAAA;AAAA,IACC,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,cAAc,CAAA,CAAE,IAAI,CAAC,CAAA,EAAG,2BAC5CA,cAAA,CAAC,KAAA,EAAA,EAAiB,WAAWC,WAAA,CAAG,mCAAA,EAAqC,GAAGK,sCAAsB,CAAA,EAC3F,gBAAM,IAAA,CAAK,EAAE,QAAQ,WAAA,EAAa,EAAE,GAAA,CAAI,CAACC,IAAG,MAAA,qBAC3CP,cAAA,CAACQ,gCACC,QAAA,kBAAAR,cAAA,CAAC,WAAA,EAAA,EAAY,OAAO,oBAAA,CAAqB,MAAA,EAAQ,MAAM,CAAA,EAAG,CAAA,EAAA,EADzC,MAEnB,CACD,CAAA,EAAA,EALO,MAMV,CACD;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/data-list-skeleton-BoaQlbOY.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { D as DataListRoot, a as DataListTop, b as DataListTopCell, c as DataListCell, d as dataListRowOuterStyles } from './data-list-top-cell-D4-Hbz2H.js';
+import { c as cn } from './cn-B4oPhFx9.js';
+
+const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
+const headerWidths = ["3rem", "5rem", "4rem", "3.5rem", "4.5rem", "3rem"];
+function SkeletonBar({ width, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("h-4 animate-pulse rounded-lg bg-(--data-list-background) text-transparent select-none", className),
+      style: { width }
+    }
+  );
+}
+function DataListSkeleton({
+  columns = "auto 1fr auto auto",
+  numberOfRows = 3,
+  fit,
+  variant
+}) {
+  const columnParts = columns.trim().split(/\s+/);
+  const columnCount = columnParts.length;
+  const skeletonColumns = columnParts.map((col) => col === "auto" ? "minmax(6rem, auto)" : col).join(" ");
+  const getPseudoRandomWidth = (rowIdx, colIdx) => {
+    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;
+    return widths[index] ?? widths[0];
+  };
+  return /* @__PURE__ */ jsxs(DataListRoot, { columns: skeletonColumns, fit, variant, children: [
+    /* @__PURE__ */ jsx(DataListTop, { children: Array.from({ length: columnCount }).map((_, colIdx) => /* @__PURE__ */ jsx(DataListTopCell, { children: /* @__PURE__ */ jsx(SkeletonBar, { width: headerWidths[colIdx % headerWidths.length] ?? headerWidths[0], className: "h-3" }) }, colIdx)) }),
+    Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-subgrid gap-8 px-5", ...dataListRowOuterStyles), children: Array.from({ length: columnCount }).map((_2, colIdx) => /* @__PURE__ */ jsx(DataListCell, { children: /* @__PURE__ */ jsx(SkeletonBar, { width: getPseudoRandomWidth(rowIdx, colIdx) }) }, colIdx)) }, rowIdx))
+  ] });
+}
+
+export { DataListSkeleton as D };
+//# sourceMappingURL=data-list-skeleton-BoaQlbOY.js.map

package/dist/data-list-skeleton-BoaQlbOY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-skeleton-BoaQlbOY.js","sources":["../src/ds/components/DataList/data-list-skeleton.tsx"],"sourcesContent":["import { DataListCell } from './data-list-cells';\nimport { DataListRoot } from './data-list-root';\nimport type { DataListFit, DataListVariant } from './data-list-root';\nimport { DataListTop } from './data-list-top';\nimport { DataListTopCell } from './data-list-top-cell';\nimport { dataListRowOuterStyles } from './shared';\nimport { cn } from '@/lib/utils';\n\nconst widths = ['75%', '50%', '65%', '90%', '60%', '80%'] as const;\nconst headerWidths = ['3rem', '5rem', '4rem', '3.5rem', '4.5rem', '3rem'] as const;\n\nexport type DataListSkeletonProps = {\n  columns?: string;\n  numberOfRows?: number;\n  fit?: DataListFit;\n  variant?: DataListVariant;\n};\n\nfunction SkeletonBar({ width, className }: { width: string; className?: string }) {\n  return (\n    <div\n      className={cn('h-4 animate-pulse rounded-lg bg-(--data-list-background) text-transparent select-none', className)}\n      style={{ width }}\n    />\n  );\n}\n\n/**\n * Loading placeholder mirroring the real list: same root, a sticky header\n * band with one placeholder label per column, then rows of placeholder cells.\n */\nexport function DataListSkeleton({\n  columns = 'auto 1fr auto auto',\n  numberOfRows = 3,\n  fit,\n  variant,\n}: DataListSkeletonProps) {\n  const columnParts = columns.trim().split(/\\s+/);\n  const columnCount = columnParts.length;\n  const skeletonColumns = columnParts.map(col => (col === 'auto' ? 'minmax(6rem, auto)' : col)).join(' ');\n\n  const getPseudoRandomWidth = (rowIdx: number, colIdx: number) => {\n    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;\n    return widths[index] ?? widths[0];\n  };\n\n  return (\n    <DataListRoot columns={skeletonColumns} fit={fit} variant={variant}>\n      <DataListTop>\n        {Array.from({ length: columnCount }).map((_, colIdx) => (\n          <DataListTopCell key={colIdx}>\n            <SkeletonBar width={headerWidths[colIdx % headerWidths.length] ?? headerWidths[0]} className=\"h-3\" />\n          </DataListTopCell>\n        ))}\n      </DataListTop>\n      {Array.from({ length: numberOfRows }).map((_, rowIdx) => (\n        <div key={rowIdx} className={cn('grid grid-cols-subgrid gap-8 px-5', ...dataListRowOuterStyles)}>\n          {Array.from({ length: columnCount }).map((_, colIdx) => (\n            <DataListCell key={colIdx}>\n              <SkeletonBar width={getPseudoRandomWidth(rowIdx, colIdx)} />\n            </DataListCell>\n          ))}\n        </div>\n      ))}\n    </DataListRoot>\n  );\n}\n"],"names":["_"],"mappings":";;;;AAQA,MAAM,SAAS,CAAC,KAAA,EAAO,OAAO,KAAA,EAAO,KAAA,EAAO,OAAO,KAAK,CAAA;AACxD,MAAM,eAAe,CAAC,MAAA,EAAQ,QAAQ,MAAA,EAAQ,QAAA,EAAU,UAAU,MAAM,CAAA;AASxE,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,SAAA,EAAU,EAA0C;AAChF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,uFAAA,EAAyF,SAAS,CAAA;AAAA,MAChH,KAAA,EAAO,EAAE,KAAA;AAAM;AAAA,GACjB;AAEJ;AAMO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,OAAA,GAAU,oBAAA;AAAA,EACV,YAAA,GAAe,CAAA;AAAA,EACf,GAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,IAAA,EAAK,CAAE,MAAM,KAAK,CAAA;AAC9C,EAAA,MAAM,cAAc,WAAA,CAAY,MAAA;AAChC,EAAA,MAAM,eAAA,GAAkB,WAAA,CAAY,GAAA,CAAI,CAAA,GAAA,KAAQ,GAAA,KAAQ,SAAS,oBAAA,GAAuB,GAAI,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAEtG,EAAA,MAAM,oBAAA,GAAuB,CAAC,MAAA,EAAgB,MAAA,KAAmB;AAC/D,IAAA,MAAM,KAAA,GAAA,CAAS,MAAA,GAAS,MAAA,GAAS,WAAA,GAAc,gBAAgB,MAAA,CAAO,MAAA;AACtE,IAAA,OAAO,MAAA,CAAO,KAAK,CAAA,IAAK,MAAA,CAAO,CAAC,CAAA;AAAA,EAClC,CAAA;AAEA,EAAA,uBACE,IAAA,CAAC,YAAA,EAAA,EAAa,OAAA,EAAS,eAAA,EAAiB,KAAU,OAAA,EAChD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EACE,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,WAAA,EAAa,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,EAAG,MAAA,yBAC1C,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAO,YAAA,CAAa,MAAA,GAAS,YAAA,CAAa,MAAM,CAAA,IAAK,YAAA,CAAa,CAAC,CAAA,EAAG,SAAA,EAAU,KAAA,EAAM,CAAA,EAAA,EAD/E,MAEtB,CACD,CAAA,EACH,CAAA;AAAA,IACC,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,cAAc,CAAA,CAAE,IAAI,CAAC,CAAA,EAAG,2BAC5C,GAAA,CAAC,KAAA,EAAA,EAAiB,WAAW,EAAA,CAAG,mCAAA,EAAqC,GAAG,sBAAsB,CAAA,EAC3F,gBAAM,IAAA,CAAK,EAAE,QAAQ,WAAA,EAAa,EAAE,GAAA,CAAI,CAACA,IAAG,MAAA,qBAC3C,GAAA,CAAC,gBACC,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,OAAO,oBAAA,CAAqB,MAAA,EAAQ,MAAM,CAAA,EAAG,CAAA,EAAA,EADzC,MAEnB,CACD,CAAA,EAAA,EALO,MAMV,CACD;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}