@shipfox/react-ui 0.7.0 → 0.9.0

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const buttonVariants = cva(\n  'rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-background-button-inverted-default text-foreground-contrast-primary shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        secondary:\n          'bg-background-button-neutral-default text-foreground-neutral-base shadow-button-neutral hover:bg-background-button-neutral-hover active:bg-background-button-neutral-pressed disabled:bg-background-neutral-disabled focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        danger:\n          'bg-background-button-danger-default text-foreground-neutral-on-color shadow-button-danger hover:bg-background-button-danger-hover active:bg-background-button-danger-pressed focus-visible:shadow-button-danger-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        success:\n          'bg-background-button-success-default text-foreground-neutral-on-color shadow-button-success hover:bg-background-button-success-hover active:bg-background-button-success-pressed focus-visible:shadow-button-success-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        transparent:\n          'bg-background-button-transparent-default text-foreground-neutral-base hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n        transparentMuted:\n          'bg-background-button-transparent-default text-foreground-neutral-muted hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        '2xs': 'h-20 px-6 text-xs gap-4',\n        xs: 'h-24 px-6 text-xs gap-4',\n        sm: 'h-28 px-8 text-sm gap-6',\n        md: 'h-32 px-10 text-md gap-8',\n        lg: 'h-36 px-12 text-lg gap-8',\n        xl: 'h-40 px-12 text-xl gap-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nexport function Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  children,\n  iconLeft,\n  iconRight,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    iconLeft?: IconName;\n    iconRight?: IconName;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp data-slot=\"button\" className={cn(buttonVariants({variant, size, className}))} {...props}>\n      {iconLeft && <Icon name={iconLeft} />}\n      {children}\n      {iconRight && <Icon name={iconRight} />}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","buttonVariants","variants","variant","primary","secondary","danger","success","transparent","transparentMuted","size","xs","sm","md","lg","xl","defaultVariants","Button","className","asChild","children","iconLeft","iconRight","props","Comp","data-slot","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,iBAAiBH,IAC5B,4IACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,WACE;YACFC,QACE;YACFC,SACE;YACFC,aACE;YACFC,kBACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;IACF;IACAC,iBAAiB;QACfb,SAAS;QACTO,MAAM;IACR;AACF,GACA;AAEF,OAAO,SAASO,OAAO,EACrBC,SAAS,EACTf,OAAO,EACPO,IAAI,EACJS,UAAU,KAAK,EACfC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACT,GAAGC,OAMF;IACD,MAAMC,OAAOL,UAAUtB,OAAO;IAE9B,qBACE,MAAC2B;QAAKC,aAAU;QAASP,WAAWlB,GAAGC,eAAe;YAACE;YAASO;YAAMQ;QAAS;QAAM,GAAGK,KAAK;;YAC1FF,0BAAY,KAACtB;gBAAK2B,MAAML;;YACxBD;YACAE,2BAAa,KAACvB;gBAAK2B,MAAMJ;;;;AAGhC"}
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const buttonVariants = cva(\n  'rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none shrink-0 outline-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-background-button-inverted-default text-foreground-contrast-primary shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        secondary:\n          'bg-background-button-neutral-default text-foreground-neutral-base shadow-button-neutral hover:bg-background-button-neutral-hover active:bg-background-button-neutral-pressed disabled:bg-background-neutral-disabled focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        danger:\n          'bg-background-button-danger-default text-foreground-neutral-on-color shadow-button-danger hover:bg-background-button-danger-hover active:bg-background-button-danger-pressed focus-visible:shadow-button-danger-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        success:\n          'bg-background-button-success-default text-foreground-neutral-on-color shadow-button-success hover:bg-background-button-success-hover active:bg-background-button-success-pressed focus-visible:shadow-button-success-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        transparent:\n          'bg-background-button-transparent-default text-foreground-neutral-base hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n        transparentMuted:\n          'bg-background-button-transparent-default text-foreground-neutral-muted hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        '2xs': 'h-20 px-6 text-xs gap-4',\n        xs: 'h-24 px-6 text-xs gap-4',\n        sm: 'h-28 px-8 text-sm gap-6',\n        md: 'h-32 px-10 text-md gap-8',\n        lg: 'h-36 px-12 text-lg gap-8',\n        xl: 'h-40 px-12 text-xl gap-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nconst spinnerSizeMap: Record<NonNullable<VariantProps<typeof buttonVariants>['size']>, string> = {\n  '2xs': 'size-10',\n  xs: 'size-10',\n  sm: 'size-12',\n  md: 'size-14',\n  lg: 'size-16',\n  xl: 'size-18',\n};\n\nexport function Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  children,\n  iconLeft,\n  iconRight,\n  isLoading = false,\n  disabled,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    iconLeft?: IconName;\n    iconRight?: IconName;\n    isLoading?: boolean;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n  const spinnerSize =\n    spinnerSizeMap[(size ?? 'md') as NonNullable<VariantProps<typeof buttonVariants>['size']>];\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({variant, size, className}))}\n      disabled={disabled || isLoading}\n      aria-busy={isLoading}\n      aria-live={isLoading ? 'polite' : undefined}\n      {...(asChild ? {'aria-disabled': disabled || isLoading} : {})}\n      {...props}\n    >\n      {isLoading ? (\n        <Icon name=\"spinner\" className={spinnerSize} />\n      ) : (\n        iconLeft && <Icon name={iconLeft} />\n      )}\n      {children}\n      {iconRight && <Icon name={iconRight} />}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","buttonVariants","variants","variant","primary","secondary","danger","success","transparent","transparentMuted","size","xs","sm","md","lg","xl","defaultVariants","spinnerSizeMap","Button","className","asChild","children","iconLeft","iconRight","isLoading","disabled","props","Comp","spinnerSize","data-slot","aria-busy","aria-live","undefined","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,iBAAiBH,IAC5B,2JACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,WACE;YACFC,QACE;YACFC,SACE;YACFC,aACE;YACFC,kBACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;IACF;IACAC,iBAAiB;QACfb,SAAS;QACTO,MAAM;IACR;AACF,GACA;AAEF,MAAMO,iBAA2F;IAC/F,OAAO;IACPN,IAAI;IACJC,IAAI;IACJC,IAAI;IACJC,IAAI;IACJC,IAAI;AACN;AAEA,OAAO,SAASG,OAAO,EACrBC,SAAS,EACThB,OAAO,EACPO,IAAI,EACJU,UAAU,KAAK,EACfC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,YAAY,KAAK,EACjBC,QAAQ,EACR,GAAGC,OAOF;IACD,MAAMC,OAAOP,UAAUvB,OAAO;IAC9B,MAAM+B,cACJX,cAAc,CAAEP,QAAQ,KAAkE;IAE5F,qBACE,MAACiB;QACCE,aAAU;QACVV,WAAWnB,GAAGC,eAAe;YAACE;YAASO;YAAMS;QAAS;QACtDM,UAAUA,YAAYD;QACtBM,aAAWN;QACXO,aAAWP,YAAY,WAAWQ;QACjC,GAAIZ,UAAU;YAAC,iBAAiBK,YAAYD;QAAS,IAAI,CAAC,CAAC;QAC3D,GAAGE,KAAK;;YAERF,0BACC,KAACzB;gBAAKkC,MAAK;gBAAUd,WAAWS;iBAEhCN,0BAAY,KAACvB;gBAAKkC,MAAMX;;YAEzBD;YACAE,2BAAa,KAACxB;gBAAKkC,MAAMV;;;;AAGhC"}

package/dist/components/button/button.stories.js

@@ -34,6 +34,9 @@ const meta = {
         },
         asChild: {
             control: 'boolean'
+        },
+        isLoading: {
+            control: 'boolean'
         }
     },
     args: {
@@ -158,5 +161,27 @@ export const Icons = {
             ]
         })
 };
+export const Loading = {
+    render: (args)=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16",
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        ...args,
+                        isLoading: true,
+                        children: "Loading..."
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        ...args,
+                        isLoading: true,
+                        iconLeft: "google",
+                        children: "Loading with left icon"
+                    })
+                })
+            ]
+        })
+};
 
 //# sourceMappingURL=button.stories.js.map

package/dist/components/button/button.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {Button} from './button';\n\nconst variantOptions = [\n  'primary',\n  'secondary',\n  'danger',\n  'success',\n  'transparent',\n  'transparentMuted',\n] as const;\nconst sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nconst meta = {\n  title: 'Components/Button',\n  component: Button,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: variantOptions,\n    },\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    asChild: {control: 'boolean'},\n  },\n  args: {\n    children: 'Click me',\n    variant: 'primary',\n    size: 'md',\n  },\n} satisfies Meta<typeof Button>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Variants: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {sizeOptions.map((size) => (\n        <table key={size} className=\"w-fit border-separate border-spacing-x-32 border-spacing-y-16\">\n          <thead>\n            <tr>\n              <th>{size}</th>\n              <th>Default</th>\n              <th>Hover</th>\n              <th>Focus</th>\n              <th>Disabled</th>\n            </tr>\n          </thead>\n          <tbody>\n            {variantOptions.map((variant) => (\n              <tr key={variant}>\n                <td>\n                  <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                    {variant}\n                  </Code>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"hover\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"focus\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} disabled size={size}>\n                    Click me\n                  </Button>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      ))}\n    </div>\n  ),\n};\n\nVariants.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Icons: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div>\n        <Button {...args} iconLeft=\"google\">\n          Click me\n        </Button>\n      </div>\n      <div>\n        <Button {...args} iconRight=\"microsoft\">\n          Click me\n        </Button>\n      </div>\n      <div>\n        <Button {...args} iconLeft=\"google\" iconRight=\"microsoft\">\n          Click me\n        </Button>\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Button","variantOptions","sizeOptions","meta","title","component","tags","argTypes","variant","control","options","size","asChild","args","children","Default","Variants","render","div","className","map","table","thead","tr","th","tbody","td","disabled","parameters","pseudo","hover","focusVisible","Icons","iconLeft","iconRight"],"mappings":";AACA,SAAQA,IAAI,QAAO,wBAAwB;AAC3C,SAAQC,MAAM,QAAO,WAAW;AAEhC,MAAMC,iBAAiB;IACrB;IACA;IACA;IACA;IACA;IACA;CACD;AACD,MAAMC,cAAc;IAAC;IAAO;IAAM;IAAM;IAAM;IAAM;CAAK;AAEzD,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWL;IACXM,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,SAAST;QACX;QACAU,MAAM;YACJF,SAAS;YACTC,SAASR;QACX;QACAU,SAAS;YAACH,SAAS;QAAS;IAC9B;IACAI,MAAM;QACJC,UAAU;QACVN,SAAS;QACTG,MAAM;IACR;AACF;AAEA,eAAeR,KAAK;AAGpB,OAAO,MAAMY,UAAiB,CAAC,EAAE;AAEjC,OAAO,MAAMC,WAAkB;IAC7BC,QAAQ,CAACJ,qBACP,KAACK;YAAIC,WAAU;sBACZjB,YAAYkB,GAAG,CAAC,CAACT,qBAChB,MAACU;oBAAiBF,WAAU;;sCAC1B,KAACG;sCACC,cAAA,MAACC;;kDACC,KAACC;kDAAIb;;kDACL,KAACa;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;;;;sCAGR,KAACC;sCACExB,eAAemB,GAAG,CAAC,CAACZ,wBACnB,MAACe;;sDACC,KAACG;sDACC,cAAA,KAAC3B;gDAAKS,SAAQ;gDAAQW,WAAU;0DAC7BX;;;sDAGL,KAACkB;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASG,MAAMA;0DAAM;;;sDAIlD,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASW,WAAU;gDAAQR,MAAMA;0DAAM;;;sDAIpE,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASW,WAAU;gDAAQR,MAAMA;0DAAM;;;sDAIpE,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASmB,QAAQ;gDAAChB,MAAMA;0DAAM;;;;mCAtBpDH;;;mBAZHG;;AA6CpB,EAAE;AAEFK,SAASY,UAAU,GAAG;IACpBC,QAAQ;QACNC,OAAO;QACPC,cAAc;IAChB;AACF;AAEA,OAAO,MAAMC,QAAe;IAC1Bf,QAAQ,CAACJ,qBACP,MAACK;YAAIC,WAAU;;8BACb,KAACD;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEoB,UAAS;kCAAS;;;8BAItC,KAACf;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEqB,WAAU;kCAAY;;;8BAI1C,KAAChB;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEoB,UAAS;wBAASC,WAAU;kCAAY;;;;;AAMlE,EAAE"}
+{"version":3,"sources":["../../../src/components/button/button.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {Button} from './button';\n\nconst variantOptions = [\n  'primary',\n  'secondary',\n  'danger',\n  'success',\n  'transparent',\n  'transparentMuted',\n] as const;\nconst sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nconst meta = {\n  title: 'Components/Button',\n  component: Button,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: variantOptions,\n    },\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    asChild: {control: 'boolean'},\n    isLoading: {control: 'boolean'},\n  },\n  args: {\n    children: 'Click me',\n    variant: 'primary',\n    size: 'md',\n  },\n} satisfies Meta<typeof Button>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Variants: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {sizeOptions.map((size) => (\n        <table key={size} className=\"w-fit border-separate border-spacing-x-32 border-spacing-y-16\">\n          <thead>\n            <tr>\n              <th>{size}</th>\n              <th>Default</th>\n              <th>Hover</th>\n              <th>Focus</th>\n              <th>Disabled</th>\n            </tr>\n          </thead>\n          <tbody>\n            {variantOptions.map((variant) => (\n              <tr key={variant}>\n                <td>\n                  <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                    {variant}\n                  </Code>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"hover\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"focus\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} disabled size={size}>\n                    Click me\n                  </Button>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      ))}\n    </div>\n  ),\n};\n\nVariants.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Icons: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div>\n        <Button {...args} iconLeft=\"google\">\n          Click me\n        </Button>\n      </div>\n      <div>\n        <Button {...args} iconRight=\"microsoft\">\n          Click me\n        </Button>\n      </div>\n      <div>\n        <Button {...args} iconLeft=\"google\" iconRight=\"microsoft\">\n          Click me\n        </Button>\n      </div>\n    </div>\n  ),\n};\n\nexport const Loading: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div>\n        <Button {...args} isLoading>\n          Loading...\n        </Button>\n      </div>\n      <div>\n        <Button {...args} isLoading iconLeft=\"google\">\n          Loading with left icon\n        </Button>\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Button","variantOptions","sizeOptions","meta","title","component","tags","argTypes","variant","control","options","size","asChild","isLoading","args","children","Default","Variants","render","div","className","map","table","thead","tr","th","tbody","td","disabled","parameters","pseudo","hover","focusVisible","Icons","iconLeft","iconRight","Loading"],"mappings":";AACA,SAAQA,IAAI,QAAO,wBAAwB;AAC3C,SAAQC,MAAM,QAAO,WAAW;AAEhC,MAAMC,iBAAiB;IACrB;IACA;IACA;IACA;IACA;IACA;CACD;AACD,MAAMC,cAAc;IAAC;IAAO;IAAM;IAAM;IAAM;IAAM;CAAK;AAEzD,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWL;IACXM,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,SAAST;QACX;QACAU,MAAM;YACJF,SAAS;YACTC,SAASR;QACX;QACAU,SAAS;YAACH,SAAS;QAAS;QAC5BI,WAAW;YAACJ,SAAS;QAAS;IAChC;IACAK,MAAM;QACJC,UAAU;QACVP,SAAS;QACTG,MAAM;IACR;AACF;AAEA,eAAeR,KAAK;AAGpB,OAAO,MAAMa,UAAiB,CAAC,EAAE;AAEjC,OAAO,MAAMC,WAAkB;IAC7BC,QAAQ,CAACJ,qBACP,KAACK;YAAIC,WAAU;sBACZlB,YAAYmB,GAAG,CAAC,CAACV,qBAChB,MAACW;oBAAiBF,WAAU;;sCAC1B,KAACG;sCACC,cAAA,MAACC;;kDACC,KAACC;kDAAId;;kDACL,KAACc;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;;;;sCAGR,KAACC;sCACEzB,eAAeoB,GAAG,CAAC,CAACb,wBACnB,MAACgB;;sDACC,KAACG;sDACC,cAAA,KAAC5B;gDAAKS,SAAQ;gDAAQY,WAAU;0DAC7BZ;;;sDAGL,KAACmB;sDACC,cAAA,KAAC3B;gDAAQ,GAAGc,IAAI;gDAAEN,SAASA;gDAASG,MAAMA;0DAAM;;;sDAIlD,KAACgB;sDACC,cAAA,KAAC3B;gDAAQ,GAAGc,IAAI;gDAAEN,SAASA;gDAASY,WAAU;gDAAQT,MAAMA;0DAAM;;;sDAIpE,KAACgB;sDACC,cAAA,KAAC3B;gDAAQ,GAAGc,IAAI;gDAAEN,SAASA;gDAASY,WAAU;gDAAQT,MAAMA;0DAAM;;;sDAIpE,KAACgB;sDACC,cAAA,KAAC3B;gDAAQ,GAAGc,IAAI;gDAAEN,SAASA;gDAASoB,QAAQ;gDAACjB,MAAMA;0DAAM;;;;mCAtBpDH;;;mBAZHG;;AA6CpB,EAAE;AAEFM,SAASY,UAAU,GAAG;IACpBC,QAAQ;QACNC,OAAO;QACPC,cAAc;IAChB;AACF;AAEA,OAAO,MAAMC,QAAe;IAC1Bf,QAAQ,CAACJ,qBACP,MAACK;YAAIC,WAAU;;8BACb,KAACD;8BACC,cAAA,KAACnB;wBAAQ,GAAGc,IAAI;wBAAEoB,UAAS;kCAAS;;;8BAItC,KAACf;8BACC,cAAA,KAACnB;wBAAQ,GAAGc,IAAI;wBAAEqB,WAAU;kCAAY;;;8BAI1C,KAAChB;8BACC,cAAA,KAACnB;wBAAQ,GAAGc,IAAI;wBAAEoB,UAAS;wBAASC,WAAU;kCAAY;;;;;AAMlE,EAAE;AAEF,OAAO,MAAMC,UAAiB;IAC5BlB,QAAQ,CAACJ,qBACP,MAACK;YAAIC,WAAU;;8BACb,KAACD;8BACC,cAAA,KAACnB;wBAAQ,GAAGc,IAAI;wBAAED,SAAS;kCAAC;;;8BAI9B,KAACM;8BACC,cAAA,KAACnB;wBAAQ,GAAGc,IAAI;wBAAED,SAAS;wBAACqB,UAAS;kCAAS;;;;;AAMtD,EAAE"}

package/dist/components/button/icon-button.d.ts

@@ -7,8 +7,9 @@ export declare const iconButtonVariants: (props?: ({
     radius?: "full" | "rounded" | null | undefined;
     muted?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare function IconButton({ className, variant, size, radius, muted, asChild, children, icon, ...props }: ComponentProps<'button'> & VariantProps<typeof iconButtonVariants> & {
+export declare function IconButton({ className, variant, size, radius, muted, asChild, children, icon, isLoading, disabled, ...props }: ComponentProps<'button'> & VariantProps<typeof iconButtonVariants> & {
     asChild?: boolean;
     icon?: IconName;
+    isLoading?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=icon-button.d.ts.map

package/dist/components/button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,kBAAkB;;;;;8EAkC9B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAe,EACf,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GACzB,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,2CAYF"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,kBAAkB;;;;;8EAkC9B,CAAC;AAcF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAe,EACf,QAAQ,EACR,IAAI,EACJ,SAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GACzB,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,2CAuBF"}

package/dist/components/button/icon-button.js

@@ -3,7 +3,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { Icon } from '../../components/icon/index.js';
 import { cn } from '../../utils/cn.js';
-export const iconButtonVariants = cva('inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none', {
+export const iconButtonVariants = cva('inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none shrink-0 outline-none', {
     variants: {
         variant: {
             primary: 'bg-background-button-inverted-default text-tag-neutral-icon shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
@@ -33,8 +33,17 @@ export const iconButtonVariants = cva('inline-flex items-center justify-center w
         muted: false
     }
 });
-export function IconButton({ className, variant, size, radius, muted, asChild = false, children, icon, ...props }) {
+const spinnerSizeMap = {
+    '2xs': 'size-8',
+    xs: 'size-10',
+    sm: 'size-12',
+    md: 'size-14',
+    lg: 'size-16',
+    xl: 'size-18'
+};
+export function IconButton({ className, variant, size, radius, muted, asChild = false, children, icon, isLoading = false, disabled, ...props }) {
     const Comp = asChild ? Slot : 'button';
+    const spinnerSize = spinnerSizeMap[size ?? 'md'];
     return /*#__PURE__*/ _jsx(Comp, {
         "data-slot": "icon-button",
         className: cn(iconButtonVariants({
@@ -43,8 +52,17 @@ export function IconButton({ className, variant, size, radius, muted, asChild =
             radius,
             muted
         }), className),
+        disabled: disabled || isLoading,
+        "aria-busy": isLoading,
+        "aria-live": isLoading ? 'polite' : undefined,
+        ...asChild ? {
+            'aria-disabled': disabled || isLoading
+        } : {},
         ...props,
-        children: icon ? /*#__PURE__*/ _jsx(Icon, {
+        children: isLoading ? /*#__PURE__*/ _jsx(Icon, {
+            name: "spinner",
+            className: spinnerSize
+        }) : icon ? /*#__PURE__*/ _jsx(Icon, {
             name: icon
         }) : children
     });

package/dist/components/button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/icon-button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const iconButtonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-background-button-inverted-default text-tag-neutral-icon shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        transparent:\n          'bg-background-button-transparent-default text-tag-neutral-icon hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        '2xs': 'w-20 h-20 text-xs',\n        xs: 'w-24 h-24 text-xs',\n        sm: 'w-28 h-28 text-sm',\n        md: 'w-32 h-32 text-md',\n        lg: 'w-36 h-36 text-lg',\n        xl: 'w-40 h-40 text-xl',\n      },\n      radius: {\n        rounded: 'rounded-6',\n        full: 'rounded-full',\n      },\n      muted: {\n        true: 'opacity-60',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n      radius: 'rounded',\n      muted: false,\n    },\n  },\n);\n\nexport function IconButton({\n  className,\n  variant,\n  size,\n  radius,\n  muted,\n  asChild = false,\n  children,\n  icon,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof iconButtonVariants> & {\n    asChild?: boolean;\n    icon?: IconName;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"icon-button\"\n      className={cn(iconButtonVariants({variant, size, radius, muted}), className)}\n      {...props}\n    >\n      {icon ? <Icon name={icon} /> : children}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","iconButtonVariants","variants","variant","primary","transparent","size","xs","sm","md","lg","xl","radius","rounded","full","muted","true","false","defaultVariants","IconButton","className","asChild","children","icon","props","Comp","data-slot","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,qBAAqBH,IAChC,kIACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,aACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;QACAC,QAAQ;YACNC,SAAS;YACTC,MAAM;QACR;QACAC,OAAO;YACLC,MAAM;YACNC,OAAO;QACT;IACF;IACAC,iBAAiB;QACff,SAAS;QACTG,MAAM;QACNM,QAAQ;QACRG,OAAO;IACT;AACF,GACA;AAEF,OAAO,SAASI,WAAW,EACzBC,SAAS,EACTjB,OAAO,EACPG,IAAI,EACJM,MAAM,EACNG,KAAK,EACLM,UAAU,KAAK,EACfC,QAAQ,EACRC,IAAI,EACJ,GAAGC,OAKF;IACD,MAAMC,OAAOJ,UAAUxB,OAAO;IAE9B,qBACE,KAAC4B;QACCC,aAAU;QACVN,WAAWpB,GAAGC,mBAAmB;YAACE;YAASG;YAAMM;YAAQG;QAAK,IAAIK;QACjE,GAAGI,KAAK;kBAERD,qBAAO,KAACxB;YAAK4B,MAAMJ;aAAWD;;AAGrC"}
+{"version":3,"sources":["../../../src/components/button/icon-button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const iconButtonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none shrink-0 outline-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-background-button-inverted-default text-tag-neutral-icon shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        transparent:\n          'bg-background-button-transparent-default text-tag-neutral-icon hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        '2xs': 'w-20 h-20 text-xs',\n        xs: 'w-24 h-24 text-xs',\n        sm: 'w-28 h-28 text-sm',\n        md: 'w-32 h-32 text-md',\n        lg: 'w-36 h-36 text-lg',\n        xl: 'w-40 h-40 text-xl',\n      },\n      radius: {\n        rounded: 'rounded-6',\n        full: 'rounded-full',\n      },\n      muted: {\n        true: 'opacity-60',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n      radius: 'rounded',\n      muted: false,\n    },\n  },\n);\n\nconst spinnerSizeMap: Record<\n  NonNullable<VariantProps<typeof iconButtonVariants>['size']>,\n  string\n> = {\n  '2xs': 'size-8',\n  xs: 'size-10',\n  sm: 'size-12',\n  md: 'size-14',\n  lg: 'size-16',\n  xl: 'size-18',\n};\n\nexport function IconButton({\n  className,\n  variant,\n  size,\n  radius,\n  muted,\n  asChild = false,\n  children,\n  icon,\n  isLoading = false,\n  disabled,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof iconButtonVariants> & {\n    asChild?: boolean;\n    icon?: IconName;\n    isLoading?: boolean;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n  const spinnerSize = spinnerSizeMap[size ?? 'md'];\n\n  return (\n    <Comp\n      data-slot=\"icon-button\"\n      className={cn(iconButtonVariants({variant, size, radius, muted}), className)}\n      disabled={disabled || isLoading}\n      aria-busy={isLoading}\n      aria-live={isLoading ? 'polite' : undefined}\n      {...(asChild ? {'aria-disabled': disabled || isLoading} : {})}\n      {...props}\n    >\n      {isLoading ? (\n        <Icon name=\"spinner\" className={spinnerSize} />\n      ) : icon ? (\n        <Icon name={icon} />\n      ) : (\n        children\n      )}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","iconButtonVariants","variants","variant","primary","transparent","size","xs","sm","md","lg","xl","radius","rounded","full","muted","true","false","defaultVariants","spinnerSizeMap","IconButton","className","asChild","children","icon","isLoading","disabled","props","Comp","spinnerSize","data-slot","aria-busy","aria-live","undefined","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,qBAAqBH,IAChC,iJACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,aACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;QACAC,QAAQ;YACNC,SAAS;YACTC,MAAM;QACR;QACAC,OAAO;YACLC,MAAM;YACNC,OAAO;QACT;IACF;IACAC,iBAAiB;QACff,SAAS;QACTG,MAAM;QACNM,QAAQ;QACRG,OAAO;IACT;AACF,GACA;AAEF,MAAMI,iBAGF;IACF,OAAO;IACPZ,IAAI;IACJC,IAAI;IACJC,IAAI;IACJC,IAAI;IACJC,IAAI;AACN;AAEA,OAAO,SAASS,WAAW,EACzBC,SAAS,EACTlB,OAAO,EACPG,IAAI,EACJM,MAAM,EACNG,KAAK,EACLO,UAAU,KAAK,EACfC,QAAQ,EACRC,IAAI,EACJC,YAAY,KAAK,EACjBC,QAAQ,EACR,GAAGC,OAMF;IACD,MAAMC,OAAON,UAAUzB,OAAO;IAC9B,MAAMgC,cAAcV,cAAc,CAACb,QAAQ,KAAK;IAEhD,qBACE,KAACsB;QACCE,aAAU;QACVT,WAAWrB,GAAGC,mBAAmB;YAACE;YAASG;YAAMM;YAAQG;QAAK,IAAIM;QAClEK,UAAUA,YAAYD;QACtBM,aAAWN;QACXO,aAAWP,YAAY,WAAWQ;QACjC,GAAIX,UAAU;YAAC,iBAAiBI,YAAYD;QAAS,IAAI,CAAC,CAAC;QAC3D,GAAGE,KAAK;kBAERF,0BACC,KAAC1B;YAAKmC,MAAK;YAAUb,WAAWQ;aAC9BL,qBACF,KAACzB;YAAKmC,MAAMV;aAEZD;;AAIR"}

package/dist/components/button/icon-button.stories.js

@@ -250,5 +250,95 @@ export const Sizes = {
             ]
         })
 };
+export const Loading = {
+    render: ({ children: _children, ...args })=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            children: "Loading by Size:"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "flex gap-16 items-center",
+                            children: sizeOptions.map((size)=>/*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-8 items-center",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Code, {
+                                            variant: "label",
+                                            className: "text-foreground-neutral-subtle text-xs",
+                                            children: size
+                                        }),
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            ...args,
+                                            icon: "addLine",
+                                            "aria-label": "Loading",
+                                            size: size,
+                                            isLoading: true
+                                        })
+                                    ]
+                                }, size))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            children: "Loading by Variant:"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "flex gap-16 items-center",
+                            children: variantOptions.map((variant)=>/*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-8 items-center",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Code, {
+                                            variant: "label",
+                                            className: "text-foreground-neutral-subtle text-xs",
+                                            children: variant
+                                        }),
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            ...args,
+                                            icon: "addLine",
+                                            "aria-label": "Loading",
+                                            variant: variant,
+                                            isLoading: true
+                                        })
+                                    ]
+                                }, variant))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            children: "Normal vs Loading:"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex gap-16 items-center",
+                            children: [
+                                /*#__PURE__*/ _jsx(IconButton, {
+                                    ...args,
+                                    icon: "addLine",
+                                    "aria-label": "Add"
+                                }),
+                                /*#__PURE__*/ _jsx(IconButton, {
+                                    ...args,
+                                    icon: "addLine",
+                                    "aria-label": "Loading",
+                                    isLoading: true
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
 
 //# sourceMappingURL=icon-button.stories.js.map

package/dist/components/button/icon-button.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/icon-button.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {IconButton} from './icon-button';\n\nconst variantOptions = ['primary', 'transparent'] as const;\nconst sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\nconst radiusOptions = ['rounded', 'full'] as const;\n\nconst meta = {\n  title: 'Components/Button/IconButton',\n  component: IconButton,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: variantOptions,\n    },\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    radius: {\n      control: 'select',\n      options: radiusOptions,\n    },\n    muted: {control: 'boolean'},\n    asChild: {control: 'boolean'},\n  },\n  args: {\n    icon: 'addLine',\n    variant: 'primary',\n    size: 'md',\n    radius: 'rounded',\n    muted: false,\n  },\n} satisfies Meta<typeof IconButton>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Variants: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {sizeOptions.map((size) => (\n        <div key={size} className=\"flex flex-col gap-16\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Size: {size}\n          </Code>\n          {radiusOptions.map((radius) => (\n            <table\n              key={radius}\n              className=\"w-fit border-separate border-spacing-x-32 border-spacing-y-16\"\n            >\n              <thead>\n                <tr>\n                  <th>{radius}</th>\n                  <th>Default</th>\n                  <th>Hover</th>\n                  <th>Focus</th>\n                  <th>Disabled</th>\n                </tr>\n              </thead>\n              <tbody>\n                {variantOptions.map((variant) => (\n                  <tr key={variant}>\n                    <td>\n                      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                        {variant}\n                      </Code>\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        className=\"hover\"\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        className=\"focus\"\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        disabled\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          ))}\n        </div>\n      ))}\n    </div>\n  ),\n};\n\nVariants.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Muted: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Normal:</Code>\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" />\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" variant=\"transparent\" />\n      </div>\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Muted:</Code>\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" muted />\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" variant=\"transparent\" muted />\n      </div>\n    </div>\n  ),\n};\n\nexport const Sizes: Story = {\n  render: ({children: _children, ...args}) => (\n    <div className=\"flex flex-col gap-16\">\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Rounded:</Code>\n        {sizeOptions.map((size) => (\n          <IconButton\n            {...args}\n            key={size}\n            icon=\"addLine\"\n            aria-label=\"Add\"\n            size={size}\n            radius=\"rounded\"\n          />\n        ))}\n      </div>\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Full:</Code>\n        {sizeOptions.map((size) => (\n          <IconButton\n            {...args}\n            key={size}\n            icon=\"addLine\"\n            aria-label=\"Add\"\n            size={size}\n            radius=\"full\"\n          />\n        ))}\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","IconButton","variantOptions","sizeOptions","radiusOptions","meta","title","component","tags","argTypes","variant","control","options","size","radius","muted","asChild","args","icon","Default","Variants","render","div","className","map","table","thead","tr","th","tbody","td","aria-label","disabled","parameters","pseudo","hover","focusVisible","Muted","Sizes","children","_children","key"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/button/icon-button.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {IconButton} from './icon-button';\n\nconst variantOptions = ['primary', 'transparent'] as const;\nconst sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\nconst radiusOptions = ['rounded', 'full'] as const;\n\nconst meta = {\n  title: 'Components/Button/IconButton',\n  component: IconButton,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: variantOptions,\n    },\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    radius: {\n      control: 'select',\n      options: radiusOptions,\n    },\n    muted: {control: 'boolean'},\n    asChild: {control: 'boolean'},\n  },\n  args: {\n    icon: 'addLine',\n    variant: 'primary',\n    size: 'md',\n    radius: 'rounded',\n    muted: false,\n  },\n} satisfies Meta<typeof IconButton>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Variants: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {sizeOptions.map((size) => (\n        <div key={size} className=\"flex flex-col gap-16\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Size: {size}\n          </Code>\n          {radiusOptions.map((radius) => (\n            <table\n              key={radius}\n              className=\"w-fit border-separate border-spacing-x-32 border-spacing-y-16\"\n            >\n              <thead>\n                <tr>\n                  <th>{radius}</th>\n                  <th>Default</th>\n                  <th>Hover</th>\n                  <th>Focus</th>\n                  <th>Disabled</th>\n                </tr>\n              </thead>\n              <tbody>\n                {variantOptions.map((variant) => (\n                  <tr key={variant}>\n                    <td>\n                      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                        {variant}\n                      </Code>\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        className=\"hover\"\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        className=\"focus\"\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        disabled\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          ))}\n        </div>\n      ))}\n    </div>\n  ),\n};\n\nVariants.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Muted: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Normal:</Code>\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" />\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" variant=\"transparent\" />\n      </div>\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Muted:</Code>\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" muted />\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" variant=\"transparent\" muted />\n      </div>\n    </div>\n  ),\n};\n\nexport const Sizes: Story = {\n  render: ({children: _children, ...args}) => (\n    <div className=\"flex flex-col gap-16\">\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Rounded:</Code>\n        {sizeOptions.map((size) => (\n          <IconButton\n            {...args}\n            key={size}\n            icon=\"addLine\"\n            aria-label=\"Add\"\n            size={size}\n            radius=\"rounded\"\n          />\n        ))}\n      </div>\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Full:</Code>\n        {sizeOptions.map((size) => (\n          <IconButton\n            {...args}\n            key={size}\n            icon=\"addLine\"\n            aria-label=\"Add\"\n            size={size}\n            radius=\"full\"\n          />\n        ))}\n      </div>\n    </div>\n  ),\n};\n\nexport const Loading: Story = {\n  render: ({children: _children, ...args}) => (\n    <div className=\"flex flex-col gap-32\">\n      <div className=\"flex flex-col gap-16\">\n        <Code variant=\"label\">Loading by Size:</Code>\n        <div className=\"flex gap-16 items-center\">\n          {sizeOptions.map((size) => (\n            <div key={size} className=\"flex flex-col gap-8 items-center\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n                {size}\n              </Code>\n              <IconButton {...args} icon=\"addLine\" aria-label=\"Loading\" size={size} isLoading />\n            </div>\n          ))}\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-16\">\n        <Code variant=\"label\">Loading by Variant:</Code>\n        <div className=\"flex gap-16 items-center\">\n          {variantOptions.map((variant) => (\n            <div key={variant} className=\"flex flex-col gap-8 items-center\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n                {variant}\n              </Code>\n              <IconButton\n                {...args}\n                icon=\"addLine\"\n                aria-label=\"Loading\"\n                variant={variant}\n                isLoading\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-16\">\n        <Code variant=\"label\">Normal vs Loading:</Code>\n        <div className=\"flex gap-16 items-center\">\n          <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" />\n          <IconButton {...args} icon=\"addLine\" aria-label=\"Loading\" isLoading />\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","IconButton","variantOptions","sizeOptions","radiusOptions","meta","title","component","tags","argTypes","variant","control","options","size","radius","muted","asChild","args","icon","Default","Variants","render","div","className","map","table","thead","tr","th","tbody","td","aria-label","disabled","parameters","pseudo","hover","focusVisible","Muted","Sizes","children","_children","key","Loading","isLoading"],"mappings":"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"}

package/dist/components/checkbox/checkbox-links.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-links.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-links.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,SAAS,EAAQ,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAW,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AAExD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG;IAC3D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,EACb,GAAG,aAAa,EACjB,EAAE,kBAAkB,2CA2DpB"}
+{"version":3,"file":"checkbox-links.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-links.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,SAAS,EAAQ,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAW,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AAExD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG;IAC3D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,EACb,GAAG,aAAa,EACjB,EAAE,kBAAkB,2CA4DpB"}

package/dist/components/checkbox/checkbox-links.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buttonLinkVariants } from '../../components/button/button-link.js';
 import { Label } from '../../components/label/index.js';
 import { useId } from 'react';
 import { cn } from '../../utils/cn.js';
@@ -36,13 +37,18 @@ export function CheckboxLinks({ id, label, links, separator, className, labelCla
                                 children: [
                                     link.href ? /*#__PURE__*/ _jsx("a", {
                                         href: link.href,
+                                        target: "_blank",
+                                        rel: "noopener noreferrer",
                                         onClick: link.onClick,
-                                        className: cn('text-sm leading-20 font-medium text-foreground-highlight-interactive', 'hover:text-foreground-highlight-interactive-hover', linkClassName),
+                                        className: cn('text-sm leading-20 font-medium text-foreground-highlight-interactive', 'hover:text-foreground-highlight-interactive-hover transition-colors', linkClassName),
                                         children: link.label
                                     }) : /*#__PURE__*/ _jsx("button", {
                                         type: "button",
                                         onClick: link.onClick,
-                                        className: cn('text-sm leading-20 font-medium text-foreground-highlight-interactive', 'hover:text-foreground-highlight-interactive-hover', linkClassName),
+                                        className: cn(buttonLinkVariants({
+                                            variant: 'interactive',
+                                            size: 'sm'
+                                        }), linkClassName),
                                         children: link.label
                                     }),
                                     index < links.length - 1 && (separator ?? defaultSeparator)

package/dist/components/checkbox/checkbox-links.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/checkbox/checkbox-links.tsx"],"sourcesContent":["import {Label} from 'components/label';\nimport {type ReactNode, useId} from 'react';\nimport {cn} from 'utils/cn';\nimport {Checkbox, type CheckboxProps} from './checkbox';\n\nexport type CheckboxLink = {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n};\n\nexport type CheckboxLinksProps = Omit<CheckboxProps, 'id'> & {\n  id?: string;\n  label: string;\n  links: CheckboxLink[];\n  separator?: ReactNode;\n  className?: string;\n  labelClassName?: string;\n  linkClassName?: string;\n};\n\nexport function CheckboxLinks({\n  id,\n  label,\n  links,\n  separator,\n  className,\n  labelClassName,\n  linkClassName,\n  ...checkboxProps\n}: CheckboxLinksProps) {\n  const generateId = useId();\n  const checkboxId = id || generateId;\n  const isDisabled = checkboxProps.disabled ?? false;\n  const defaultSeparator = (\n    <span className=\"size-3 rounded-full bg-foreground-neutral-muted\" aria-hidden=\"true\" />\n  );\n\n  return (\n    <div className={cn('flex gap-10 items-start', className)}>\n      <span className=\"p-2\">\n        <Checkbox id={checkboxId} {...checkboxProps} />\n      </span>\n      <div className=\"flex flex-col gap-4 items-start flex-1\">\n        <Label\n          htmlFor={checkboxId}\n          className={cn(\n            'text-sm leading-20 font-medium text-foreground-neutral-base',\n            isDisabled && 'cursor-not-allowed opacity-50',\n            labelClassName,\n          )}\n        >\n          {label}\n        </Label>\n        <div className=\"flex gap-6 items-center\">\n          {links.map((link, index) => (\n            <div key={link.label} className=\"flex gap-6 items-center\">\n              {link.href ? (\n                <a\n                  href={link.href}\n                  onClick={link.onClick}\n                  className={cn(\n                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',\n                    'hover:text-foreground-highlight-interactive-hover',\n                    linkClassName,\n                  )}\n                >\n                  {link.label}\n                </a>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={link.onClick}\n                  className={cn(\n                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',\n                    'hover:text-foreground-highlight-interactive-hover',\n                    linkClassName,\n                  )}\n                >\n                  {link.label}\n                </button>\n              )}\n              {index < links.length - 1 && (separator ?? defaultSeparator)}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["Label","useId","cn","Checkbox","CheckboxLinks","id","label","links","separator","className","labelClassName","linkClassName","checkboxProps","generateId","checkboxId","isDisabled","disabled","defaultSeparator","span","aria-hidden","div","htmlFor","map","link","index","href","a","onClick","button","type","length"],"mappings":";AAAA,SAAQA,KAAK,QAAO,mBAAmB;AACvC,SAAwBC,KAAK,QAAO,QAAQ;AAC5C,SAAQC,EAAE,QAAO,WAAW;AAC5B,SAAQC,QAAQ,QAA2B,aAAa;AAkBxD,OAAO,SAASC,cAAc,EAC5BC,EAAE,EACFC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACb,GAAGC,eACgB;IACnB,MAAMC,aAAaZ;IACnB,MAAMa,aAAaT,MAAMQ;IACzB,MAAME,aAAaH,cAAcI,QAAQ,IAAI;IAC7C,MAAMC,iCACJ,KAACC;QAAKT,WAAU;QAAkDU,eAAY;;IAGhF,qBACE,MAACC;QAAIX,WAAWP,GAAG,2BAA2BO;;0BAC5C,KAACS;gBAAKT,WAAU;0BACd,cAAA,KAACN;oBAASE,IAAIS;oBAAa,GAAGF,aAAa;;;0BAE7C,MAACQ;gBAAIX,WAAU;;kCACb,KAACT;wBACCqB,SAASP;wBACTL,WAAWP,GACT,+DACAa,cAAc,iCACdL;kCAGDJ;;kCAEH,KAACc;wBAAIX,WAAU;kCACZF,MAAMe,GAAG,CAAC,CAACC,MAAMC,sBAChB,MAACJ;gCAAqBX,WAAU;;oCAC7Bc,KAAKE,IAAI,iBACR,KAACC;wCACCD,MAAMF,KAAKE,IAAI;wCACfE,SAASJ,KAAKI,OAAO;wCACrBlB,WAAWP,GACT,wEACA,qDACAS;kDAGDY,KAAKjB,KAAK;uDAGb,KAACsB;wCACCC,MAAK;wCACLF,SAASJ,KAAKI,OAAO;wCACrBlB,WAAWP,GACT,wEACA,qDACAS;kDAGDY,KAAKjB,KAAK;;oCAGdkB,QAAQjB,MAAMuB,MAAM,GAAG,KAAMtB,CAAAA,aAAaS,gBAAe;;+BA1BlDM,KAAKjB,KAAK;;;;;;AAiChC"}
+{"version":3,"sources":["../../../src/components/checkbox/checkbox-links.tsx"],"sourcesContent":["import {buttonLinkVariants} from 'components/button/button-link';\nimport {Label} from 'components/label';\nimport {type ReactNode, useId} from 'react';\nimport {cn} from 'utils/cn';\nimport {Checkbox, type CheckboxProps} from './checkbox';\n\nexport type CheckboxLink = {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n};\n\nexport type CheckboxLinksProps = Omit<CheckboxProps, 'id'> & {\n  id?: string;\n  label: string;\n  links: CheckboxLink[];\n  separator?: ReactNode;\n  className?: string;\n  labelClassName?: string;\n  linkClassName?: string;\n};\n\nexport function CheckboxLinks({\n  id,\n  label,\n  links,\n  separator,\n  className,\n  labelClassName,\n  linkClassName,\n  ...checkboxProps\n}: CheckboxLinksProps) {\n  const generateId = useId();\n  const checkboxId = id || generateId;\n  const isDisabled = checkboxProps.disabled ?? false;\n  const defaultSeparator = (\n    <span className=\"size-3 rounded-full bg-foreground-neutral-muted\" aria-hidden=\"true\" />\n  );\n\n  return (\n    <div className={cn('flex gap-10 items-start', className)}>\n      <span className=\"p-2\">\n        <Checkbox id={checkboxId} {...checkboxProps} />\n      </span>\n      <div className=\"flex flex-col gap-4 items-start flex-1\">\n        <Label\n          htmlFor={checkboxId}\n          className={cn(\n            'text-sm leading-20 font-medium text-foreground-neutral-base',\n            isDisabled && 'cursor-not-allowed opacity-50',\n            labelClassName,\n          )}\n        >\n          {label}\n        </Label>\n        <div className=\"flex gap-6 items-center\">\n          {links.map((link, index) => (\n            <div key={link.label} className=\"flex gap-6 items-center\">\n              {link.href ? (\n                <a\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  onClick={link.onClick}\n                  className={cn(\n                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',\n                    'hover:text-foreground-highlight-interactive-hover transition-colors',\n                    linkClassName,\n                  )}\n                >\n                  {link.label}\n                </a>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={link.onClick}\n                  className={cn(\n                    buttonLinkVariants({variant: 'interactive', size: 'sm'}),\n                    linkClassName,\n                  )}\n                >\n                  {link.label}\n                </button>\n              )}\n              {index < links.length - 1 && (separator ?? defaultSeparator)}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["buttonLinkVariants","Label","useId","cn","Checkbox","CheckboxLinks","id","label","links","separator","className","labelClassName","linkClassName","checkboxProps","generateId","checkboxId","isDisabled","disabled","defaultSeparator","span","aria-hidden","div","htmlFor","map","link","index","href","a","target","rel","onClick","button","type","variant","size","length"],"mappings":";AAAA,SAAQA,kBAAkB,QAAO,gCAAgC;AACjE,SAAQC,KAAK,QAAO,mBAAmB;AACvC,SAAwBC,KAAK,QAAO,QAAQ;AAC5C,SAAQC,EAAE,QAAO,WAAW;AAC5B,SAAQC,QAAQ,QAA2B,aAAa;AAkBxD,OAAO,SAASC,cAAc,EAC5BC,EAAE,EACFC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACb,GAAGC,eACgB;IACnB,MAAMC,aAAaZ;IACnB,MAAMa,aAAaT,MAAMQ;IACzB,MAAME,aAAaH,cAAcI,QAAQ,IAAI;IAC7C,MAAMC,iCACJ,KAACC;QAAKT,WAAU;QAAkDU,eAAY;;IAGhF,qBACE,MAACC;QAAIX,WAAWP,GAAG,2BAA2BO;;0BAC5C,KAACS;gBAAKT,WAAU;0BACd,cAAA,KAACN;oBAASE,IAAIS;oBAAa,GAAGF,aAAa;;;0BAE7C,MAACQ;gBAAIX,WAAU;;kCACb,KAACT;wBACCqB,SAASP;wBACTL,WAAWP,GACT,+DACAa,cAAc,iCACdL;kCAGDJ;;kCAEH,KAACc;wBAAIX,WAAU;kCACZF,MAAMe,GAAG,CAAC,CAACC,MAAMC,sBAChB,MAACJ;gCAAqBX,WAAU;;oCAC7Bc,KAAKE,IAAI,iBACR,KAACC;wCACCD,MAAMF,KAAKE,IAAI;wCACfE,QAAO;wCACPC,KAAI;wCACJC,SAASN,KAAKM,OAAO;wCACrBpB,WAAWP,GACT,wEACA,uEACAS;kDAGDY,KAAKjB,KAAK;uDAGb,KAACwB;wCACCC,MAAK;wCACLF,SAASN,KAAKM,OAAO;wCACrBpB,WAAWP,GACTH,mBAAmB;4CAACiC,SAAS;4CAAeC,MAAM;wCAAI,IACtDtB;kDAGDY,KAAKjB,KAAK;;oCAGdkB,QAAQjB,MAAM2B,MAAM,GAAG,KAAM1B,CAAAA,aAAaS,gBAAe;;+BA3BlDM,KAAKjB,KAAK;;;;;;AAkChC"}

package/dist/components/checkbox/checkbox.stories.js

@@ -534,11 +534,11 @@ export const CheckboxLinksStory = {
                             links: [
                                 {
                                     label: 'Terms of use',
-                                    href: '#'
+                                    href: 'https://www.shipfox.io/legal/terms-of-service'
                                 },
                                 {
                                     label: 'Privacy Policy',
-                                    href: '#'
+                                    onClick: ()=>window.open('https://www.shipfox.io/legal/privacy-policy', '_blank', 'noopener,noreferrer')
                                 }
                             ]
                         }),
@@ -548,11 +548,11 @@ export const CheckboxLinksStory = {
                             links: [
                                 {
                                     label: 'Terms of use',
-                                    href: '#'
+                                    href: 'https://www.shipfox.io/legal/terms-of-service'
                                 },
                                 {
                                     label: 'Privacy Policy',
-                                    href: '#'
+                                    onClick: ()=>window.open('https://www.shipfox.io/legal/privacy-policy', '_blank', 'noopener,noreferrer')
                                 }
                             ],
                             checked: true

package/dist/components/checkbox/checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/checkbox/checkbox.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code, Header} from 'components/typography';\nimport {Checkbox, CheckboxLabel, CheckboxLinks} from '.';\n\nconst meta = {\n  title: 'Components/Checkbox',\n  component: Checkbox,\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n    },\n    disabled: {control: 'boolean'},\n    checked: {control: 'boolean'},\n  },\n  args: {\n    size: 'md',\n    disabled: false,\n  },\n} satisfies Meta<typeof Checkbox>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      <div className=\"flex flex-col gap-16\">\n        <Header variant=\"h4\">Controlled Checkbox</Header>\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Use the controls below to change the checkbox state\n        </Code>\n        <Checkbox {...args} />\n      </div>\n\n      <div className=\"flex flex-col gap-32\">\n        <Header variant=\"h4\">All States</Header>\n        {(['sm', 'md', 'lg'] as const).map((size) => (\n          <div key={size} className=\"flex flex-wrap gap-16\">\n            <Header variant=\"h4\">Size: {size}</Header>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Unchecked\n              </Code>\n              <Checkbox size={size} />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Checked\n              </Code>\n              <Checkbox size={size} checked />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Indeterminate\n              </Code>\n              <Checkbox size={size} checked=\"indeterminate\" />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Disabled (Unchecked)\n              </Code>\n              <Checkbox size={size} disabled />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Disabled (Checked)\n              </Code>\n              <Checkbox size={size} checked disabled />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Focus\n              </Code>\n              <Checkbox size={size} className=\"focus\" />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  ),\n  parameters: {\n    pseudo: {\n      focusVisible: '.focus',\n    },\n  },\n};\n\nexport const CheckboxLabelStory: StoryObj = {\n  render: () => (\n    <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n        CHECKBOX LABEL - WITHOUT BORDER\n      </Code>\n      <div className=\"flex flex-col gap-16\">\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Unchecked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Unchecked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Checked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Checked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Indeterminate\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked=\"indeterminate\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Checked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            checked\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            disabled\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Unchecked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            disabled\n          />\n        </div>\n      </div>\n\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle mt-32\">\n        CHECKBOX LABEL - WITH BORDER\n      </Code>\n      <div className=\"flex flex-col gap-16\">\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-default-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-hover-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            border\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Focus - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-focus-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            border\n            className=\"focus\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-default-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-hover-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            border\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Focus - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-focus-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            border\n            className=\"focus\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Indeterminate\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-default-indeterminate\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked=\"indeterminate\"\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-disabled-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            disabled\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-disabled-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            disabled\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Indeterminate\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-disabled-indeterminate\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked=\"indeterminate\"\n            disabled\n            border\n          />\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nCheckboxLabelStory.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const CheckboxLinksStory: StoryObj = {\n  args: {\n    disabled: true,\n  },\n\n  render: () => (\n    <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n        CHECKBOX LINKS\n      </Code>\n      <div className=\"flex flex-col gap-16\">\n        <CheckboxLinks\n          id=\"checkbox-links-default\"\n          label=\"Accept policies\"\n          links={[\n            {label: 'Terms of use', href: '#'},\n            {label: 'Privacy Policy', href: '#'},\n          ]}\n        />\n        <CheckboxLinks\n          id=\"checkbox-links-checked\"\n          label=\"Accept policies\"\n          links={[\n            {label: 'Terms of use', href: '#'},\n            {label: 'Privacy Policy', href: '#'},\n          ]}\n          checked\n        />\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Header","Checkbox","CheckboxLabel","CheckboxLinks","meta","title","component","tags","argTypes","size","control","options","disabled","checked","args","Default","render","div","className","variant","map","parameters","pseudo","focusVisible","CheckboxLabelStory","label","optional","showInfoIcon","description","id","border","hover","CheckboxLinksStory","links","href"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/checkbox/checkbox.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code, Header} from 'components/typography';\nimport {Checkbox, CheckboxLabel, CheckboxLinks} from '.';\n\nconst meta = {\n  title: 'Components/Checkbox',\n  component: Checkbox,\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n    },\n    disabled: {control: 'boolean'},\n    checked: {control: 'boolean'},\n  },\n  args: {\n    size: 'md',\n    disabled: false,\n  },\n} satisfies Meta<typeof Checkbox>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      <div className=\"flex flex-col gap-16\">\n        <Header variant=\"h4\">Controlled Checkbox</Header>\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Use the controls below to change the checkbox state\n        </Code>\n        <Checkbox {...args} />\n      </div>\n\n      <div className=\"flex flex-col gap-32\">\n        <Header variant=\"h4\">All States</Header>\n        {(['sm', 'md', 'lg'] as const).map((size) => (\n          <div key={size} className=\"flex flex-wrap gap-16\">\n            <Header variant=\"h4\">Size: {size}</Header>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Unchecked\n              </Code>\n              <Checkbox size={size} />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Checked\n              </Code>\n              <Checkbox size={size} checked />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Indeterminate\n              </Code>\n              <Checkbox size={size} checked=\"indeterminate\" />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Disabled (Unchecked)\n              </Code>\n              <Checkbox size={size} disabled />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Disabled (Checked)\n              </Code>\n              <Checkbox size={size} checked disabled />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Focus\n              </Code>\n              <Checkbox size={size} className=\"focus\" />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  ),\n  parameters: {\n    pseudo: {\n      focusVisible: '.focus',\n    },\n  },\n};\n\nexport const CheckboxLabelStory: StoryObj = {\n  render: () => (\n    <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n        CHECKBOX LABEL - WITHOUT BORDER\n      </Code>\n      <div className=\"flex flex-col gap-16\">\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Unchecked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Unchecked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Checked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Checked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Indeterminate\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked=\"indeterminate\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Checked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            checked\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            disabled\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Unchecked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            disabled\n          />\n        </div>\n      </div>\n\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle mt-32\">\n        CHECKBOX LABEL - WITH BORDER\n      </Code>\n      <div className=\"flex flex-col gap-16\">\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-default-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-hover-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            border\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Focus - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-focus-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            border\n            className=\"focus\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-default-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-hover-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            border\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Focus - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-focus-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            border\n            className=\"focus\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Indeterminate\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-default-indeterminate\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked=\"indeterminate\"\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-disabled-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            disabled\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-disabled-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            disabled\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Indeterminate\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-disabled-indeterminate\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked=\"indeterminate\"\n            disabled\n            border\n          />\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nCheckboxLabelStory.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const CheckboxLinksStory: StoryObj = {\n  args: {\n    disabled: true,\n  },\n\n  render: () => (\n    <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n        CHECKBOX LINKS\n      </Code>\n      <div className=\"flex flex-col gap-16\">\n        <CheckboxLinks\n          id=\"checkbox-links-default\"\n          label=\"Accept policies\"\n          links={[\n            {label: 'Terms of use', href: 'https://www.shipfox.io/legal/terms-of-service'},\n            {\n              label: 'Privacy Policy',\n              onClick: () =>\n                window.open(\n                  'https://www.shipfox.io/legal/privacy-policy',\n                  '_blank',\n                  'noopener,noreferrer',\n                ),\n            },\n          ]}\n        />\n        <CheckboxLinks\n          id=\"checkbox-links-checked\"\n          label=\"Accept policies\"\n          links={[\n            {label: 'Terms of use', href: 'https://www.shipfox.io/legal/terms-of-service'},\n            {\n              label: 'Privacy Policy',\n              onClick: () =>\n                window.open(\n                  'https://www.shipfox.io/legal/privacy-policy',\n                  '_blank',\n                  'noopener,noreferrer',\n                ),\n            },\n          ]}\n          checked\n        />\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Header","Checkbox","CheckboxLabel","CheckboxLinks","meta","title","component","tags","argTypes","size","control","options","disabled","checked","args","Default","render","div","className","variant","map","parameters","pseudo","focusVisible","CheckboxLabelStory","label","optional","showInfoIcon","description","id","border","hover","CheckboxLinksStory","links","href","onClick","window","open"],"mappings":"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"}

package/dist/components/form/form.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+declare const FormItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-label").LabelProps & React.RefAttributes<HTMLLabelElement> & import("class-variance-authority").VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage };
+//# sourceMappingURL=form.d.ts.map

package/dist/components/form/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/form/form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,eAAe,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAI7E,QAAA,MAAM,IAAI,4MAAe,CAAC;AAiB1B,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,4CAMtC,CAAC;AA4BF,QAAA,MAAM,QAAQ,mKAUb,CAAC;AAGF,QAAA,MAAM,SAAS,gTAad,CAAC;AAGF,QAAA,MAAM,WAAW,8JAchB,CAAC;AAGF,QAAA,MAAM,eAAe,qLAiBpB,CAAC;AAGF,QAAA,MAAM,WAAW,qLAoBhB,CAAC;AAGF,OAAO,EAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAC,CAAC"}