@sth87/shadcn-design-system 0.1.0 → 0.1.2

package/dist/esm/components/Switch/Switch.js

@@ -7,11 +7,11 @@ import L from "../Glass/Glass.js";
 const V = a.forwardRef(
   (z, E) => {
     const {
-      animation: n,
+      animation: d,
       label: p,
       labelPosition: o = "right",
-      offLabel: r,
-      onLabel: d,
+      offLabel: n,
+      onLabel: r,
       showLabels: N = "none",
       checked: x = !1,
       onCheckedChange: j,
@@ -26,13 +26,13 @@ const V = a.forwardRef(
     }, [x]);
     const g = (s) => {
       y(s), j?.(s);
-    }, t = F(() => n ? n === "glass" ? {
-      className: "!bg-transparent !shadow-none !border-none",
+    }, t = F(() => d ? d === "glass" ? {
+      className: "ds:!bg-transparent ds:!shadow-none ds:!border-none",
       isGlass: !0,
       // Custom flag for glass effect
       variant: "default"
     } : I({
-      animation: n,
+      animation: d,
       children: null,
       className: b,
       rootClassName: S({
@@ -41,7 +41,7 @@ const V = a.forwardRef(
         color: u
       }),
       variantType: i
-    }) : null, [n, b, i, m, u]), h = (s) => {
+    }) : null, [d, b, i, m, u]), h = (s) => {
       const c = /* @__PURE__ */ e(
         G,
         {
@@ -57,12 +57,12 @@ const V = a.forwardRef(
           ...C
         }
       );
-      if (n === "glass" && t?.isGlass) {
+      if (d === "glass" && t?.isGlass) {
         const l = S({
           variant: i,
           size: m,
           color: u
-        })?.match(/((?:!)?rounded-\S+)/g), f = l ? l[l.length - 1] : "rounded-full";
+        })?.match(/((?:!)?rounded-\S+)/g), f = l ? l[l.length - 1] : "ds:rounded-full";
         return /* @__PURE__ */ e(
           L,
           {
@@ -73,43 +73,43 @@ const V = a.forwardRef(
       }
       return t?.children && a.isValidElement(t.children) ? a.cloneElement(t.children, c) : c;
     };
-    if (N === "inside" && (r || d))
+    if (N === "inside" && (n || r))
       return /* @__PURE__ */ w("div", { className: "ds:relative ds:inline-grid ds:h-7 ds:w-fit ds:grid-cols-[1fr_1fr] ds:items-center ds:text-sm ds:font-medium", children: [
         h(
-          "peer data-[state=unchecked]:bg-input/50 absolute inset-0 h-[inherit] w-14 [&_span]:z-10 [&_span]:size-6.5 [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-7 [&_span]:data-[state=checked]:rtl:-translate-x-7"
+          "ds:peer ds:data-[state=unchecked]:bg-input/50 ds:absolute ds:inset-0 ds:h-[inherit] ds:w-14 ds:[&_span]:z-10 ds:[&_span]:size-6.5 ds:[&_span]:transition-transform ds:[&_span]:duration-300 ds:[&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] ds:[&_span]:data-[state=checked]:translate-x-7 ds:[&_span]:data-[state=checked]:rtl:-translate-x-7"
         ),
-        /* @__PURE__ */ e("span", { className: "ds:pointer-events-none ds:relative ds:ml-0.5 ds:flex ds:min-w-8 ds:items-center ds:justify-center ds:text-center ds:transition-transform ds:duration-300 ds:ease-[cubic-bezier(0.16,1,0.3,1)] ds:peer-data-[state=checked]:invisible ds:peer-data-[state=unchecked]:translate-x-6 ds:peer-data-[state=unchecked]:rtl:-translate-x-6", children: r }),
-        /* @__PURE__ */ e("span", { className: "ds:peer-data-[state=checked]:text-background ds:pointer-events-none ds:relative ds:flex ds:min-w-8 ds:items-center ds:justify-center ds:text-center ds:transition-transform ds:duration-300 ds:ease-[cubic-bezier(0.16,1,0.3,1)] ds:peer-data-[state=checked]:-translate-x-full ds:peer-data-[state=unchecked]:invisible ds:peer-data-[state=checked]:rtl:translate-x-full", children: d })
+        /* @__PURE__ */ e("span", { className: "ds:pointer-events-none ds:relative ds:ml-0.5 ds:flex ds:min-w-8 ds:items-center ds:justify-center ds:text-center ds:transition-transform ds:duration-300 ds:ease-[cubic-bezier(0.16,1,0.3,1)] ds:peer-data-[state=checked]:invisible ds:peer-data-[state=unchecked]:translate-x-6 ds:peer-data-[state=unchecked]:rtl:-translate-x-6", children: n }),
+        /* @__PURE__ */ e("span", { className: "ds:peer-data-[state=checked]:text-background ds:pointer-events-none ds:relative ds:flex ds:min-w-8 ds:items-center ds:justify-center ds:text-center ds:transition-transform ds:duration-300 ds:ease-[cubic-bezier(0.16,1,0.3,1)]	ds:peer-data-[state=checked]:-translate-x-full	ds:peer-data-[state=unchecked]:invisible	ds:peer-data-[state=checked]:rtl:translate-x-full", children: r })
       ] });
-    if (N === "outside" && (r || d))
+    if (N === "outside" && (n || r))
       return /* @__PURE__ */ w(
         "div",
         {
           className: "ds:group ds:inline-flex ds:items-center ds:gap-2",
           "data-state": _ ? "checked" : "unchecked",
           children: [
-            r && /* @__PURE__ */ e(
+            n && /* @__PURE__ */ e(
               "span",
               {
                 className: "ds:flex-1 ds:cursor-pointer ds:text-sm ds:font-medium ds:group-data-[state=checked]:text-muted-foreground/70",
                 onClick: () => g(!1),
-                children: r
+                children: n
               }
             ),
             h(),
-            d && /* @__PURE__ */ e(
+            r && /* @__PURE__ */ e(
               "span",
               {
                 className: "ds:flex-1 ds:cursor-pointer ds:text-sm ds:font-medium ds:group-data-[state=unchecked]:text-muted-foreground/70",
                 onClick: () => g(!0),
-                children: d
+                children: r
               }
             )
           ]
         }
       );
     if (p) {
-      const s = o === "top" || o === "bottom", c = s ? "flex-col" : "flex-row", l = s ? "items-start" : "items-center", f = o === "left" || o === "top";
+      const s = o === "top" || o === "bottom", c = s ? "ds:flex-col" : "ds:flex-row", l = s ? "ds:items-start" : "ds:items-center", f = o === "left" || o === "top";
       return /* @__PURE__ */ w("div", { className: v("ds:flex ds:gap-2", c, l), children: [
         f && /* @__PURE__ */ e("label", { htmlFor: k, children: p }),
         h(),

package/dist/esm/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  Switch as SSwitch,\n  switchVariants,\n  type SwitchVariant,\n} from \"@dsui/ui/components/switch\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport type { SwitchAnimation } from \"@/types/variables\";\nimport { animationEffect } from \"@/utils/animations\";\nimport { Glass } from \"../Glass\";\n\nexport type SwitchProps = Omit<\n  React.ComponentPropsWithoutRef<typeof SSwitch>,\n  \"onCheckedChange\" | \"variant\" | \"size\" | \"color\"\n> & {\n  onCheckedChange?: (checked: boolean) => void;\n  variant?: \"default\" | \"square1\" | \"square2\" | \"mini\";\n  size?: \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  animation?: SwitchAnimation;\n  label?: React.ReactNode;\n  labelPosition?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  offLabel?: React.ReactNode;\n  onLabel?: React.ReactNode;\n  showLabels?: \"outside\" | \"inside\" | \"none\";\n};\n\ntype AnimResult = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  variant?: SwitchVariant[\"variant\"];\n  isGlass?: boolean; // Flag for glass effect\n};\n\nconst Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  (props, ref) => {\n    const {\n      animation,\n      label,\n      labelPosition = \"right\",\n      offLabel,\n      onLabel,\n      showLabels = \"none\",\n      checked = false,\n      onCheckedChange,\n      className,\n      variant = \"default\",\n      size = \"normal\",\n      color,\n      ...rest\n    } = props;\n    const id = React.useId();\n\n    const [isChecked, setIsChecked] = React.useState(checked);\n\n    React.useEffect(() => {\n      setIsChecked(checked as boolean);\n    }, [checked]);\n\n    const handleCheckedChange = (newChecked: boolean) => {\n      setIsChecked(newChecked);\n      onCheckedChange?.(newChecked);\n    };\n\n    const switchAnimation = useMemo<AnimResult | null>(() => {\n      if (!animation) return null;\n\n      // Handle glass animation separately for Switch (don't affect other components)\n      if (animation === \"glass\") {\n        return {\n          className: \"!bg-transparent !shadow-none !border-none\",\n          isGlass: true, // Custom flag for glass effect\n          variant: \"default\",\n        };\n      }\n\n      return animationEffect<SwitchAnimation, SwitchVariant[\"variant\"]>({\n        animation,\n        children: null,\n        className,\n        rootClassName: switchVariants({\n          variant: variant,\n          size: size,\n          color: color,\n        }),\n        variantType: variant,\n      });\n    }, [animation, className, variant, size, color]);\n\n    const switchElement = (switchClassName?: string) => {\n      const baseSwitchElement = (\n        <SSwitch\n          ref={ref}\n          id={id}\n          checked={isChecked}\n          onCheckedChange={handleCheckedChange}\n          className={cn(className, switchClassName, switchAnimation?.className)}\n          variant={variant}\n          size={size}\n          color={color}\n          style={{ ...(rest.style || {}), ...(switchAnimation?.style || {}) }}\n          {...rest}\n        />\n      );\n\n      // If animation is glass effect, wrap the switch in Glass component\n      if (animation === \"glass\" && switchAnimation?.isGlass) {\n        const roundedMatches = switchVariants({\n          variant: variant,\n          size: size,\n          color: color,\n        })?.match(/((?:!)?rounded-\\S+)/g);\n        const roundedClass = roundedMatches\n          ? roundedMatches[roundedMatches.length - 1]\n          : \"rounded-full\";\n\n        return (\n          <Glass\n            className={cn(\"ds:hover:scale-110 ds:[&_span]:opacity-80\", roundedClass)}\n          >\n            {baseSwitchElement}\n          </Glass>\n        );\n      }\n\n      // If animation returns children wrapper, use it\n      if (\n        switchAnimation?.children &&\n        React.isValidElement(switchAnimation.children)\n      ) {\n        return React.cloneElement(switchAnimation.children, baseSwitchElement);\n      }\n\n      return baseSwitchElement;\n    };\n\n    // Render with inside labels (icons inside thumb position)\n    if (showLabels === \"inside\" && (offLabel || onLabel)) {\n      return (\n        <div className=\"ds:relative ds:inline-grid ds:h-7 ds:w-fit ds:grid-cols-[1fr_1fr] ds:items-center ds:text-sm ds:font-medium\">\n          {switchElement(\n            \"peer data-[state=unchecked]:bg-input/50 absolute inset-0 h-[inherit] w-14 [&_span]:z-10 [&_span]:size-6.5 [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-7 [&_span]:data-[state=checked]:rtl:-translate-x-7\"\n          )}\n          <span className=\"ds:pointer-events-none ds:relative ds:ml-0.5 ds:flex ds:min-w-8 ds:items-center ds:justify-center ds:text-center ds:transition-transform ds:duration-300 ds:ease-[cubic-bezier(0.16,1,0.3,1)] ds:peer-data-[state=checked]:invisible ds:peer-data-[state=unchecked]:translate-x-6 ds:peer-data-[state=unchecked]:rtl:-translate-x-6\">\n            {offLabel}\n          </span>\n          <span className=\"ds:peer-data-[state=checked]:text-background ds:pointer-events-none ds:relative ds:flex ds:min-w-8 ds:items-center ds:justify-center ds:text-center ds:transition-transform ds:duration-300 ds:ease-[cubic-bezier(0.16,1,0.3,1)] ds:peer-data-[state=checked]:-translate-x-full ds:peer-data-[state=unchecked]:invisible ds:peer-data-[state=checked]:rtl:translate-x-full\">\n            {onLabel}\n          </span>\n        </div>\n      );\n    }\n\n    // Render with outside labels\n    if (showLabels === \"outside\" && (offLabel || onLabel)) {\n      return (\n        <div\n          className=\"ds:group ds:inline-flex ds:items-center ds:gap-2\"\n          data-state={isChecked ? \"checked\" : \"unchecked\"}\n        >\n          {offLabel && (\n            <span\n              className=\"ds:flex-1 ds:cursor-pointer ds:text-sm ds:font-medium ds:group-data-[state=checked]:text-muted-foreground/70\"\n              onClick={() => handleCheckedChange(false)}\n            >\n              {offLabel}\n            </span>\n          )}\n          {switchElement()}\n          {onLabel && (\n            <span\n              className=\"ds:flex-1 ds:cursor-pointer ds:text-sm ds:font-medium ds:group-data-[state=unchecked]:text-muted-foreground/70\"\n              onClick={() => handleCheckedChange(true)}\n            >\n              {onLabel}\n            </span>\n          )}\n        </div>\n      );\n    }\n\n    // Render with label (outside wrap)\n    if (label) {\n      const isVertical = labelPosition === \"top\" || labelPosition === \"bottom\";\n      const flexDirection = isVertical ? \"flex-col\" : \"flex-row\";\n      const alignItems = isVertical ? \"items-start\" : \"items-center\";\n      const labelFirst = labelPosition === \"left\" || labelPosition === \"top\";\n\n      return (\n        <div className={cn(\"ds:flex ds:gap-2\", flexDirection, alignItems)}>\n          {labelFirst && <label htmlFor={id}>{label}</label>}\n          {switchElement()}\n          {!labelFirst && <label htmlFor={id}>{label}</label>}\n        </div>\n      );\n    }\n\n    // Default render\n    return switchElement();\n  }\n);\n\nSwitch.displayName = \"Switch\";\nexport default Switch;\n"],"names":["Switch","React","props","ref","animation","label","labelPosition","offLabel","onLabel","showLabels","checked","onCheckedChange","className","variant","size","color","rest","id","isChecked","setIsChecked","handleCheckedChange","newChecked","switchAnimation","useMemo","animationEffect","switchVariants","switchElement","switchClassName","baseSwitchElement","jsx","SSwitch","cn","roundedMatches","roundedClass","Glass","jsxs","isVertical","flexDirection","alignItems","labelFirst"],"mappings":"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"}
+{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  Switch as SSwitch,\n  switchVariants,\n  type SwitchVariant,\n} from \"@dsui/ui/components/switch\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport type { SwitchAnimation } from \"@/types/variables\";\nimport { animationEffect } from \"@/utils/animations\";\nimport { Glass } from \"../Glass\";\n\nexport type SwitchProps = Omit<\n  React.ComponentPropsWithoutRef<typeof SSwitch>,\n  \"onCheckedChange\" | \"variant\" | \"size\" | \"color\"\n> & {\n  onCheckedChange?: (checked: boolean) => void;\n  variant?: \"default\" | \"square1\" | \"square2\" | \"mini\";\n  size?: \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  animation?: SwitchAnimation;\n  label?: React.ReactNode;\n  labelPosition?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  offLabel?: React.ReactNode;\n  onLabel?: React.ReactNode;\n  showLabels?: \"outside\" | \"inside\" | \"none\";\n};\n\ntype AnimResult = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  variant?: SwitchVariant[\"variant\"];\n  isGlass?: boolean; // Flag for glass effect\n};\n\nconst Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  (props, ref) => {\n    const {\n      animation,\n      label,\n      labelPosition = \"right\",\n      offLabel,\n      onLabel,\n      showLabels = \"none\",\n      checked = false,\n      onCheckedChange,\n      className,\n      variant = \"default\",\n      size = \"normal\",\n      color,\n      ...rest\n    } = props;\n    const id = React.useId();\n\n    const [isChecked, setIsChecked] = React.useState(checked);\n\n    React.useEffect(() => {\n      setIsChecked(checked as boolean);\n    }, [checked]);\n\n    const handleCheckedChange = (newChecked: boolean) => {\n      setIsChecked(newChecked);\n      onCheckedChange?.(newChecked);\n    };\n\n    const switchAnimation = useMemo<AnimResult | null>(() => {\n      if (!animation) return null;\n\n      // Handle glass animation separately for Switch (don't affect other components)\n      if (animation === \"glass\") {\n        return {\n          className: \"ds:!bg-transparent ds:!shadow-none ds:!border-none\",\n          isGlass: true, // Custom flag for glass effect\n          variant: \"default\",\n        };\n      }\n\n      return animationEffect<SwitchAnimation, SwitchVariant[\"variant\"]>({\n        animation,\n        children: null,\n        className,\n        rootClassName: switchVariants({\n          variant: variant,\n          size: size,\n          color: color,\n        }),\n        variantType: variant,\n      });\n    }, [animation, className, variant, size, color]);\n\n    const switchElement = (switchClassName?: string) => {\n      const baseSwitchElement = (\n        <SSwitch\n          ref={ref}\n          id={id}\n          checked={isChecked}\n          onCheckedChange={handleCheckedChange}\n          className={cn(className, switchClassName, switchAnimation?.className)}\n          variant={variant}\n          size={size}\n          color={color}\n          style={{ ...(rest.style || {}), ...(switchAnimation?.style || {}) }}\n          {...rest}\n        />\n      );\n\n      // If animation is glass effect, wrap the switch in Glass component\n      if (animation === \"glass\" && switchAnimation?.isGlass) {\n        const roundedMatches = switchVariants({\n          variant: variant,\n          size: size,\n          color: color,\n        })?.match(/((?:!)?rounded-\\S+)/g);\n        const roundedClass = roundedMatches\n          ? roundedMatches[roundedMatches.length - 1]\n          : \"ds:rounded-full\";\n\n        return (\n          <Glass\n            className={cn(\"ds:hover:scale-110 ds:[&_span]:opacity-80\", roundedClass)}\n          >\n            {baseSwitchElement}\n          </Glass>\n        );\n      }\n\n      // If animation returns children wrapper, use it\n      if (\n        switchAnimation?.children &&\n        React.isValidElement(switchAnimation.children)\n      ) {\n        return React.cloneElement(switchAnimation.children, baseSwitchElement);\n      }\n\n      return baseSwitchElement;\n    };\n\n    // Render with inside labels (icons inside thumb position)\n    if (showLabels === \"inside\" && (offLabel || onLabel)) {\n      return (\n        <div className=\"ds:relative ds:inline-grid ds:h-7 ds:w-fit ds:grid-cols-[1fr_1fr] ds:items-center ds:text-sm ds:font-medium\">\n          {switchElement(\n            \"ds:peer ds:data-[state=unchecked]:bg-input/50 ds:absolute ds:inset-0 ds:h-[inherit] ds:w-14 ds:[&_span]:z-10 ds:[&_span]:size-6.5 ds:[&_span]:transition-transform ds:[&_span]:duration-300 ds:[&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] ds:[&_span]:data-[state=checked]:translate-x-7 ds:[&_span]:data-[state=checked]:rtl:-translate-x-7\"\n          )}\n          <span className=\"ds:pointer-events-none ds:relative ds:ml-0.5 ds:flex ds:min-w-8 ds:items-center ds:justify-center ds:text-center ds:transition-transform ds:duration-300 ds:ease-[cubic-bezier(0.16,1,0.3,1)] ds:peer-data-[state=checked]:invisible ds:peer-data-[state=unchecked]:translate-x-6 ds:peer-data-[state=unchecked]:rtl:-translate-x-6\">\n            {offLabel}\n          </span>\n          <span className=\"ds:peer-data-[state=checked]:text-background ds:pointer-events-none ds:relative ds:flex ds:min-w-8 ds:items-center ds:justify-center ds:text-center ds:transition-transform ds:duration-300 ds:ease-[cubic-bezier(0.16,1,0.3,1)]\tds:peer-data-[state=checked]:-translate-x-full\tds:peer-data-[state=unchecked]:invisible\tds:peer-data-[state=checked]:rtl:translate-x-full\">\n            {onLabel}\n          </span>\n        </div>\n      );\n    }\n\n    // Render with outside labels\n    if (showLabels === \"outside\" && (offLabel || onLabel)) {\n      return (\n        <div\n          className=\"ds:group ds:inline-flex ds:items-center ds:gap-2\"\n          data-state={isChecked ? \"checked\" : \"unchecked\"}\n        >\n          {offLabel && (\n            <span\n              className=\"ds:flex-1 ds:cursor-pointer ds:text-sm ds:font-medium ds:group-data-[state=checked]:text-muted-foreground/70\"\n              onClick={() => handleCheckedChange(false)}\n            >\n              {offLabel}\n            </span>\n          )}\n          {switchElement()}\n          {onLabel && (\n            <span\n              className=\"ds:flex-1 ds:cursor-pointer ds:text-sm ds:font-medium ds:group-data-[state=unchecked]:text-muted-foreground/70\"\n              onClick={() => handleCheckedChange(true)}\n            >\n              {onLabel}\n            </span>\n          )}\n        </div>\n      );\n    }\n\n    // Render with label (outside wrap)\n    if (label) {\n      const isVertical = labelPosition === \"top\" || labelPosition === \"bottom\";\n      const flexDirection = isVertical ? \"ds:flex-col\" : \"ds:flex-row\";\n      const alignItems = isVertical ? \"ds:items-start\" : \"ds:items-center\";\n      const labelFirst = labelPosition === \"left\" || labelPosition === \"top\";\n\n      return (\n        <div className={cn(\"ds:flex ds:gap-2\", flexDirection, alignItems)}>\n          {labelFirst && <label htmlFor={id}>{label}</label>}\n          {switchElement()}\n          {!labelFirst && <label htmlFor={id}>{label}</label>}\n        </div>\n      );\n    }\n\n    // Default render\n    return switchElement();\n  }\n);\n\nSwitch.displayName = \"Switch\";\nexport default Switch;\n"],"names":["Switch","React","props","ref","animation","label","labelPosition","offLabel","onLabel","showLabels","checked","onCheckedChange","className","variant","size","color","rest","id","isChecked","setIsChecked","handleCheckedChange","newChecked","switchAnimation","useMemo","animationEffect","switchVariants","switchElement","switchClassName","baseSwitchElement","jsx","SSwitch","cn","roundedMatches","roundedClass","Glass","jsxs","isVertical","flexDirection","alignItems","labelFirst"],"mappings":"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"}

package/dist/esm/components/Table/data-table-column-header.js

@@ -1,12 +1,12 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { ChevronDown as d, ChevronUp as p, ChevronsUpDown as c, Filter as m, X as f, EyeOff as h } from "lucide-react";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { ChevronDown as a, ChevronUp as p, ChevronsUpDown as c, Filter as m, X as f, EyeOff as h } from "lucide-react";
 import "@radix-ui/react-slot";
 import "../../packages/ui/src/components/button.js";
 import "../../packages/ui/src/components/button-group.js";
 import "../../packages/ui/src/components/input.js";
 import "../../packages/ui/src/components/textarea.js";
 import "@radix-ui/react-label";
-import { cn as i } from "../../packages/ui/src/lib/utils.js";
+import { cn as r } from "../../packages/ui/src/lib/utils.js";
 import "../../packages/ui/src/components/select.js";
 import "../../packages/ui/src/components/combobox.js";
 import "@radix-ui/react-tooltip";
@@ -35,17 +35,17 @@ import "../../packages/ui/src/components/toggle.js";
 import v from "../DropdownMenu/DropdownMenu.js";
 import { DataTableFilterPopover as u } from "./TableFilter/data-table-filter-popover.js";
 import b from "../Button/Button.js";
-function it({
+function rt({
   column: t,
   label: n,
-  className: s
+  className: i
 }) {
   const o = n || (typeof t.columnDef.header == "string" ? t.columnDef.header : null);
   if (!(t.getCanSort() || t.getCanHide() || t.getCanFilter()))
-    return /* @__PURE__ */ e("div", { className: i(s), children: o });
-  const g = /* @__PURE__ */ a("button", { className: "ds:-ml-1.5 ds:flex ds:h-8 ds:items-center ds:gap-1.5 ds:rounded-md ds:px-2 ds:py-1.5 ds:hover:bg-accent ds:focus:outline-none ds:focus:ring-1 ds:focus:ring-ring ds:data-[state=open]:bg-accent ds:[&_svg]:size-4 ds:[&_svg]:shrink-0 ds:[&_svg]:text-muted-foreground", children: [
+    return /* @__PURE__ */ e("div", { className: r(i), children: o });
+  const g = /* @__PURE__ */ d("button", { className: "ds:-ml-1.5 ds:flex ds:h-8 ds:items-center ds:gap-1.5 ds:rounded-md ds:px-2 ds:py-1.5 ds:hover:bg-accent ds:focus:outline-none ds:focus:ring-1 ds:focus:ring-ring ds:data-[state=open]:bg-accent ds:[&_svg]:size-4 ds:[&_svg]:shrink-0 ds:[&_svg]:text-muted-foreground", children: [
     o,
-    t.getCanSort() && (t.getIsSorted() === "desc" ? /* @__PURE__ */ e(d, {}) : t.getIsSorted() === "asc" ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(c, {}))
+    t.getCanSort() && (t.getIsSorted() === "desc" ? /* @__PURE__ */ e(a, {}) : t.getIsSorted() === "asc" ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(c, {}))
   ] }), l = t.getCanFilter() && t.columnDef.meta?.variant ? /* @__PURE__ */ e(
     u,
     {
@@ -54,7 +54,7 @@ function it({
         b,
         {
           variant: "ghost",
-          className: i(
+          className: r(
             "ds:hover:bg-accent ds:rounded ds:p-1",
             t.getFilterValue() ? "ds:text-primary" : ""
           ),
@@ -62,44 +62,44 @@ function it({
         }
       )
     }
-  ) : null, r = [];
-  return t.getCanSort() && (r.push({
+  ) : null, s = [];
+  return t.getCanSort() && (s.push({
     key: "asc",
     type: "checkbox",
     label: "Asc",
     icon: /* @__PURE__ */ e(p, {}),
     checked: t.getIsSorted() === "asc",
     onClick: () => t.toggleSorting(!1),
-    className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
-  }), r.push({
+    className: "ds:relative ds:pr-8 ds:pl-2 ds:[&>span:first-child]:right-2 ds:[&>span:first-child]:left-auto ds:[&_svg]:text-muted-foreground"
+  }), s.push({
     key: "desc",
     type: "checkbox",
     label: "Desc",
-    icon: /* @__PURE__ */ e(d, {}),
+    icon: /* @__PURE__ */ e(a, {}),
     checked: t.getIsSorted() === "desc",
     onClick: () => t.toggleSorting(!0),
-    className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
-  }), t.getIsSorted() && r.push({
+    className: "ds:relative ds:pr-8 ds:pl-2 ds:[&>span:first-child]:right-2 ds:[&>span:first-child]:left-auto ds:[&_svg]:text-muted-foreground"
+  }), t.getIsSorted() && s.push({
     key: "reset",
     type: "item",
     label: "Reset",
     icon: /* @__PURE__ */ e(f, {}),
     onClick: () => t.clearSorting(),
-    className: "pl-2 [&_svg]:text-muted-foreground"
-  })), t.getCanHide() && r.push({
+    className: "ds:pl-2 ds:[&_svg]:text-muted-foreground"
+  })), t.getCanHide() && s.push({
     key: "hide",
     type: "checkbox",
     label: "Hide",
     icon: /* @__PURE__ */ e(h, {}),
     checked: !t.getIsVisible(),
     onClick: () => t.toggleVisibility(!1),
-    className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
-  }), /* @__PURE__ */ a("div", { className: i("ds:flex ds:items-center ds:gap-1.5", s), children: [
+    className: "ds:relative ds:pr-8 ds:pl-2 ds:[&>span:first-child]:right-2 ds:[&>span:first-child]:left-auto ds:[&_svg]:text-muted-foreground"
+  }), /* @__PURE__ */ d("div", { className: r("ds:flex ds:items-center ds:gap-1.5", i), children: [
     /* @__PURE__ */ e(
       v,
       {
         trigger: g,
-        items: r,
+        items: s,
         align: "start",
         contentClassName: "ds:w-28"
       }
@@ -108,6 +108,6 @@ function it({
   ] });
 }
 export {
-  it as DataTableColumnHeader
+  rt as DataTableColumnHeader
 };
 //# sourceMappingURL=data-table-column-header.js.map

package/dist/esm/components/Table/data-table-column-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-column-header.js","sources":["../../../../src/components/Table/data-table-column-header.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport {\n  ChevronDown,\n  ChevronsUpDown,\n  ChevronUp,\n  EyeOff,\n  Filter,\n  X,\n} from \"lucide-react\";\n\nimport { cn } from \"@dsui/ui\";\nimport DropdownMenu, {\n  type DropdownMenuItem,\n} from \"../DropdownMenu/DropdownMenu\";\nimport { DataTableFilterPopover } from \"./TableFilter/data-table-filter-popover\";\nimport { Button } from \"../Button\";\n\ninterface DataTableColumnHeaderProps<TData, TValue> {\n  column: Column<TData, TValue>;\n  label?: string;\n  className?: string;\n}\n\nexport function DataTableColumnHeader<TData, TValue>({\n  column,\n  label,\n  className,\n}: DataTableColumnHeaderProps<TData, TValue>) {\n  const displayLabel =\n    label ||\n    (typeof column.columnDef.header === \"string\"\n      ? column.columnDef.header\n      : null);\n\n  const hasActions =\n    column.getCanSort() || column.getCanHide() || column.getCanFilter();\n\n  if (!hasActions) {\n    return <div className={cn(className)}>{displayLabel}</div>;\n  }\n\n  const sortTrigger = (\n    <button className=\"ds:-ml-1.5 ds:flex ds:h-8 ds:items-center ds:gap-1.5 ds:rounded-md ds:px-2 ds:py-1.5 ds:hover:bg-accent ds:focus:outline-none ds:focus:ring-1 ds:focus:ring-ring ds:data-[state=open]:bg-accent ds:[&_svg]:size-4 ds:[&_svg]:shrink-0 ds:[&_svg]:text-muted-foreground\">\n      {displayLabel}\n      {column.getCanSort() &&\n        (column.getIsSorted() === \"desc\" ? (\n          <ChevronDown />\n        ) : column.getIsSorted() === \"asc\" ? (\n          <ChevronUp />\n        ) : (\n          <ChevronsUpDown />\n        ))}\n    </button>\n  );\n\n  const filterButton =\n    column.getCanFilter() && column.columnDef.meta?.variant ? (\n      <DataTableFilterPopover\n        column={column}\n        trigger={\n          <Button\n            variant=\"ghost\"\n            className={cn(\n              \"ds:hover:bg-accent ds:rounded ds:p-1\",\n              column.getFilterValue() ? \"ds:text-primary\" : \"\"\n            )}\n          >\n            <Filter className=\"ds:size-4\" />\n          </Button>\n        }\n      />\n    ) : null;\n\n  const items: DropdownMenuItem[] = [];\n\n  if (column.getCanSort()) {\n    items.push({\n      key: \"asc\",\n      type: \"checkbox\",\n      label: \"Asc\",\n      icon: <ChevronUp />,\n      checked: column.getIsSorted() === \"asc\",\n      onClick: () => column.toggleSorting(false),\n      className:\n        \"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\",\n    });\n    items.push({\n      key: \"desc\",\n      type: \"checkbox\",\n      label: \"Desc\",\n      icon: <ChevronDown />,\n      checked: column.getIsSorted() === \"desc\",\n      onClick: () => column.toggleSorting(true),\n      className:\n        \"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\",\n    });\n    if (column.getIsSorted()) {\n      items.push({\n        key: \"reset\",\n        type: \"item\",\n        label: \"Reset\",\n        icon: <X />,\n        onClick: () => column.clearSorting(),\n        className: \"pl-2 [&_svg]:text-muted-foreground\",\n      });\n    }\n  }\n\n  if (column.getCanHide()) {\n    items.push({\n      key: \"hide\",\n      type: \"checkbox\",\n      label: \"Hide\",\n      icon: <EyeOff />,\n      checked: !column.getIsVisible(),\n      onClick: () => column.toggleVisibility(false),\n      className:\n        \"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\",\n    });\n  }\n\n  return (\n    <div className={cn(\"ds:flex ds:items-center ds:gap-1.5\", className)}>\n      <DropdownMenu\n        trigger={sortTrigger}\n        items={items}\n        align=\"start\"\n        contentClassName=\"ds:w-28\"\n      />\n      {filterButton}\n    </div>\n  );\n}\n"],"names":["DataTableColumnHeader","column","label","className","displayLabel","cn","sortTrigger","jsxs","jsx","ChevronDown","ChevronUp","ChevronsUpDown","filterButton","DataTableFilterPopover","Button","Filter","items","X","EyeOff","DropdownMenu"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,SAASA,GAAqC;AAAA,EACnD,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AACF,GAA8C;AAC5C,QAAMC,IACJF,MACC,OAAOD,EAAO,UAAU,UAAW,WAChCA,EAAO,UAAU,SACjB;AAKN,MAAI,EAFFA,EAAO,WAAA,KAAgBA,EAAO,WAAA,KAAgBA,EAAO,aAAA;AAGrD,6BAAQ,OAAA,EAAI,WAAWI,EAAGF,CAAS,GAAI,UAAAC,GAAa;AAGtD,QAAME,IACJ,gBAAAC,EAAC,UAAA,EAAO,WAAU,0QACf,UAAA;AAAA,IAAAH;AAAA,IACAH,EAAO,WAAA,MACLA,EAAO,YAAA,MAAkB,SACxB,gBAAAO,EAACC,GAAA,EAAY,IACXR,EAAO,kBAAkB,0BAC1BS,GAAA,CAAA,CAAU,sBAEVC,GAAA,EAAe;AAAA,EAAA,GAEtB,GAGIC,IACJX,EAAO,aAAA,KAAkBA,EAAO,UAAU,MAAM,UAC9C,gBAAAO;AAAA,IAACK;AAAA,IAAA;AAAA,MACC,QAAAZ;AAAA,MACA,SACE,gBAAAO;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAWT;AAAA,YACT;AAAA,YACAJ,EAAO,eAAA,IAAmB,oBAAoB;AAAA,UAAA;AAAA,UAGhD,UAAA,gBAAAO,EAACO,GAAA,EAAO,WAAU,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAChC;AAAA,EAAA,IAGF,MAEAC,IAA4B,CAAA;AAElC,SAAIf,EAAO,iBACTe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAON,GAAA,EAAU;AAAA,IACjB,SAAST,EAAO,YAAA,MAAkB;AAAA,IAClC,SAAS,MAAMA,EAAO,cAAc,EAAK;AAAA,IACzC,WACE;AAAA,EAAA,CACH,GACDe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAOP,GAAA,EAAY;AAAA,IACnB,SAASR,EAAO,YAAA,MAAkB;AAAA,IAClC,SAAS,MAAMA,EAAO,cAAc,EAAI;AAAA,IACxC,WACE;AAAA,EAAA,CACH,GACGA,EAAO,iBACTe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAOC,GAAA,EAAE;AAAA,IACT,SAAS,MAAMhB,EAAO,aAAA;AAAA,IACtB,WAAW;AAAA,EAAA,CACZ,IAIDA,EAAO,gBACTe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAOE,GAAA,EAAO;AAAA,IACd,SAAS,CAACjB,EAAO,aAAA;AAAA,IACjB,SAAS,MAAMA,EAAO,iBAAiB,EAAK;AAAA,IAC5C,WACE;AAAA,EAAA,CACH,qBAIA,OAAA,EAAI,WAAWI,EAAG,sCAAsCF,CAAS,GAChE,UAAA;AAAA,IAAA,gBAAAK;AAAA,MAACW;AAAA,MAAA;AAAA,QACC,SAASb;AAAA,QACT,OAAAU;AAAA,QACA,OAAM;AAAA,QACN,kBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,IAElBJ;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"data-table-column-header.js","sources":["../../../../src/components/Table/data-table-column-header.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport {\n  ChevronDown,\n  ChevronsUpDown,\n  ChevronUp,\n  EyeOff,\n  Filter,\n  X,\n} from \"lucide-react\";\n\nimport { cn } from \"@dsui/ui\";\nimport DropdownMenu, {\n  type DropdownMenuItem,\n} from \"../DropdownMenu/DropdownMenu\";\nimport { DataTableFilterPopover } from \"./TableFilter/data-table-filter-popover\";\nimport { Button } from \"../Button\";\n\ninterface DataTableColumnHeaderProps<TData, TValue> {\n  column: Column<TData, TValue>;\n  label?: string;\n  className?: string;\n}\n\nexport function DataTableColumnHeader<TData, TValue>({\n  column,\n  label,\n  className,\n}: DataTableColumnHeaderProps<TData, TValue>) {\n  const displayLabel =\n    label ||\n    (typeof column.columnDef.header === \"string\"\n      ? column.columnDef.header\n      : null);\n\n  const hasActions =\n    column.getCanSort() || column.getCanHide() || column.getCanFilter();\n\n  if (!hasActions) {\n    return <div className={cn(className)}>{displayLabel}</div>;\n  }\n\n  const sortTrigger = (\n    <button className=\"ds:-ml-1.5 ds:flex ds:h-8 ds:items-center ds:gap-1.5 ds:rounded-md ds:px-2 ds:py-1.5 ds:hover:bg-accent ds:focus:outline-none ds:focus:ring-1 ds:focus:ring-ring ds:data-[state=open]:bg-accent ds:[&_svg]:size-4 ds:[&_svg]:shrink-0 ds:[&_svg]:text-muted-foreground\">\n      {displayLabel}\n      {column.getCanSort() &&\n        (column.getIsSorted() === \"desc\" ? (\n          <ChevronDown />\n        ) : column.getIsSorted() === \"asc\" ? (\n          <ChevronUp />\n        ) : (\n          <ChevronsUpDown />\n        ))}\n    </button>\n  );\n\n  const filterButton =\n    column.getCanFilter() && column.columnDef.meta?.variant ? (\n      <DataTableFilterPopover\n        column={column}\n        trigger={\n          <Button\n            variant=\"ghost\"\n            className={cn(\n              \"ds:hover:bg-accent ds:rounded ds:p-1\",\n              column.getFilterValue() ? \"ds:text-primary\" : \"\"\n            )}\n          >\n            <Filter className=\"ds:size-4\" />\n          </Button>\n        }\n      />\n    ) : null;\n\n  const items: DropdownMenuItem[] = [];\n\n  if (column.getCanSort()) {\n    items.push({\n      key: \"asc\",\n      type: \"checkbox\",\n      label: \"Asc\",\n      icon: <ChevronUp />,\n      checked: column.getIsSorted() === \"asc\",\n      onClick: () => column.toggleSorting(false),\n      className:\n        \"ds:relative ds:pr-8 ds:pl-2 ds:[&>span:first-child]:right-2 ds:[&>span:first-child]:left-auto ds:[&_svg]:text-muted-foreground\",\n    });\n    items.push({\n      key: \"desc\",\n      type: \"checkbox\",\n      label: \"Desc\",\n      icon: <ChevronDown />,\n      checked: column.getIsSorted() === \"desc\",\n      onClick: () => column.toggleSorting(true),\n      className:\n        \"ds:relative ds:pr-8 ds:pl-2 ds:[&>span:first-child]:right-2 ds:[&>span:first-child]:left-auto ds:[&_svg]:text-muted-foreground\",\n    });\n    if (column.getIsSorted()) {\n      items.push({\n        key: \"reset\",\n        type: \"item\",\n        label: \"Reset\",\n        icon: <X />,\n        onClick: () => column.clearSorting(),\n        className: \"ds:pl-2 ds:[&_svg]:text-muted-foreground\",\n      });\n    }\n  }\n\n  if (column.getCanHide()) {\n    items.push({\n      key: \"hide\",\n      type: \"checkbox\",\n      label: \"Hide\",\n      icon: <EyeOff />,\n      checked: !column.getIsVisible(),\n      onClick: () => column.toggleVisibility(false),\n      className:\n        \"ds:relative ds:pr-8 ds:pl-2 ds:[&>span:first-child]:right-2 ds:[&>span:first-child]:left-auto ds:[&_svg]:text-muted-foreground\",\n    });\n  }\n\n  return (\n    <div className={cn(\"ds:flex ds:items-center ds:gap-1.5\", className)}>\n      <DropdownMenu\n        trigger={sortTrigger}\n        items={items}\n        align=\"start\"\n        contentClassName=\"ds:w-28\"\n      />\n      {filterButton}\n    </div>\n  );\n}\n"],"names":["DataTableColumnHeader","column","label","className","displayLabel","cn","sortTrigger","jsxs","jsx","ChevronDown","ChevronUp","ChevronsUpDown","filterButton","DataTableFilterPopover","Button","Filter","items","X","EyeOff","DropdownMenu"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,SAASA,GAAqC;AAAA,EACnD,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AACF,GAA8C;AAC5C,QAAMC,IACJF,MACC,OAAOD,EAAO,UAAU,UAAW,WAChCA,EAAO,UAAU,SACjB;AAKN,MAAI,EAFFA,EAAO,WAAA,KAAgBA,EAAO,WAAA,KAAgBA,EAAO,aAAA;AAGrD,6BAAQ,OAAA,EAAI,WAAWI,EAAGF,CAAS,GAAI,UAAAC,GAAa;AAGtD,QAAME,IACJ,gBAAAC,EAAC,UAAA,EAAO,WAAU,0QACf,UAAA;AAAA,IAAAH;AAAA,IACAH,EAAO,WAAA,MACLA,EAAO,YAAA,MAAkB,SACxB,gBAAAO,EAACC,GAAA,EAAY,IACXR,EAAO,kBAAkB,0BAC1BS,GAAA,CAAA,CAAU,sBAEVC,GAAA,EAAe;AAAA,EAAA,GAEtB,GAGIC,IACJX,EAAO,aAAA,KAAkBA,EAAO,UAAU,MAAM,UAC9C,gBAAAO;AAAA,IAACK;AAAA,IAAA;AAAA,MACC,QAAAZ;AAAA,MACA,SACE,gBAAAO;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAWT;AAAA,YACT;AAAA,YACAJ,EAAO,eAAA,IAAmB,oBAAoB;AAAA,UAAA;AAAA,UAGhD,UAAA,gBAAAO,EAACO,GAAA,EAAO,WAAU,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAChC;AAAA,EAAA,IAGF,MAEAC,IAA4B,CAAA;AAElC,SAAIf,EAAO,iBACTe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAON,GAAA,EAAU;AAAA,IACjB,SAAST,EAAO,YAAA,MAAkB;AAAA,IAClC,SAAS,MAAMA,EAAO,cAAc,EAAK;AAAA,IACzC,WACE;AAAA,EAAA,CACH,GACDe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAOP,GAAA,EAAY;AAAA,IACnB,SAASR,EAAO,YAAA,MAAkB;AAAA,IAClC,SAAS,MAAMA,EAAO,cAAc,EAAI;AAAA,IACxC,WACE;AAAA,EAAA,CACH,GACGA,EAAO,iBACTe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAOC,GAAA,EAAE;AAAA,IACT,SAAS,MAAMhB,EAAO,aAAA;AAAA,IACtB,WAAW;AAAA,EAAA,CACZ,IAIDA,EAAO,gBACTe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAOE,GAAA,EAAO;AAAA,IACd,SAAS,CAACjB,EAAO,aAAA;AAAA,IACjB,SAAS,MAAMA,EAAO,iBAAiB,EAAK;AAAA,IAC5C,WACE;AAAA,EAAA,CACH,qBAIA,OAAA,EAAI,WAAWI,EAAG,sCAAsCF,CAAS,GAChE,UAAA;AAAA,IAAA,gBAAAK;AAAA,MAACW;AAAA,MAAA;AAAA,QACC,SAASb;AAAA,QACT,OAAAU;AAAA,QACA,OAAM;AAAA,QACN,kBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,IAElBJ;AAAA,EAAA,GACH;AAEJ;"}