@oneplatformdev/ui 0.1.99-beta.3 → 0.1.99-beta.30

package/ButtonIcon/ButtonIcon.stories.js

@@ -1,35 +1,12 @@
-import { jsx as o, jsxs as r } from "react/jsx-runtime";
-import { ButtonIcon as d } from "./ButtonIcon.js";
-import { PlusIcon as u } from "lucide-react";
-const m = (e) => /* @__PURE__ */ o(d, { ...e });
-m.args = {
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { ButtonIcon as t } from "./ButtonIcon.js";
+import { FileDownIcon as c, Trash2Icon as l, PlusIcon as a, MessageCircleMoreIcon as y } from "lucide-react";
+import { DashedWrapper as s } from "../.storybook/Wrappers.js";
+const h = (e) => /* @__PURE__ */ o(t, { ...e });
+h.args = {
   onClick: { action: (e) => e }
 };
-const p = (e) => /* @__PURE__ */ o(
-  "div",
-  {
-    style: {
-      padding: "0px 20px",
-      display: "flex",
-      gap: "32px",
-      alignItems: "flex-start"
-    },
-    children: /* @__PURE__ */ o(
-      "div",
-      {
-        style: {
-          position: "relative",
-          border: "2px dashed rgba(139, 92, 246, 0.7)",
-          borderRadius: "24px",
-          padding: "24px 32px",
-          display: "flex",
-          gap: "32px"
-        },
-        children: e.children
-      }
-    )
-  }
-), t = (e) => /* @__PURE__ */ o(
+const r = (e) => /* @__PURE__ */ o(
   "div",
   {
     style: {
@@ -38,68 +15,87 @@ const p = (e) => /* @__PURE__ */ o(
       flexDirection: "column",
       gap: "16px"
     },
-    children: ["default", "hover", "focus", "active", "disabled"].map((a) => /* @__PURE__ */ o(
-      d,
+    children: ["default", "hover", "focus", "active", "disabled"].map((n) => /* @__PURE__ */ o(
+      t,
       {
-        id: a,
+        id: n,
         ...e,
-        disabled: a === "disabled" || e.disabled,
+        disabled: n === "disabled" || e.disabled,
         children: e.children
       },
-      a
+      n
     ))
   }
-), c = (e) => /* @__PURE__ */ r("div", { className: "flex", children: [
-  /* @__PURE__ */ r(p, { children: [
-    /* @__PURE__ */ o(t, { ...e, variant: "contained" }),
-    /* @__PURE__ */ o(t, { ...e, variant: "outlined" }),
-    /* @__PURE__ */ o(t, { ...e, variant: "ghost" })
+), u = (e) => /* @__PURE__ */ i("div", { className: "flex", children: [
+  /* @__PURE__ */ i(s, { children: [
+    /* @__PURE__ */ o(r, { ...e, variant: "contained" }),
+    /* @__PURE__ */ o(r, { ...e, variant: "outlined" }),
+    /* @__PURE__ */ o(r, { ...e, variant: "ghost" })
   ] }),
-  /* @__PURE__ */ r(p, { children: [
-    /* @__PURE__ */ o(t, { ...e, variant: "contained", rounded: !0 }),
-    /* @__PURE__ */ o(t, { ...e, variant: "outlined", rounded: !0 }),
-    /* @__PURE__ */ o(t, { ...e, variant: "ghost", rounded: !0 })
+  /* @__PURE__ */ i(s, { children: [
+    /* @__PURE__ */ o(r, { ...e, variant: "contained", rounded: !0 }),
+    /* @__PURE__ */ o(r, { ...e, variant: "outlined", rounded: !0 }),
+    /* @__PURE__ */ o(r, { ...e, variant: "ghost", rounded: !0 })
   ] })
-] }), i = ["contained", "outlined", "ghost"], l = ["primary", "secondary", "error"], s = ["xs", "sm", "md", "lg"], b = {
+] }), p = ["contained", "outlined", "ghost"], f = ["primary", "secondary", "error"], d = ["xs", "sm", "md", "lg"], B = "contained", b = "primary", x = "lg", g = {
+  undefined: void 0,
+  "<PlusIcon />": /* @__PURE__ */ o(a, {}),
+  "<Trash2Icon />": /* @__PURE__ */ o(l, {}),
+  "<FileDownIcon />": /* @__PURE__ */ o(c, {}),
+  PlusIcon: a,
+  Trash2Icon: l,
+  FileDownIcon: c
+}, v = {
+  "<PlusIcon />": /* @__PURE__ */ o(a, {}),
+  "<Trash2Icon />": /* @__PURE__ */ o(l, {}),
+  "<FileDownIcon />": /* @__PURE__ */ o(c, {})
+}, I = {
   title: "ButtonIcon",
-  component: d,
-  render: m,
+  component: t,
+  render: h,
   args: {
     asChild: !1,
     disabled: !1,
     loading: !1,
     rounded: !1,
-    children: /* @__PURE__ */ o(u, {}),
-    variant: i[0],
-    color: l[0],
-    size: s[0],
-    message: ""
+    variant: B,
+    color: b,
+    size: x,
+    children: /* @__PURE__ */ o(a, {}),
+    icon: void 0,
+    message: void 0,
+    title: void 0
   },
   argTypes: {
+    tooltip: {
+      name: "tooltip",
+      description: "ButtonIcon tooltip from ButtonIconProps [deprecated, use title and message instead]",
+      control: !1
+    },
     asChild: {
       name: "asChild",
-      description: "ButtonIcon asChild",
+      description: "ButtonIcon asChild from ButtonIconProps [boolean]",
       control: !1
     },
     variant: {
       name: "variant",
       description: "ButtonIcon variant",
-      defaultValue: i[0],
-      options: i,
+      defaultValue: p[0],
+      options: p,
       control: { type: "inline-radio" }
     },
     color: {
       name: "color",
       description: "ButtonIcon color",
-      defaultValue: l[0],
-      options: l,
+      defaultValue: f[0],
+      options: f,
       control: { type: "inline-radio" }
     },
     size: {
       name: "size",
       description: "ButtonIcon size",
-      defaultValue: s[0],
-      options: s,
+      defaultValue: d[0],
+      options: d,
       control: { type: "inline-radio" }
     },
     title: {
@@ -126,6 +122,25 @@ const p = (e) => /* @__PURE__ */ o(
       name: "loading",
       description: "ButtonIcon loading",
       control: { type: "boolean" }
+    },
+    icon: {
+      name: "icon",
+      description: "ButtonIcon icon from ButtonIconProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]",
+      options: Object.keys(g),
+      mapping: g,
+      control: { type: "inline-radio" }
+    },
+    children: {
+      name: "children",
+      description: "ButtonIcon children from ButtonIconProps [`ReactNode`]",
+      options: Object.keys(v),
+      mapping: v,
+      control: { type: "inline-radio" }
+    },
+    counter: {
+      name: "counter",
+      description: "ButtonIcon counter from ButtonIconProps [`number` | `ButtonCounterBadgeReaderOptions`]",
+      control: { type: "number" }
     }
   },
   parameters: {
@@ -136,15 +151,42 @@ const p = (e) => /* @__PURE__ */ o(
       disabled: "#disabled"
     }
   }
-}, n = {
+}, m = {
   asChild: !1,
   disabled: !1,
   loading: !1,
   rounded: !1,
-  children: /* @__PURE__ */ o(u, {})
-}, B = { args: n }, f = {
+  children: /* @__PURE__ */ o(a, {})
+}, M = {
+  args: {
+    ...I.args,
+    icon: c,
+    children: void 0
+  }
+}, j = {
+  render: (e) => /* @__PURE__ */ o("div", { className: "flex flex-col gap-3", children: d.map((n) => /* @__PURE__ */ i(s, { children: [
+    /* @__PURE__ */ o(t, { ...e, size: n, message: "from counter" }),
+    /* @__PURE__ */ o(t, { ...e, size: n, counter: 0, message: "count=0" }),
+    /* @__PURE__ */ o(t, { ...e, size: n, counter: 9, message: "count=9" }),
+    /* @__PURE__ */ o(t, { ...e, size: n, counter: 99, message: "count=99" }),
+    /* @__PURE__ */ o(t, { ...e, size: n, counter: 999, message: "count=999" })
+  ] }, n)) }),
+  args: {
+    ...I.args,
+    variant: "ghost",
+    color: "secondary",
+    icon: y,
+    counter: 12,
+    title: "counter"
+  },
+  parameters: {
+    controls: {
+      include: ["counter", "variant", "color", "disabled", "loading", "rounded"]
+    }
+  }
+}, P = {
   args: {
-    ...n,
+    ...m,
     color: "primary",
     size: "lg"
   },
@@ -152,14 +194,14 @@ const p = (e) => /* @__PURE__ */ o(
     variant: { control: !1 },
     color: { control: !1 }
   },
-  render: c
+  render: u
 };
-f.parameters = {
+P.parameters = {
   controls: { exclude: ["variant", "color"] }
 };
-const g = {
+const C = {
   args: {
-    ...n,
+    ...m,
     color: "secondary",
     size: "lg"
   },
@@ -167,14 +209,14 @@ const g = {
     variant: { control: !1 },
     color: { control: !1 }
   },
-  render: c
+  render: u
 };
-g.parameters = {
+C.parameters = {
   controls: { exclude: ["variant", "color"] }
 };
-const v = {
+const T = {
   args: {
-    ...n,
+    ...m,
     color: "error",
     size: "lg"
   },
@@ -182,16 +224,17 @@ const v = {
     variant: { control: !1 },
     color: { control: !1 }
   },
-  render: c
+  render: u
 };
-v.parameters = {
+T.parameters = {
   controls: { exclude: ["variant", "color"] }
 };
 export {
-  B as Default,
-  v as Error,
-  f as Primary,
-  g as Secondary,
-  b as default
+  j as Counter,
+  M as Default,
+  T as Error,
+  P as Primary,
+  C as Secondary,
+  I as default
 };
 //# sourceMappingURL=ButtonIcon.stories.js.map

package/ButtonIcon/ButtonIcon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.stories.js","sources":["../../src/ButtonIcon/ButtonIcon.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { ButtonIcon } from './ButtonIcon';\nimport type { ButtonIconProps } from './ButtonIcon.types';\nimport React, { PropsWithChildren } from 'react';\nimport { PlusIcon } from 'lucide-react'\n\nconst Template = (props: ButtonIconProps) => <ButtonIcon {...props}/>\nTemplate.args = {\n  onClick: { action: (e: React.MouseEvent<HTMLButtonElement>) => e },\n};\n\nconst DashedWrapper = (props: PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        padding: '0px 20px',\n        display: 'flex',\n        gap: '32px',\n        alignItems: 'flex-start',\n      }}\n    >\n      <div\n        style={{\n          position: 'relative',\n          border: '2px dashed rgba(139, 92, 246, 0.7)',\n          borderRadius: '24px',\n          padding: '24px 32px',\n          display: 'flex',\n          gap: '32px',\n        }}\n      >\n        {props.children}\n      </div>\n    </div>\n  )\n}\n\nconst States = (props: ButtonIconProps) => (\n  <div\n    style={{\n      position: 'relative',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '16px',\n    }}\n  >\n    {[ 'default', 'hover', 'focus', 'active', 'disabled' ]\n      .map((state) => (\n        <ButtonIcon\n          key={state}\n          id={state}\n          {...props}\n          disabled={state === 'disabled' || props.disabled}\n        >\n          {props.children}\n        </ButtonIcon>\n      ))}\n  </div>\n);\n\nconst StateRender = (props: ButtonIconProps) => (\n  <div className='flex'>\n    <DashedWrapper>\n      <States {...props} variant='contained'/>\n      <States {...props} variant='outlined'/>\n      <States {...props} variant='ghost'/>\n    </DashedWrapper>\n    <DashedWrapper>\n      <States {...props} variant='contained' rounded/>\n      <States {...props} variant='outlined' rounded/>\n      <States {...props} variant='ghost' rounded/>\n    </DashedWrapper>\n  </div>\n);\n\nconst variants: ButtonIconProps['variant'][] = [ 'contained', 'outlined', 'ghost' ]\nconst colors: ButtonIconProps['color'][] = [ 'primary', 'secondary', 'error' ]\nconst sizes: ButtonIconProps['size'][] = [ 'xs', 'sm', 'md', 'lg' ]\n\nconst meta = {\n  title: 'ButtonIcon',\n  component: ButtonIcon,\n  render: Template,\n  args: {\n    asChild: false,\n    disabled: false,\n    loading: false,\n    rounded: false,\n    children: <PlusIcon/>,\n    variant: variants[0],\n    color: colors[0],\n    size: sizes[0],\n    message: '',\n  },\n  argTypes: {\n    asChild: {\n      name: 'asChild',\n      description: 'ButtonIcon asChild',\n      control: false\n    },\n    variant: {\n      name: 'variant',\n      description: 'ButtonIcon variant',\n      defaultValue: variants[0],\n      options: variants,\n      control: { type: 'inline-radio', },\n    },\n    color: {\n      name: 'color',\n      description: 'ButtonIcon color',\n      defaultValue: colors[0],\n      options: colors,\n      control: { type: 'inline-radio' },\n    },\n    size: {\n      name: 'size',\n      description: 'ButtonIcon size',\n      defaultValue: sizes[0],\n      options: sizes,\n      control: { type: 'inline-radio' },\n    },\n    title: {\n      name: 'title',\n      description: \"ButtonIcon tooltip title from HTMLAttributes<HTMLButtonElement> [string only]\",\n      control: { type: 'text' },\n    },\n    message: {\n      name: 'message',\n      description: 'ButtonIcon tooltip message from ButtonProps [ReactNode]',\n      control: { type: \"object\" },\n    },\n    disabled: {\n      name: 'disabled',\n      description: 'ButtonIcon disabled',\n      control: { type: 'boolean' }\n    },\n    rounded: {\n      name: 'rounded',\n      description: 'ButtonIcon rounded',\n      control: { type: 'boolean' }\n    },\n    loading: {\n      name: 'loading',\n      description: 'ButtonIcon loading',\n      control: { type: 'boolean' }\n    },\n  },\n  parameters: {\n    pseudo: {\n      hover: '#hover',\n      focus: '#focus',\n      active: '#active',\n      disabled: '#disabled',\n    },\n  }\n} satisfies Meta<typeof ButtonIcon>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\nconst args: Story['args'] = {\n  asChild: false,\n  disabled: false,\n  loading: false,\n  rounded: false,\n  children: <PlusIcon/>,\n}\n\nexport const Default: Story = { args };\n\nexport const Primary: Story = {\n  args: {\n    ...args,\n    color: 'primary',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nPrimary.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n\nexport const Secondary: Story = {\n  args: {\n    ...args,\n    color: 'secondary',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nSecondary.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n\nexport const Error: Story = {\n  args: {\n    ...args,\n    color: 'error',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nError.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n"],"names":["Template","props","jsx","ButtonIcon","DashedWrapper","States","state","StateRender","jsxs","variants","colors","sizes","meta","PlusIcon","args","Default","Primary","Secondary","Error"],"mappings":"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"}
+{"version":3,"file":"ButtonIcon.stories.js","sources":["../../src/ButtonIcon/ButtonIcon.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { ButtonIcon } from './ButtonIcon';\nimport type { ButtonIconProps } from './ButtonIcon.types';\nimport React from 'react';\nimport { FileDownIcon, PlusIcon, Trash2Icon, MessageCircleMoreIcon } from 'lucide-react'\nimport { DashedWrapper } from \"../../.storybook/Wrappers\";\nimport { ButtonProps } from \"../Button\";\n\nconst Template = (props: ButtonIconProps) => <ButtonIcon {...props}/>\nTemplate.args = {\n  onClick: { action: (e: React.MouseEvent<HTMLButtonElement>) => e },\n};\n\nconst States = (props: ButtonIconProps) => (\n  <div\n    style={{\n      position: 'relative',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '16px',\n    }}\n  >\n    {[ 'default', 'hover', 'focus', 'active', 'disabled' ]\n      .map((state) => (\n        <ButtonIcon\n          key={state}\n          id={state}\n          {...props}\n          disabled={state === 'disabled' || props.disabled}\n        >\n          {props.children}\n        </ButtonIcon>\n      ))}\n  </div>\n);\n\nconst StateRender = (props: ButtonIconProps) => (\n  <div className='flex'>\n    <DashedWrapper>\n      <States {...props} variant='contained'/>\n      <States {...props} variant='outlined'/>\n      <States {...props} variant='ghost'/>\n    </DashedWrapper>\n    <DashedWrapper>\n      <States {...props} variant='contained' rounded/>\n      <States {...props} variant='outlined' rounded/>\n      <States {...props} variant='ghost' rounded/>\n    </DashedWrapper>\n  </div>\n);\n\nconst variants: ButtonIconProps['variant'][] = [ 'contained', 'outlined', 'ghost' ]\nconst colors: ButtonIconProps['color'][] = [ 'primary', 'secondary', 'error' ]\nconst sizes: ButtonIconProps['size'][] = [ 'xs', 'sm', 'md', 'lg' ]\n\nconst variant_default: ButtonProps['variant'] = 'contained';\nconst color_default: ButtonProps['color'] = 'primary';\nconst size_default: ButtonProps['size'] = 'lg';\n\nconst iconMap = {\n  'undefined': undefined,\n  \"<PlusIcon />\": <PlusIcon/>,\n  \"<Trash2Icon />\": <Trash2Icon/>,\n  \"<FileDownIcon />\": <FileDownIcon/>,\n  PlusIcon: PlusIcon,\n  Trash2Icon: Trash2Icon,\n  FileDownIcon: FileDownIcon,\n};\n\nconst iconChildrenMap = {\n  \"<PlusIcon />\": <PlusIcon/>,\n  \"<Trash2Icon />\": <Trash2Icon/>,\n  \"<FileDownIcon />\": <FileDownIcon/>,\n};\n\nconst meta = {\n  title: 'ButtonIcon',\n  component: ButtonIcon,\n  render: Template,\n  args: {\n    asChild: false,\n    disabled: false,\n    loading: false,\n    rounded: false,\n    variant: variant_default,\n    color: color_default,\n    size: size_default,\n    children: <PlusIcon/>,\n    icon: undefined,\n    message: undefined,\n    title: undefined,\n  },\n  argTypes: {\n    tooltip: {\n      name: 'tooltip',\n      description: 'ButtonIcon tooltip from ButtonIconProps [deprecated, use title and message instead]',\n      control: false,\n    },\n    asChild: {\n      name: 'asChild',\n      description: 'ButtonIcon asChild from ButtonIconProps [boolean]',\n      control: false\n    },\n    variant: {\n      name: 'variant',\n      description: 'ButtonIcon variant',\n      defaultValue: variants[0],\n      options: variants,\n      control: { type: 'inline-radio', },\n    },\n    color: {\n      name: 'color',\n      description: 'ButtonIcon color',\n      defaultValue: colors[0],\n      options: colors,\n      control: { type: 'inline-radio' },\n    },\n    size: {\n      name: 'size',\n      description: 'ButtonIcon size',\n      defaultValue: sizes[0],\n      options: sizes,\n      control: { type: 'inline-radio' },\n    },\n    title: {\n      name: 'title',\n      description: \"ButtonIcon tooltip title from HTMLAttributes<HTMLButtonElement> [string only]\",\n      control: { type: 'text' },\n    },\n    message: {\n      name: 'message',\n      description: 'ButtonIcon tooltip message from ButtonProps [ReactNode]',\n      control: { type: \"object\" },\n    },\n    disabled: {\n      name: 'disabled',\n      description: 'ButtonIcon disabled',\n      control: { type: 'boolean' }\n    },\n    rounded: {\n      name: 'rounded',\n      description: 'ButtonIcon rounded',\n      control: { type: 'boolean' }\n    },\n    loading: {\n      name: 'loading',\n      description: 'ButtonIcon loading',\n      control: { type: 'boolean' }\n    },\n    icon: {\n      name: 'icon',\n      description: 'ButtonIcon icon from ButtonIconProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\n      options: Object.keys(iconMap),\n      mapping: iconMap,\n      control: { type: 'inline-radio' },\n    },\n    children: {\n      name: 'children',\n      description: 'ButtonIcon children from ButtonIconProps [`ReactNode`]',\n      options: Object.keys(iconChildrenMap),\n      mapping: iconChildrenMap,\n      control: { type: 'inline-radio' },\n    },\n    counter: {\n      name: 'counter',\n      description: 'ButtonIcon counter from ButtonIconProps [`number` | `ButtonCounterBadgeReaderOptions`]',\n      control: { type: 'number' },\n    }\n  },\n  parameters: {\n    pseudo: {\n      hover: '#hover',\n      focus: '#focus',\n      active: '#active',\n      disabled: '#disabled',\n    },\n  }\n} satisfies Meta<typeof ButtonIcon>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\nconst args: Story['args'] = {\n  asChild: false,\n  disabled: false,\n  loading: false,\n  rounded: false,\n  children: <PlusIcon/>,\n}\n\nexport const Default: Story = {\n  args: {\n    ...meta.args,\n    icon: FileDownIcon,\n    children: undefined,\n  }\n};\n\nexport const Counter: Story = {\n  render: (props) => (\n    <div className='flex flex-col gap-3'>\n      {sizes.map((size) => (\n        <DashedWrapper key={size}>\n          <ButtonIcon {...props} size={size} message='from counter'/>\n          <ButtonIcon {...props} size={size} counter={0} message='count=0'/>\n          <ButtonIcon {...props} size={size} counter={9} message='count=9'/>\n          <ButtonIcon {...props} size={size} counter={99} message='count=99'/>\n          <ButtonIcon {...props} size={size} counter={999} message='count=999'/>\n        </DashedWrapper>\n      ))}\n    </div>\n  ),\n  args: {\n    ...meta.args,\n    variant: 'ghost',\n    color: 'secondary',\n    icon: MessageCircleMoreIcon,\n    counter: 12,\n    title: 'counter',\n  },\n  parameters: {\n    controls: {\n      include: ['counter', 'variant', 'color', 'disabled', 'loading', 'rounded' ],\n    },\n  },\n};\n\nexport const Primary: Story = {\n  args: {\n    ...args,\n    color: 'primary',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nPrimary.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n\nexport const Secondary: Story = {\n  args: {\n    ...args,\n    color: 'secondary',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nSecondary.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n\nexport const Error: Story = {\n  args: {\n    ...args,\n    color: 'error',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nError.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n"],"names":["Template","props","jsx","ButtonIcon","States","state","StateRender","jsxs","DashedWrapper","variants","colors","sizes","variant_default","color_default","size_default","iconMap","PlusIcon","Trash2Icon","FileDownIcon","iconChildrenMap","meta","args","Default","Counter","size","MessageCircleMoreIcon","Primary","Secondary","Error"],"mappings":"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"}

package/ButtonIcon/ButtonIcon.types.d.ts

@@ -1,7 +1,8 @@
 import { ButtonIconVarianceProps } from './buttonIconVariants';
-import { ButtonBaseProps } from '../Button';
+import { ButtonBaseProps, ButtonIconType } from '../Button';
 export interface ButtonIconSlotProps {
 }
 export interface ButtonIconProps extends ButtonBaseProps<ButtonIconVarianceProps, ButtonIconSlotProps> {
+    icon?: ButtonIconType;
 }
 //# sourceMappingURL=ButtonIcon.types.d.ts.map

package/ButtonIcon/ButtonIcon.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.types.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EACL,KAAK,eAAe,EACrB,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,mBAAmB;CAAG;AAEvC,MAAM,WAAW,eACf,SAAQ,eAAe,CAAC,uBAAuB,EAAE,mBAAmB,CAAC;CACtE"}
+{"version":3,"file":"ButtonIcon.types.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,mBAAmB;CAAG;AAEvC,MAAM,WAAW,eACf,SAAQ,eAAe,CAAC,uBAAuB,EAAE,mBAAmB,CAAC;IACrE,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB"}

package/ButtonIcon/buttonIconVariants.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const buttonIconVariants: (props?: ({
     variant?: "none" | "contained" | "outlined" | "ghost" | null | undefined;
-    color?: "secondary" | "primary" | "error" | null | undefined;
+    color?: "primary" | "secondary" | "error" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
     rounded?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/ButtonIcon/buttonIconVariants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonIconVariants.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,kBAAkB;;;;;8EAsJ9B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"buttonIconVariants.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,kBAAkB;;;;;8EAuJ9B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/ButtonIcon/buttonIconVariants.js

@@ -2,12 +2,13 @@ import { cva as r } from "class-variance-authority";
 import { cn as e } from "@oneplatformdev/utils";
 const a = r(
   [
-    "inline-flex items-center justify-center",
+    "inline-flex items-center justify-center relative",
     "whitespace-nowrap font-medium aspect-square",
     "cursor-pointer box-border",
     "transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent",
     "disabled:pointer-events-none disabled:cursor-default",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "transition-transform duration-200 [&_svg]:transition-transform [&_svg]:duration-200"
   ],
   {
     variants: {
@@ -23,10 +24,10 @@ const a = r(
         error: ""
       },
       size: {
-        xs: "w-4 h-4 size-4 rounded-lg p-0 [&_svg]:size-3",
-        sm: "w-6 h-6 size-6 rounded-lg p-0 [&_svg]:size-4",
+        xs: "w-4 h-4 size-4 rounded-sm p-0 [&_svg]:size-3",
+        sm: "w-6 h-6 size-6 rounded-md p-0 [&_svg]:size-4",
         md: "w-8 h-8 size-8 rounded-lg p-1 [&_svg]:size-5",
-        lg: "w-10 h-10 size-10 rounded-lg p-2 [&_svg]:size-6"
+        lg: "w-10 h-10 size-10 rounded-lg p-1 [&_svg]:size-6"
       },
       rounded: {
         true: "rounded-full",
@@ -138,7 +139,7 @@ const a = r(
         variant: "ghost",
         rounded: !0,
         className: e(
-          "shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]",
+          "bg-[#FCFCFC] shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]",
           "disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]"
         )
       }

package/ButtonIcon/buttonIconVariants.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonIconVariants.js","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonIconVariants = cva(\n  [\n    \"inline-flex items-center justify-center\",\n    'whitespace-nowrap font-medium aspect-square',\n    'cursor-pointer box-border',\n    \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\n    \"disabled:pointer-events-none disabled:cursor-default\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      variant: {\n        none: '',\n        contained: '',\n        outlined: '',\n        ghost: \"\",\n      },\n      color: {\n        primary: \"\",\n        secondary: \"\",\n        error: \"\"\n      },\n      size: {\n        xs: 'w-4 h-4 size-4 rounded-lg p-0 [&_svg]:size-3',\n        sm: 'w-6 h-6 size-6 rounded-lg p-0 [&_svg]:size-4',\n        md: 'w-8 h-8 size-8 rounded-lg p-1 [&_svg]:size-5',\n        lg: 'w-10 h-10 size-10 rounded-lg p-2 [&_svg]:size-6',\n      },\n      rounded: {\n        true: \"rounded-full\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      // PRIMARY BUTTON VARIANTS\n      {\n        color: 'primary',\n        variant: 'contained',\n        className: cn(\n          'bg-[#9368FF] border border-[#9368FF] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n          'hover:bg-[#7F4EEB]',\n          'focus:bg-[#7F4EEB] focus:border-[#6B3DD9]',\n          'active:bg-[#6B3DD9]',\n          'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'primary',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#9368FF] text-[#9368FF] [&_svg]:text-[#9368FF]',\n          'hover:bg-[#9368FF0F]',\n          'active:bg-[#9368FF0F] active:border-[#6B3DD9]',\n          'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'primary',\n        variant: 'ghost',\n        className: cn(\n          'bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]',\n          'hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]',\n          'focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]',\n          'active:bg-[#9368FF0F]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      // SECONDARY BUTTON VARIANTS\n      {\n        color: 'secondary',\n        variant: 'contained',\n        className: cn(\n          'bg-[#FCFCFC] border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n          'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n          'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n          'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n          'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'secondary',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n          'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n          'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n          'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n          'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'secondary',\n        variant: 'ghost',\n        className: cn(\n          'text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent',\n          'hover:bg-[#F9FAFB]',\n          'focus:bg-[#FCFCFC]',\n          'active:bg-[#F9FAFB]',\n          'disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      // ERROR BUTTON VARIANTS\n      {\n        color: 'error',\n        variant: 'contained',\n        className: cn(\n          'bg-[#EF4444] border border-[#EF4444] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n          'hover:bg-[#DC2626]',\n          'focus:bg-[#DC2626]',\n          'active:bg-[#DC2626]',\n          'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'error',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#EF4444] text-[#EF4444] [&_svg]:text-[#EF4444]',\n          'hover:bg-[#EF44440F]',\n          'active:bg-[#DC26260F] active:border-[#DC2626]',\n          'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'error',\n        variant: 'ghost',\n        className: cn(\n          'bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]',\n          'hover:bg-[#EF44440F] hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]',\n          'active:bg-[#DC26260F] active:border-[#DC2626]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      // ROUNDED BUTTON VARIANTS\n      {\n        variant: 'ghost',\n        rounded: true,\n        className: cn(\n        'shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n    ],\n    defaultVariants: {\n      color: \"primary\",\n      variant: \"contained\",\n      size: \"lg\",\n      rounded: false,\n    },\n  }\n)\n\nexport type ButtonIconVarianceProps = VariantProps<typeof buttonIconVariants>;\n"],"names":["buttonIconVariants","cva","cn"],"mappings":";;AAGO,MAAMA,IAAqBC;AAAA,EAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MAAA;AAAA,MAET,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAWA;AAAA,UACX;AAAA,UACE;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}
+{"version":3,"file":"buttonIconVariants.js","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonIconVariants = cva(\n  [\n    \"inline-flex items-center justify-center relative\",\n    'whitespace-nowrap font-medium aspect-square',\n    'cursor-pointer box-border',\n    \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\n    \"disabled:pointer-events-none disabled:cursor-default\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    'transition-transform duration-200 [&_svg]:transition-transform [&_svg]:duration-200',\n  ],\n  {\n    variants: {\n      variant: {\n        none: '',\n        contained: '',\n        outlined: '',\n        ghost: \"\",\n      },\n      color: {\n        primary: \"\",\n        secondary: \"\",\n        error: \"\"\n      },\n      size: {\n        xs: 'w-4 h-4 size-4 rounded-sm p-0 [&_svg]:size-3',\n        sm: 'w-6 h-6 size-6 rounded-md p-0 [&_svg]:size-4',\n        md: 'w-8 h-8 size-8 rounded-lg p-1 [&_svg]:size-5',\n        lg: 'w-10 h-10 size-10 rounded-lg p-1 [&_svg]:size-6',\n      },\n      rounded: {\n        true: \"rounded-full\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      // PRIMARY BUTTON VARIANTS\n      {\n        color: 'primary',\n        variant: 'contained',\n        className: cn(\n          'bg-[#9368FF] border border-[#9368FF] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n          'hover:bg-[#7F4EEB]',\n          'focus:bg-[#7F4EEB] focus:border-[#6B3DD9]',\n          'active:bg-[#6B3DD9]',\n          'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'primary',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#9368FF] text-[#9368FF] [&_svg]:text-[#9368FF]',\n          'hover:bg-[#9368FF0F]',\n          'active:bg-[#9368FF0F] active:border-[#6B3DD9]',\n          'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'primary',\n        variant: 'ghost',\n        className: cn(\n          'bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]',\n          'hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]',\n          'focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]',\n          'active:bg-[#9368FF0F]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      // SECONDARY BUTTON VARIANTS\n      {\n        color: 'secondary',\n        variant: 'contained',\n        className: cn(\n          'bg-[#FCFCFC] border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n          'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n          'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n          'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n          'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'secondary',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n          'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n          'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n          'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n          'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'secondary',\n        variant: 'ghost',\n        className: cn(\n          'text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent',\n          'hover:bg-[#F9FAFB]',\n          'focus:bg-[#FCFCFC]',\n          'active:bg-[#F9FAFB]',\n          'disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      // ERROR BUTTON VARIANTS\n      {\n        color: 'error',\n        variant: 'contained',\n        className: cn(\n          'bg-[#EF4444] border border-[#EF4444] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n          'hover:bg-[#DC2626]',\n          'focus:bg-[#DC2626]',\n          'active:bg-[#DC2626]',\n          'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'error',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#EF4444] text-[#EF4444] [&_svg]:text-[#EF4444]',\n          'hover:bg-[#EF44440F]',\n          'active:bg-[#DC26260F] active:border-[#DC2626]',\n          'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'error',\n        variant: 'ghost',\n        className: cn(\n          'bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]',\n          'hover:bg-[#EF44440F] hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]',\n          'active:bg-[#DC26260F] active:border-[#DC2626]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      // ROUNDED BUTTON VARIANTS\n      {\n        variant: 'ghost',\n        rounded: true,\n        className: cn(\n        'bg-[#FCFCFC] shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      }\n    ],\n    defaultVariants: {\n      color: \"primary\",\n      variant: \"contained\",\n      size: \"lg\",\n      rounded: false,\n    },\n  }\n)\n\nexport type ButtonIconVarianceProps = VariantProps<typeof buttonIconVariants>;\n"],"names":["buttonIconVariants","cva","cn"],"mappings":";;AAGO,MAAMA,IAAqBC;AAAA,EAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MAAA;AAAA,MAET,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAWA;AAAA,UACX;AAAA,UACE;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}