@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ui/tabs.js

@@ -1,160 +1,163 @@
 "use client";
-import { jsx as s, jsxs as N } from "react/jsx-runtime";
-import { aR as z, aS as g, aT as p, aU as x } from "../_chunks/primitives.js";
-import * as e from "react";
-import { a as y } from "../_chunks/vendor-utils.js";
-import { cn as m } from "./lib/utils.js";
-import { springs as b, tweens as T } from "./lib/motion.js";
-import { L as V, m as v } from "../_chunks/framer.js";
-const h = e.createContext(void 0), I = e.forwardRef(({ value: t, defaultValue: n, onValueChange: o, ...r }, l) => {
-  const [i, c] = e.useState(t ?? n ?? "");
-  e.useEffect(() => {
-    t !== void 0 && c(t);
-  }, [t]);
-  const a = e.useCallback(
-    (d) => {
-      c(d), o?.(d);
-    },
-    [o]
-  );
-  return /* @__PURE__ */ s(h.Provider, { value: i, children: /* @__PURE__ */ s(
-    z,
-    {
-      ref: l,
-      value: t,
-      defaultValue: t === void 0 ? n : void 0,
-      onValueChange: a,
-      ...r
-    }
-  ) });
+import { D as e, E as t, O as n, T as r } from "../_chunks/primitives.js";
+import { a as i, s as a } from "../_chunks/framer.js";
+import { springs as o, tweens as s } from "./lib/motion.js";
+import { t as c } from "../_chunks/vendor-utils.js";
+import { cn as l } from "./lib/utils.js";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/ui/tabs.tsx
+var p = u.createContext(void 0), m = u.createContext("horizontal"), h = u.forwardRef(({ value: t, defaultValue: n, onValueChange: r, orientation: i, ...a }, o) => {
+	let [s, c] = u.useState(t ?? n ?? "");
+	u.useEffect(() => {
+		t !== void 0 && c(t);
+	}, [t]);
+	let f = u.useCallback((e) => {
+		c(e), r?.(e);
+	}, [r]), h = i ?? "horizontal";
+	return /* @__PURE__ */ d(p.Provider, {
+		value: s,
+		children: /* @__PURE__ */ d(m.Provider, {
+			value: h,
+			children: /* @__PURE__ */ d(e, {
+				ref: o,
+				value: t,
+				defaultValue: t === void 0 ? n : void 0,
+				onValueChange: f,
+				orientation: i,
+				...a,
+				className: l(h === "vertical" && "flex flex-row gap-ds-05", a.className)
+			})
+		})
+	});
 });
-I.displayName = "Tabs";
-const C = e.createContext({
-  variant: "line",
-  size: "md",
-  color: "accent",
-  layoutId: "tab-indicator"
-}), w = y("inline-flex items-center", {
-  variants: {
-    variant: {
-      line: "border-b border-surface-border-strong w-full gap-0",
-      contained: "bg-surface-raised p-ds-02 rounded-ds-lg gap-ds-02"
-    },
-    size: {
-      sm: "h-8",
-      md: "h-10",
-      lg: "h-12"
-    }
-  },
-  defaultVariants: { variant: "line", size: "md" }
-}), R = y(
-  "relative inline-flex items-center justify-center gap-ds-02 whitespace-nowrap font-sans font-medium transition-colors duration-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-action-disabled",
-  {
-    variants: {
-      variant: {
-        line: [
-          "-mb-px",
-          "text-surface-fg-muted hover:text-surface-fg"
-        ],
-        contained: [
-          "rounded-ds-md",
-          "text-surface-fg-muted hover:text-surface-fg",
-          "data-[state=active]:text-surface-fg"
-        ]
-      },
-      size: {
-        sm: "px-ds-03 py-ds-02 text-ds-xs",
-        md: "px-ds-05 py-ds-03 text-ds-sm",
-        lg: "px-ds-06 py-ds-04 text-ds-md"
-      }
-    },
-    defaultVariants: { variant: "line", size: "md" }
-  }
-), L = e.forwardRef(({ className: t, variant: n, size: o, color: r, ...l }, i) => {
-  const c = n ?? "line", a = o ?? "md", d = r ?? "accent", f = e.useId(), u = e.useMemo(
-    () => ({
-      variant: c,
-      size: a,
-      color: d,
-      layoutId: `tab-indicator-${f}`
-    }),
-    [c, a, d, f]
-  );
-  return /* @__PURE__ */ s(C.Provider, { value: u, children: /* @__PURE__ */ s(V, { children: /* @__PURE__ */ s(
-    g,
-    {
-      ref: i,
-      className: m(w({ variant: c, size: a }), t),
-      ...l
-    }
-  ) }) });
+h.displayName = "Tabs";
+var g = u.createContext({
+	variant: "line",
+	size: "md",
+	color: "accent",
+	layoutId: "tab-indicator"
+}), _ = c("inline-flex items-center", {
+	variants: {
+		variant: {
+			line: "border-b border-surface-border-strong w-full gap-0",
+			contained: "bg-surface-raised p-ds-02 rounded-ds-lg gap-ds-02"
+		},
+		size: {
+			sm: "h-8",
+			md: "h-10",
+			lg: "h-12"
+		},
+		orientation: {
+			horizontal: "",
+			vertical: "flex-col"
+		}
+	},
+	compoundVariants: [{
+		variant: "line",
+		orientation: "vertical",
+		class: "border-b-0 border-l border-surface-border-strong w-48 shrink-0 h-auto gap-0"
+	}, {
+		variant: "contained",
+		orientation: "vertical",
+		class: "h-auto w-48 shrink-0"
+	}],
+	defaultVariants: {
+		variant: "line",
+		size: "md",
+		orientation: "horizontal"
+	}
+}), v = c("relative inline-flex items-center justify-center gap-ds-02 whitespace-nowrap font-sans font-medium transition-colors duration-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-action-disabled", {
+	variants: {
+		variant: {
+			line: ["-mb-px", "text-surface-fg-muted hover:text-surface-fg"],
+			contained: [
+				"rounded-ds-md",
+				"text-surface-fg-muted hover:text-surface-fg",
+				"data-[state=active]:text-surface-fg"
+			]
+		},
+		size: {
+			sm: "px-ds-03 py-ds-02 text-ds-xs",
+			md: "px-ds-05 py-ds-03 text-ds-sm",
+			lg: "px-ds-06 py-ds-04 text-ds-md"
+		}
+	},
+	defaultVariants: {
+		variant: "line",
+		size: "md"
+	}
+}), y = u.forwardRef(({ className: e, variant: n, size: r, color: i, ...o }, s) => {
+	let c = u.useContext(m), f = n ?? "line", p = r ?? "md", h = i ?? "accent", v = u.useId(), y = u.useMemo(() => ({
+		variant: f,
+		size: p,
+		color: h,
+		layoutId: `tab-indicator-${v}`
+	}), [
+		f,
+		p,
+		h,
+		v
+	]);
+	return /* @__PURE__ */ d(g.Provider, {
+		value: y,
+		children: /* @__PURE__ */ d(a, { children: /* @__PURE__ */ d(t, {
+			ref: s,
+			className: l(_({
+				variant: f,
+				size: p,
+				orientation: c
+			}), e),
+			...o
+		}) })
+	});
 });
-L.displayName = g.displayName;
-const j = {
-  accent: "data-[state=active]:text-accent-11",
-  neutral: "data-[state=active]:text-surface-fg"
-}, A = {
-  accent: "bg-accent-9",
-  neutral: "bg-surface-fg"
-}, M = e.forwardRef(({ className: t, variant: n, children: o, ...r }, l) => {
-  const i = e.useContext(C), c = e.useContext(h), a = n ?? i.variant, d = i.size, f = i.color, u = r.value === c;
-  return /* @__PURE__ */ N(
-    p,
-    {
-      ref: l,
-      className: m(
-        R({ variant: a, size: d }),
-        a === "line" && j[f],
-        t
-      ),
-      ...r,
-      children: [
-        a === "contained" && u && /* @__PURE__ */ s(
-          v.span,
-          {
-            layoutId: `${i.layoutId}-contained`,
-            className: "absolute inset-0 rounded-ds-md bg-surface-overlay shadow-raised",
-            transition: b.smooth
-          }
-        ),
-        /* @__PURE__ */ s("span", { className: "relative z-[1] inline-flex items-center gap-ds-02", children: o }),
-        a === "line" && u && /* @__PURE__ */ s(
-          v.span,
-          {
-            layoutId: `${i.layoutId}-line`,
-            className: m("absolute bottom-0 left-0 right-0 h-0.5", A[f]),
-            transition: b.smooth
-          }
-        )
-      ]
-    }
-  );
+y.displayName = t.displayName;
+var b = {
+	accent: "data-[state=active]:text-accent-11",
+	neutral: "data-[state=active]:text-surface-fg"
+}, x = {
+	accent: "bg-accent-9",
+	neutral: "bg-surface-fg"
+}, S = u.forwardRef(({ className: e, variant: t, children: r, ...a }, s) => {
+	let c = u.useContext(g), h = u.useContext(p), _ = u.useContext(m), y = t ?? c.variant, S = c.size, C = c.color, w = a.value === h, T = _ === "vertical";
+	return /* @__PURE__ */ f(n, {
+		ref: s,
+		className: l(v({
+			variant: y,
+			size: S
+		}), y === "line" && b[C], T && "w-full justify-start", y === "line" && T && "-ml-px -mb-0", e),
+		...a,
+		children: [
+			y === "contained" && w && /* @__PURE__ */ d(i.span, {
+				layoutId: `${c.layoutId}-contained`,
+				className: "absolute inset-0 rounded-ds-md bg-surface-overlay shadow-raised",
+				transition: o.smooth
+			}),
+			/* @__PURE__ */ d("span", {
+				className: "relative z-[1] inline-flex items-center gap-ds-02",
+				children: r
+			}),
+			y === "line" && w && /* @__PURE__ */ d(i.span, {
+				layoutId: `${c.layoutId}-line`,
+				className: l("absolute", T ? "left-0 top-0 bottom-0 w-0.5" : "bottom-0 left-0 right-0 h-0.5", x[C]),
+				transition: o.smooth
+			})
+		]
+	});
 });
-M.displayName = p.displayName;
-const S = e.forwardRef(({ className: t, children: n, ...o }, r) => /* @__PURE__ */ s(
-  x,
-  {
-    ref: r,
-    className: m(
-      "mt-ds-05 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
-      t
-    ),
-    ...o,
-    children: /* @__PURE__ */ s(
-      v.div,
-      {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        transition: T.fade,
-        children: n
-      }
-    )
-  }
-));
-S.displayName = x.displayName;
-export {
-  I as Tabs,
-  S as TabsContent,
-  L as TabsList,
-  M as TabsTrigger
-};
+S.displayName = n.displayName;
+var C = u.forwardRef(({ className: e, children: t, ...n }, a) => /* @__PURE__ */ d(r, {
+	ref: a,
+	className: l("ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", u.useContext(m) === "vertical" ? "mt-0 flex-1 min-w-0" : "mt-ds-05", e),
+	...n,
+	children: /* @__PURE__ */ d(i.div, {
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		transition: s.fade,
+		children: t
+	})
+}));
+C.displayName = r.displayName;
+//#endregion
+export { h as Tabs, C as TabsContent, y as TabsList, S as TabsTrigger };

package/dist/ui/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../../src/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as TabsPrimitive from '@primitives/react-tabs'\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion, LayoutGroup } from 'framer-motion'\nimport { cn } from './lib/utils'\nimport { springs, tweens } from './lib/motion'\n\n/* ── Active-value context (drives layoutId indicator) ────── */\ntype TabsOrientation = 'horizontal' | 'vertical'\nconst TabsValueContext = React.createContext<string | undefined>(undefined)\nconst TabsOrientationContext = React.createContext<TabsOrientation>('horizontal')\n\n/**\n * Tabs compound component — accessible tabbed navigation with keyboard support and two visual\n * variants (line underline and contained pill styles).\n *\n * **Parts (in composition order):**\n * - `Tabs` — manages active tab state (this root; takes `defaultValue`, `value`, `onValueChange`)\n * - `TabsList` — tab bar container (takes `variant=\"line\"|\"contained\"`, default `\"line\"`)\n * - `TabsTrigger` — individual tab button (requires `value`; inherits `variant` from TabsList via context)\n * - `TabsContent` — the panel shown when its tab is active (requires `value` matching a TabsTrigger)\n *\n * **Critical behavior:** `variant` set on `TabsList` propagates automatically via React context to\n * all `TabsTrigger` children. You do NOT need to repeat `variant` on each trigger — but you CAN\n * override it per-trigger if needed.\n *\n * The active tab indicator animates between tabs using Framer Motion `layoutId`. Line variant\n * shows a sliding underline; contained variant shows a sliding pill background.\n *\n * @compound\n * @example\n * // Default line variant:\n * <Tabs defaultValue=\"overview\">\n *   <TabsList>\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *     <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">Overview content</TabsContent>\n *   <TabsContent value=\"activity\">Activity content</TabsContent>\n *   <TabsContent value=\"settings\">Settings content</TabsContent>\n * </Tabs>\n *\n * @example\n * // Contained pill variant (controlled):\n * const [tab, setTab] = useState('members')\n * <Tabs value={tab} onValueChange={setTab}>\n *   <TabsList variant=\"contained\">\n *     <TabsTrigger value=\"members\">Members</TabsTrigger>\n *     <TabsTrigger value=\"roles\">Roles</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"members\">Members list here.</TabsContent>\n *   <TabsContent value=\"roles\">Roles list here.</TabsContent>\n * </Tabs>\n */\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n>(({ value: valueProp, defaultValue, onValueChange, orientation, ...props }, ref) => {\n  // Track the active value so TabsTrigger can conditionally render the motion indicator.\n  // For controlled usage, mirror the prop; for uncontrolled, manage internal state.\n  const [activeValue, setActiveValue] = React.useState(valueProp ?? defaultValue ?? '')\n\n  // Sync controlled value\n  React.useEffect(() => {\n    if (valueProp !== undefined) setActiveValue(valueProp)\n  }, [valueProp])\n\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      setActiveValue(newValue)\n      onValueChange?.(newValue)\n    },\n    [onValueChange],\n  )\n\n  const resolvedOrientation: TabsOrientation = orientation ?? 'horizontal'\n\n  return (\n    <TabsValueContext.Provider value={activeValue}>\n      <TabsOrientationContext.Provider value={resolvedOrientation}>\n        <TabsPrimitive.Root\n          ref={ref}\n          value={valueProp}\n          defaultValue={valueProp === undefined ? defaultValue : undefined}\n          onValueChange={handleValueChange}\n          orientation={orientation}\n          {...props}\n          className={cn(\n            resolvedOrientation === 'vertical' && 'flex flex-row gap-ds-05',\n            props.className,\n          )}\n        />\n      </TabsOrientationContext.Provider>\n    </TabsValueContext.Provider>\n  )\n})\nTabs.displayName = 'Tabs'\n\n/** Props for the Tabs root (defaultValue, value, onValueChange, etc.). */\nexport type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n\ntype TabsVariant = 'line' | 'contained'\ntype TabsSize = 'sm' | 'md' | 'lg'\ntype TabsColor = 'accent' | 'neutral'\n\ninterface TabsListContextValue {\n  variant: TabsVariant\n  size: TabsSize\n  color: TabsColor\n  layoutId: string\n}\n\nconst TabsListContext = React.createContext<TabsListContextValue>({\n  variant: 'line',\n  size: 'md',\n  color: 'accent',\n  layoutId: 'tab-indicator',\n})\n\nconst tabsListVariants = cva('inline-flex items-center', {\n  variants: {\n    variant: {\n      line: 'border-b border-surface-border-strong w-full gap-0',\n      contained:\n        'bg-surface-raised p-ds-02 rounded-ds-lg gap-ds-02',\n    },\n    size: {\n      sm: 'h-8',\n      md: 'h-10',\n      lg: 'h-12',\n    },\n    orientation: {\n      horizontal: '',\n      vertical: 'flex-col',\n    },\n  },\n  compoundVariants: [\n    // Vertical line: left border instead of bottom, fixed width, auto height\n    { variant: 'line', orientation: 'vertical', class: 'border-b-0 border-l border-surface-border-strong w-48 shrink-0 h-auto gap-0' },\n    // Vertical contained: column layout, fixed width, auto height\n    { variant: 'contained', orientation: 'vertical', class: 'h-auto w-48 shrink-0' },\n  ],\n  defaultVariants: { variant: 'line', size: 'md', orientation: 'horizontal' },\n})\n\nconst tabsTriggerVariants = cva(\n  'relative inline-flex items-center justify-center gap-ds-02 whitespace-nowrap font-sans font-medium transition-colors duration-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      variant: {\n        line: [\n          '-mb-px',\n          'text-surface-fg-muted hover:text-surface-fg',\n        ],\n        contained: [\n          'rounded-ds-md',\n          'text-surface-fg-muted hover:text-surface-fg',\n          'data-[state=active]:text-surface-fg',\n        ],\n      },\n      size: {\n        sm: 'px-ds-03 py-ds-02 text-ds-xs',\n        md: 'px-ds-05 py-ds-03 text-ds-sm',\n        lg: 'px-ds-06 py-ds-04 text-ds-md',\n      },\n    },\n    defaultVariants: { variant: 'line', size: 'md' },\n  },\n)\n\n/**\n * TabsList — container for tab triggers. Sets `variant` for all child TabsTriggers via context.\n *\n * **Compound structure — variant propagates automatically:**\n * ```tsx\n * <Tabs defaultValue=\"overview\">\n *   <TabsList variant=\"contained\">\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">Overview content</TabsContent>\n *   <TabsContent value=\"activity\">Activity content</TabsContent>\n * </Tabs>\n * ```\n *\n * `variant` on `TabsList` flows to all `TabsTrigger` children via React context.\n * You do NOT need to repeat `variant` on each `TabsTrigger`.\n */\nexport interface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {\n  /** Color axis — affects active tab indicator and text color. @default \"accent\" */\n  color?: TabsColor\n}\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, variant, size, color, ...props }, ref) => {\n  const orientation = React.useContext(TabsOrientationContext)\n  const resolvedVariant: TabsVariant = variant ?? 'line'\n  const resolvedSize: TabsSize = size ?? 'md'\n  const resolvedColor: TabsColor = color ?? 'accent'\n  const layoutId = React.useId()\n  const contextValue = React.useMemo(\n    () => ({\n      variant: resolvedVariant,\n      size: resolvedSize,\n      color: resolvedColor,\n      layoutId: `tab-indicator-${layoutId}`,\n    }),\n    [resolvedVariant, resolvedSize, resolvedColor, layoutId],\n  )\n  return (\n    <TabsListContext.Provider value={contextValue}>\n      <LayoutGroup>\n        <TabsPrimitive.List\n          ref={ref}\n          className={cn(tabsListVariants({ variant: resolvedVariant, size: resolvedSize, orientation }), className)}\n          {...props}\n        />\n      </LayoutGroup>\n    </TabsListContext.Provider>\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nexport interface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n    VariantProps<typeof tabsTriggerVariants> {}\n\n/* ── Color classes for active state ────── */\nconst lineActiveColorMap: Record<TabsColor, string> = {\n  accent: 'data-[state=active]:text-accent-11',\n  neutral: 'data-[state=active]:text-surface-fg',\n}\n\nconst lineIndicatorColorMap: Record<TabsColor, string> = {\n  accent: 'bg-accent-9',\n  neutral: 'bg-surface-fg',\n}\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, variant: variantProp, children, ...props }, ref) => {\n  const listContext = React.useContext(TabsListContext)\n  const activeValue = React.useContext(TabsValueContext)\n  const orientation = React.useContext(TabsOrientationContext)\n  const variant = variantProp ?? listContext.variant\n  const size = listContext.size\n  const color = listContext.color\n  const isActive = props.value === activeValue\n  const isVertical = orientation === 'vertical'\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        tabsTriggerVariants({ variant, size }),\n        variant === 'line' && lineActiveColorMap[color],\n        // Vertical: full width triggers, left margin instead of bottom\n        isVertical && 'w-full justify-start',\n        variant === 'line' && isVertical && '-ml-px -mb-0',\n        className,\n      )}\n      {...props}\n    >\n      {/* Contained variant: sliding pill background */}\n      {variant === 'contained' && isActive && (\n        <motion.span\n          layoutId={`${listContext.layoutId}-contained`}\n          className=\"absolute inset-0 rounded-ds-md bg-surface-overlay shadow-raised\"\n          transition={springs.smooth}\n        />\n      )}\n      {/* Content sits above the indicator */}\n      <span className=\"relative z-[1] inline-flex items-center gap-ds-02\">{children}</span>\n      {/* Line variant: sliding indicator -- bottom underline (horizontal) or left bar (vertical) */}\n      {variant === 'line' && isActive && (\n        <motion.span\n          layoutId={`${listContext.layoutId}-line`}\n          className={cn(\n            'absolute',\n            isVertical\n              ? 'left-0 top-0 bottom-0 w-0.5'\n              : 'bottom-0 left-0 right-0 h-0.5',\n            lineIndicatorColorMap[color],\n          )}\n          transition={springs.smooth}\n        />\n      )}\n    </TabsPrimitive.Trigger>\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, children, ...props }, ref) => {\n  const orientation = React.useContext(TabsOrientationContext)\n  const isVertical = orientation === 'vertical'\n\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      className={cn(\n        'ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n        isVertical ? 'mt-0 flex-1 min-w-0' : 'mt-ds-05',\n        className,\n      )}\n    {...props}\n  >\n    <motion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={tweens.fade}\n    >\n      {children}\n    </motion.div>\n  </TabsPrimitive.Content>\n  )\n})\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\n/** Props for TabsContent. The `value` prop must match a TabsTrigger's `value`. */\nexport type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\nexport type { TabsSize, TabsColor, TabsOrientation }\n"],"mappings":"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"}

package/dist/ui/text.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const textVariants: (props?: ({
-    variant?: "caption" | "overline" | "heading-2xl" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs" | "body-lg" | "body-md" | "body-sm" | "body-xs" | "label-lg" | "label-md" | "label-sm" | "label-xs" | null | undefined;
+    variant?: "caption" | "code" | "overline" | "heading-2xl" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs" | "body-lg" | "body-md" | "body-sm" | "body-xs" | "label-lg" | "label-md" | "label-sm" | "label-xs" | "label-plain-lg" | "label-plain-md" | "label-plain-sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TextVariant = NonNullable<VariantProps<typeof textVariants>['variant']>;
 /**

package/dist/ui/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/ui/text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,YAAY;;8EAwBhB,CAAA;AAEF,KAAK,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;AAqB5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,KAAK,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI;IAClD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC,CAAA;AAErF,QAAA,MAAM,IAAI,iGAST,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,CAAA"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/ui/text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,YAAY;;8EA4BhB,CAAA;AAEF,KAAK,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;AAyB5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,KAAK,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI;IAClD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC,CAAA;AAErF,QAAA,MAAM,IAAI,iGAST,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,CAAA"}

package/dist/ui/text.js

@@ -1,59 +1,60 @@
-import * as e from "react";
-import { a as o } from "../_chunks/vendor-utils.js";
-import { cn as d } from "./lib/utils.js";
-const p = o("font-sans", {
-  variants: {
-    variant: {
-      "heading-2xl": "text-[length:var(--typo-heading-2xl-size)] font-[number:var(--typo-heading-2xl-weight)] leading-[var(--typo-heading-2xl-leading)] tracking-[var(--typo-heading-2xl-tracking)]",
-      "heading-xl": "text-[length:var(--typo-heading-xl-size)] font-[number:var(--typo-heading-xl-weight)] leading-[var(--typo-heading-xl-leading)] tracking-[var(--typo-heading-xl-tracking)]",
-      "heading-lg": "text-[length:var(--typo-heading-lg-size)] font-[number:var(--typo-heading-lg-weight)] leading-[var(--typo-heading-lg-leading)] tracking-[var(--typo-heading-lg-tracking)]",
-      "heading-md": "text-[length:var(--typo-heading-md-size)] font-[number:var(--typo-heading-md-weight)] leading-[var(--typo-heading-md-leading)] tracking-[var(--typo-heading-md-tracking)]",
-      "heading-sm": "text-[length:var(--typo-heading-sm-size)] font-[number:var(--typo-heading-sm-weight)] leading-[var(--typo-heading-sm-leading)] tracking-[var(--typo-heading-sm-tracking)]",
-      "heading-xs": "text-[length:var(--typo-heading-xs-size)] font-[number:var(--typo-heading-xs-weight)] leading-[var(--typo-heading-xs-leading)] tracking-[var(--typo-heading-xs-tracking)]",
-      "body-lg": "text-[length:var(--typo-body-lg-size)] font-[number:var(--typo-body-lg-weight)] leading-[var(--typo-body-lg-leading)] tracking-[var(--typo-body-lg-tracking)]",
-      "body-md": "text-[length:var(--typo-body-md-size)] font-[number:var(--typo-body-md-weight)] leading-[var(--typo-body-md-leading)] tracking-[var(--typo-body-md-tracking)]",
-      "body-sm": "text-[length:var(--typo-body-sm-size)] font-[number:var(--typo-body-sm-weight)] leading-[var(--typo-body-sm-leading)] tracking-[var(--typo-body-sm-tracking)]",
-      "body-xs": "text-[length:var(--typo-body-xs-size)] font-[number:var(--typo-body-xs-weight)] leading-[var(--typo-body-xs-leading)] tracking-[var(--typo-body-xs-tracking)]",
-      "label-lg": "text-[length:var(--typo-label-lg-size)] font-[number:var(--typo-label-lg-weight)] leading-[var(--typo-label-lg-leading)] tracking-[var(--typo-label-lg-tracking)] uppercase",
-      "label-md": "text-[length:var(--typo-label-md-size)] font-[number:var(--typo-label-md-weight)] leading-[var(--typo-label-md-leading)] tracking-[var(--typo-label-md-tracking)] uppercase",
-      "label-sm": "text-[length:var(--typo-label-sm-size)] font-[number:var(--typo-label-sm-weight)] leading-[var(--typo-label-sm-leading)] tracking-[var(--typo-label-sm-tracking)] uppercase",
-      "label-xs": "text-[length:var(--typo-label-xs-size)] font-[number:var(--typo-label-xs-weight)] leading-[var(--typo-label-xs-leading)] tracking-[var(--typo-label-xs-tracking)] uppercase",
-      caption: "text-[length:var(--typo-caption-size)] font-[number:var(--typo-caption-weight)] leading-[var(--typo-caption-leading)] tracking-[var(--typo-caption-tracking)]",
-      overline: "text-[length:var(--typo-overline-size)] font-[number:var(--typo-overline-weight)] leading-[var(--typo-overline-leading)] tracking-[var(--typo-overline-tracking)] uppercase"
-    }
-  },
-  defaultVariants: {
-    variant: "body-md"
-  }
-}), y = {
-  "heading-2xl": "h1",
-  "heading-xl": "h2",
-  "heading-lg": "h3",
-  "heading-md": "h4",
-  "heading-sm": "h5",
-  "heading-xs": "h6",
-  "body-lg": "p",
-  "body-md": "p",
-  "body-sm": "p",
-  "body-xs": "p",
-  "label-lg": "span",
-  "label-md": "span",
-  "label-sm": "span",
-  "label-xs": "span",
-  caption: "span",
-  overline: "span"
-}, s = e.forwardRef(
-  ({ variant: a = "body-md", as: t, className: n, children: i, ...g }, r) => {
-    const l = t || y[a] || "p";
-    return e.createElement(
-      l,
-      { ref: r, className: d(p({ variant: a }), n), ...g },
-      i
-    );
-  }
-);
-s.displayName = "Text";
-export {
-  s as Text,
-  p as textVariants
-};
+import { t as e } from "../_chunks/vendor-utils.js";
+import { cn as t } from "./lib/utils.js";
+import * as n from "react";
+//#region src/ui/text.tsx
+var r = e("font-sans", {
+	variants: { variant: {
+		"heading-2xl": "text-[length:var(--typo-heading-2xl-size)] font-[number:var(--typo-heading-2xl-weight)] leading-[var(--typo-heading-2xl-leading)] tracking-[var(--typo-heading-2xl-tracking)]",
+		"heading-xl": "text-[length:var(--typo-heading-xl-size)] font-[number:var(--typo-heading-xl-weight)] leading-[var(--typo-heading-xl-leading)] tracking-[var(--typo-heading-xl-tracking)]",
+		"heading-lg": "text-[length:var(--typo-heading-lg-size)] font-[number:var(--typo-heading-lg-weight)] leading-[var(--typo-heading-lg-leading)] tracking-[var(--typo-heading-lg-tracking)]",
+		"heading-md": "text-[length:var(--typo-heading-md-size)] font-[number:var(--typo-heading-md-weight)] leading-[var(--typo-heading-md-leading)] tracking-[var(--typo-heading-md-tracking)]",
+		"heading-sm": "text-[length:var(--typo-heading-sm-size)] font-[number:var(--typo-heading-sm-weight)] leading-[var(--typo-heading-sm-leading)] tracking-[var(--typo-heading-sm-tracking)]",
+		"heading-xs": "text-[length:var(--typo-heading-xs-size)] font-[number:var(--typo-heading-xs-weight)] leading-[var(--typo-heading-xs-leading)] tracking-[var(--typo-heading-xs-tracking)]",
+		"body-lg": "text-[length:var(--typo-body-lg-size)] font-[number:var(--typo-body-lg-weight)] leading-[var(--typo-body-lg-leading)] tracking-[var(--typo-body-lg-tracking)]",
+		"body-md": "text-[length:var(--typo-body-md-size)] font-[number:var(--typo-body-md-weight)] leading-[var(--typo-body-md-leading)] tracking-[var(--typo-body-md-tracking)]",
+		"body-sm": "text-[length:var(--typo-body-sm-size)] font-[number:var(--typo-body-sm-weight)] leading-[var(--typo-body-sm-leading)] tracking-[var(--typo-body-sm-tracking)]",
+		"body-xs": "text-[length:var(--typo-body-xs-size)] font-[number:var(--typo-body-xs-weight)] leading-[var(--typo-body-xs-leading)] tracking-[var(--typo-body-xs-tracking)]",
+		"label-lg": "text-[length:var(--typo-label-lg-size)] font-[number:var(--typo-label-lg-weight)] leading-[var(--typo-label-lg-leading)] tracking-[var(--typo-label-lg-tracking)] uppercase",
+		"label-md": "text-[length:var(--typo-label-md-size)] font-[number:var(--typo-label-md-weight)] leading-[var(--typo-label-md-leading)] tracking-[var(--typo-label-md-tracking)] uppercase",
+		"label-sm": "text-[length:var(--typo-label-sm-size)] font-[number:var(--typo-label-sm-weight)] leading-[var(--typo-label-sm-leading)] tracking-[var(--typo-label-sm-tracking)] uppercase",
+		"label-xs": "text-[length:var(--typo-label-xs-size)] font-[number:var(--typo-label-xs-weight)] leading-[var(--typo-label-xs-leading)] tracking-[var(--typo-label-xs-tracking)] uppercase",
+		caption: "text-[length:var(--typo-caption-size)] font-[number:var(--typo-caption-weight)] leading-[var(--typo-caption-leading)] tracking-[var(--typo-caption-tracking)]",
+		overline: "text-[length:var(--typo-overline-size)] font-[number:var(--typo-overline-weight)] leading-[var(--typo-overline-leading)] tracking-[var(--typo-overline-tracking)] uppercase",
+		code: "text-[length:var(--typo-code-size)] font-[number:var(--typo-code-weight)] leading-[var(--typo-code-leading)] tracking-[var(--typo-code-tracking)] font-mono",
+		"label-plain-lg": "text-[length:var(--typo-label-plain-lg-size)] font-[number:var(--typo-label-plain-lg-weight)] leading-[var(--typo-label-plain-lg-leading)] tracking-[var(--typo-label-plain-lg-tracking)]",
+		"label-plain-md": "text-[length:var(--typo-label-plain-md-size)] font-[number:var(--typo-label-plain-md-weight)] leading-[var(--typo-label-plain-md-leading)] tracking-[var(--typo-label-plain-md-tracking)]",
+		"label-plain-sm": "text-[length:var(--typo-label-plain-sm-size)] font-[number:var(--typo-label-plain-sm-weight)] leading-[var(--typo-label-plain-sm-leading)] tracking-[var(--typo-label-plain-sm-tracking)]"
+	} },
+	defaultVariants: { variant: "body-md" }
+}), i = {
+	"heading-2xl": "h1",
+	"heading-xl": "h2",
+	"heading-lg": "h3",
+	"heading-md": "h4",
+	"heading-sm": "h5",
+	"heading-xs": "h6",
+	"body-lg": "p",
+	"body-md": "p",
+	"body-sm": "p",
+	"body-xs": "p",
+	"label-lg": "span",
+	"label-md": "span",
+	"label-sm": "span",
+	"label-xs": "span",
+	caption: "span",
+	overline: "span",
+	code: "code",
+	"label-plain-lg": "span",
+	"label-plain-md": "span",
+	"label-plain-sm": "span"
+}, a = n.forwardRef(({ variant: e = "body-md", as: a, className: o, children: s, ...c }, l) => {
+	let u = a || i[e] || "p";
+	return n.createElement(u, {
+		ref: l,
+		className: t(r({ variant: e }), o),
+		...c
+	}, s);
+});
+a.displayName = "Text";
+//#endregion
+export { a as Text, r as textVariants };

package/dist/ui/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":[],"sources":["../../src/ui/text.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from './lib/utils'\n\nconst textVariants = cva('font-sans', {\n  variants: {\n    variant: {\n      'heading-2xl': 'text-[length:var(--typo-heading-2xl-size)] font-[number:var(--typo-heading-2xl-weight)] leading-[var(--typo-heading-2xl-leading)] tracking-[var(--typo-heading-2xl-tracking)]',\n      'heading-xl':  'text-[length:var(--typo-heading-xl-size)] font-[number:var(--typo-heading-xl-weight)] leading-[var(--typo-heading-xl-leading)] tracking-[var(--typo-heading-xl-tracking)]',\n      'heading-lg':  'text-[length:var(--typo-heading-lg-size)] font-[number:var(--typo-heading-lg-weight)] leading-[var(--typo-heading-lg-leading)] tracking-[var(--typo-heading-lg-tracking)]',\n      'heading-md':  'text-[length:var(--typo-heading-md-size)] font-[number:var(--typo-heading-md-weight)] leading-[var(--typo-heading-md-leading)] tracking-[var(--typo-heading-md-tracking)]',\n      'heading-sm':  'text-[length:var(--typo-heading-sm-size)] font-[number:var(--typo-heading-sm-weight)] leading-[var(--typo-heading-sm-leading)] tracking-[var(--typo-heading-sm-tracking)]',\n      'heading-xs':  'text-[length:var(--typo-heading-xs-size)] font-[number:var(--typo-heading-xs-weight)] leading-[var(--typo-heading-xs-leading)] tracking-[var(--typo-heading-xs-tracking)]',\n      'body-lg':     'text-[length:var(--typo-body-lg-size)] font-[number:var(--typo-body-lg-weight)] leading-[var(--typo-body-lg-leading)] tracking-[var(--typo-body-lg-tracking)]',\n      'body-md':     'text-[length:var(--typo-body-md-size)] font-[number:var(--typo-body-md-weight)] leading-[var(--typo-body-md-leading)] tracking-[var(--typo-body-md-tracking)]',\n      'body-sm':     'text-[length:var(--typo-body-sm-size)] font-[number:var(--typo-body-sm-weight)] leading-[var(--typo-body-sm-leading)] tracking-[var(--typo-body-sm-tracking)]',\n      'body-xs':     'text-[length:var(--typo-body-xs-size)] font-[number:var(--typo-body-xs-weight)] leading-[var(--typo-body-xs-leading)] tracking-[var(--typo-body-xs-tracking)]',\n      'label-lg':    'text-[length:var(--typo-label-lg-size)] font-[number:var(--typo-label-lg-weight)] leading-[var(--typo-label-lg-leading)] tracking-[var(--typo-label-lg-tracking)] uppercase',\n      'label-md':    'text-[length:var(--typo-label-md-size)] font-[number:var(--typo-label-md-weight)] leading-[var(--typo-label-md-leading)] tracking-[var(--typo-label-md-tracking)] uppercase',\n      'label-sm':    'text-[length:var(--typo-label-sm-size)] font-[number:var(--typo-label-sm-weight)] leading-[var(--typo-label-sm-leading)] tracking-[var(--typo-label-sm-tracking)] uppercase',\n      'label-xs':    'text-[length:var(--typo-label-xs-size)] font-[number:var(--typo-label-xs-weight)] leading-[var(--typo-label-xs-leading)] tracking-[var(--typo-label-xs-tracking)] uppercase',\n      caption:       'text-[length:var(--typo-caption-size)] font-[number:var(--typo-caption-weight)] leading-[var(--typo-caption-leading)] tracking-[var(--typo-caption-tracking)]',\n      overline:      'text-[length:var(--typo-overline-size)] font-[number:var(--typo-overline-weight)] leading-[var(--typo-overline-leading)] tracking-[var(--typo-overline-tracking)] uppercase',\n      code:              'text-[length:var(--typo-code-size)] font-[number:var(--typo-code-weight)] leading-[var(--typo-code-leading)] tracking-[var(--typo-code-tracking)] font-mono',\n      'label-plain-lg':  'text-[length:var(--typo-label-plain-lg-size)] font-[number:var(--typo-label-plain-lg-weight)] leading-[var(--typo-label-plain-lg-leading)] tracking-[var(--typo-label-plain-lg-tracking)]',\n      'label-plain-md':  'text-[length:var(--typo-label-plain-md-size)] font-[number:var(--typo-label-plain-md-weight)] leading-[var(--typo-label-plain-md-leading)] tracking-[var(--typo-label-plain-md-tracking)]',\n      'label-plain-sm':  'text-[length:var(--typo-label-plain-sm-size)] font-[number:var(--typo-label-plain-sm-weight)] leading-[var(--typo-label-plain-sm-leading)] tracking-[var(--typo-label-plain-sm-tracking)]',\n    },\n  },\n  defaultVariants: {\n    variant: 'body-md',\n  },\n})\n\ntype TextVariant = NonNullable<VariantProps<typeof textVariants>['variant']>\n\nconst defaultElementMap: Record<TextVariant, keyof React.JSX.IntrinsicElements> = {\n  'heading-2xl': 'h1',\n  'heading-xl':  'h2',\n  'heading-lg':  'h3',\n  'heading-md':  'h4',\n  'heading-sm':  'h5',\n  'heading-xs':  'h6',\n  'body-lg':     'p',\n  'body-md':     'p',\n  'body-sm':     'p',\n  'body-xs':     'p',\n  'label-lg':    'span',\n  'label-md':    'span',\n  'label-sm':    'span',\n  'label-xs':    'span',\n  caption:       'span',\n  overline:      'span',\n  code:              'code',\n  'label-plain-lg':  'span',\n  'label-plain-md':  'span',\n  'label-plain-sm':  'span',\n}\n\n/**\n * Props for Text — a polymorphic typography component covering the full type scale:\n * headings, body, labels, captions, and overlines — with automatic semantic HTML element selection.\n *\n * **Variants (grouped):**\n * - Headings: `heading-2xl` → `h1`, `heading-xl` → `h2`, `heading-lg` → `h3`, etc.\n * - Body: `body-lg` | `body-md` (default) | `body-sm` | `body-xs` → `<p>`\n * - Labels: `label-lg` | `label-md` | `label-sm` | `label-xs` → `<span>` (uppercase)\n * - Misc: `caption` | `overline` → `<span>` (overline is uppercase)\n *\n * **`as` prop:** Override the rendered element. E.g. `<Text variant=\"heading-lg\" as=\"div\">` renders\n * `<div class=\"text-heading-lg ...\">` — useful when you need heading styles on a non-heading element.\n *\n * @example\n * // Page heading:\n * <Text variant=\"heading-2xl\">Welcome to Shilp Sutra</Text>\n *\n * @example\n * // Section label (uppercase, small):\n * <Text variant=\"label-sm\" className=\"text-surface-fg-muted\">Recent activity</Text>\n *\n * @example\n * // Body copy with custom element (renders as <span> for inline use):\n * <Text variant=\"body-sm\" as=\"span\" className=\"text-surface-fg-muted\">\n *   Last updated 3 hours ago\n * </Text>\n *\n * @example\n * // Caption under an image or figure:\n * <Text variant=\"caption\" className=\"text-surface-fg-subtle\">Figure 1: System architecture</Text>\n * // These are just a few ways — feel free to combine props creatively!\n */\ntype TextProps<T extends React.ElementType = 'p'> = {\n  variant?: TextVariant\n  as?: React.ElementType\n  className?: string\n  children?: React.ReactNode\n} & Omit<React.ComponentPropsWithRef<T>, 'as' | 'variant' | 'className' | 'children'>\n\nconst Text = React.forwardRef<HTMLElement, TextProps>(\n  ({ variant = 'body-md', as, className, children, ...props }, ref) => {\n    const Component = as || defaultElementMap[variant] || 'p'\n    return React.createElement(\n      Component,\n      { ref, className: cn(textVariants({ variant }), className), ...props },\n      children,\n    )\n  },\n)\nText.displayName = 'Text'\n\nexport { Text, textVariants, type TextProps, type TextVariant }\n"],"mappings":";;;;AAKA,IAAM,IAAe,EAAI,aAAa;CACpC,UAAU,EACR,SAAS;EACP,eAAe;EACf,cAAe;EACf,cAAe;EACf,cAAe;EACf,cAAe;EACf,cAAe;EACf,WAAe;EACf,WAAe;EACf,WAAe;EACf,WAAe;EACf,YAAe;EACf,YAAe;EACf,YAAe;EACf,YAAe;EACf,SAAe;EACf,UAAe;EACf,MAAmB;EACnB,kBAAmB;EACnB,kBAAmB;EACnB,kBAAmB;EACpB,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CAAC,EAII,IAA4E;CAChF,eAAe;CACf,cAAe;CACf,cAAe;CACf,cAAe;CACf,cAAe;CACf,cAAe;CACf,WAAe;CACf,WAAe;CACf,WAAe;CACf,WAAe;CACf,YAAe;CACf,YAAe;CACf,YAAe;CACf,YAAe;CACf,SAAe;CACf,UAAe;CACf,MAAmB;CACnB,kBAAmB;CACnB,kBAAmB;CACnB,kBAAmB;CACpB,EAyCK,IAAO,EAAM,YAChB,EAAE,aAAU,WAAW,OAAI,cAAW,aAAU,GAAG,KAAS,MAAQ;CACnE,IAAM,IAAY,KAAM,EAAkB,MAAY;AACtD,QAAO,EAAM,cACX,GACA;EAAE;EAAK,WAAW,EAAG,EAAa,EAAE,YAAS,CAAC,EAAE,EAAU;EAAE,GAAG;EAAO,EACtE,EACD;EAEJ;AACD,EAAK,cAAc"}