@shipfox/react-ui 0.8.0 → 0.10.0

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;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,2CAsBF"}
+{"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',
@@ -55,6 +55,9 @@ export function IconButton({ className, variant, size, radius, muted, asChild =
         disabled: disabled || isLoading,
         "aria-busy": isLoading,
         "aria-live": isLoading ? 'polite' : undefined,
+        ...asChild ? {
+            'aria-disabled': disabled || isLoading
+        } : {},
         ...props,
         children: isLoading ? /*#__PURE__*/ _jsx(Icon, {
             name: "spinner",

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\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      {...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,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,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,GAAGN,KAAK;kBAERF,0BACC,KAAC1B;YAAKmC,MAAK;YAAUb,WAAWQ;aAC9BL,qBACF,KAACzB;YAAKmC,MAAMV;aAEZD;;AAIR"}
+{"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/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":";AACA,SAAQA,IAAI,EAAEC,MAAM,QAAO,wBAAwB;AACnD,SAAQC,QAAQ,EAAEC,aAAa,EAAEC,aAAa,QAAO,IAAI;AAEzD,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWL;IACXM,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,MAAM;YACJC,SAAS;YACTC,SAAS;gBAAC;gBAAM;gBAAM;aAAK;QAC7B;QACAC,UAAU;YAACF,SAAS;QAAS;QAC7BG,SAAS;YAACH,SAAS;QAAS;IAC9B;IACAI,MAAM;QACJL,MAAM;QACNG,UAAU;IACZ;AACF;AAEA,eAAeR,KAAK;AAIpB,OAAO,MAAMW,UAAiB;IAC5BC,QAAQ,CAACF,qBACP,MAACG;YAAIC,WAAU;;8BACb,MAACD;oBAAIC,WAAU;;sCACb,KAAClB;4BAAOmB,SAAQ;sCAAK;;sCACrB,KAACpB;4BAAKoB,SAAQ;4BAAQD,WAAU;sCAAiC;;sCAGjE,KAACjB;4BAAU,GAAGa,IAAI;;;;8BAGpB,MAACG;oBAAIC,WAAU;;sCACb,KAAClB;4BAAOmB,SAAQ;sCAAK;;wBACnB;4BAAC;4BAAM;4BAAM;yBAAK,CAAWC,GAAG,CAAC,CAACX,qBAClC,MAACQ;gCAAeC,WAAU;;kDACxB,MAAClB;wCAAOmB,SAAQ;;4CAAK;4CAAOV;;;kDAC5B,MAACQ;wCAAIC,WAAU;;0DACb,KAACnB;gDAAKoB,SAAQ;gDAAQD,WAAU;0DAAiC;;0DAGjE,KAACjB;gDAASQ,MAAMA;;;;kDAElB,MAACQ;wCAAIC,WAAU;;0DACb,KAACnB;gDAAKoB,SAAQ;gDAAQD,WAAU;0DAAiC;;0DAGjE,KAACjB;gDAASQ,MAAMA;gDAAMI,OAAO;;;;kDAE/B,MAACI;wCAAIC,WAAU;;0DACb,KAACnB;gDAAKoB,SAAQ;gDAAQD,WAAU;0DAAiC;;0DAGjE,KAACjB;gDAASQ,MAAMA;gDAAMI,SAAQ;;;;kDAEhC,MAACI;wCAAIC,WAAU;;0DACb,KAACnB;gDAAKoB,SAAQ;gDAAQD,WAAU;0DAAiC;;0DAGjE,KAACjB;gDAASQ,MAAMA;gDAAMG,QAAQ;;;;kDAEhC,MAACK;wCAAIC,WAAU;;0DACb,KAACnB;gDAAKoB,SAAQ;gDAAQD,WAAU;0DAAiC;;0DAGjE,KAACjB;gDAASQ,MAAMA;gDAAMI,OAAO;gDAACD,QAAQ;;;;kDAExC,MAACK;wCAAIC,WAAU;;0DACb,KAACnB;gDAAKoB,SAAQ;gDAAQD,WAAU;0DAAiC;;0DAGjE,KAACjB;gDAASQ,MAAMA;gDAAMS,WAAU;;;;;+BApC1BT;;;;;IA2ClBY,YAAY;QACVC,QAAQ;YACNC,cAAc;QAChB;IACF;AACF,EAAE;AAEF,OAAO,MAAMC,qBAA+B;IAC1CR,QAAQ,kBACN,MAACC;YAAIC,WAAU;;8BACb,KAACnB;oBAAKoB,SAAQ;oBAAQD,WAAU;8BAAiC;;8BAGjE,MAACD;oBAAIC,WAAU;;sCACb,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACCuB,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;;;;sCAGhB,MAACX;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACCuB,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZV,WAAU;;;;sCAGd,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACCuB,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,OAAO;;;;sCAGX,MAACI;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACCuB,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,OAAO;oCACPK,WAAU;;;;sCAGd,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACCuB,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,SAAQ;;;;sCAGZ,MAACI;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACCuB,OAAM;oCACNZ,OAAO;oCACPa,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZhB,QAAQ;;;;sCAGZ,MAACK;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACCuB,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZhB,QAAQ;;;;;;8BAKd,KAACb;oBAAKoB,SAAQ;oBAAQD,WAAU;8BAAuC;;8BAGvE,MAACD;oBAAIC,WAAU;;sCACb,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZE,MAAM;;;;sCAGV,MAACb;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZE,MAAM;oCACNZ,WAAU;;;;sCAGd,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZE,MAAM;oCACNZ,WAAU;;;;sCAGd,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,OAAO;oCACPiB,MAAM;;;;sCAGV,MAACb;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,OAAO;oCACPiB,MAAM;oCACNZ,WAAU;;;;sCAGd,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,OAAO;oCACPiB,MAAM;oCACNZ,WAAU;;;;sCAGd,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,SAAQ;oCACRiB,MAAM;;;;sCAGV,MAACb;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZhB,QAAQ;oCACRkB,MAAM;;;;sCAGV,MAACb;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,OAAO;oCACPD,QAAQ;oCACRkB,MAAM;;;;sCAGV,MAACb;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,SAAQ;oCACRD,QAAQ;oCACRkB,MAAM;;;;;;;;AAMlB,EAAE;AAEFN,mBAAmBH,UAAU,GAAG;IAC9BC,QAAQ;QACNS,OAAO;QACPR,cAAc;IAChB;AACF;AAEA,OAAO,MAAMS,qBAA+B;IAC1ClB,MAAM;QACJF,UAAU;IACZ;IAEAI,QAAQ,kBACN,MAACC;YAAIC,WAAU;;8BACb,KAACnB;oBAAKoB,SAAQ;oBAAQD,WAAU;8BAAiC;;8BAGjE,MAACD;oBAAIC,WAAU;;sCACb,KAACf;4BACC0B,IAAG;4BACHJ,OAAM;4BACNQ,OAAO;gCACL;oCAACR,OAAO;oCAAgBS,MAAM;gCAA+C;gCAC7E;oCACET,OAAO;oCACPU,SAAS,IACPC,OAAOC,IAAI,CACT,+CACA,UACA;gCAEN;6BACD;;sCAEH,KAAClC;4BACC0B,IAAG;4BACHJ,OAAM;4BACNQ,OAAO;gCACL;oCAACR,OAAO;oCAAgBS,MAAM;gCAA+C;gCAC7E;oCACET,OAAO;oCACPU,SAAS,IACPC,OAAOC,IAAI,CACT,+CACA,UACA;gCAEN;6BACD;4BACDxB,OAAO;;;;;;AAKjB,EAAE"}

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

@@ -1,11 +1,7 @@
 import type { RemixiconComponentType } from '@remixicon/react';
-import { RiGoogleFill } from '@remixicon/react';
 import type { ComponentProps } from 'react';
 import { BadgeIcon, CheckCircleSolidIcon, CircleDottedLineIcon, ComponentFillIcon, ComponentLineIcon, EllipseMiniSolidIcon, InfoTooltipFillIcon, ResizeIcon, ShipfoxLogo, SlackLogo, SpinnerIcon, StripeLogo, ThunderIcon, XCircleSolidIcon } from './custom';
-declare const iconsMap: {
-    readonly google: RemixiconComponentType;
-    readonly microsoft: RemixiconComponentType;
-    readonly github: RemixiconComponentType;
+declare const customIconsMap: {
     readonly shipfox: typeof ShipfoxLogo;
     readonly slack: typeof SlackLogo;
     readonly stripe: typeof StripeLogo;
@@ -20,21 +16,11 @@ declare const iconsMap: {
     readonly spinner: typeof SpinnerIcon;
     readonly thunder: typeof ThunderIcon;
     readonly xCircleSolid: typeof XCircleSolidIcon;
-    readonly addLine: RemixiconComponentType;
-    readonly bookOpen: RemixiconComponentType;
-    readonly check: RemixiconComponentType;
-    readonly chevronRight: RemixiconComponentType;
-    readonly close: RemixiconComponentType;
-    readonly copy: RemixiconComponentType;
-    readonly homeSmile: RemixiconComponentType;
-    readonly imageAdd: RemixiconComponentType;
-    readonly info: RemixiconComponentType;
-    readonly money: RemixiconComponentType;
-    readonly subtractLine: RemixiconComponentType;
 };
+declare const iconsMap: Record<string, RemixiconComponentType> & typeof customIconsMap;
 export type IconName = keyof typeof iconsMap;
 export declare const iconNames: IconName[];
-type BaseIconProps = ComponentProps<typeof RiGoogleFill>;
+type BaseIconProps = ComponentProps<RemixiconComponentType>;
 type IconProps = {
     name: IconName;
 } & Omit<BaseIconProps, 'name'>;

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

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAQL,YAAY,EAOb,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,EACV,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,WAAW,EACX,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B6C,CAAC;AAE5D,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,eAAO,MAAM,SAAS,EAA4B,QAAQ,EAAE,CAAC;AAE7D,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACzD,KAAK,SAAS,GAAG;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AAEhE,wBAAgB,IAAI,CAAC,EAAC,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,2CAG/C"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AAiB7D,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,EACV,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,WAAW,EACX,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAoBlB,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;CAeuC,CAAC;AAE5D,QAAA,MAAM,QAAQ,EAIT,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,GAAG,OAAO,cAAc,CAAC;AAEpE,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,eAAO,MAAM,SAAS,EAA4B,QAAQ,EAAE,CAAC;AAE7D,KAAK,aAAa,GAAG,cAAc,CAAC,sBAAsB,CAAC,CAAC;AAC5D,KAAK,SAAS,GAAG;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AAEhE,wBAAgB,IAAI,CAAC,EAAC,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,2CAG/C"}

package/dist/components/icon/icon.js

@@ -1,10 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RiAddLine, RiArrowRightSLine, RiBookOpenFill, RiCheckLine, RiCloseLine, RiFileCopyLine, RiGithubFill, RiGoogleFill, RiHomeSmileFill, RiImageAddFill, RiInformationFill, RiMicrosoftFill, RiMoneyDollarCircleLine, RiSubtractLine } from '@remixicon/react';
 import { BadgeIcon, CheckCircleSolidIcon, CircleDottedLineIcon, ComponentFillIcon, ComponentLineIcon, EllipseMiniSolidIcon, InfoTooltipFillIcon, ResizeIcon, ShipfoxLogo, SlackLogo, SpinnerIcon, StripeLogo, ThunderIcon, XCircleSolidIcon } from './custom/index.js';
-const iconsMap = {
+import { remixiconMap } from './remixicon-registry.js';
+const commonRemixicons = {
+    addLine: RiAddLine,
+    close: RiCloseLine,
+    check: RiCheckLine,
+    copy: RiFileCopyLine,
+    info: RiInformationFill,
+    imageAdd: RiImageAddFill,
+    chevronRight: RiArrowRightSLine,
+    homeSmile: RiHomeSmileFill,
+    money: RiMoneyDollarCircleLine,
     google: RiGoogleFill,
     microsoft: RiMicrosoftFill,
     github: RiGithubFill,
+    subtractLine: RiSubtractLine,
+    bookOpen: RiBookOpenFill
+};
+const customIconsMap = {
     shipfox: ShipfoxLogo,
     slack: SlackLogo,
     stripe: StripeLogo,
@@ -18,18 +32,12 @@ const iconsMap = {
     resize: ResizeIcon,
     spinner: SpinnerIcon,
     thunder: ThunderIcon,
-    xCircleSolid: XCircleSolidIcon,
-    addLine: RiAddLine,
-    bookOpen: RiBookOpenFill,
-    check: RiCheckLine,
-    chevronRight: RiArrowRightSLine,
-    close: RiCloseLine,
-    copy: RiFileCopyLine,
-    homeSmile: RiHomeSmileFill,
-    imageAdd: RiImageAddFill,
-    info: RiInformationFill,
-    money: RiMoneyDollarCircleLine,
-    subtractLine: RiSubtractLine
+    xCircleSolid: XCircleSolidIcon
+};
+const iconsMap = {
+    ...remixiconMap,
+    ...commonRemixicons,
+    ...customIconsMap
 };
 export const iconNames = Object.keys(iconsMap);
 export function Icon({ name, ...props }) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icon/icon.tsx"],"sourcesContent":["import type {RemixiconComponentType} from '@remixicon/react';\nimport {\n  RiAddLine,\n  RiArrowRightSLine,\n  RiBookOpenFill,\n  RiCheckLine,\n  RiCloseLine,\n  RiFileCopyLine,\n  RiGithubFill,\n  RiGoogleFill,\n  RiHomeSmileFill,\n  RiImageAddFill,\n  RiInformationFill,\n  RiMicrosoftFill,\n  RiMoneyDollarCircleLine,\n  RiSubtractLine,\n} from '@remixicon/react';\nimport type {ComponentProps} from 'react';\nimport {\n  BadgeIcon,\n  CheckCircleSolidIcon,\n  CircleDottedLineIcon,\n  ComponentFillIcon,\n  ComponentLineIcon,\n  EllipseMiniSolidIcon,\n  InfoTooltipFillIcon,\n  ResizeIcon,\n  ShipfoxLogo,\n  SlackLogo,\n  SpinnerIcon,\n  StripeLogo,\n  ThunderIcon,\n  XCircleSolidIcon,\n} from './custom';\n\nconst iconsMap = {\n  google: RiGoogleFill,\n  microsoft: RiMicrosoftFill,\n  github: RiGithubFill,\n  shipfox: ShipfoxLogo,\n  slack: SlackLogo,\n  stripe: StripeLogo,\n  badge: BadgeIcon,\n  checkCircleSolid: CheckCircleSolidIcon,\n  circleDottedLine: CircleDottedLineIcon,\n  componentFill: ComponentFillIcon,\n  componentLine: ComponentLineIcon,\n  ellipseMiniSolid: EllipseMiniSolidIcon,\n  infoTooltipFill: InfoTooltipFillIcon,\n  resize: ResizeIcon,\n  spinner: SpinnerIcon,\n  thunder: ThunderIcon,\n  xCircleSolid: XCircleSolidIcon,\n  addLine: RiAddLine,\n  bookOpen: RiBookOpenFill,\n  check: RiCheckLine,\n  chevronRight: RiArrowRightSLine,\n  close: RiCloseLine,\n  copy: RiFileCopyLine,\n  homeSmile: RiHomeSmileFill,\n  imageAdd: RiImageAddFill,\n  info: RiInformationFill,\n  money: RiMoneyDollarCircleLine,\n  subtractLine: RiSubtractLine,\n} as const satisfies Record<string, RemixiconComponentType>;\n\nexport type IconName = keyof typeof iconsMap;\nexport const iconNames = Object.keys(iconsMap) as IconName[];\n\ntype BaseIconProps = ComponentProps<typeof RiGoogleFill>;\ntype IconProps = {name: IconName} & Omit<BaseIconProps, 'name'>;\n\nexport function Icon({name, ...props}: IconProps) {\n  const IconComponent = iconsMap[name];\n  return <IconComponent {...props} />;\n}\n"],"names":["RiAddLine","RiArrowRightSLine","RiBookOpenFill","RiCheckLine","RiCloseLine","RiFileCopyLine","RiGithubFill","RiGoogleFill","RiHomeSmileFill","RiImageAddFill","RiInformationFill","RiMicrosoftFill","RiMoneyDollarCircleLine","RiSubtractLine","BadgeIcon","CheckCircleSolidIcon","CircleDottedLineIcon","ComponentFillIcon","ComponentLineIcon","EllipseMiniSolidIcon","InfoTooltipFillIcon","ResizeIcon","ShipfoxLogo","SlackLogo","SpinnerIcon","StripeLogo","ThunderIcon","XCircleSolidIcon","iconsMap","google","microsoft","github","shipfox","slack","stripe","badge","checkCircleSolid","circleDottedLine","componentFill","componentLine","ellipseMiniSolid","infoTooltipFill","resize","spinner","thunder","xCircleSolid","addLine","bookOpen","check","chevronRight","close","copy","homeSmile","imageAdd","info","money","subtractLine","iconNames","Object","keys","Icon","name","props","IconComponent"],"mappings":";AACA,SACEA,SAAS,EACTC,iBAAiB,EACjBC,cAAc,EACdC,WAAW,EACXC,WAAW,EACXC,cAAc,EACdC,YAAY,EACZC,YAAY,EACZC,eAAe,EACfC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,uBAAuB,EACvBC,cAAc,QACT,mBAAmB;AAE1B,SACEC,SAAS,EACTC,oBAAoB,EACpBC,oBAAoB,EACpBC,iBAAiB,EACjBC,iBAAiB,EACjBC,oBAAoB,EACpBC,mBAAmB,EACnBC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,WAAW,EACXC,UAAU,EACVC,WAAW,EACXC,gBAAgB,QACX,WAAW;AAElB,MAAMC,WAAW;IACfC,QAAQtB;IACRuB,WAAWnB;IACXoB,QAAQzB;IACR0B,SAASV;IACTW,OAAOV;IACPW,QAAQT;IACRU,OAAOrB;IACPsB,kBAAkBrB;IAClBsB,kBAAkBrB;IAClBsB,eAAerB;IACfsB,eAAerB;IACfsB,kBAAkBrB;IAClBsB,iBAAiBrB;IACjBsB,QAAQrB;IACRsB,SAASnB;IACToB,SAASlB;IACTmB,cAAclB;IACdmB,SAAS9C;IACT+C,UAAU7C;IACV8C,OAAO7C;IACP8C,cAAchD;IACdiD,OAAO9C;IACP+C,MAAM9C;IACN+C,WAAW5C;IACX6C,UAAU5C;IACV6C,MAAM5C;IACN6C,OAAO3C;IACP4C,cAAc3C;AAChB;AAGA,OAAO,MAAM4C,YAAYC,OAAOC,IAAI,CAAC/B,UAAwB;AAK7D,OAAO,SAASgC,KAAK,EAACC,IAAI,EAAE,GAAGC,OAAiB;IAC9C,MAAMC,gBAAgBnC,QAAQ,CAACiC,KAAK;IACpC,qBAAO,KAACE;QAAe,GAAGD,KAAK;;AACjC"}
+{"version":3,"sources":["../../../src/components/icon/icon.tsx"],"sourcesContent":["import type {RemixiconComponentType} from '@remixicon/react';\nimport {\n  RiAddLine,\n  RiArrowRightSLine,\n  RiBookOpenFill,\n  RiCheckLine,\n  RiCloseLine,\n  RiFileCopyLine,\n  RiGithubFill,\n  RiGoogleFill,\n  RiHomeSmileFill,\n  RiImageAddFill,\n  RiInformationFill,\n  RiMicrosoftFill,\n  RiMoneyDollarCircleLine,\n  RiSubtractLine,\n} from '@remixicon/react';\nimport type {ComponentProps} from 'react';\nimport {\n  BadgeIcon,\n  CheckCircleSolidIcon,\n  CircleDottedLineIcon,\n  ComponentFillIcon,\n  ComponentLineIcon,\n  EllipseMiniSolidIcon,\n  InfoTooltipFillIcon,\n  ResizeIcon,\n  ShipfoxLogo,\n  SlackLogo,\n  SpinnerIcon,\n  StripeLogo,\n  ThunderIcon,\n  XCircleSolidIcon,\n} from './custom';\nimport {remixiconMap} from './remixicon-registry';\n\nconst commonRemixicons = {\n  addLine: RiAddLine,\n  close: RiCloseLine,\n  check: RiCheckLine,\n  copy: RiFileCopyLine,\n  info: RiInformationFill,\n  imageAdd: RiImageAddFill,\n  chevronRight: RiArrowRightSLine,\n  homeSmile: RiHomeSmileFill,\n  money: RiMoneyDollarCircleLine,\n  google: RiGoogleFill,\n  microsoft: RiMicrosoftFill,\n  github: RiGithubFill,\n  subtractLine: RiSubtractLine,\n  bookOpen: RiBookOpenFill,\n} as const satisfies Record<string, RemixiconComponentType>;\n\nconst customIconsMap = {\n  shipfox: ShipfoxLogo,\n  slack: SlackLogo,\n  stripe: StripeLogo,\n  badge: BadgeIcon,\n  checkCircleSolid: CheckCircleSolidIcon,\n  circleDottedLine: CircleDottedLineIcon,\n  componentFill: ComponentFillIcon,\n  componentLine: ComponentLineIcon,\n  ellipseMiniSolid: EllipseMiniSolidIcon,\n  infoTooltipFill: InfoTooltipFillIcon,\n  resize: ResizeIcon,\n  spinner: SpinnerIcon,\n  thunder: ThunderIcon,\n  xCircleSolid: XCircleSolidIcon,\n} as const satisfies Record<string, RemixiconComponentType>;\n\nconst iconsMap = {\n  ...remixiconMap,\n  ...commonRemixicons,\n  ...customIconsMap,\n} as Record<string, RemixiconComponentType> & typeof customIconsMap;\n\nexport type IconName = keyof typeof iconsMap;\nexport const iconNames = Object.keys(iconsMap) as IconName[];\n\ntype BaseIconProps = ComponentProps<RemixiconComponentType>;\ntype IconProps = {name: IconName} & Omit<BaseIconProps, 'name'>;\n\nexport function Icon({name, ...props}: IconProps) {\n  const IconComponent = iconsMap[name];\n  return <IconComponent {...props} />;\n}\n"],"names":["RiAddLine","RiArrowRightSLine","RiBookOpenFill","RiCheckLine","RiCloseLine","RiFileCopyLine","RiGithubFill","RiGoogleFill","RiHomeSmileFill","RiImageAddFill","RiInformationFill","RiMicrosoftFill","RiMoneyDollarCircleLine","RiSubtractLine","BadgeIcon","CheckCircleSolidIcon","CircleDottedLineIcon","ComponentFillIcon","ComponentLineIcon","EllipseMiniSolidIcon","InfoTooltipFillIcon","ResizeIcon","ShipfoxLogo","SlackLogo","SpinnerIcon","StripeLogo","ThunderIcon","XCircleSolidIcon","remixiconMap","commonRemixicons","addLine","close","check","copy","info","imageAdd","chevronRight","homeSmile","money","google","microsoft","github","subtractLine","bookOpen","customIconsMap","shipfox","slack","stripe","badge","checkCircleSolid","circleDottedLine","componentFill","componentLine","ellipseMiniSolid","infoTooltipFill","resize","spinner","thunder","xCircleSolid","iconsMap","iconNames","Object","keys","Icon","name","props","IconComponent"],"mappings":";AACA,SACEA,SAAS,EACTC,iBAAiB,EACjBC,cAAc,EACdC,WAAW,EACXC,WAAW,EACXC,cAAc,EACdC,YAAY,EACZC,YAAY,EACZC,eAAe,EACfC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,uBAAuB,EACvBC,cAAc,QACT,mBAAmB;AAE1B,SACEC,SAAS,EACTC,oBAAoB,EACpBC,oBAAoB,EACpBC,iBAAiB,EACjBC,iBAAiB,EACjBC,oBAAoB,EACpBC,mBAAmB,EACnBC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,WAAW,EACXC,UAAU,EACVC,WAAW,EACXC,gBAAgB,QACX,WAAW;AAClB,SAAQC,YAAY,QAAO,uBAAuB;AAElD,MAAMC,mBAAmB;IACvBC,SAAS9B;IACT+B,OAAO3B;IACP4B,OAAO7B;IACP8B,MAAM5B;IACN6B,MAAMxB;IACNyB,UAAU1B;IACV2B,cAAcnC;IACdoC,WAAW7B;IACX8B,OAAO1B;IACP2B,QAAQhC;IACRiC,WAAW7B;IACX8B,QAAQnC;IACRoC,cAAc7B;IACd8B,UAAUzC;AACZ;AAEA,MAAM0C,iBAAiB;IACrBC,SAASvB;IACTwB,OAAOvB;IACPwB,QAAQtB;IACRuB,OAAOlC;IACPmC,kBAAkBlC;IAClBmC,kBAAkBlC;IAClBmC,eAAelC;IACfmC,eAAelC;IACfmC,kBAAkBlC;IAClBmC,iBAAiBlC;IACjBmC,QAAQlC;IACRmC,SAAShC;IACTiC,SAAS/B;IACTgC,cAAc/B;AAChB;AAEA,MAAMgC,WAAW;IACf,GAAG/B,YAAY;IACf,GAAGC,gBAAgB;IACnB,GAAGe,cAAc;AACnB;AAGA,OAAO,MAAMgB,YAAYC,OAAOC,IAAI,CAACH,UAAwB;AAK7D,OAAO,SAASI,KAAK,EAACC,IAAI,EAAE,GAAGC,OAAiB;IAC9C,MAAMC,gBAAgBP,QAAQ,CAACK,KAAK;IACpC,qBAAO,KAACE;QAAe,GAAGD,KAAK;;AACjC"}

package/dist/components/icon/remixicon-registry.d.ts

@@ -0,0 +1,5 @@
+import type { RemixiconComponentType } from '@remixicon/react';
+export declare const remixiconMap: Record<string, RemixiconComponentType>;
+export type RemixIconName = keyof typeof remixiconMap;
+export declare const remixiconNames: RemixIconName[];
+//# sourceMappingURL=remixicon-registry.d.ts.map

package/dist/components/icon/remixicon-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remixicon-registry.d.ts","sourceRoot":"","sources":["../../../src/components/icon/remixicon-registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AAiB7D,eAAO,MAAM,YAAY,EAA8C,MAAM,CAC3E,MAAM,EACN,sBAAsB,CACvB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,YAAY,CAAC;AACtD,eAAO,MAAM,cAAc,EAAgC,aAAa,EAAE,CAAC"}

package/dist/components/icon/remixicon-registry.js

@@ -0,0 +1,14 @@
+import * as RemixIcons from '@remixicon/react';
+const remixiconEntries = Object.entries(RemixIcons).filter(([key, value])=>key.startsWith('Ri') && typeof value === 'function');
+function iconNameToKey(iconName) {
+    const withoutPrefix = iconName.slice(2);
+    return withoutPrefix.charAt(0).toLowerCase() + withoutPrefix.slice(1);
+}
+const remixiconMapEntries = remixiconEntries.map(([name, component])=>[
+        iconNameToKey(name),
+        component
+    ]);
+export const remixiconMap = Object.fromEntries(remixiconMapEntries);
+export const remixiconNames = Object.keys(remixiconMap);
+
+//# sourceMappingURL=remixicon-registry.js.map

package/dist/components/icon/remixicon-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/icon/remixicon-registry.ts"],"sourcesContent":["import type {RemixiconComponentType} from '@remixicon/react';\nimport * as RemixIcons from '@remixicon/react';\n\nconst remixiconEntries = Object.entries(RemixIcons).filter(\n  ([key, value]) => key.startsWith('Ri') && typeof value === 'function',\n) as Array<[string, RemixiconComponentType]>;\n\nfunction iconNameToKey(iconName: string): string {\n  const withoutPrefix = iconName.slice(2);\n  return withoutPrefix.charAt(0).toLowerCase() + withoutPrefix.slice(1);\n}\n\nconst remixiconMapEntries = remixiconEntries.map(([name, component]) => [\n  iconNameToKey(name),\n  component,\n]) as Array<[string, RemixiconComponentType]>;\n\nexport const remixiconMap = Object.fromEntries(remixiconMapEntries) as Record<\n  string,\n  RemixiconComponentType\n>;\n\nexport type RemixIconName = keyof typeof remixiconMap;\nexport const remixiconNames = Object.keys(remixiconMap) as RemixIconName[];\n"],"names":["RemixIcons","remixiconEntries","Object","entries","filter","key","value","startsWith","iconNameToKey","iconName","withoutPrefix","slice","charAt","toLowerCase","remixiconMapEntries","map","name","component","remixiconMap","fromEntries","remixiconNames","keys"],"mappings":"AACA,YAAYA,gBAAgB,mBAAmB;AAE/C,MAAMC,mBAAmBC,OAAOC,OAAO,CAACH,YAAYI,MAAM,CACxD,CAAC,CAACC,KAAKC,MAAM,GAAKD,IAAIE,UAAU,CAAC,SAAS,OAAOD,UAAU;AAG7D,SAASE,cAAcC,QAAgB;IACrC,MAAMC,gBAAgBD,SAASE,KAAK,CAAC;IACrC,OAAOD,cAAcE,MAAM,CAAC,GAAGC,WAAW,KAAKH,cAAcC,KAAK,CAAC;AACrE;AAEA,MAAMG,sBAAsBb,iBAAiBc,GAAG,CAAC,CAAC,CAACC,MAAMC,UAAU,GAAK;QACtET,cAAcQ;QACdC;KACD;AAED,OAAO,MAAMC,eAAehB,OAAOiB,WAAW,CAACL,qBAG7C;AAGF,OAAO,MAAMM,iBAAiBlB,OAAOmB,IAAI,CAACH,cAAiC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/react-ui",
   "license": "MIT",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/alert/alert.stories.tsx

@@ -1,5 +1,12 @@
+import {zodResolver} from '@hookform/resolvers/zod';
 import type {Meta, StoryObj} from '@storybook/react';
+import {Button} from 'components/button';
+import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage} from 'components/form';
+import {Input} from 'components/input';
 import {Header} from 'components/typography';
+import {useState} from 'react';
+import {useForm} from 'react-hook-form';
+import {z} from 'zod';
 import {
   Alert,
   AlertAction,
@@ -43,12 +50,106 @@ export const Default: Story = {
             <AlertAction>View</AlertAction>
           </AlertActions>
         </AlertContent>
-        <AlertClose variant={args.variant} />
+        <AlertClose />
       </Alert>
     );
   },
 };
 
+const validationFormSchema = z.object({
+  email: z.string().email('Please enter a valid email address'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+});
+
+type ValidationFormValues = z.infer<typeof validationFormSchema>;
+
+function ErrorValidationToasterExample() {
+  const [showError, setShowError] = useState(false);
+  const form = useForm<ValidationFormValues>({
+    resolver: zodResolver(validationFormSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+  });
+
+  function onSubmit(data: ValidationFormValues) {
+    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
+    console.log('Form submitted:', data);
+    setShowError(false);
+  }
+
+  function onError() {
+    setShowError(true);
+  }
+
+  const errors = form.formState.errors;
+  const errorCount = Object.keys(errors).length;
+  const errorMessage =
+    errorCount > 0
+      ? `Please fix ${errorCount} error${errorCount > 1 ? 's' : ''} before submitting.`
+      : '';
+
+  return (
+    <div className="flex flex-col gap-16 w-full max-w-md">
+      {errorCount > 0 && (
+        <Alert variant="error" open={showError} autoClose={5000} onOpenChange={setShowError}>
+          <AlertContent>
+            <AlertTitle>Validation Error</AlertTitle>
+            <AlertDescription>{errorMessage}</AlertDescription>
+            <AlertActions>
+              <AlertAction
+                onClick={() => {
+                  form.clearErrors();
+                  setShowError(false);
+                }}
+              >
+                Dismiss
+              </AlertAction>
+            </AlertActions>
+          </AlertContent>
+          <AlertClose />
+        </Alert>
+      )}
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit, onError)} className="space-y-8">
+          <FormField
+            control={form.control}
+            name="email"
+            render={({field}) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input type="email" placeholder="email@example.com" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="password"
+            render={({field}) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input type="password" placeholder="Enter password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button type="submit">Submit</Button>
+        </form>
+      </Form>
+    </div>
+  );
+}
+
+export const WithFormValidation: Story = {
+  render: () => <ErrorValidationToasterExample />,
+};
+
 export const DesignMock: Story = {
   render: () => {
     return (
@@ -67,7 +168,7 @@ export const DesignMock: Story = {
                   <AlertAction>View</AlertAction>
                 </AlertActions>
               </AlertContent>
-              <AlertClose variant={variant} />
+              <AlertClose />
             </Alert>
           ))}
         </div>