@spear-ai/spectral 1.15.0 → 1.15.2

package/dist/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","names":[],"sources":["../src/components/Accordion/Accordion.tsx"],"mappings":";;;;;;KAMY,kBAAA;AAAA,UAEF,kBAAA;EACR,UAAA,GAAa,kBAAA;EACb,QAAA,GAAW,SAAA;EACX,SAAA;EACA,aAAA;EACA,OAAA;AAAA;AAAA,UAGe,oBAAA,SAA6B,kBAAA;EAC5C,WAAA;EACA,YAAA;EACA,aAAA,IAAiB,KAAA;EACjB,IAAA;EACA,KAAA;AAAA;AAAA,UAGe,sBAAA,SAA+B,kBAAA;EAC9C,YAAA;EACA,aAAA,IAAiB,KAAA;EACjB,IAAA;EACA,KAAA;AAAA;AAAA,KAGU,cAAA,GAAiB,oBAAA,GAAuB,sBAAA;AAAA,KAE/C,kBAAA,IAAsB,KAAA,EAAO,cAAA;EAAmB,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,MAAsB,SAAA;AAAA,KAEhF,aAAA,GAAgB,kBAAA;EACnB,OAAA,SAAgB,gBAAA;EAChB,IAAA,SAAa,aAAA;EACb,OAAA,SAAgB,gBAAA;AAAA;AAAA;EAmEhB,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA,QAAgC,kBAAA,CAAmB,IAAA;EACpD,GAAA,GAAM,GAAA,CAAI,YAAA,QAAoB,kBAAA,CAAmB,IAAA;AAAA,IAClD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAQC,GAAA;EACA,SAAA;EACA,KAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,wBAAA,QAAgC,kBAAA,CAAmB,OAAA;EACpD,GAAA,GAAM,GAAA,CAAI,iBAAA;EACV,QAAA,GAAW,SAAA;EACX,KAAA,EAAO,SAAA;AAAA,IACR,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAsCC,GAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,wBAAA,QAAgC,kBAAA,CAAmB,OAAA;EACpD,GAAA,GAAM,GAAA,CAAI,YAAA,QAAoB,kBAAA,CAAmB,OAAA;AAAA,IAClD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;cAeY,SAAA,EAAW,aAAA"}
+{"version":3,"file":"Accordion.d.ts","names":[],"sources":["../src/components/Accordion/Accordion.tsx"],"mappings":";;;;;;KAMY,kBAAA;AAAA,UAEF,kBAAA;EACR,UAAA,GAAa,kBAAA;EACb,QAAA,GAAW,SAAA;EACX,SAAA;EACA,aAAA;EACA,OAAA;AAAA;AAAA,UAGe,oBAAA,SAA6B,kBAAA;EAC5C,WAAA;EACA,YAAA;EACA,aAAA,IAAiB,KAAA;EACjB,IAAA;EACA,KAAA;AAAA;AAAA,UAGe,sBAAA,SAA+B,kBAAA;EAC9C,YAAA;EACA,aAAA,IAAiB,KAAA;EACjB,IAAA;EACA,KAAA;AAAA;AAAA,KAGU,cAAA,GAAiB,oBAAA,GAAuB,sBAAA;AAAA,KAE/C,kBAAA,IAAsB,KAAA,EAAO,cAAA;EAAmB,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,MAAsB,SAAA;AAAA,KAEhF,aAAA,GAAgB,kBAAA;EACnB,OAAA,SAAgB,gBAAA;EAChB,IAAA,SAAa,aAAA;EACb,OAAA,SAAgB,gBAAA;AAAA;AAAA;EAmEhB,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA,QAAgC,kBAAA,CAAmB,IAAA;EACpD,GAAA,GAAM,GAAA,CAAI,YAAA,QAAoB,kBAAA,CAAmB,IAAA;AAAA,IAClD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAgBC,GAAA;EACA,SAAA;EACA,KAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,wBAAA,QAAgC,kBAAA,CAAmB,OAAA;EACpD,GAAA,GAAM,GAAA,CAAI,iBAAA;EACV,QAAA,GAAW,SAAA;EACX,KAAA,EAAO,SAAA;AAAA,IACR,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAsCC,GAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,wBAAA,QAAgC,kBAAA,CAAmB,OAAA;EACpD,GAAA,GAAM,GAAA,CAAI,YAAA,QAAoB,kBAAA,CAAmB,OAAA;AAAA,IAClD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;cAkBY,SAAA,EAAW,aAAA"}

package/dist/Accordion.js

@@ -10,7 +10,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
 const variantStyles = {
 	default: "shadow-none",
 	contained: "rounded-md border border-level-four",
-	separated: "rounded-none space-y-2"
+	separated: "rounded-none gap-2"
 };
 const itemStyles = {
 	default: "w-full py-4",
@@ -69,14 +69,14 @@ const AccordionTrigger = ({ ref, className, title, subtitle, ...props }) => {
 	return /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
 		className: "m-0 flex",
 		children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
-			className: cn("text-sm font-normal flex flex-1 items-center justify-between text-text-primary transition-all hover:no-underline", "disabled:cursor-not-allowed [&[data-state=open]>svg]:rotate-180", className),
+			className: cn("text-sm font-normal flex flex-1 items-center justify-between text-text-primary transition-colors hover:no-underline", "disabled:cursor-not-allowed [&[data-state=open]>svg]:rotate-180", className),
 			"data-slot": "accordion-trigger",
 			"data-testid": "spectral-accordion-trigger",
 			onClick: handleAccordionOpen,
 			ref: useMergedRef,
 			...props,
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "space-y-0.5 flex w-full flex-col text-start",
+				className: "gap-0.5 flex w-full flex-col text-start",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "text-base font-medium text-text-primary",
 					children: title

package/dist/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":[],"sources":["../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { ChevronDownIcon } from '@components/Icons'\nimport { useAccordionAutoScroll } from '@hooks/useAccordionAutoScroll'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { cn } from '@utils/twUtils'\nimport { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useRef, type ComponentPropsWithoutRef, type ComponentRef, type ReactNode, type Ref } from 'react'\n\nexport type AutoScrollBehavior = 'never' | 'mobile' | 'always'\n\ninterface BaseAccordionProps {\n  autoScroll?: AutoScrollBehavior\n  children?: ReactNode\n  className?: string\n  scrollPadding?: number\n  variant?: 'default' | 'contained' | 'separated'\n}\n\nexport interface AccordionSingleProps extends BaseAccordionProps {\n  collapsible?: boolean\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  type: 'single'\n  value?: string\n}\n\nexport interface AccordionMultipleProps extends BaseAccordionProps {\n  defaultValue?: string[]\n  onValueChange?: (value: string[]) => void\n  type: 'multiple'\n  value?: string[]\n}\n\nexport type AccordionProps = AccordionSingleProps | AccordionMultipleProps\n\ntype AccordionComponent = (props: AccordionProps & { ref?: Ref<HTMLDivElement> }) => ReactNode\n\ntype AccordionType = AccordionComponent & {\n  Content: typeof AccordionContent\n  Item: typeof AccordionItem\n  Trigger: typeof AccordionTrigger\n}\n\ninterface ScrollOptions {\n  autoScroll: AutoScrollBehavior\n  scrollPadding: number\n}\n\nconst variantStyles = {\n  default: 'shadow-none',\n  contained: 'rounded-md border border-level-four',\n  separated: 'rounded-none space-y-2',\n}\n\nconst itemStyles = {\n  default: 'w-full py-4',\n  contained: 'not-last:border-b border-level-four p-4',\n  separated: 'border border-level-four rounded-md p-4',\n}\n\nconst AccordionContext = createContext<{ variant: BaseAccordionProps['variant'] }>({ variant: 'default' })\n\nconst AccordionRoot = ({\n  className,\n  ref,\n  variant = 'default',\n  ...props\n}: AccordionProps & {\n  ref?: Ref<HTMLDivElement>\n}) => {\n  const { autoScroll = 'never', scrollPadding = -20, children, ...rest } = props\n\n  const accordionContext: ScrollOptions = {\n    autoScroll,\n    scrollPadding,\n  }\n\n  const rootProps = {\n    ...rest,\n    ref,\n  }\n\n  return (\n    <AccordionContext.Provider value={{ variant }}>\n      <AccordionPrimitive.Root\n        {...rootProps}\n        className={cn('accordion-wrapper flex flex-col', variantStyles[variant], className)}\n        data-auto-scroll={autoScroll}\n        data-scroll-options={JSON.stringify(accordionContext)}\n        data-scroll-padding={scrollPadding}\n        data-slot='accordion'\n        data-testid='spectral-accordion'\n        {...(props.type === 'single' ? { collapsible: true } : {})}\n      >\n        {Children.map(children, (child: ReactNode) => {\n          if (isValidElement(child)) {\n            return cloneElement(child, { variant } as { variant: typeof variant })\n          }\n          return child\n        })}\n      </AccordionPrimitive.Root>\n    </AccordionContext.Provider>\n  )\n}\nAccordionRoot.displayName = 'Accordion'\n\nexport const AccordionItem = ({\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> & {\n  ref?: Ref<ComponentRef<typeof AccordionPrimitive.Item>>\n}) => {\n  const { variant = 'default' } = useContext(AccordionContext)\n\n  return <AccordionPrimitive.Item className={cn('w-full', itemStyles[variant], className)} data-slot='accordion-item' data-testid='spectral-accordion-item' ref={ref} {...props} />\n}\nAccordionItem.displayName = 'AccordionItem'\n\nexport const AccordionTrigger = ({\n  ref,\n  className,\n  title,\n  subtitle,\n  ...props\n}: ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {\n  ref?: Ref<HTMLButtonElement>\n  subtitle?: ReactNode\n  title: ReactNode\n}) => {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const handleAccordionOpen = useAccordionAutoScroll(triggerRef)\n\n  const useMergedRef = useCallback(\n    (element: HTMLButtonElement) => {\n      if (typeof ref === 'function') {\n        ref(element)\n      } else if (ref) {\n        ref.current = element\n      }\n      triggerRef.current = element\n    },\n    [ref],\n  )\n\n  return (\n    <AccordionPrimitive.Header className='m-0 flex'>\n      <AccordionPrimitive.Trigger\n        className={cn('text-sm font-normal flex flex-1 items-center justify-between text-text-primary transition-all hover:no-underline', 'disabled:cursor-not-allowed [&[data-state=open]>svg]:rotate-180', className)}\n        data-slot='accordion-trigger'\n        data-testid='spectral-accordion-trigger'\n        onClick={handleAccordionOpen}\n        ref={useMergedRef}\n        {...props}\n      >\n        <div className='space-y-0.5 flex w-full flex-col text-start'>\n          <div className='text-base font-medium text-text-primary'>{title}</div>\n          {subtitle && <div className='text-sm font-normal text-text-secondary'>{subtitle}</div>}\n        </div>\n        <ChevronDownIcon className='shrink-0 transition-transform duration-200' />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\nAccordionTrigger.displayName = 'AccordionTrigger'\n\nexport const AccordionContent = ({\n  ref,\n  className,\n  children,\n  ...props\n}: ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> & {\n  ref?: Ref<ComponentRef<typeof AccordionPrimitive.Content>>\n}) => (\n  <AccordionPrimitive.Content\n    className={cn('pt-4 text-sm overflow-hidden motion-safe:data-[state=closed]:animate-accordion-up motion-safe:data-[state=open]:animate-accordion-down', className)}\n    data-slot='accordion-content'\n    data-testid='spectral-accordion-content'\n    ref={ref}\n    {...props}\n  >\n    <div className='px-1 pb-4 pt-0' data-slot='accordion-content-inner'>\n      {children}\n    </div>\n  </AccordionPrimitive.Content>\n)\nAccordionContent.displayName = 'AccordionContent'\n\nexport const Accordion: AccordionType = Object.assign(AccordionRoot, {\n  Content: AccordionContent,\n  Item: AccordionItem,\n  Trigger: AccordionTrigger,\n})\n"],"mappings":";;;;;;;;;AA8CA,MAAM,gBAAgB;CACpB,SAAS;CACT,WAAW;CACX,WAAW;CACZ;AAED,MAAM,aAAa;CACjB,SAAS;CACT,WAAW;CACX,WAAW;CACZ;AAED,MAAM,mBAAmB,cAA0D,EAAE,SAAS,WAAW,CAAC;AAE1G,MAAM,iBAAiB,EACrB,WACA,KACA,UAAU,WACV,GAAG,YAGC;CACJ,MAAM,EAAE,aAAa,SAAS,gBAAgB,KAAK,UAAU,GAAG,SAAS;CAEzE,MAAM,mBAAkC;EACtC;EACA;EACD;CAED,MAAM,YAAY;EAChB,GAAG;EACH;EACD;AAED,QACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO,EAAE,SAAS;YAC3C,oBAAC,mBAAmB,MAApB;GACE,GAAI;GACJ,WAAW,GAAG,mCAAmC,cAAc,UAAU,UAAU;GACnF,oBAAkB;GAClB,uBAAqB,KAAK,UAAU,iBAAiB;GACrD,uBAAqB;GACrB,aAAU;GACV,eAAY;GACZ,GAAK,MAAM,SAAS,WAAW,EAAE,aAAa,MAAM,GAAG,EAAE;aAExD,SAAS,IAAI,WAAW,UAAqB;AAC5C,QAAI,eAAe,MAAM,CACvB,QAAO,aAAa,OAAO,EAAE,SAAS,CAAgC;AAExE,WAAO;KACP;GACsB;EACA;;AAGhC,cAAc,cAAc;AAE5B,MAAa,iBAAiB,EAC5B,WACA,KACA,GAAG,YAGC;CACJ,MAAM,EAAE,UAAU,cAAc,WAAW,iBAAiB;AAE5D,QAAO,oBAAC,mBAAmB,MAApB;EAAyB,WAAW,GAAG,UAAU,WAAW,UAAU,UAAU;EAAE,aAAU;EAAiB,eAAY;EAA+B;EAAK,GAAI;EAAS;;AAEnL,cAAc,cAAc;AAE5B,MAAa,oBAAoB,EAC/B,KACA,WACA,OACA,UACA,GAAG,YAKC;CACJ,MAAM,aAAa,OAA0B,KAAK;CAClD,MAAM,sBAAsB,uBAAuB,WAAW;CAE9D,MAAM,eAAe,aAClB,YAA+B;AAC9B,MAAI,OAAO,QAAQ,WACjB,KAAI,QAAQ;WACH,IACT,KAAI,UAAU;AAEhB,aAAW,UAAU;IAEvB,CAAC,IAAI,CACN;AAED,QACE,oBAAC,mBAAmB,QAApB;EAA2B,WAAU;YACnC,qBAAC,mBAAmB,SAApB;GACE,WAAW,GAAG,oHAAoH,mEAAmE,UAAU;GAC/M,aAAU;GACV,eAAY;GACZ,SAAS;GACT,KAAK;GACL,GAAI;aANN,CAQE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eAA2C;KAAY,GACrE,YAAY,oBAAC,OAAD;KAAK,WAAU;eAA2C;KAAe,EAClF;OACN,oBAAC,iBAAD,EAAiB,WAAU,8CAA+C,EAC/C;;EACH;;AAGhC,iBAAiB,cAAc;AAE/B,MAAa,oBAAoB,EAC/B,KACA,WACA,UACA,GAAG,YAIH,oBAAC,mBAAmB,SAApB;CACE,WAAW,GAAG,0IAA0I,UAAU;CAClK,aAAU;CACV,eAAY;CACP;CACL,GAAI;WAEJ,oBAAC,OAAD;EAAK,WAAU;EAAiB,aAAU;EACvC;EACG;CACqB;AAE/B,iBAAiB,cAAc;AAE/B,MAAa,YAA2B,OAAO,OAAO,eAAe;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACV,CAAC"}
+{"version":3,"file":"Accordion.js","names":[],"sources":["../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { ChevronDownIcon } from '@components/Icons'\nimport { useAccordionAutoScroll } from '@hooks/useAccordionAutoScroll'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { cn } from '@utils/twUtils'\nimport { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useRef, type ComponentPropsWithoutRef, type ComponentRef, type ReactNode, type Ref } from 'react'\n\nexport type AutoScrollBehavior = 'never' | 'mobile' | 'always'\n\ninterface BaseAccordionProps {\n  autoScroll?: AutoScrollBehavior\n  children?: ReactNode\n  className?: string\n  scrollPadding?: number\n  variant?: 'default' | 'contained' | 'separated'\n}\n\nexport interface AccordionSingleProps extends BaseAccordionProps {\n  collapsible?: boolean\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  type: 'single'\n  value?: string\n}\n\nexport interface AccordionMultipleProps extends BaseAccordionProps {\n  defaultValue?: string[]\n  onValueChange?: (value: string[]) => void\n  type: 'multiple'\n  value?: string[]\n}\n\nexport type AccordionProps = AccordionSingleProps | AccordionMultipleProps\n\ntype AccordionComponent = (props: AccordionProps & { ref?: Ref<HTMLDivElement> }) => ReactNode\n\ntype AccordionType = AccordionComponent & {\n  Content: typeof AccordionContent\n  Item: typeof AccordionItem\n  Trigger: typeof AccordionTrigger\n}\n\ninterface ScrollOptions {\n  autoScroll: AutoScrollBehavior\n  scrollPadding: number\n}\n\nconst variantStyles = {\n  default: 'shadow-none',\n  contained: 'rounded-md border border-level-four',\n  separated: 'rounded-none gap-2',\n}\n\nconst itemStyles = {\n  default: 'w-full py-4',\n  contained: 'not-last:border-b border-level-four p-4',\n  separated: 'border border-level-four rounded-md p-4',\n}\n\nconst AccordionContext = createContext<{ variant: BaseAccordionProps['variant'] }>({ variant: 'default' })\n\nconst AccordionRoot = ({\n  className,\n  ref,\n  variant = 'default',\n  ...props\n}: AccordionProps & {\n  ref?: Ref<HTMLDivElement>\n}) => {\n  const { autoScroll = 'never', scrollPadding = -20, children, ...rest } = props\n\n  const accordionContext: ScrollOptions = {\n    autoScroll,\n    scrollPadding,\n  }\n\n  const rootProps = {\n    ...rest,\n    ref,\n  }\n\n  return (\n    <AccordionContext.Provider value={{ variant }}>\n      <AccordionPrimitive.Root\n        {...rootProps}\n        className={cn('accordion-wrapper flex flex-col', variantStyles[variant], className)}\n        data-auto-scroll={autoScroll}\n        data-scroll-options={JSON.stringify(accordionContext)}\n        data-scroll-padding={scrollPadding}\n        data-slot='accordion'\n        data-testid='spectral-accordion'\n        {...(props.type === 'single' ? { collapsible: true } : {})}\n      >\n        {Children.map(children, (child: ReactNode) => {\n          if (isValidElement(child)) {\n            return cloneElement(child, { variant } as { variant: typeof variant })\n          }\n          return child\n        })}\n      </AccordionPrimitive.Root>\n    </AccordionContext.Provider>\n  )\n}\nAccordionRoot.displayName = 'Accordion'\n\nexport const AccordionItem = ({\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> & {\n  ref?: Ref<ComponentRef<typeof AccordionPrimitive.Item>>\n}) => {\n  const { variant = 'default' } = useContext(AccordionContext)\n\n  return (\n    <AccordionPrimitive.Item\n      className={cn('w-full', itemStyles[variant], className)}\n      data-slot='accordion-item'\n      data-testid='spectral-accordion-item'\n      ref={ref}\n      {...props}\n    />\n  )\n}\nAccordionItem.displayName = 'AccordionItem'\n\nexport const AccordionTrigger = ({\n  ref,\n  className,\n  title,\n  subtitle,\n  ...props\n}: ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {\n  ref?: Ref<HTMLButtonElement>\n  subtitle?: ReactNode\n  title: ReactNode\n}) => {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const handleAccordionOpen = useAccordionAutoScroll(triggerRef)\n\n  const useMergedRef = useCallback(\n    (element: HTMLButtonElement) => {\n      if (typeof ref === 'function') {\n        ref(element)\n      } else if (ref) {\n        ref.current = element\n      }\n      triggerRef.current = element\n    },\n    [ref],\n  )\n\n  return (\n    <AccordionPrimitive.Header className='m-0 flex'>\n      <AccordionPrimitive.Trigger\n        className={cn('text-sm font-normal flex flex-1 items-center justify-between text-text-primary transition-colors hover:no-underline', 'disabled:cursor-not-allowed [&[data-state=open]>svg]:rotate-180', className)}\n        data-slot='accordion-trigger'\n        data-testid='spectral-accordion-trigger'\n        onClick={handleAccordionOpen}\n        ref={useMergedRef}\n        {...props}\n      >\n        <div className='gap-0.5 flex w-full flex-col text-start'>\n          <div className='text-base font-medium text-text-primary'>{title}</div>\n          {subtitle && <div className='text-sm font-normal text-text-secondary'>{subtitle}</div>}\n        </div>\n        <ChevronDownIcon className='shrink-0 transition-transform duration-200' />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\nAccordionTrigger.displayName = 'AccordionTrigger'\n\nexport const AccordionContent = ({\n  ref,\n  className,\n  children,\n  ...props\n}: ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> & {\n  ref?: Ref<ComponentRef<typeof AccordionPrimitive.Content>>\n}) => (\n  <AccordionPrimitive.Content\n    className={cn('pt-4 text-sm overflow-hidden motion-safe:data-[state=closed]:animate-accordion-up motion-safe:data-[state=open]:animate-accordion-down', className)}\n    data-slot='accordion-content'\n    data-testid='spectral-accordion-content'\n    ref={ref}\n    {...props}\n  >\n    <div\n      className='px-1 pb-4 pt-0'\n      data-slot='accordion-content-inner'\n    >\n      {children}\n    </div>\n  </AccordionPrimitive.Content>\n)\nAccordionContent.displayName = 'AccordionContent'\n\nexport const Accordion: AccordionType = Object.assign(AccordionRoot, {\n  Content: AccordionContent,\n  Item: AccordionItem,\n  Trigger: AccordionTrigger,\n})\n"],"mappings":";;;;;;;;;AA8CA,MAAM,gBAAgB;CACpB,SAAS;CACT,WAAW;CACX,WAAW;CACZ;AAED,MAAM,aAAa;CACjB,SAAS;CACT,WAAW;CACX,WAAW;CACZ;AAED,MAAM,mBAAmB,cAA0D,EAAE,SAAS,WAAW,CAAC;AAE1G,MAAM,iBAAiB,EACrB,WACA,KACA,UAAU,WACV,GAAG,YAGC;CACJ,MAAM,EAAE,aAAa,SAAS,gBAAgB,KAAK,UAAU,GAAG,SAAS;CAEzE,MAAM,mBAAkC;EACtC;EACA;EACD;CAED,MAAM,YAAY;EAChB,GAAG;EACH;EACD;AAED,QACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO,EAAE,SAAS;YAC3C,oBAAC,mBAAmB,MAApB;GACE,GAAI;GACJ,WAAW,GAAG,mCAAmC,cAAc,UAAU,UAAU;GACnF,oBAAkB;GAClB,uBAAqB,KAAK,UAAU,iBAAiB;GACrD,uBAAqB;GACrB,aAAU;GACV,eAAY;GACZ,GAAK,MAAM,SAAS,WAAW,EAAE,aAAa,MAAM,GAAG,EAAE;aAExD,SAAS,IAAI,WAAW,UAAqB;AAC5C,QAAI,eAAe,MAAM,CACvB,QAAO,aAAa,OAAO,EAAE,SAAS,CAAgC;AAExE,WAAO;KACP;GACsB;EACA;;AAGhC,cAAc,cAAc;AAE5B,MAAa,iBAAiB,EAC5B,WACA,KACA,GAAG,YAGC;CACJ,MAAM,EAAE,UAAU,cAAc,WAAW,iBAAiB;AAE5D,QACE,oBAAC,mBAAmB,MAApB;EACE,WAAW,GAAG,UAAU,WAAW,UAAU,UAAU;EACvD,aAAU;EACV,eAAY;EACP;EACL,GAAI;EACJ;;AAGN,cAAc,cAAc;AAE5B,MAAa,oBAAoB,EAC/B,KACA,WACA,OACA,UACA,GAAG,YAKC;CACJ,MAAM,aAAa,OAA0B,KAAK;CAClD,MAAM,sBAAsB,uBAAuB,WAAW;CAE9D,MAAM,eAAe,aAClB,YAA+B;AAC9B,MAAI,OAAO,QAAQ,WACjB,KAAI,QAAQ;WACH,IACT,KAAI,UAAU;AAEhB,aAAW,UAAU;IAEvB,CAAC,IAAI,CACN;AAED,QACE,oBAAC,mBAAmB,QAApB;EAA2B,WAAU;YACnC,qBAAC,mBAAmB,SAApB;GACE,WAAW,GAAG,uHAAuH,mEAAmE,UAAU;GAClN,aAAU;GACV,eAAY;GACZ,SAAS;GACT,KAAK;GACL,GAAI;aANN,CAQE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eAA2C;KAAY,GACrE,YAAY,oBAAC,OAAD;KAAK,WAAU;eAA2C;KAAe,EAClF;OACN,oBAAC,iBAAD,EAAiB,WAAU,8CAA+C,EAC/C;;EACH;;AAGhC,iBAAiB,cAAc;AAE/B,MAAa,oBAAoB,EAC/B,KACA,WACA,UACA,GAAG,YAIH,oBAAC,mBAAmB,SAApB;CACE,WAAW,GAAG,0IAA0I,UAAU;CAClK,aAAU;CACV,eAAY;CACP;CACL,GAAI;WAEJ,oBAAC,OAAD;EACE,WAAU;EACV,aAAU;EAET;EACG;CACqB;AAE/B,iBAAiB,cAAc;AAE/B,MAAa,YAA2B,OAAO,OAAO,eAAe;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACV,CAAC"}

package/dist/Alert/AlertBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertBase.d.ts","names":[],"sources":["../../src/components/Alert/AlertBase.tsx"],"mappings":";;;;;;;;cAMM,aAAA,GAAa,KAAA;;IAgBlB,iCAAA,CAAA,SAAA;AAAA,KAUI,YAAA;AAAA;EAGH,GAAA;EACA,SAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,cAAA,CAAe,cAAA,IAChB,YAAA,QAAoB,aAAA;EAClB,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAID,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,cAAA,CAAe,cAAA;EAChB,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAIC,SAAA;EACA,GAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,cAAA,CAAe,cAAA;EAChB,GAAA,GAAM,GAAA,CAAI,cAAA;EACV,OAAA,EAAS,YAAA;AAAA,IACV,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAIC,SAAA;EACA,GAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,cAAA,CAAe,cAAA;EAChB,GAAA,GAAM,GAAA,CAAI,cAAA;EACV,OAAA,EAAS,YAAA;AAAA,IACV,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAIC,SAAA;EACA,GAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,cAAA,CAAe,aAAA;EAChB,GAAA,GAAM,GAAA,CAAI,aAAA;EACV,OAAA,EAAS,YAAA;AAAA,IACV,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;UAcS,gBAAA;EACR,QAAA,EAAU,SAAA;EACV,SAAA,GAAY,OAAA,GAAU,gBAAA;AAAA;AAAA,cAGX,WAAA;EAAW,QAAA;EAAA;AAAA,GAA6B,gBAAA,KAAgB,OAAA,CAAA,WAAA"}
+{"version":3,"file":"AlertBase.d.ts","names":[],"sources":["../../src/components/Alert/AlertBase.tsx"],"mappings":";;;;;;;;cAMM,aAAA,GAAa,KAAA;;IAgBlB,iCAAA,CAAA,SAAA;AAAA,KAUI,YAAA;AAAA;EAGH,GAAA;EACA,SAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,cAAA,CAAe,cAAA,IAChB,YAAA,QAAoB,aAAA;EAClB,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAaD,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,cAAA,CAAe,cAAA;EAChB,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAWC,SAAA;EACA,GAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,cAAA,CAAe,cAAA;EAChB,GAAA,GAAM,GAAA,CAAI,cAAA;EACV,OAAA,EAAS,YAAA;AAAA,IACV,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAYC,SAAA;EACA,GAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,cAAA,CAAe,cAAA;EAChB,GAAA,GAAM,GAAA,CAAI,cAAA;EACV,OAAA,EAAS,YAAA;AAAA,IACV,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAYC,SAAA;EACA,GAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,cAAA,CAAe,aAAA;EAChB,GAAA,GAAM,GAAA,CAAI,aAAA;EACV,OAAA,EAAS,YAAA;AAAA,IACV,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;UAcS,gBAAA;EACR,QAAA,EAAU,SAAA;EACV,SAAA,GAAY,OAAA,GAAU,gBAAA;AAAA;AAAA,cAGX,WAAA;EAAW,QAAA;EAAA;AAAA,GAA6B,gBAAA,KAAgB,OAAA,CAAA,WAAA"}

package/dist/Alert/AlertBase.js

@@ -7,7 +7,7 @@ import { cva } from "class-variance-authority";
 import { createPortal } from "react-dom";
 
 //#region src/components/Alert/AlertBase.tsx
-const alertVariants = cva(`top-2 max-w-md rounded-md px-4 py-3 text-sm gap-y-1 translate-y-0 fixed left-1/2 z-50 flex w-full -translate-x-1/2 scale-100 transform flex-col border opacity-100 transition-all duration-300 ease-in-out motion-safe:duration-300 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-top-full`, {
+const alertVariants = cva(`top-2 max-w-md rounded-md px-4 py-3 text-sm gap-y-1 translate-y-0 fixed left-1/2 z-50 flex w-full -translate-x-1/2 scale-100 transform flex-col border opacity-100 transition-opacity duration-200 ease-out motion-safe:duration-200 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-top-full`, {
 	variants: { variant: {
 		default: "border-alert-border bg-alert-bg",
 		success: "border-alert-success-border bg-alert-success-bg",

package/dist/Alert/AlertBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertBase.js","names":[],"sources":["../../src/components/Alert/AlertBase.tsx"],"sourcesContent":["import { CloseIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { useEffect, useState, type HTMLAttributes, type ReactNode, type Ref } from 'react'\nimport { createPortal } from 'react-dom'\n\nconst alertVariants = cva(\n  `top-2 max-w-md rounded-md px-4 py-3 text-sm gap-y-1 translate-y-0 fixed left-1/2 z-50 flex w-full -translate-x-1/2 scale-100 transform flex-col border opacity-100 transition-all duration-300 ease-in-out motion-safe:duration-300 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-top-full`,\n  {\n    variants: {\n      variant: {\n        default: 'border-alert-border bg-alert-bg',\n        success: 'border-alert-success-border bg-alert-success-bg',\n        warning: 'border-alert-warning-border bg-alert-warning-bg',\n        danger: 'border-alert-danger-border bg-alert-danger-bg',\n        info: 'border-alert-info-border bg-alert-info-bg',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nconst variantColors = {\n  success: 'text-alert-success-text [&_p]:text-alert-success-text',\n  warning: 'text-alert-warning-text [&_p]:text-alert-warning-text',\n  danger: 'text-alert-danger-text [&_p]:text-alert-danger-text',\n  info: 'text-alert-info-text [&_p]:text-alert-info-text',\n  default: 'text-alert-text [&_p]:text-alert-text',\n}\n\ntype AlertVariant = 'default' | 'success' | 'warning' | 'danger' | 'info'\n\nexport const AlertBase = ({\n  ref,\n  className,\n  variant,\n  ...props\n}: HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof alertVariants> & {\n    ref?: Ref<HTMLDivElement>\n  }) => <div className={cn(alertVariants({ variant }), className)} data-slot='alert' data-testid='spectral-alert' ref={ref} role='alert' {...props} />\nAlertBase.displayName = 'AlertBase'\n\nexport const AlertHeader = ({\n  className,\n  ref,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & {\n  ref?: Ref<HTMLDivElement>\n}) => <div className={cn('gap-2 [&>svg]:size-6 flex items-center [&>svg]:shrink-0', className)} data-slot='alert-header' ref={ref} {...props} />\nAlertHeader.displayName = 'AlertHeader'\n\nexport const AlertTitle = ({\n  className,\n  ref,\n  variant,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & {\n  ref?: Ref<HTMLDivElement>\n  variant: AlertVariant\n}) => <div className={cn(variantColors[variant], 'font-semibold text-base tracking-tight line-clamp-1 flex-1', className)} data-slot='alert-title' data-testid='spectral-alert-title' ref={ref} {...props} />\nAlertTitle.displayName = 'AlertTitle'\n\nexport const AlertDescription = ({\n  className,\n  ref,\n  variant,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & {\n  ref?: Ref<HTMLDivElement>\n  variant: AlertVariant\n}) => <div className={cn(variantColors[variant], 'gap-1 text-sm [&_p]:leading-relaxed grid justify-items-start', className)} data-slot='alert-description' data-testid='spectral-alert-description' ref={ref} {...props} />\nAlertDescription.displayName = 'AlertDescription'\n\nexport const AlertCloseButton = ({\n  className,\n  ref,\n  variant,\n  ...props\n}: HTMLAttributes<SVGSVGElement> & {\n  ref?: Ref<SVGSVGElement>\n  variant: AlertVariant\n}) => (\n  <CloseIcon\n    aria-label='Close alert'\n    className={cn(variantColors[variant], 'rounded shrink-0 cursor-pointer outline-transparent focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-text-secondary', className)}\n    data-slot='close-icon'\n    data-testid='spectral-alert-close-button'\n    ref={ref}\n    size={20}\n    tabIndex={0}\n    {...props}\n  />\n)\nAlertCloseButton.displayName = 'AlertCloseButton'\n\ninterface AlertPortalProps {\n  children: ReactNode\n  container?: Element | DocumentFragment\n}\n\nexport const AlertPortal = ({ children, container }: AlertPortalProps) => {\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n    return () => setMounted(false)\n  }, [])\n\n  if (!mounted) return null\n\n  return createPortal(children, container ?? document.body)\n}\n"],"mappings":";;;;;;;;;AAMA,MAAM,gBAAgB,IACpB,qTACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACP,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAED,MAAM,gBAAgB;CACpB,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,SAAS;CACV;AAID,MAAa,aAAa,EACxB,KACA,WACA,SACA,GAAG,YAIG,oBAAC,OAAD;CAAK,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;CAAE,aAAU;CAAQ,eAAY;CAAsB;CAAK,MAAK;CAAQ,GAAI;CAAS;AACtJ,UAAU,cAAc;AAExB,MAAa,eAAe,EAC1B,WACA,KACA,GAAG,YAGC,oBAAC,OAAD;CAAK,WAAW,GAAG,2DAA2D,UAAU;CAAE,aAAU;CAAoB;CAAK,GAAI;CAAS;AAChJ,YAAY,cAAc;AAE1B,MAAa,cAAc,EACzB,WACA,KACA,SACA,GAAG,YAIC,oBAAC,OAAD;CAAK,WAAW,GAAG,cAAc,UAAU,8DAA8D,UAAU;CAAE,aAAU;CAAc,eAAY;CAA4B;CAAK,GAAI;CAAS;AAC7M,WAAW,cAAc;AAEzB,MAAa,oBAAoB,EAC/B,WACA,KACA,SACA,GAAG,YAIC,oBAAC,OAAD;CAAK,WAAW,GAAG,cAAc,UAAU,gEAAgE,UAAU;CAAE,aAAU;CAAoB,eAAY;CAAkC;CAAK,GAAI;CAAS;AAC3N,iBAAiB,cAAc;AAE/B,MAAa,oBAAoB,EAC/B,WACA,KACA,SACA,GAAG,YAKH,oBAAC,WAAD;CACE,cAAW;CACX,WAAW,GAAG,cAAc,UAAU,mJAAmJ,UAAU;CACnM,aAAU;CACV,eAAY;CACP;CACL,MAAM;CACN,UAAU;CACV,GAAI;CACJ;AAEJ,iBAAiB,cAAc;AAO/B,MAAa,eAAe,EAAE,UAAU,gBAAkC;CACxE,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAE7C,iBAAgB;AACd,aAAW,KAAK;AAChB,eAAa,WAAW,MAAM;IAC7B,EAAE,CAAC;AAEN,KAAI,CAAC,QAAS,QAAO;AAErB,QAAO,aAAa,UAAU,aAAa,SAAS,KAAK"}
+{"version":3,"file":"AlertBase.js","names":[],"sources":["../../src/components/Alert/AlertBase.tsx"],"sourcesContent":["import { CloseIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { useEffect, useState, type HTMLAttributes, type ReactNode, type Ref } from 'react'\nimport { createPortal } from 'react-dom'\n\nconst alertVariants = cva(\n  `top-2 max-w-md rounded-md px-4 py-3 text-sm gap-y-1 translate-y-0 fixed left-1/2 z-50 flex w-full -translate-x-1/2 scale-100 transform flex-col border opacity-100 transition-opacity duration-200 ease-out motion-safe:duration-200 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-top-full`,\n  {\n    variants: {\n      variant: {\n        default: 'border-alert-border bg-alert-bg',\n        success: 'border-alert-success-border bg-alert-success-bg',\n        warning: 'border-alert-warning-border bg-alert-warning-bg',\n        danger: 'border-alert-danger-border bg-alert-danger-bg',\n        info: 'border-alert-info-border bg-alert-info-bg',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nconst variantColors = {\n  success: 'text-alert-success-text [&_p]:text-alert-success-text',\n  warning: 'text-alert-warning-text [&_p]:text-alert-warning-text',\n  danger: 'text-alert-danger-text [&_p]:text-alert-danger-text',\n  info: 'text-alert-info-text [&_p]:text-alert-info-text',\n  default: 'text-alert-text [&_p]:text-alert-text',\n}\n\ntype AlertVariant = 'default' | 'success' | 'warning' | 'danger' | 'info'\n\nexport const AlertBase = ({\n  ref,\n  className,\n  variant,\n  ...props\n}: HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof alertVariants> & {\n    ref?: Ref<HTMLDivElement>\n  }) => (\n  <div\n    className={cn(alertVariants({ variant }), className)}\n    data-slot='alert'\n    data-testid='spectral-alert'\n    ref={ref}\n    role='alert'\n    {...props}\n  />\n)\nAlertBase.displayName = 'AlertBase'\n\nexport const AlertHeader = ({\n  className,\n  ref,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & {\n  ref?: Ref<HTMLDivElement>\n}) => (\n  <div\n    className={cn('gap-2 [&>svg]:size-6 flex items-center [&>svg]:shrink-0', className)}\n    data-slot='alert-header'\n    ref={ref}\n    {...props}\n  />\n)\nAlertHeader.displayName = 'AlertHeader'\n\nexport const AlertTitle = ({\n  className,\n  ref,\n  variant,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & {\n  ref?: Ref<HTMLDivElement>\n  variant: AlertVariant\n}) => (\n  <div\n    className={cn(variantColors[variant], 'font-semibold text-base tracking-tight line-clamp-1 flex-1', className)}\n    data-slot='alert-title'\n    data-testid='spectral-alert-title'\n    ref={ref}\n    {...props}\n  />\n)\nAlertTitle.displayName = 'AlertTitle'\n\nexport const AlertDescription = ({\n  className,\n  ref,\n  variant,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & {\n  ref?: Ref<HTMLDivElement>\n  variant: AlertVariant\n}) => (\n  <div\n    className={cn(variantColors[variant], 'gap-1 text-sm [&_p]:leading-relaxed grid justify-items-start', className)}\n    data-slot='alert-description'\n    data-testid='spectral-alert-description'\n    ref={ref}\n    {...props}\n  />\n)\nAlertDescription.displayName = 'AlertDescription'\n\nexport const AlertCloseButton = ({\n  className,\n  ref,\n  variant,\n  ...props\n}: HTMLAttributes<SVGSVGElement> & {\n  ref?: Ref<SVGSVGElement>\n  variant: AlertVariant\n}) => (\n  <CloseIcon\n    aria-label='Close alert'\n    className={cn(variantColors[variant], 'rounded shrink-0 cursor-pointer outline-transparent focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-text-secondary', className)}\n    data-slot='close-icon'\n    data-testid='spectral-alert-close-button'\n    ref={ref}\n    size={20}\n    tabIndex={0}\n    {...props}\n  />\n)\nAlertCloseButton.displayName = 'AlertCloseButton'\n\ninterface AlertPortalProps {\n  children: ReactNode\n  container?: Element | DocumentFragment\n}\n\nexport const AlertPortal = ({ children, container }: AlertPortalProps) => {\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n    return () => setMounted(false)\n  }, [])\n\n  if (!mounted) return null\n\n  return createPortal(children, container ?? document.body)\n}\n"],"mappings":";;;;;;;;;AAMA,MAAM,gBAAgB,IACpB,sTACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACP,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAED,MAAM,gBAAgB;CACpB,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,SAAS;CACV;AAID,MAAa,aAAa,EACxB,KACA,WACA,SACA,GAAG,YAKH,oBAAC,OAAD;CACE,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;CACpD,aAAU;CACV,eAAY;CACP;CACL,MAAK;CACL,GAAI;CACJ;AAEJ,UAAU,cAAc;AAExB,MAAa,eAAe,EAC1B,WACA,KACA,GAAG,YAIH,oBAAC,OAAD;CACE,WAAW,GAAG,2DAA2D,UAAU;CACnF,aAAU;CACL;CACL,GAAI;CACJ;AAEJ,YAAY,cAAc;AAE1B,MAAa,cAAc,EACzB,WACA,KACA,SACA,GAAG,YAKH,oBAAC,OAAD;CACE,WAAW,GAAG,cAAc,UAAU,8DAA8D,UAAU;CAC9G,aAAU;CACV,eAAY;CACP;CACL,GAAI;CACJ;AAEJ,WAAW,cAAc;AAEzB,MAAa,oBAAoB,EAC/B,WACA,KACA,SACA,GAAG,YAKH,oBAAC,OAAD;CACE,WAAW,GAAG,cAAc,UAAU,gEAAgE,UAAU;CAChH,aAAU;CACV,eAAY;CACP;CACL,GAAI;CACJ;AAEJ,iBAAiB,cAAc;AAE/B,MAAa,oBAAoB,EAC/B,WACA,KACA,SACA,GAAG,YAKH,oBAAC,WAAD;CACE,cAAW;CACX,WAAW,GAAG,cAAc,UAAU,mJAAmJ,UAAU;CACnM,aAAU;CACV,eAAY;CACP;CACL,MAAM;CACN,UAAU;CACV,GAAI;CACJ;AAEJ,iBAAiB,cAAc;AAO/B,MAAa,eAAe,EAAE,UAAU,gBAAkC;CACxE,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAE7C,iBAAgB;AACd,aAAW,KAAK;AAChB,eAAa,WAAW,MAAM;IAC7B,EAAE,CAAC;AAEN,KAAI,CAAC,QAAS,QAAO;AAErB,QAAO,aAAa,UAAU,aAAa,SAAS,KAAK"}

package/dist/Alert.js

@@ -24,7 +24,7 @@ const Alert = ({ className, description, icon, id, onClose, title, variant = "de
 			setTimeout(() => {
 				if (wrapperRef.current) wrapperRef.current.style.display = "none";
 				onClose?.();
-			}, 300);
+			}, 200);
 		}
 	}, [onClose]);
 	useEffect(() => {
@@ -43,8 +43,8 @@ const Alert = ({ className, description, icon, id, onClose, title, variant = "de
 		closeAlert();
 	}, [closeAlert]);
 	return /* @__PURE__ */ jsx(AlertPortal, { children: /* @__PURE__ */ jsxs(AlertBase, {
-		"aria-live": new Set(["danger", "warning"]).has(variant) ? "assertive" : "polite",
-		className: cn("alert-wrapper transition-opacity duration-300", className),
+		"aria-live": variant === "warning" || variant === "danger" ? "assertive" : "polite",
+		className: cn("alert-wrapper transition-opacity duration-200 ease-out", className),
 		"data-slot": "alert",
 		"data-variant": variant,
 		id,

package/dist/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","names":[],"sources":["../src/components/Alert/Alert.tsx"],"sourcesContent":["import { CheckSquareIcon, CloseCircleIcon, InfoIcon, WarningIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { type ReactNode, useCallback, useEffect, useRef } from 'react'\nimport { AlertBase, AlertCloseButton, AlertDescription, AlertHeader, AlertPortal, AlertTitle } from './AlertBase'\n\nexport interface AlertProps {\n  className?: string\n  description: string | ReactNode | undefined\n  icon?: ReactNode\n  id: string | undefined\n  onClose?: () => void\n  title: string | undefined\n  variant?: 'default' | 'info' | 'success' | 'warning' | 'danger'\n}\n\nexport const Alert = ({ className, description, icon, id, onClose, title, variant = 'default' }: AlertProps) => {\n  const wrapperRef = useRef<HTMLDivElement | null>(null)\n\n  const variantIconMap = {\n    info: <InfoIcon className='text-alert-info-text' />,\n    success: <CheckSquareIcon className='text-alert-success-text' />,\n    warning: <WarningIcon className='text-alert-warning-text' />,\n    danger: <CloseCircleIcon className='text-alert-danger-text' />,\n    default: null,\n  } as const\n\n  const displayIcon = icon ?? variantIconMap[variant]\n\n  const closeAlert = useCallback(() => {\n    if (wrapperRef.current) {\n      wrapperRef.current.style.opacity = '0'\n      setTimeout(() => {\n        if (wrapperRef.current) {\n          wrapperRef.current.style.display = 'none'\n        }\n        onClose?.()\n      }, 300)\n    }\n  }, [onClose])\n\n  useEffect(() => {\n    const handleEscapeKey = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape' && wrapperRef.current) {\n        e.preventDefault()\n        closeAlert()\n      }\n    }\n\n    document.addEventListener('keydown', handleEscapeKey)\n\n    return () => {\n      document.removeEventListener('keydown', handleEscapeKey)\n    }\n  }, [closeAlert])\n\n  const handleClose = useCallback(() => {\n    closeAlert()\n  }, [closeAlert])\n\n  const URGENT_VARIANTS = new Set(['danger', 'warning'])\n  const ariaLive = URGENT_VARIANTS.has(variant) ? 'assertive' : 'polite'\n\n  return (\n    <AlertPortal>\n      <AlertBase aria-live={ariaLive} className={cn('alert-wrapper transition-opacity duration-300', className)} data-slot='alert' data-variant={variant} id={id} ref={wrapperRef} variant={variant}>\n        <AlertHeader>\n          {displayIcon}\n          <AlertTitle variant={variant}>{title}</AlertTitle>\n          <AlertCloseButton onClick={handleClose} variant={variant} />\n        </AlertHeader>\n        {description && (\n          <AlertDescription className={displayIcon ? 'ml-8' : undefined} variant={variant}>\n            {description}\n          </AlertDescription>\n        )}\n      </AlertBase>\n    </AlertPortal>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAeA,MAAa,SAAS,EAAE,WAAW,aAAa,MAAM,IAAI,SAAS,OAAO,UAAU,gBAA4B;CAC9G,MAAM,aAAa,OAA8B,KAAK;CAUtD,MAAM,cAAc,QAAQ;EAP1B,MAAM,oBAAC,UAAD,EAAU,WAAU,wBAAyB;EACnD,SAAS,oBAAC,iBAAD,EAAiB,WAAU,2BAA4B;EAChE,SAAS,oBAAC,aAAD,EAAa,WAAU,2BAA4B;EAC5D,QAAQ,oBAAC,iBAAD,EAAiB,WAAU,0BAA2B;EAC9D,SAAS;EAG+B,CAAC;CAE3C,MAAM,aAAa,kBAAkB;AACnC,MAAI,WAAW,SAAS;AACtB,cAAW,QAAQ,MAAM,UAAU;AACnC,oBAAiB;AACf,QAAI,WAAW,QACb,YAAW,QAAQ,MAAM,UAAU;AAErC,eAAW;MACV,IAAI;;IAER,CAAC,QAAQ,CAAC;AAEb,iBAAgB;EACd,MAAM,mBAAmB,MAAgC;AACvD,OAAI,EAAE,QAAQ,YAAY,WAAW,SAAS;AAC5C,MAAE,gBAAgB;AAClB,gBAAY;;;AAIhB,WAAS,iBAAiB,WAAW,gBAAgB;AAErD,eAAa;AACX,YAAS,oBAAoB,WAAW,gBAAgB;;IAEzD,CAAC,WAAW,CAAC;CAEhB,MAAM,cAAc,kBAAkB;AACpC,cAAY;IACX,CAAC,WAAW,CAAC;AAKhB,QACE,oBAAC,aAAD,YACE,qBAAC,WAAD;EAAW,aAJE,IADW,IAAI,CAAC,UAAU,UAAU,CACrB,CAAC,IAAI,QAAQ,GAAG,cAAc;EAI1B,WAAW,GAAG,iDAAiD,UAAU;EAAE,aAAU;EAAQ,gBAAc;EAAa;EAAI,KAAK;EAAqB;YAAtL,CACE,qBAAC,aAAD;GACG;GACD,oBAAC,YAAD;IAAqB;cAAU;IAAmB;GAClD,oBAAC,kBAAD;IAAkB,SAAS;IAAsB;IAAW;GAChD,KACb,eACC,oBAAC,kBAAD;GAAkB,WAAW,cAAc,SAAS;GAAoB;aACrE;GACgB,EAEX;KACA"}
+{"version":3,"file":"Alert.js","names":[],"sources":["../src/components/Alert/Alert.tsx"],"sourcesContent":["import { CheckSquareIcon, CloseCircleIcon, InfoIcon, WarningIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { type ReactNode, useCallback, useEffect, useRef } from 'react'\nimport { AlertBase, AlertCloseButton, AlertDescription, AlertHeader, AlertPortal, AlertTitle } from './AlertBase'\n\nexport interface AlertProps {\n  className?: string\n  description: string | ReactNode | undefined\n  icon?: ReactNode\n  id: string | undefined\n  onClose?: () => void\n  title: string | undefined\n  variant?: 'default' | 'info' | 'success' | 'warning' | 'danger'\n}\n\nexport const Alert = ({ className, description, icon, id, onClose, title, variant = 'default' }: AlertProps) => {\n  const wrapperRef = useRef<HTMLDivElement | null>(null)\n\n  const variantIconMap = {\n    info: <InfoIcon className='text-alert-info-text' />,\n    success: <CheckSquareIcon className='text-alert-success-text' />,\n    warning: <WarningIcon className='text-alert-warning-text' />,\n    danger: <CloseCircleIcon className='text-alert-danger-text' />,\n    default: null,\n  } as const\n\n  const displayIcon = icon ?? variantIconMap[variant]\n\n  const closeAlert = useCallback(() => {\n    if (wrapperRef.current) {\n      wrapperRef.current.style.opacity = '0'\n      setTimeout(() => {\n        if (wrapperRef.current) {\n          wrapperRef.current.style.display = 'none'\n        }\n        onClose?.()\n      }, 200)\n    }\n  }, [onClose])\n\n  useEffect(() => {\n    const handleEscapeKey = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape' && wrapperRef.current) {\n        e.preventDefault()\n        closeAlert()\n      }\n    }\n\n    document.addEventListener('keydown', handleEscapeKey)\n\n    return () => {\n      document.removeEventListener('keydown', handleEscapeKey)\n    }\n  }, [closeAlert])\n\n  const handleClose = useCallback(() => {\n    closeAlert()\n  }, [closeAlert])\n\n  const ariaLive = variant === 'warning' || variant === 'danger' ? 'assertive' : 'polite'\n\n  return (\n    <AlertPortal>\n      <AlertBase\n        aria-live={ariaLive}\n        className={cn('alert-wrapper transition-opacity duration-200 ease-out', className)}\n        data-slot='alert'\n        data-variant={variant}\n        id={id}\n        ref={wrapperRef}\n        variant={variant}\n      >\n        <AlertHeader>\n          {displayIcon}\n          <AlertTitle variant={variant}>{title}</AlertTitle>\n          <AlertCloseButton\n            onClick={handleClose}\n            variant={variant}\n          />\n        </AlertHeader>\n        {description && (\n          <AlertDescription\n            className={displayIcon ? 'ml-8' : undefined}\n            variant={variant}\n          >\n            {description}\n          </AlertDescription>\n        )}\n      </AlertBase>\n    </AlertPortal>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAeA,MAAa,SAAS,EAAE,WAAW,aAAa,MAAM,IAAI,SAAS,OAAO,UAAU,gBAA4B;CAC9G,MAAM,aAAa,OAA8B,KAAK;CAUtD,MAAM,cAAc,QAAQ;EAP1B,MAAM,oBAAC,UAAD,EAAU,WAAU,wBAAyB;EACnD,SAAS,oBAAC,iBAAD,EAAiB,WAAU,2BAA4B;EAChE,SAAS,oBAAC,aAAD,EAAa,WAAU,2BAA4B;EAC5D,QAAQ,oBAAC,iBAAD,EAAiB,WAAU,0BAA2B;EAC9D,SAAS;EAG+B,CAAC;CAE3C,MAAM,aAAa,kBAAkB;AACnC,MAAI,WAAW,SAAS;AACtB,cAAW,QAAQ,MAAM,UAAU;AACnC,oBAAiB;AACf,QAAI,WAAW,QACb,YAAW,QAAQ,MAAM,UAAU;AAErC,eAAW;MACV,IAAI;;IAER,CAAC,QAAQ,CAAC;AAEb,iBAAgB;EACd,MAAM,mBAAmB,MAAgC;AACvD,OAAI,EAAE,QAAQ,YAAY,WAAW,SAAS;AAC5C,MAAE,gBAAgB;AAClB,gBAAY;;;AAIhB,WAAS,iBAAiB,WAAW,gBAAgB;AAErD,eAAa;AACX,YAAS,oBAAoB,WAAW,gBAAgB;;IAEzD,CAAC,WAAW,CAAC;CAEhB,MAAM,cAAc,kBAAkB;AACpC,cAAY;IACX,CAAC,WAAW,CAAC;AAIhB,QACE,oBAAC,aAAD,YACE,qBAAC,WAAD;EACE,aALW,YAAY,aAAa,YAAY,WAAW,cAAc;EAMzE,WAAW,GAAG,0DAA0D,UAAU;EAClF,aAAU;EACV,gBAAc;EACV;EACJ,KAAK;EACI;YAPX,CASE,qBAAC,aAAD;GACG;GACD,oBAAC,YAAD;IAAqB;cAAU;IAAmB;GAClD,oBAAC,kBAAD;IACE,SAAS;IACA;IACT;GACU,KACb,eACC,oBAAC,kBAAD;GACE,WAAW,cAAc,SAAS;GACzB;aAER;GACgB,EAEX;KACA"}

package/dist/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","names":[],"sources":["../src/components/Avatar/Avatar.tsx"],"mappings":";;;;;KAIK,UAAA;AAAA,UAEY,WAAA;EACf,GAAA;EACA,SAAA;EACA,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,YAAA;EACP,WAAA;EACA,IAAA,GAAO,UAAA;EACP,YAAA;AAAA;AAAA,cAiCW,MAAA;EAAM,GAAA;EAAA,SAAA;EAAA,QAAA;EAAA,IAAA;EAAA,WAAA;EAAA,IAAA;EAAA;AAAA,GAAgF,WAAA,KAAW,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Avatar.d.ts","names":[],"sources":["../src/components/Avatar/Avatar.tsx"],"mappings":";;;;;KAIK,UAAA;AAAA,UAEY,WAAA;EACf,GAAA;EACA,SAAA;EACA,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,YAAA;EACP,WAAA;EACA,IAAA,GAAO,UAAA;EACP,YAAA;AAAA;AAAA,cAuCW,MAAA;EAAM,GAAA;EAAA,SAAA;EAAA,QAAA;EAAA,IAAA;EAAA,WAAA;EAAA,IAAA;EAAA;AAAA,GAAgF,WAAA,KAAW,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Avatar.js

@@ -6,9 +6,14 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Avatar/Avatar.tsx
 const sizeClasses = {
-	sm: "h-8 w-8",
-	md: "h-10 w-10",
-	lg: "h-12 w-12"
+	sm: "size-8",
+	md: "size-10",
+	lg: "size-12"
+};
+const imageDimensions = {
+	sm: 32,
+	md: 40,
+	lg: 48
 };
 const textSizeClasses = {
 	sm: "text-xs",
@@ -45,14 +50,14 @@ const Avatar = ({ alt, className, fallback, icon, imageSource, size = "md", user
 	const renderContent = () => {
 		if (userFullName) return /* @__PURE__ */ jsx("span", {
 			"aria-label": userFullName + " avatar",
-			className: cn("font-bold tracking-tighter flex h-full w-full items-center justify-center text-text-primary font-stretch-condensed", textSizeClasses[size]),
+			className: cn("font-bold tracking-tighter flex size-full items-center justify-center text-text-primary font-stretch-condensed", textSizeClasses[size]),
 			"data-testid": "spectral-avatar-initials",
 			children: getInitials(userFullName)
 		});
 		if (icon) {
 			const iconSize = iconSizes[size];
 			return /* @__PURE__ */ jsx("span", {
-				className: "flex h-full w-full items-center justify-center",
+				className: "flex size-full items-center justify-center",
 				children: isValidElement(icon) ? (() => {
 					const baseIconProps = {
 						className: cn("shrink-0", icon.props.className),
@@ -69,23 +74,25 @@ const Avatar = ({ alt, className, fallback, icon, imageSource, size = "md", user
 		if (imageSource && imageStatus === "loaded") return /* @__PURE__ */ jsx("img", {
 			alt: alt ?? "Avatar",
 			"aria-label": alt ?? "Avatar",
-			className: "inset-0 absolute h-full w-full rounded-full object-cover",
+			className: "inset-0 absolute size-full rounded-full object-cover",
 			"data-testid": "spectral-avatar-image",
+			height: imageDimensions[size],
 			role: "img",
-			src: imageSource
+			src: imageSource,
+			width: imageDimensions[size]
 		});
 		if (imageSource && imageStatus === "error" && fallback) return /* @__PURE__ */ jsx("span", {
-			className: "flex h-full w-full items-center justify-center",
+			className: "flex size-full items-center justify-center",
 			"data-testid": "spectral-avatar-img-error-fallback",
 			children: fallback
 		});
 		if (fallback) return /* @__PURE__ */ jsx("span", {
-			className: cn("flex h-full w-full items-center justify-center text-text-primary", textSizeClasses[size]),
+			className: cn("flex size-full items-center justify-center text-text-primary", textSizeClasses[size]),
 			"data-testid": "spectral-avatar-fallback",
 			children: fallback
 		});
 		if (imageSource && imageStatus === "loading") return /* @__PURE__ */ jsx("span", {
-			className: "motion-safe:animate-pulse flex h-full w-full items-center justify-center",
+			className: "motion-safe:animate-pulse flex size-full items-center justify-center",
 			"data-testid": "spectral-avatar-loading"
 		});
 		return /* @__PURE__ */ jsx(UserIcon, {});

package/dist/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { UserIcon } from '@components/Icons/UserIcon'\nimport { cn } from '@utils/twUtils'\nimport { cloneElement, isValidElement, useEffect, useState, type ComponentType, type ReactElement, type ReactNode } from 'react'\n\ntype AvatarSize = 'sm' | 'md' | 'lg'\n\nexport interface AvatarProps {\n  alt?: string\n  className?: string\n  fallback?: ReactNode | string\n  icon?: ReactElement\n  imageSource?: string\n  size?: AvatarSize\n  userFullName?: string\n}\n\nconst sizeClasses = {\n  sm: 'h-8 w-8',\n  md: 'h-10 w-10',\n  lg: 'h-12 w-12',\n}\n\nconst textSizeClasses = {\n  sm: 'text-xs',\n  md: 'text-base',\n  lg: 'text-xl',\n}\n\nconst iconSizes = {\n  sm: 24,\n  md: 32,\n  lg: 40,\n}\n\nconst getInitials = (name: string): string => {\n  const trimmed = name.trim()\n  if (!trimmed) return '?'\n\n  const words = trimmed.split(/\\s+/).filter(Boolean)\n\n  if (words.length === 0) return '?'\n  if (words.length === 1) return words[0].charAt(0).toUpperCase()\n\n  return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase()\n}\n\nexport const Avatar = ({ alt, className, fallback, icon, imageSource, size = 'md', userFullName }: AvatarProps) => {\n  const [imageStatus, setImageStatus] = useState<'loading' | 'loaded' | 'error'>('loading')\n\n  useEffect(() => {\n    if (!imageSource) return\n\n    setImageStatus('loading')\n\n    const img = new Image()\n    img.src = imageSource\n\n    img.onload = () => setImageStatus('loaded')\n    img.onerror = () => setImageStatus('error')\n\n    return () => {\n      img.onload = null\n      img.onerror = null\n    }\n  }, [imageSource])\n\n  const renderContent = () => {\n    if (userFullName) {\n      return (\n        <span\n          // cannot use template literals in aria-label or oxlint validation fails: https://www.w3.org/WAI/ARIA/apg/patterns/img/#labeling\n          aria-label={userFullName + ' avatar'}\n          className={cn('font-bold tracking-tighter flex h-full w-full items-center justify-center text-text-primary font-stretch-condensed', textSizeClasses[size as keyof typeof textSizeClasses])}\n          data-testid='spectral-avatar-initials'\n        >\n          {getInitials(userFullName)}\n        </span>\n      )\n    }\n\n    if (icon) {\n      const iconSize = iconSizes[size as keyof typeof iconSizes]\n\n      return (\n        <span className='flex h-full w-full items-center justify-center'>\n          {isValidElement(icon)\n            ? (() => {\n                const baseIconProps = {\n                  className: cn('shrink-0', (icon.props as { className?: string }).className),\n                  'aria-hidden': 'true' as const,\n                }\n\n                // Check if this is an icon component that accepts size prop\n                const componentType = icon.type as ComponentType<unknown> & { displayName?: string }\n                const isIconComponent = componentType.displayName?.includes('Icon') ?? false\n\n                if (isIconComponent) {\n                  const iconPropsWithSize = {\n                    ...baseIconProps,\n                    size: iconSize,\n                  }\n                  return cloneElement(icon, iconPropsWithSize)\n                }\n\n                return cloneElement(icon, baseIconProps)\n              })()\n            : icon}\n        </span>\n      )\n    }\n\n    if (imageSource && imageStatus === 'loaded') {\n      return <img alt={alt ?? 'Avatar'} aria-label={alt ?? 'Avatar'} className='inset-0 absolute h-full w-full rounded-full object-cover' data-testid='spectral-avatar-image' role='img' src={imageSource} />\n    }\n\n    if (imageSource && imageStatus === 'error' && fallback) {\n      return (\n        <span className='flex h-full w-full items-center justify-center' data-testid='spectral-avatar-img-error-fallback'>\n          {fallback}\n        </span>\n      )\n    }\n\n    // Show fallback while image is loading or if no image provided\n    if (fallback) {\n      return (\n        <span className={cn('flex h-full w-full items-center justify-center text-text-primary', textSizeClasses[size as keyof typeof textSizeClasses])} data-testid='spectral-avatar-fallback'>\n          {fallback}\n        </span>\n      )\n    }\n\n    // Show empty/skeleton state while image is loading\n    if (imageSource && imageStatus === 'loading') {\n      return <span className='motion-safe:animate-pulse flex h-full w-full items-center justify-center' data-testid='spectral-avatar-loading' />\n    }\n\n    // Last resort: (only when no imageSource and no fallback)\n    return <UserIcon />\n  }\n\n  return (\n    <div className={cn('relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-level-two', sizeClasses[size as keyof typeof sizeClasses], className)} data-slot='avatar' data-testid='spectral-avatar'>\n      {renderContent()}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAgBA,MAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,YAAY;CAChB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,eAAe,SAAyB;CAC5C,MAAM,UAAU,KAAK,MAAM;AAC3B,KAAI,CAAC,QAAS,QAAO;CAErB,MAAM,QAAQ,QAAQ,MAAM,MAAM,CAAC,OAAO,QAAQ;AAElD,KAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,KAAI,MAAM,WAAW,EAAG,QAAO,MAAM,GAAG,OAAO,EAAE,CAAC,aAAa;AAE/D,SAAQ,MAAM,GAAG,OAAO,EAAE,GAAG,MAAM,MAAM,SAAS,GAAG,OAAO,EAAE,EAAE,aAAa;;AAG/E,MAAa,UAAU,EAAE,KAAK,WAAW,UAAU,MAAM,aAAa,OAAO,MAAM,mBAAgC;CACjH,MAAM,CAAC,aAAa,kBAAkB,SAAyC,UAAU;AAEzF,iBAAgB;AACd,MAAI,CAAC,YAAa;AAElB,iBAAe,UAAU;EAEzB,MAAM,MAAM,IAAI,OAAO;AACvB,MAAI,MAAM;AAEV,MAAI,eAAe,eAAe,SAAS;AAC3C,MAAI,gBAAgB,eAAe,QAAQ;AAE3C,eAAa;AACX,OAAI,SAAS;AACb,OAAI,UAAU;;IAEf,CAAC,YAAY,CAAC;CAEjB,MAAM,sBAAsB;AAC1B,MAAI,aACF,QACE,oBAAC,QAAD;GAEE,cAAY,eAAe;GAC3B,WAAW,GAAG,sHAAsH,gBAAgB,MAAsC;GAC1L,eAAY;aAEX,YAAY,aAAa;GACrB;AAIX,MAAI,MAAM;GACR,MAAM,WAAW,UAAU;AAE3B,UACE,oBAAC,QAAD;IAAM,WAAU;cACb,eAAe,KAAK,UACV;KACL,MAAM,gBAAgB;MACpB,WAAW,GAAG,YAAa,KAAK,MAAiC,UAAU;MAC3E,eAAe;MAChB;AAMD,SAHsB,KAAK,KACW,aAAa,SAAS,OAAO,IAAI,MAOrE,QAAO,aAAa,MAAM;MAHxB,GAAG;MACH,MAAM;MAEmC,CAAC;AAG9C,YAAO,aAAa,MAAM,cAAc;QACtC,GACJ;IACC;;AAIX,MAAI,eAAe,gBAAgB,SACjC,QAAO,oBAAC,OAAD;GAAK,KAAK,OAAO;GAAU,cAAY,OAAO;GAAU,WAAU;GAA2D,eAAY;GAAwB,MAAK;GAAM,KAAK;GAAe;AAGzM,MAAI,eAAe,gBAAgB,WAAW,SAC5C,QACE,oBAAC,QAAD;GAAM,WAAU;GAAiD,eAAY;aAC1E;GACI;AAKX,MAAI,SACF,QACE,oBAAC,QAAD;GAAM,WAAW,GAAG,oEAAoE,gBAAgB,MAAsC;GAAE,eAAY;aACzJ;GACI;AAKX,MAAI,eAAe,gBAAgB,UACjC,QAAO,oBAAC,QAAD;GAAM,WAAU;GAA2E,eAAY;GAA4B;AAI5I,SAAO,oBAAC,UAAD,EAAY;;AAGrB,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,uGAAuG,YAAY,OAAmC,UAAU;EAAE,aAAU;EAAS,eAAY;YACjN,eAAe;EACZ"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { UserIcon } from '@components/Icons/UserIcon'\nimport { cn } from '@utils/twUtils'\nimport { cloneElement, isValidElement, useEffect, useState, type ComponentType, type ReactElement, type ReactNode } from 'react'\n\ntype AvatarSize = 'sm' | 'md' | 'lg'\n\nexport interface AvatarProps {\n  alt?: string\n  className?: string\n  fallback?: ReactNode | string\n  icon?: ReactElement\n  imageSource?: string\n  size?: AvatarSize\n  userFullName?: string\n}\n\nconst sizeClasses = {\n  sm: 'size-8',\n  md: 'size-10',\n  lg: 'size-12',\n}\n\nconst imageDimensions = {\n  sm: 32,\n  md: 40,\n  lg: 48,\n}\n\nconst textSizeClasses = {\n  sm: 'text-xs',\n  md: 'text-base',\n  lg: 'text-xl',\n}\n\nconst iconSizes = {\n  sm: 24,\n  md: 32,\n  lg: 40,\n}\n\nconst getInitials = (name: string): string => {\n  const trimmed = name.trim()\n  if (!trimmed) return '?'\n\n  const words = trimmed.split(/\\s+/).filter(Boolean)\n\n  if (words.length === 0) return '?'\n  if (words.length === 1) return words[0].charAt(0).toUpperCase()\n\n  return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase()\n}\n\nexport const Avatar = ({ alt, className, fallback, icon, imageSource, size = 'md', userFullName }: AvatarProps) => {\n  const [imageStatus, setImageStatus] = useState<'loading' | 'loaded' | 'error'>('loading')\n\n  useEffect(() => {\n    if (!imageSource) return\n\n    setImageStatus('loading')\n\n    const img = new Image()\n    img.src = imageSource\n\n    img.onload = () => setImageStatus('loaded')\n    img.onerror = () => setImageStatus('error')\n\n    return () => {\n      img.onload = null\n      img.onerror = null\n    }\n  }, [imageSource])\n\n  const renderContent = () => {\n    if (userFullName) {\n      return (\n        <span\n          // cannot use template literals in aria-label or oxlint validation fails: https://www.w3.org/WAI/ARIA/apg/patterns/img/#labeling\n          aria-label={userFullName + ' avatar'}\n          className={cn('font-bold tracking-tighter flex size-full items-center justify-center text-text-primary font-stretch-condensed', textSizeClasses[size as keyof typeof textSizeClasses])}\n          data-testid='spectral-avatar-initials'\n        >\n          {getInitials(userFullName)}\n        </span>\n      )\n    }\n\n    if (icon) {\n      const iconSize = iconSizes[size as keyof typeof iconSizes]\n\n      return (\n        <span className='flex size-full items-center justify-center'>\n          {isValidElement(icon)\n            ? (() => {\n                const baseIconProps = {\n                  className: cn('shrink-0', (icon.props as { className?: string }).className),\n                  'aria-hidden': 'true' as const,\n                }\n\n                // Check if this is an icon component that accepts size prop\n                const componentType = icon.type as ComponentType<unknown> & { displayName?: string }\n                const isIconComponent = componentType.displayName?.includes('Icon') ?? false\n\n                if (isIconComponent) {\n                  const iconPropsWithSize = {\n                    ...baseIconProps,\n                    size: iconSize,\n                  }\n                  return cloneElement(icon, iconPropsWithSize)\n                }\n\n                return cloneElement(icon, baseIconProps)\n              })()\n            : icon}\n        </span>\n      )\n    }\n\n    if (imageSource && imageStatus === 'loaded') {\n      return (\n        <img\n          alt={alt ?? 'Avatar'}\n          aria-label={alt ?? 'Avatar'}\n          className='inset-0 absolute size-full rounded-full object-cover'\n          data-testid='spectral-avatar-image'\n          height={imageDimensions[size as keyof typeof imageDimensions]}\n          role='img'\n          src={imageSource}\n          width={imageDimensions[size as keyof typeof imageDimensions]}\n        />\n      )\n    }\n\n    if (imageSource && imageStatus === 'error' && fallback) {\n      return (\n        <span\n          className='flex size-full items-center justify-center'\n          data-testid='spectral-avatar-img-error-fallback'\n        >\n          {fallback}\n        </span>\n      )\n    }\n\n    // Show fallback while image is loading or if no image provided\n    if (fallback) {\n      return (\n        <span\n          className={cn('flex size-full items-center justify-center text-text-primary', textSizeClasses[size as keyof typeof textSizeClasses])}\n          data-testid='spectral-avatar-fallback'\n        >\n          {fallback}\n        </span>\n      )\n    }\n\n    // Show empty/skeleton state while image is loading\n    if (imageSource && imageStatus === 'loading') {\n      return (\n        <span\n          className='motion-safe:animate-pulse flex size-full items-center justify-center'\n          data-testid='spectral-avatar-loading'\n        />\n      )\n    }\n\n    // Last resort: (only when no imageSource and no fallback)\n    return <UserIcon />\n  }\n\n  return (\n    <div\n      className={cn('relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-level-two', sizeClasses[size as keyof typeof sizeClasses], className)}\n      data-slot='avatar'\n      data-testid='spectral-avatar'\n    >\n      {renderContent()}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAgBA,MAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,YAAY;CAChB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,eAAe,SAAyB;CAC5C,MAAM,UAAU,KAAK,MAAM;AAC3B,KAAI,CAAC,QAAS,QAAO;CAErB,MAAM,QAAQ,QAAQ,MAAM,MAAM,CAAC,OAAO,QAAQ;AAElD,KAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,KAAI,MAAM,WAAW,EAAG,QAAO,MAAM,GAAG,OAAO,EAAE,CAAC,aAAa;AAE/D,SAAQ,MAAM,GAAG,OAAO,EAAE,GAAG,MAAM,MAAM,SAAS,GAAG,OAAO,EAAE,EAAE,aAAa;;AAG/E,MAAa,UAAU,EAAE,KAAK,WAAW,UAAU,MAAM,aAAa,OAAO,MAAM,mBAAgC;CACjH,MAAM,CAAC,aAAa,kBAAkB,SAAyC,UAAU;AAEzF,iBAAgB;AACd,MAAI,CAAC,YAAa;AAElB,iBAAe,UAAU;EAEzB,MAAM,MAAM,IAAI,OAAO;AACvB,MAAI,MAAM;AAEV,MAAI,eAAe,eAAe,SAAS;AAC3C,MAAI,gBAAgB,eAAe,QAAQ;AAE3C,eAAa;AACX,OAAI,SAAS;AACb,OAAI,UAAU;;IAEf,CAAC,YAAY,CAAC;CAEjB,MAAM,sBAAsB;AAC1B,MAAI,aACF,QACE,oBAAC,QAAD;GAEE,cAAY,eAAe;GAC3B,WAAW,GAAG,kHAAkH,gBAAgB,MAAsC;GACtL,eAAY;aAEX,YAAY,aAAa;GACrB;AAIX,MAAI,MAAM;GACR,MAAM,WAAW,UAAU;AAE3B,UACE,oBAAC,QAAD;IAAM,WAAU;cACb,eAAe,KAAK,UACV;KACL,MAAM,gBAAgB;MACpB,WAAW,GAAG,YAAa,KAAK,MAAiC,UAAU;MAC3E,eAAe;MAChB;AAMD,SAHsB,KAAK,KACW,aAAa,SAAS,OAAO,IAAI,MAOrE,QAAO,aAAa,MAAM;MAHxB,GAAG;MACH,MAAM;MAEmC,CAAC;AAG9C,YAAO,aAAa,MAAM,cAAc;QACtC,GACJ;IACC;;AAIX,MAAI,eAAe,gBAAgB,SACjC,QACE,oBAAC,OAAD;GACE,KAAK,OAAO;GACZ,cAAY,OAAO;GACnB,WAAU;GACV,eAAY;GACZ,QAAQ,gBAAgB;GACxB,MAAK;GACL,KAAK;GACL,OAAO,gBAAgB;GACvB;AAIN,MAAI,eAAe,gBAAgB,WAAW,SAC5C,QACE,oBAAC,QAAD;GACE,WAAU;GACV,eAAY;aAEX;GACI;AAKX,MAAI,SACF,QACE,oBAAC,QAAD;GACE,WAAW,GAAG,gEAAgE,gBAAgB,MAAsC;GACpI,eAAY;aAEX;GACI;AAKX,MAAI,eAAe,gBAAgB,UACjC,QACE,oBAAC,QAAD;GACE,WAAU;GACV,eAAY;GACZ;AAKN,SAAO,oBAAC,UAAD,EAAY;;AAGrB,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,uGAAuG,YAAY,OAAmC,UAAU;EAC9K,aAAU;EACV,eAAY;YAEX,eAAe;EACZ"}

package/dist/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","names":[],"sources":["../src/components/Badge/Badge.tsx"],"mappings":";;;;;;;KAKY,UAAA,GAAa,cAAA,WAAyB,YAAA,QAAoB,aAAA;EAAmB,OAAA;AAAA;AAAA,cAEnF,aAAA,GAAa,KAAA;;IAelB,iCAAA,CAAA,SAAA;AAAA,cAEY,KAAA;EAAK,OAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAAuD,UAAA,KAAU,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Badge.d.ts","names":[],"sources":["../src/components/Badge/Badge.tsx"],"mappings":";;;;;;;KAKY,UAAA,GAAa,cAAA,WAAyB,YAAA,QAAoB,aAAA;EAAmB,OAAA;AAAA;AAAA,cAEnF,aAAA,GAAa,KAAA;;IAgBlB,iCAAA,CAAA,SAAA;AAAA,cAEY,KAAA;EAAK,OAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAAuD,UAAA,KAAU,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Badge.js

@@ -6,11 +6,11 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 
 //#region src/components/Badge/Badge.tsx
-const badgeVariants = cva(`rounded-sm px-2 py-0.5 text-xs font-medium [&>svg]:size-3 gap-1 focus-visible:border-ring focus-visible:ring-ring/50 inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:border-danger-200 aria-invalid:ring-danger-200 [&>svg]:pointer-events-none`, {
+const badgeVariants = cva(`rounded-sm px-2 py-0.5 text-xs font-medium [&>svg]:size-3 gap-1 inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[background-color,color,box-shadow] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent aria-invalid:border-danger-200 aria-invalid:outline-danger-200/20 [&>svg]:pointer-events-none`, {
 	variants: { variant: {
-		default: "bg-badge-primary-bg text-text-primary group-aria-pressed:bg-badge-primary-bg--active group-data-[state=on]:bg-badge-primary-bg--active [a&]:hover:bg-badge-primary-bg--hover",
+		default: "bg-badge-primary-bg text-text-primary group-active:[background-color:var(--color-toggle-border--active)] group-aria-pressed:[background-color:var(--color-toggle-border--active)] group-data-[state=on]:[background-color:var(--color-toggle-border--active)] [a&]:hover:bg-badge-primary-bg--hover",
 		secondary: "[a&]:hover:bg-badge-secondary-bg--hover bg-badge-secondary-bg text-badge-secondary-text",
-		destructive: "bg-badge-destructive-bg text-text-primary focus-visible:ring-badge-destructive-border [a&]:hover:bg-danger-400",
+		destructive: "bg-badge-destructive-bg text-text-primary focus-visible:outline-badge-destructive-border [a&]:hover:bg-danger-400",
 		outline: "[a&]:hover:text-accent-foreground border border-badge-outline-border text-text-primary [a&]:hover:bg-accent"
 	} },
 	defaultVariants: { variant: "default" }

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":[],"sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["import { Slot } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps } from 'react'\n\nexport type BadgeProps = ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }\n\nconst badgeVariants = cva(\n  `rounded-sm px-2 py-0.5 text-xs font-medium [&>svg]:size-3 gap-1 focus-visible:border-ring focus-visible:ring-ring/50 inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:border-danger-200 aria-invalid:ring-danger-200 [&>svg]:pointer-events-none`,\n  {\n    variants: {\n      variant: {\n        default: 'bg-badge-primary-bg text-text-primary group-aria-pressed:bg-badge-primary-bg--active group-data-[state=on]:bg-badge-primary-bg--active [a&]:hover:bg-badge-primary-bg--hover',\n        secondary: '[a&]:hover:bg-badge-secondary-bg--hover bg-badge-secondary-bg text-badge-secondary-text',\n        destructive: 'bg-badge-destructive-bg text-text-primary focus-visible:ring-badge-destructive-border [a&]:hover:bg-danger-400',\n        outline: '[a&]:hover:text-accent-foreground border border-badge-outline-border text-text-primary [a&]:hover:bg-accent',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport const Badge = ({ asChild = false, className, variant, ...props }: BadgeProps) => {\n  const Comp = asChild ? Slot : 'span'\n\n  return <Comp className={cn(badgeVariants({ variant }), className)} data-slot='badge' data-testid='spectral-badge' {...props} />\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,gBAAgB,IACpB,gWACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,WAAW;EACX,aAAa;EACb,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAED,MAAa,SAAS,EAAE,UAAU,OAAO,WAAW,SAAS,GAAG,YAAwB;AAGtF,QAAO,oBAFM,UAAU,OAAO,QAEvB;EAAM,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;EAAE,aAAU;EAAQ,eAAY;EAAiB,GAAI;EAAS"}
+{"version":3,"file":"Badge.js","names":[],"sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["import { Slot } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps } from 'react'\n\nexport type BadgeProps = ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }\n\nconst badgeVariants = cva(\n  `rounded-sm px-2 py-0.5 text-xs font-medium [&>svg]:size-3 gap-1 inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[background-color,color,box-shadow] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent aria-invalid:border-danger-200 aria-invalid:outline-danger-200/20 [&>svg]:pointer-events-none`,\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-badge-primary-bg text-text-primary group-active:[background-color:var(--color-toggle-border--active)] group-aria-pressed:[background-color:var(--color-toggle-border--active)] group-data-[state=on]:[background-color:var(--color-toggle-border--active)] [a&]:hover:bg-badge-primary-bg--hover',\n        secondary: '[a&]:hover:bg-badge-secondary-bg--hover bg-badge-secondary-bg text-badge-secondary-text',\n        destructive: 'bg-badge-destructive-bg text-text-primary focus-visible:outline-badge-destructive-border [a&]:hover:bg-danger-400',\n        outline: '[a&]:hover:text-accent-foreground border border-badge-outline-border text-text-primary [a&]:hover:bg-accent',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport const Badge = ({ asChild = false, className, variant, ...props }: BadgeProps) => {\n  const Comp = asChild ? Slot : 'span'\n\n  return (\n    <Comp\n      className={cn(badgeVariants({ variant }), className)}\n      data-slot='badge'\n      data-testid='spectral-badge'\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,gBAAgB,IACpB,6XACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,WAAW;EACX,aAAa;EACb,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAED,MAAa,SAAS,EAAE,UAAU,OAAO,WAAW,SAAS,GAAG,YAAwB;AAGtF,QACE,oBAHW,UAAU,OAAO,QAG5B;EACE,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;EACpD,aAAU;EACV,eAAY;EACZ,GAAI;EACJ"}

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { LoaderIcon } from '@components/Icons'\nimport { Slot, type AsChildProp } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Children, isValidElement, type ButtonHTMLAttributes, type MouseEvent, type ReactNode, type Ref } from 'react'\n\nconst buttonVariants = cva(\n  `gap-2 rounded-lg font-semibold [&_svg]:size-4 relative flex cursor-pointer items-center justify-center border font-sans! whitespace-nowrap transition-colors focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n  {\n    variants: {\n      variant: {\n        primary: `border-button-primary-border bg-button-primary-bg text-button-primary-text hover:border-button-primary-border--hover hover:bg-button-primary-bg--hover hover:text-button-primary-text--hover focus-visible:outline-button-primary-border disabled:border-button-primary-border--disabled disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled`,\n        secondary: `border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg--hover hover:text-button-secondary-text--hover focus-visible:outline-button-secondary-border disabled:border-button-secondary-border--disabled disabled:bg-button-secondary-bg--disabled disabled:text-button-secondary-text--disabled`,\n        outline: `border-button-outline-border bg-button-outline-bg text-button-outline-text hover:bg-button-outline-bg--hover hover:text-button-outline-text--hover focus-visible:outline-button-outline-border disabled:border-button-outline-border--disabled disabled:text-button-outline-text--disabled`,\n        ghost: 'border-none bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg--hover hover:text-button-ghost-text--hover focus-visible:outline-none disabled:text-button-ghost-text--disabled',\n        unstyled: 'font-inherit! font-normal gap-0 p-0! inline-flex w-auto! justify-start rounded-none! border-none! bg-transparent text-inherit shadow-none! hover:cursor-pointer hover:bg-transparent focus-visible:outline-button-outline-border disabled:opacity-50',\n      },\n      size: {\n        small: 'py-1 px-4 text-sm! w-fit',\n        default: 'py-2 px-6 text-base! w-fit',\n        fullWidth: 'py-2 px-6 text-base! w-full',\n      },\n      state: {\n        default: '',\n        error: 'bg-button-danger text-text-primary transition focus-visible:outline-button-danger',\n        loading: 'pointer-events-none cursor-wait',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      state: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport interface ButtonProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {\n  dataTestId?: string\n  disabled?: boolean\n  endIcon?: ReactNode\n  label?: string\n  onClick?: (event: MouseEvent<HTMLElement>) => void\n  size?: 'small' | 'default' | 'fullWidth'\n  startIcon?: ReactNode\n  state?: 'default' | 'error' | 'loading'\n  type?: 'button' | 'submit' | 'reset'\n  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'unstyled'\n}\n\nexport const Button = ({\n  asChild = false,\n  children,\n  className,\n  dataTestId,\n  disabled,\n  endIcon,\n  id,\n  label,\n  onClick,\n  ref,\n  size,\n  startIcon,\n  state,\n  type = 'button',\n  variant = 'primary',\n  ...props\n}: ButtonProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const stateStyles = {\n    error: {\n      primary: 'bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary',\n      secondary: 'bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary',\n      outline: 'bg-transparent border-button-danger text-button-danger hover:border-button-danger--hover hover:text-button-danger/80',\n      ghost: 'bg-transparent text-button-danger hover:text-button-danger/80',\n      unstyled: 'bg-transparent text-button-danger',\n    },\n    loading: {\n      primary: 'bg-button-primary-bg--disabled border-button-primary-border--disabled text-button-primary-text--disabled pointer-events-none',\n      secondary: 'bg-button-secondary-bg--disabled border-button-secondary-border--disabled text-button-secondary-text--disabled pointer-events-none',\n      outline: 'bg-button-outline-bg--disabled border-button-outline-border--disabled text-button-outline-text--disabled pointer-events-none',\n      ghost: 'bg-transparent text-button-ghost-text--disabled pointer-events-none',\n      unstyled: 'bg-transparent opacity-50 pointer-events-none',\n    },\n  }\n\n  const classes = cn(buttonVariants({ variant, state, size }), state === 'error' && stateStyles.error[variant as keyof typeof stateStyles.error], state === 'loading' && stateStyles.loading[variant as keyof typeof stateStyles.loading], className)\n\n  const canUseAsChild = asChild && isValidElement(children) && Children.count(children) === 1\n  const content = canUseAsChild ? undefined : (children ?? label)\n\n  if (!canUseAsChild && !content) {\n    throw new Error('Button requires either `label` or `children`')\n  }\n\n  const handleDisabledClickCapture = (event: MouseEvent<HTMLElement>) => {\n    if (!disabled) return\n    event.preventDefault()\n    event.stopPropagation()\n  }\n\n  const Comp = canUseAsChild ? Slot : 'button'\n\n  return (\n    <Comp\n      aria-disabled={disabled}\n      className={cn(classes, canUseAsChild && 'no-underline! before:content-none after:content-none', canUseAsChild && disabled && 'pointer-events-none opacity-50')}\n      data-as-child={canUseAsChild ? 'true' : undefined}\n      data-state={state}\n      data-testid={dataTestId ?? `spectral-button-${variant}`}\n      data-variant={variant}\n      disabled={canUseAsChild ? undefined : disabled}\n      id={id}\n      onClick={onClick}\n      onClickCapture={canUseAsChild ? handleDisabledClickCapture : undefined}\n      ref={ref}\n      tabIndex={canUseAsChild && disabled ? -1 : undefined}\n      type={canUseAsChild ? undefined : type}\n      {...props}\n    >\n      {canUseAsChild ? (\n        children\n      ) : (\n        <>\n          {startIcon && (\n            <span className={cn('flex', variant !== 'unstyled' && 'pr-1')} aria-hidden data-testid='spectral-button-start-icon'>\n              {startIcon}\n            </span>\n          )}\n          {state === 'loading' && <LoaderIcon className='ml-2 motion-safe:animate-spin' size={16} />}\n          {content}\n          {endIcon && state !== 'loading' && (\n            <span className={cn('flex', variant !== 'unstyled' && 'pl-2')} aria-hidden data-testid='spectral-button-end-icon'>\n              {endIcon}\n            </span>\n          )}\n        </>\n      )}\n    </Comp>\n  )\n}\nButton.displayName = 'Button'\n"],"mappings":";;;;;;;;;AAMA,MAAM,iBAAiB,IACrB,oTACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,UAAU;GACX;EACD,MAAM;GACJ,OAAO;GACP,SAAS;GACT,WAAW;GACZ;EACD,OAAO;GACL,SAAS;GACT,OAAO;GACP,SAAS;GACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,MAAM;EACP;CACF,CACF;AAeD,MAAa,UAAU,EACrB,UAAU,OACV,UACA,WACA,YACA,UACA,SACA,IACA,OACA,SACA,KACA,MACA,WACA,OACA,OAAO,UACP,UAAU,WACV,GAAG,YAGC;CACJ,MAAM,cAAc;EAClB,OAAO;GACL,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,UAAU;GACX;EACD,SAAS;GACP,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,UAAU;GACX;EACF;CAED,MAAM,UAAU,GAAG,eAAe;EAAE;EAAS;EAAO;EAAM,CAAC,EAAE,UAAU,WAAW,YAAY,MAAM,UAA4C,UAAU,aAAa,YAAY,QAAQ,UAA8C,UAAU;CAEnP,MAAM,gBAAgB,WAAW,eAAe,SAAS,IAAI,SAAS,MAAM,SAAS,KAAK;CAC1F,MAAM,UAAU,gBAAgB,SAAa,YAAY;AAEzD,KAAI,CAAC,iBAAiB,CAAC,QACrB,OAAM,IAAI,MAAM,+CAA+C;CAGjE,MAAM,8BAA8B,UAAmC;AACrE,MAAI,CAAC,SAAU;AACf,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;;AAKzB,QACE,oBAHW,gBAAgB,OAAO,UAGlC;EACE,iBAAe;EACf,WAAW,GAAG,SAAS,iBAAiB,wDAAwD,iBAAiB,YAAY,iCAAiC;EAC9J,iBAAe,gBAAgB,SAAS;EACxC,cAAY;EACZ,eAAa,cAAc,mBAAmB;EAC9C,gBAAc;EACd,UAAU,gBAAgB,SAAY;EAClC;EACK;EACT,gBAAgB,gBAAgB,6BAA6B;EACxD;EACL,UAAU,iBAAiB,WAAW,KAAK;EAC3C,MAAM,gBAAgB,SAAY;EAClC,GAAI;YAEH,gBACC,WAEA;GACG,aACC,oBAAC,QAAD;IAAM,WAAW,GAAG,QAAQ,YAAY,cAAc,OAAO;IAAE;IAAY,eAAY;cACpF;IACI;GAER,UAAU,aAAa,oBAAC,YAAD;IAAY,WAAU;IAAgC,MAAM;IAAM;GACzF;GACA,WAAW,UAAU,aACpB,oBAAC,QAAD;IAAM,WAAW,GAAG,QAAQ,YAAY,cAAc,OAAO;IAAE;IAAY,eAAY;cACpF;IACI;GAER;EAEA;;AAGX,OAAO,cAAc"}
+{"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { LoaderIcon } from '@components/Icons'\nimport { Slot, type AsChildProp } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Children, isValidElement, type ButtonHTMLAttributes, type MouseEvent, type ReactNode, type Ref } from 'react'\n\nconst buttonVariants = cva(\n  `gap-2 rounded-lg font-semibold [&_svg]:size-4 relative flex cursor-pointer items-center justify-center border font-sans! whitespace-nowrap transition-colors focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n  {\n    variants: {\n      variant: {\n        primary: `border-button-primary-border bg-button-primary-bg text-button-primary-text hover:border-button-primary-border--hover hover:bg-button-primary-bg--hover hover:text-button-primary-text--hover focus-visible:outline-button-primary-border disabled:border-button-primary-border--disabled disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled`,\n        secondary: `border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg--hover hover:text-button-secondary-text--hover focus-visible:outline-button-secondary-border disabled:border-button-secondary-border--disabled disabled:bg-button-secondary-bg--disabled disabled:text-button-secondary-text--disabled`,\n        outline: `border-button-outline-border bg-button-outline-bg text-button-outline-text hover:bg-button-outline-bg--hover hover:text-button-outline-text--hover focus-visible:outline-button-outline-border disabled:border-button-outline-border--disabled disabled:text-button-outline-text--disabled`,\n        ghost: 'border-none bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg--hover hover:text-button-ghost-text--hover focus-visible:outline-none disabled:text-button-ghost-text--disabled',\n        unstyled: 'font-inherit! font-normal gap-0 p-0! inline-flex w-auto! justify-start rounded-none! border-none! bg-transparent text-inherit shadow-none! hover:cursor-pointer hover:bg-transparent focus-visible:outline-button-outline-border disabled:opacity-50',\n      },\n      size: {\n        small: 'py-1 px-4 text-sm! w-fit',\n        default: 'py-2 px-6 text-base! w-fit',\n        fullWidth: 'py-2 px-6 text-base! w-full',\n      },\n      state: {\n        default: '',\n        error: 'bg-button-danger text-text-primary transition focus-visible:outline-button-danger',\n        loading: 'pointer-events-none cursor-wait',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      state: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport interface ButtonProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {\n  dataTestId?: string\n  disabled?: boolean\n  endIcon?: ReactNode\n  label?: string\n  onClick?: (event: MouseEvent<HTMLElement>) => void\n  size?: 'small' | 'default' | 'fullWidth'\n  startIcon?: ReactNode\n  state?: 'default' | 'error' | 'loading'\n  type?: 'button' | 'submit' | 'reset'\n  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'unstyled'\n}\n\nexport const Button = ({\n  asChild = false,\n  children,\n  className,\n  dataTestId,\n  disabled,\n  endIcon,\n  id,\n  label,\n  onClick,\n  ref,\n  size,\n  startIcon,\n  state,\n  type = 'button',\n  variant = 'primary',\n  ...props\n}: ButtonProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const stateStyles = {\n    error: {\n      primary: 'bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary',\n      secondary: 'bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary',\n      outline: 'bg-transparent border-button-danger text-button-danger hover:border-button-danger--hover hover:text-button-danger/80',\n      ghost: 'bg-transparent text-button-danger hover:text-button-danger/80',\n      unstyled: 'bg-transparent text-button-danger',\n    },\n    loading: {\n      primary: 'bg-button-primary-bg--disabled border-button-primary-border--disabled text-button-primary-text--disabled pointer-events-none',\n      secondary: 'bg-button-secondary-bg--disabled border-button-secondary-border--disabled text-button-secondary-text--disabled pointer-events-none',\n      outline: 'bg-button-outline-bg--disabled border-button-outline-border--disabled text-button-outline-text--disabled pointer-events-none',\n      ghost: 'bg-transparent text-button-ghost-text--disabled pointer-events-none',\n      unstyled: 'bg-transparent opacity-50 pointer-events-none',\n    },\n  }\n\n  const classes = cn(buttonVariants({ variant, state, size }), state === 'error' && stateStyles.error[variant as keyof typeof stateStyles.error], state === 'loading' && stateStyles.loading[variant as keyof typeof stateStyles.loading], className)\n\n  const canUseAsChild = asChild && isValidElement(children) && Children.count(children) === 1\n  const content = canUseAsChild ? undefined : (children ?? label)\n\n  if (!canUseAsChild && !content) {\n    throw new Error('Button requires either `label` or `children`')\n  }\n\n  const handleDisabledClickCapture = (event: MouseEvent<HTMLElement>) => {\n    if (!disabled) return\n    event.preventDefault()\n    event.stopPropagation()\n  }\n\n  const Comp = canUseAsChild ? Slot : 'button'\n\n  return (\n    <Comp\n      aria-disabled={disabled}\n      className={cn(classes, canUseAsChild && 'no-underline! before:content-none after:content-none', canUseAsChild && disabled && 'pointer-events-none opacity-50')}\n      data-as-child={canUseAsChild ? 'true' : undefined}\n      data-state={state}\n      data-testid={dataTestId ?? `spectral-button-${variant}`}\n      data-variant={variant}\n      disabled={canUseAsChild ? undefined : disabled}\n      id={id}\n      onClick={onClick}\n      onClickCapture={canUseAsChild ? handleDisabledClickCapture : undefined}\n      ref={ref}\n      tabIndex={canUseAsChild && disabled ? -1 : undefined}\n      type={canUseAsChild ? undefined : type}\n      {...props}\n    >\n      {canUseAsChild ? (\n        children\n      ) : (\n        <>\n          {startIcon && (\n            <span\n              className={cn('flex', variant !== 'unstyled' && 'pr-1')}\n              aria-hidden\n              data-testid='spectral-button-start-icon'\n            >\n              {startIcon}\n            </span>\n          )}\n          {state === 'loading' && (\n            <LoaderIcon\n              className='ml-2 motion-safe:animate-spin'\n              size={16}\n            />\n          )}\n          {content}\n          {endIcon && state !== 'loading' && (\n            <span\n              className={cn('flex', variant !== 'unstyled' && 'pl-2')}\n              aria-hidden\n              data-testid='spectral-button-end-icon'\n            >\n              {endIcon}\n            </span>\n          )}\n        </>\n      )}\n    </Comp>\n  )\n}\nButton.displayName = 'Button'\n"],"mappings":";;;;;;;;;AAMA,MAAM,iBAAiB,IACrB,oTACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,UAAU;GACX;EACD,MAAM;GACJ,OAAO;GACP,SAAS;GACT,WAAW;GACZ;EACD,OAAO;GACL,SAAS;GACT,OAAO;GACP,SAAS;GACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,MAAM;EACP;CACF,CACF;AAeD,MAAa,UAAU,EACrB,UAAU,OACV,UACA,WACA,YACA,UACA,SACA,IACA,OACA,SACA,KACA,MACA,WACA,OACA,OAAO,UACP,UAAU,WACV,GAAG,YAGC;CACJ,MAAM,cAAc;EAClB,OAAO;GACL,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,UAAU;GACX;EACD,SAAS;GACP,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,UAAU;GACX;EACF;CAED,MAAM,UAAU,GAAG,eAAe;EAAE;EAAS;EAAO;EAAM,CAAC,EAAE,UAAU,WAAW,YAAY,MAAM,UAA4C,UAAU,aAAa,YAAY,QAAQ,UAA8C,UAAU;CAEnP,MAAM,gBAAgB,WAAW,eAAe,SAAS,IAAI,SAAS,MAAM,SAAS,KAAK;CAC1F,MAAM,UAAU,gBAAgB,SAAa,YAAY;AAEzD,KAAI,CAAC,iBAAiB,CAAC,QACrB,OAAM,IAAI,MAAM,+CAA+C;CAGjE,MAAM,8BAA8B,UAAmC;AACrE,MAAI,CAAC,SAAU;AACf,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;;AAKzB,QACE,oBAHW,gBAAgB,OAAO,UAGlC;EACE,iBAAe;EACf,WAAW,GAAG,SAAS,iBAAiB,wDAAwD,iBAAiB,YAAY,iCAAiC;EAC9J,iBAAe,gBAAgB,SAAS;EACxC,cAAY;EACZ,eAAa,cAAc,mBAAmB;EAC9C,gBAAc;EACd,UAAU,gBAAgB,SAAY;EAClC;EACK;EACT,gBAAgB,gBAAgB,6BAA6B;EACxD;EACL,UAAU,iBAAiB,WAAW,KAAK;EAC3C,MAAM,gBAAgB,SAAY;EAClC,GAAI;YAEH,gBACC,WAEA;GACG,aACC,oBAAC,QAAD;IACE,WAAW,GAAG,QAAQ,YAAY,cAAc,OAAO;IACvD;IACA,eAAY;cAEX;IACI;GAER,UAAU,aACT,oBAAC,YAAD;IACE,WAAU;IACV,MAAM;IACN;GAEH;GACA,WAAW,UAAU,aACpB,oBAAC,QAAD;IACE,WAAW,GAAG,QAAQ,YAAY,cAAc,OAAO;IACvD;IACA,eAAY;cAEX;IACI;GAER;EAEA;;AAGX,OAAO,cAAc"}

package/dist/ButtonGroup/ButtonGroupButton.js

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 
 //#region src/components/ButtonGroup/ButtonGroupButton.tsx
-const buttonVariants = cva(`gap-2 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 aria-invalid:ring-destructive/20 aria-invalid:border-destructive inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius,0.375rem)] bg-level-one whitespace-nowrap text-text-primary transition-all outline-none hover:bg-level-two focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:bg-accent active:text-text-inverted disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`, {
+const buttonVariants = cva(`gap-2 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 aria-invalid:ring-destructive/20 aria-invalid:border-destructive inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius,0.375rem)] bg-level-one whitespace-nowrap text-text-primary transition-colors outline-none hover:bg-level-two focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:bg-accent active:text-text-inverted disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`, {
 	variants: {
 		variant: {
 			default: "",

package/dist/ButtonGroup/ButtonGroupButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroupButton.js","names":[],"sources":["../../src/components/ButtonGroup/ButtonGroupButton.tsx"],"sourcesContent":["import { Slot } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps } from 'react'\n\nexport const buttonVariants = cva(\n  `gap-2 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 aria-invalid:ring-destructive/20 aria-invalid:border-destructive inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius,0.375rem)] bg-level-one whitespace-nowrap text-text-primary transition-all outline-none hover:bg-level-two focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:bg-accent active:text-text-inverted disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n  {\n    variants: {\n      variant: {\n        default: '',\n        outline: 'border border-level-three',\n      },\n      size: {\n        md: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 px-6 has-[>svg]:px-4',\n        'icon-md': 'size-9',\n        'icon-sm': 'size-8',\n        'icon-lg': 'size-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  },\n)\n\nexport const ButtonGroupButton = ({\n  asChild = false,\n  className,\n  size,\n  variant,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return <Comp className={cn(buttonVariants({ variant, size, className }))} data-size={size} data-slot='button-group-item' data-variant={variant} {...props} />\n}\nButtonGroupButton.displayName = 'ButtonGroupButton'\n"],"mappings":";;;;;;;;AAKA,MAAa,iBAAiB,IAC5B,6jBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACV;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,WAAW;GACX,WAAW;GACX,WAAW;GACZ;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAED,MAAa,qBAAqB,EAChC,UAAU,OACV,WACA,MACA,SACA,GAAG,YAIG;AAGN,QAAO,oBAFM,UAAU,OAAO,UAEvB;EAAM,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAAE,aAAW;EAAM,aAAU;EAAoB,gBAAc;EAAS,GAAI;EAAS;;AAE/J,kBAAkB,cAAc"}
+{"version":3,"file":"ButtonGroupButton.js","names":[],"sources":["../../src/components/ButtonGroup/ButtonGroupButton.tsx"],"sourcesContent":["import { Slot } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps } from 'react'\n\nexport const buttonVariants = cva(\n  `gap-2 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 aria-invalid:ring-destructive/20 aria-invalid:border-destructive inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius,0.375rem)] bg-level-one whitespace-nowrap text-text-primary transition-colors outline-none hover:bg-level-two focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:bg-accent active:text-text-inverted disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n  {\n    variants: {\n      variant: {\n        default: '',\n        outline: 'border border-level-three',\n      },\n      size: {\n        md: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 px-6 has-[>svg]:px-4',\n        'icon-md': 'size-9',\n        'icon-sm': 'size-8',\n        'icon-lg': 'size-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  },\n)\n\nexport const ButtonGroupButton = ({\n  asChild = false,\n  className,\n  size,\n  variant,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      className={cn(buttonVariants({ variant, size, className }))}\n      data-size={size}\n      data-slot='button-group-item'\n      data-variant={variant}\n      {...props}\n    />\n  )\n}\nButtonGroupButton.displayName = 'ButtonGroupButton'\n"],"mappings":";;;;;;;;AAKA,MAAa,iBAAiB,IAC5B,gkBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACV;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,WAAW;GACX,WAAW;GACX,WAAW;GACZ;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAED,MAAa,qBAAqB,EAChC,UAAU,OACV,WACA,MACA,SACA,GAAG,YAIG;AAGN,QACE,oBAHW,UAAU,OAAO,UAG5B;EACE,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC3D,aAAW;EACX,aAAU;EACV,gBAAc;EACd,GAAI;EACJ;;AAGN,kBAAkB,cAAc"}

package/dist/ButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","names":[],"sources":["../src/components/ButtonGroup/ButtonGroup.tsx"],"mappings":";;;;;;;;KAYY,gBAAA,GAAmB,cAAA,QAAsB,WAAA,IAAe,YAAA,QAAoB,mBAAA;AAAA,cAE3E,mBAAA,GAAmB,KAAA;;IAa/B,iCAAA,CAAA,SAAA;AAAA;EAGC,QAAA;EACA,SAAA;EACA,WAAA;EACA,IAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,cAAA,UACD,YAAA,QAAoB,mBAAA;EAClB,IAAA;EACA,OAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAkBD,OAAA;EACA,QAAA;EACA,SAAA;EACA,IAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,OAAA;EACA,IAAA;EACA,OAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;cASY,eAAA;EAAe,OAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAIzB,cAAA;EACD,OAAA;AAAA,MACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;EAMC,SAAA;EACA,WAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,SAAA;EACvB,WAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}
+{"version":3,"file":"ButtonGroup.d.ts","names":[],"sources":["../src/components/ButtonGroup/ButtonGroup.tsx"],"mappings":";;;;;;;;KAYY,gBAAA,GAAmB,cAAA,QAAsB,WAAA,IAAe,YAAA,QAAoB,mBAAA;AAAA,cAE3E,mBAAA,GAAmB,KAAA;;IAa/B,iCAAA,CAAA,SAAA;AAAA;EAGC,QAAA;EACA,SAAA;EACA,WAAA;EACA,IAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,cAAA,UACD,YAAA,QAAoB,mBAAA;EAClB,IAAA;EACA,OAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EA0BD,OAAA;EACA,QAAA;EACA,SAAA;EACA,IAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,OAAA;EACA,IAAA;EACA,OAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;cAkBY,eAAA;EAAe,OAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAIzB,cAAA;EACD,OAAA;AAAA,MACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;EAaC,SAAA;EACA,WAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,SAAA;EACvB,WAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { Separator } from '@components/Separator/Separator'\nimport { Slot } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Children, cloneElement, isValidElement, type ComponentProps, type ReactElement } from 'react'\nimport { ButtonGroupButton } from './ButtonGroupButton'\n\ninterface ButtonGroupChildProps {\n  size?: 'md' | 'sm' | 'lg' | 'icon-md' | 'icon-sm' | 'icon-lg'\n  variant?: 'default' | 'outline'\n}\n\nexport type ButtonGroupProps = ComponentProps<typeof ButtonGroup> & VariantProps<typeof buttonGroupVariants>\n\nexport const buttonGroupVariants = cva(\n  `has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2 flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1`,\n  {\n    variants: {\n      orientation: {\n        horizontal: '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',\n        vertical: 'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n    },\n  },\n)\n\nexport const ButtonGroup = ({\n  children,\n  className,\n  orientation = 'horizontal',\n  size = 'md',\n  variant = 'default',\n  ...props\n}: ComponentProps<'div'> &\n  VariantProps<typeof buttonGroupVariants> & {\n    size?: 'md' | 'sm' | 'lg' | 'icon-md' | 'icon-sm' | 'icon-lg'\n    variant?: 'default' | 'outline'\n  }) => {\n  return (\n    <div aria-label={props['aria-label']} className={cn(buttonGroupVariants({ orientation }), className)} data-orientation={orientation} data-slot='button-group' data-testid='spectral-button-group' role='group' {...props}>\n      {Children.map(children, (child) => {\n        if (isValidElement<ButtonGroupChildProps>(child) && (child.type === ButtonGroupItem || child.type === ButtonGroupButton)) {\n          return cloneElement(child as ReactElement<ButtonGroupChildProps>, {\n            variant: child.props.variant ?? variant,\n            size: child.props.size ?? size,\n          })\n        }\n        return child\n      })}\n    </div>\n  )\n}\nButtonGroup.displayName = 'ButtonGroup'\n\nexport const ButtonGroupItem = ({\n  asChild,\n  children,\n  className,\n  size,\n  variant,\n  ...props\n}: ComponentProps<'button'> & {\n  asChild?: boolean\n  size?: 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-md' | 'icon-lg'\n  variant?: 'default' | 'outline'\n}) => {\n  return (\n    <ButtonGroupButton asChild={asChild} className={cn(className)} data-slot='button-group-item' data-testid='spectral-button-group-item' data-variant={variant} size={size} variant={variant} {...props}>\n      {children}\n    </ButtonGroupButton>\n  )\n}\nButtonGroupItem.displayName = 'ButtonGroupItem'\n\nexport const ButtonGroupText = ({\n  asChild = false,\n  className,\n  ...props\n}: ComponentProps<'div'> & {\n  asChild?: boolean\n}) => {\n  const Comp = asChild ? Slot : 'div'\n  return <Comp className={cn(`bg-muted gap-2 rounded-md px-4 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center border [&_svg]:pointer-events-none`, className)} data-slot='button-group-text' data-testid='spectral-button-group-text' {...props} />\n}\n\nexport const ButtonGroupSeparator = ({\n  className,\n  orientation = 'vertical',\n  ...props\n}: ComponentProps<typeof Separator> & {\n  orientation?: 'vertical' | 'horizontal'\n}) => {\n  return <Separator className={cn('m-0! relative self-stretch bg-input-primitive-border data-[orientation=vertical]:h-auto', className)} data-slot='button-group-separator' data-testid='spectral-button-group-separator' orientation={orientation} {...props} />\n}\nButtonGroupSeparator.displayName = 'ButtonGroupSeparator'\n"],"mappings":";;;;;;;;;;AAcA,MAAa,sBAAsB,IACjC,oSACA;CACE,UAAU,EACR,aAAa;EACX,YAAY;EACZ,UAAU;EACX,EACF;CACD,iBAAiB,EACf,aAAa,cACd;CACF,CACF;AAED,MAAa,eAAe,EAC1B,UACA,WACA,cAAc,cACd,OAAO,MACP,UAAU,WACV,GAAG,YAKG;AACN,QACE,oBAAC,OAAD;EAAK,cAAY,MAAM;EAAe,WAAW,GAAG,oBAAoB,EAAE,aAAa,CAAC,EAAE,UAAU;EAAE,oBAAkB;EAAa,aAAU;EAAe,eAAY;EAAwB,MAAK;EAAQ,GAAI;YAChN,SAAS,IAAI,WAAW,UAAU;AACjC,OAAI,eAAsC,MAAM,KAAK,MAAM,SAAS,mBAAmB,MAAM,SAAS,mBACpG,QAAO,aAAa,OAA8C;IAChE,SAAS,MAAM,MAAM,WAAW;IAChC,MAAM,MAAM,MAAM,QAAQ;IAC3B,CAAC;AAEJ,UAAO;IACP;EACE;;AAGV,YAAY,cAAc;AAE1B,MAAa,mBAAmB,EAC9B,SACA,UACA,WACA,MACA,SACA,GAAG,YAKC;AACJ,QACE,oBAAC,mBAAD;EAA4B;EAAS,WAAW,GAAG,UAAU;EAAE,aAAU;EAAoB,eAAY;EAA6B,gBAAc;EAAe;EAAe;EAAS,GAAI;EAC5L;EACiB;;AAGxB,gBAAgB,cAAc;AAE9B,MAAa,mBAAmB,EAC9B,UAAU,OACV,WACA,GAAG,YAGC;AAEJ,QAAO,oBADM,UAAU,OAAO,OACvB;EAAM,WAAW,GAAG,0JAA0J,UAAU;EAAE,aAAU;EAAoB,eAAY;EAA6B,GAAI;EAAS;;AAGvR,MAAa,wBAAwB,EACnC,WACA,cAAc,YACd,GAAG,YAGC;AACJ,QAAO,oBAAC,WAAD;EAAW,WAAW,GAAG,2FAA2F,UAAU;EAAE,aAAU;EAAyB,eAAY;EAA+C;EAAa,GAAI;EAAS;;AAEjQ,qBAAqB,cAAc"}
+{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { Separator } from '@components/Separator/Separator'\nimport { Slot } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Children, cloneElement, isValidElement, type ComponentProps, type ReactElement } from 'react'\nimport { ButtonGroupButton } from './ButtonGroupButton'\n\ninterface ButtonGroupChildProps {\n  size?: 'md' | 'sm' | 'lg' | 'icon-md' | 'icon-sm' | 'icon-lg'\n  variant?: 'default' | 'outline'\n}\n\nexport type ButtonGroupProps = ComponentProps<typeof ButtonGroup> & VariantProps<typeof buttonGroupVariants>\n\nexport const buttonGroupVariants = cva(\n  `has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2 flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1`,\n  {\n    variants: {\n      orientation: {\n        horizontal: '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',\n        vertical: 'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n    },\n  },\n)\n\nexport const ButtonGroup = ({\n  children,\n  className,\n  orientation = 'horizontal',\n  size = 'md',\n  variant = 'default',\n  ...props\n}: ComponentProps<'div'> &\n  VariantProps<typeof buttonGroupVariants> & {\n    size?: 'md' | 'sm' | 'lg' | 'icon-md' | 'icon-sm' | 'icon-lg'\n    variant?: 'default' | 'outline'\n  }) => {\n  return (\n    <div\n      aria-label={props['aria-label']}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      data-orientation={orientation}\n      data-slot='button-group'\n      data-testid='spectral-button-group'\n      role='group'\n      {...props}\n    >\n      {Children.map(children, (child) => {\n        if (isValidElement<ButtonGroupChildProps>(child) && (child.type === ButtonGroupItem || child.type === ButtonGroupButton)) {\n          return cloneElement(child as ReactElement<ButtonGroupChildProps>, {\n            variant: child.props.variant ?? variant,\n            size: child.props.size ?? size,\n          })\n        }\n        return child\n      })}\n    </div>\n  )\n}\nButtonGroup.displayName = 'ButtonGroup'\n\nexport const ButtonGroupItem = ({\n  asChild,\n  children,\n  className,\n  size,\n  variant,\n  ...props\n}: ComponentProps<'button'> & {\n  asChild?: boolean\n  size?: 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-md' | 'icon-lg'\n  variant?: 'default' | 'outline'\n}) => {\n  return (\n    <ButtonGroupButton\n      asChild={asChild}\n      className={cn(className)}\n      data-slot='button-group-item'\n      data-testid='spectral-button-group-item'\n      data-variant={variant}\n      size={size}\n      variant={variant}\n      {...props}\n    >\n      {children}\n    </ButtonGroupButton>\n  )\n}\nButtonGroupItem.displayName = 'ButtonGroupItem'\n\nexport const ButtonGroupText = ({\n  asChild = false,\n  className,\n  ...props\n}: ComponentProps<'div'> & {\n  asChild?: boolean\n}) => {\n  const Comp = asChild ? Slot : 'div'\n  return (\n    <Comp\n      className={cn(`bg-muted gap-2 rounded-md px-4 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center border [&_svg]:pointer-events-none`, className)}\n      data-slot='button-group-text'\n      data-testid='spectral-button-group-text'\n      {...props}\n    />\n  )\n}\n\nexport const ButtonGroupSeparator = ({\n  className,\n  orientation = 'vertical',\n  ...props\n}: ComponentProps<typeof Separator> & {\n  orientation?: 'vertical' | 'horizontal'\n}) => {\n  return (\n    <Separator\n      className={cn('m-0! relative self-stretch bg-input-primitive-border data-[orientation=vertical]:h-auto', className)}\n      data-slot='button-group-separator'\n      data-testid='spectral-button-group-separator'\n      orientation={orientation}\n      {...props}\n    />\n  )\n}\nButtonGroupSeparator.displayName = 'ButtonGroupSeparator'\n"],"mappings":";;;;;;;;;;AAcA,MAAa,sBAAsB,IACjC,oSACA;CACE,UAAU,EACR,aAAa;EACX,YAAY;EACZ,UAAU;EACX,EACF;CACD,iBAAiB,EACf,aAAa,cACd;CACF,CACF;AAED,MAAa,eAAe,EAC1B,UACA,WACA,cAAc,cACd,OAAO,MACP,UAAU,WACV,GAAG,YAKG;AACN,QACE,oBAAC,OAAD;EACE,cAAY,MAAM;EAClB,WAAW,GAAG,oBAAoB,EAAE,aAAa,CAAC,EAAE,UAAU;EAC9D,oBAAkB;EAClB,aAAU;EACV,eAAY;EACZ,MAAK;EACL,GAAI;YAEH,SAAS,IAAI,WAAW,UAAU;AACjC,OAAI,eAAsC,MAAM,KAAK,MAAM,SAAS,mBAAmB,MAAM,SAAS,mBACpG,QAAO,aAAa,OAA8C;IAChE,SAAS,MAAM,MAAM,WAAW;IAChC,MAAM,MAAM,MAAM,QAAQ;IAC3B,CAAC;AAEJ,UAAO;IACP;EACE;;AAGV,YAAY,cAAc;AAE1B,MAAa,mBAAmB,EAC9B,SACA,UACA,WACA,MACA,SACA,GAAG,YAKC;AACJ,QACE,oBAAC,mBAAD;EACW;EACT,WAAW,GAAG,UAAU;EACxB,aAAU;EACV,eAAY;EACZ,gBAAc;EACR;EACG;EACT,GAAI;EAEH;EACiB;;AAGxB,gBAAgB,cAAc;AAE9B,MAAa,mBAAmB,EAC9B,UAAU,OACV,WACA,GAAG,YAGC;AAEJ,QACE,oBAFW,UAAU,OAAO,OAE5B;EACE,WAAW,GAAG,0JAA0J,UAAU;EAClL,aAAU;EACV,eAAY;EACZ,GAAI;EACJ;;AAIN,MAAa,wBAAwB,EACnC,WACA,cAAc,YACd,GAAG,YAGC;AACJ,QACE,oBAAC,WAAD;EACE,WAAW,GAAG,2FAA2F,UAAU;EACnH,aAAU;EACV,eAAY;EACC;EACb,GAAI;EACJ;;AAGN,qBAAqB,cAAc"}

package/dist/ButtonIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.js","names":[],"sources":["../src/components/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import { LoaderIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { cloneElement, isValidElement, type ButtonHTMLAttributes, type MouseEvent, type ReactElement, type Ref, type SVGProps } from 'react'\n\ntype IconOrSVG = ReactElement | (() => ReactElement)\n\nexport interface ButtonIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  className?: string\n  icon: IconOrSVG\n  isLoading?: boolean\n  label: string\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void\n  shape?: 'circle' | 'square'\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst buttonStyles = `bg-transparent hover:bg-level-one text-text-primary inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-none focus-visible:outline-2\n  focus-visible:outline-offset-2 focus-visible:outline-level-two cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0`\n\nconst sizeConfig = {\n  sm: { button: 'h-8 w-8', icon: 16 },\n  md: { button: 'h-10 w-10', icon: 24 },\n  lg: { button: 'h-12 w-12', icon: 32 },\n} as const\n\nexport const ButtonIcon = ({\n  className,\n  disabled,\n  icon,\n  isLoading = false,\n  label,\n  onClick,\n  ref,\n  shape = 'square',\n  size = 'md',\n  ...props\n}: ButtonIconProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => onClick?.(event)\n\n  const effectiveLabel = isLoading ? `${label} - Loading` : label\n\n  const renderIcon = (): ReactElement => {\n    if (isLoading) {\n      return <LoaderIcon size={sizeConfig[size as keyof typeof sizeConfig].icon} aria-hidden='true' />\n    }\n\n    const iconElement = typeof icon === 'function' ? icon() : icon\n\n    if (isValidElement(iconElement)) {\n      const currentSize = sizeConfig[size as keyof typeof sizeConfig].icon\n\n      if (iconElement.type === 'svg') {\n        return cloneElement(iconElement as ReactElement<SVGProps<SVGSVGElement>>, {\n          className: cn('shrink-0', (iconElement.props as { className?: string }).className),\n          height: currentSize,\n          width: currentSize,\n          'aria-hidden': 'true',\n        })\n      }\n\n      // For icon components, pass size prop if the element accepts it\n      const baseIconProps = {\n        'aria-hidden': 'true',\n        className: cn('shrink-0', (iconElement.props as { className?: string }).className),\n      }\n\n      // Check if this is an icon component that accepts size prop\n      // All our icon components accept refs and have displayName containing 'Icon'\n      const componentType = iconElement.type as { displayName?: string }\n      const isIconComponent = componentType.displayName?.endsWith('Icon') ?? false\n\n      if (isIconComponent) {\n        const iconPropsWithSize = {\n          ...baseIconProps,\n          size: currentSize,\n        }\n        return cloneElement(iconElement, iconPropsWithSize)\n      }\n\n      return cloneElement(iconElement, baseIconProps)\n    }\n\n    return iconElement\n  }\n\n  return (\n    <button\n      aria-label={effectiveLabel}\n      className={cn(buttonStyles, shape === 'circle' ? 'rounded-full' : 'rounded-xl', sizeConfig[size as keyof typeof sizeConfig].button, isLoading && 'cursor-wait', disabled && 'cursor-not-allowed opacity-50', className)}\n      data-testid='spectral-button-icon'\n      disabled={disabled ?? isLoading}\n      onClick={handleClick}\n      ref={ref}\n      type='button'\n      {...props}\n    >\n      {renderIcon()}\n    </button>\n  )\n}\nButtonIcon.displayName = 'ButtonIcon'\n"],"mappings":";;;;;;;AAgBA,MAAM,eAAe;;AAGrB,MAAM,aAAa;CACjB,IAAI;EAAE,QAAQ;EAAW,MAAM;EAAI;CACnC,IAAI;EAAE,QAAQ;EAAa,MAAM;EAAI;CACrC,IAAI;EAAE,QAAQ;EAAa,MAAM;EAAI;CACtC;AAED,MAAa,cAAc,EACzB,WACA,UACA,MACA,YAAY,OACZ,OACA,SACA,KACA,QAAQ,UACR,OAAO,MACP,GAAG,YAGC;CACJ,MAAM,eAAe,UAAyC,UAAU,MAAM;CAE9E,MAAM,iBAAiB,YAAY,GAAG,MAAM,cAAc;CAE1D,MAAM,mBAAiC;AACrC,MAAI,UACF,QAAO,oBAAC,YAAD;GAAY,MAAM,WAAW,MAAiC;GAAM,eAAY;GAAS;EAGlG,MAAM,cAAc,OAAO,SAAS,aAAa,MAAM,GAAG;AAE1D,MAAI,eAAe,YAAY,EAAE;GAC/B,MAAM,cAAc,WAAW,MAAiC;AAEhE,OAAI,YAAY,SAAS,MACvB,QAAO,aAAa,aAAsD;IACxE,WAAW,GAAG,YAAa,YAAY,MAAiC,UAAU;IAClF,QAAQ;IACR,OAAO;IACP,eAAe;IAChB,CAAC;GAIJ,MAAM,gBAAgB;IACpB,eAAe;IACf,WAAW,GAAG,YAAa,YAAY,MAAiC,UAAU;IACnF;AAOD,OAHsB,YAAY,KACI,aAAa,SAAS,OAAO,IAAI,MAOrE,QAAO,aAAa,aAAa;IAH/B,GAAG;IACH,MAAM;IAE0C,CAAC;AAGrD,UAAO,aAAa,aAAa,cAAc;;AAGjD,SAAO;;AAGT,QACE,oBAAC,UAAD;EACE,cAAY;EACZ,WAAW,GAAG,cAAc,UAAU,WAAW,iBAAiB,cAAc,WAAW,MAAiC,QAAQ,aAAa,eAAe,YAAY,iCAAiC,UAAU;EACvN,eAAY;EACZ,UAAU,YAAY;EACtB,SAAS;EACJ;EACL,MAAK;EACL,GAAI;YAEH,YAAY;EACN;;AAGb,WAAW,cAAc"}
+{"version":3,"file":"ButtonIcon.js","names":[],"sources":["../src/components/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import { LoaderIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { cloneElement, isValidElement, type ButtonHTMLAttributes, type MouseEvent, type ReactElement, type Ref, type SVGProps } from 'react'\n\ntype IconOrSVG = ReactElement | (() => ReactElement)\n\nexport interface ButtonIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  className?: string\n  icon: IconOrSVG\n  isLoading?: boolean\n  label: string\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void\n  shape?: 'circle' | 'square'\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst buttonStyles = `bg-transparent hover:bg-level-one text-text-primary inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-none focus-visible:outline-2\n  focus-visible:outline-offset-2 focus-visible:outline-level-two cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0`\n\nconst sizeConfig = {\n  sm: { button: 'h-8 w-8', icon: 16 },\n  md: { button: 'h-10 w-10', icon: 24 },\n  lg: { button: 'h-12 w-12', icon: 32 },\n} as const\n\nexport const ButtonIcon = ({\n  className,\n  disabled,\n  icon,\n  isLoading = false,\n  label,\n  onClick,\n  ref,\n  shape = 'square',\n  size = 'md',\n  ...props\n}: ButtonIconProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => onClick?.(event)\n\n  const effectiveLabel = isLoading ? `${label} - Loading` : label\n\n  const renderIcon = (): ReactElement => {\n    if (isLoading) {\n      return (\n        <LoaderIcon\n          size={sizeConfig[size as keyof typeof sizeConfig].icon}\n          aria-hidden='true'\n        />\n      )\n    }\n\n    const iconElement = typeof icon === 'function' ? icon() : icon\n\n    if (isValidElement(iconElement)) {\n      const currentSize = sizeConfig[size as keyof typeof sizeConfig].icon\n\n      if (iconElement.type === 'svg') {\n        return cloneElement(iconElement as ReactElement<SVGProps<SVGSVGElement>>, {\n          className: cn('shrink-0', (iconElement.props as { className?: string }).className),\n          height: currentSize,\n          width: currentSize,\n          'aria-hidden': 'true',\n        })\n      }\n\n      // For icon components, pass size prop if the element accepts it\n      const baseIconProps = {\n        'aria-hidden': 'true',\n        className: cn('shrink-0', (iconElement.props as { className?: string }).className),\n      }\n\n      // Check if this is an icon component that accepts size prop\n      // All our icon components accept refs and have displayName containing 'Icon'\n      const componentType = iconElement.type as { displayName?: string }\n      const isIconComponent = componentType.displayName?.endsWith('Icon') ?? false\n\n      if (isIconComponent) {\n        const iconPropsWithSize = {\n          ...baseIconProps,\n          size: currentSize,\n        }\n        return cloneElement(iconElement, iconPropsWithSize)\n      }\n\n      return cloneElement(iconElement, baseIconProps)\n    }\n\n    return iconElement\n  }\n\n  return (\n    <button\n      aria-label={effectiveLabel}\n      className={cn(buttonStyles, shape === 'circle' ? 'rounded-full' : 'rounded-xl', sizeConfig[size as keyof typeof sizeConfig].button, isLoading && 'cursor-wait', disabled && 'cursor-not-allowed opacity-50', className)}\n      data-testid='spectral-button-icon'\n      disabled={disabled ?? isLoading}\n      onClick={handleClick}\n      ref={ref}\n      type='button'\n      {...props}\n    >\n      {renderIcon()}\n    </button>\n  )\n}\nButtonIcon.displayName = 'ButtonIcon'\n"],"mappings":";;;;;;;AAgBA,MAAM,eAAe;;AAGrB,MAAM,aAAa;CACjB,IAAI;EAAE,QAAQ;EAAW,MAAM;EAAI;CACnC,IAAI;EAAE,QAAQ;EAAa,MAAM;EAAI;CACrC,IAAI;EAAE,QAAQ;EAAa,MAAM;EAAI;CACtC;AAED,MAAa,cAAc,EACzB,WACA,UACA,MACA,YAAY,OACZ,OACA,SACA,KACA,QAAQ,UACR,OAAO,MACP,GAAG,YAGC;CACJ,MAAM,eAAe,UAAyC,UAAU,MAAM;CAE9E,MAAM,iBAAiB,YAAY,GAAG,MAAM,cAAc;CAE1D,MAAM,mBAAiC;AACrC,MAAI,UACF,QACE,oBAAC,YAAD;GACE,MAAM,WAAW,MAAiC;GAClD,eAAY;GACZ;EAIN,MAAM,cAAc,OAAO,SAAS,aAAa,MAAM,GAAG;AAE1D,MAAI,eAAe,YAAY,EAAE;GAC/B,MAAM,cAAc,WAAW,MAAiC;AAEhE,OAAI,YAAY,SAAS,MACvB,QAAO,aAAa,aAAsD;IACxE,WAAW,GAAG,YAAa,YAAY,MAAiC,UAAU;IAClF,QAAQ;IACR,OAAO;IACP,eAAe;IAChB,CAAC;GAIJ,MAAM,gBAAgB;IACpB,eAAe;IACf,WAAW,GAAG,YAAa,YAAY,MAAiC,UAAU;IACnF;AAOD,OAHsB,YAAY,KACI,aAAa,SAAS,OAAO,IAAI,MAOrE,QAAO,aAAa,aAAa;IAH/B,GAAG;IACH,MAAM;IAE0C,CAAC;AAGrD,UAAO,aAAa,aAAa,cAAc;;AAGjD,SAAO;;AAGT,QACE,oBAAC,UAAD;EACE,cAAY;EACZ,WAAW,GAAG,cAAc,UAAU,WAAW,iBAAiB,cAAc,WAAW,MAAiC,QAAQ,aAAa,eAAe,YAAY,iCAAiC,UAAU;EACvN,eAAY;EACZ,UAAU,YAAY;EACtB,SAAS;EACJ;EACL,MAAK;EACL,GAAI;YAEH,YAAY;EACN;;AAGb,WAAW,cAAc"}

package/dist/Checkbox/CheckboxBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxBase.js","names":[],"sources":["../../src/components/Checkbox/CheckboxBase.tsx"],"sourcesContent":["import { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { Slot, type AsChildProp } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { createContext, useCallback, useContext, useEffect, useId, useRef, type ButtonHTMLAttributes, type ElementType, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type Ref } from 'react'\n\nexport type CheckedState = boolean | 'indeterminate'\n\ntype BaseButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value'>\n\nexport type CheckboxBaseProps = BaseButtonProps &\n  AsChildProp & {\n    checked?: CheckedState\n    defaultChecked?: CheckedState\n    form?: string\n    name?: string\n    onCheckedChange?: (checked: CheckedState) => void\n    required?: boolean\n    value?: string\n  }\n\ninterface Ctx {\n  disabled: boolean | undefined\n  state: CheckedState\n}\n\nconst CheckboxCtx = createContext<Ctx | null>(null)\n\nconst dataState = (checked: CheckedState): 'checked' | 'unchecked' | 'indeterminate' => {\n  if (checked === 'indeterminate') return 'indeterminate'\n  return checked ? 'checked' : 'unchecked'\n}\n\nconst getNext = (checked: CheckedState): CheckedState => {\n  if (checked === 'indeterminate') return true\n  return !checked\n}\n\nexport const CheckboxBase = ({\n  asChild,\n  checked,\n  className,\n  defaultChecked = false,\n  disabled,\n  form,\n  id,\n  name,\n  onCheckedChange,\n  onClick,\n  onKeyDown,\n  ref,\n  required,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type,\n  value = 'on',\n  ...rest\n}: CheckboxBaseProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const autoId = useId()\n  const resolvedId = id ?? `chk-${autoId}`\n\n  const [state, setState] = useUncontrolledState<CheckedState>({\n    defaultValue: defaultChecked,\n    onChange: onCheckedChange,\n    value: checked,\n  })\n\n  useEffect(() => {\n    if (inputRef.current) inputRef.current.indeterminate = state === 'indeterminate'\n  }, [state])\n\n  useEffect(() => {\n    const formEl = inputRef.current?.form ?? null\n    if (!formEl) return\n    const handleReset = () => {\n      setState(defaultChecked)\n    }\n    formEl.addEventListener('reset', handleReset)\n    return () => formEl.removeEventListener('reset', handleReset)\n  }, [defaultChecked, setState])\n\n  const emitFormChange = useCallback(() => {\n    const el = inputRef.current\n    if (!el) return\n    el.checked = state === true\n    el.indeterminate = state === 'indeterminate'\n    const event = new Event('change', { bubbles: true })\n    el.dispatchEvent(event)\n  }, [state])\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return\n    const next = getNext(state)\n    setState(next)\n    queueMicrotask(() => emitFormChange())\n  }, [disabled, emitFormChange, setState, state])\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(e)\n      if (e.defaultPrevented) return\n      handleToggle()\n    },\n    [handleToggle, onClick],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(e)\n      if (e.defaultPrevented) return\n      if (e.key === ' ') {\n        e.preventDefault()\n        handleToggle()\n      }\n    },\n    [handleToggle, onKeyDown],\n  )\n\n  const Comp: ElementType = asChild ? Slot : 'button'\n\n  return (\n    <CheckboxCtx.Provider value={{ state, disabled }}>\n      <Comp\n        aria-checked={state === 'indeterminate' ? 'mixed' : state}\n        aria-disabled={disabled ?? undefined}\n        className={cn(\n          'h-4 w-4 inline-flex shrink-0 items-center justify-center',\n          'border-input rounded-sm border bg-background',\n          'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n          className,\n        )}\n        data-indeterminate={state === 'indeterminate' ? '' : undefined}\n        data-state={dataState(state)}\n        disabled={disabled}\n        id={resolvedId}\n        ref={ref}\n        role='checkbox' // oxlint-disable-line jsx-a11y/prefer-tag-over-role\n        type='button'\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {/* hidden input for forms */}\n        <input\n          aria-hidden='true'\n          checked={state === true}\n          disabled={disabled}\n          form={form}\n          name={name}\n          readOnly\n          ref={inputRef}\n          required={required}\n          // visually hidden but in the DOM for form submission\n          style={{\n            position: 'absolute',\n            opacity: 0,\n            width: 0,\n            height: 0,\n            pointerEvents: 'none',\n          }}\n          tabIndex={-1}\n          type='checkbox'\n          value={value}\n        />\n        {rest.children}\n      </Comp>\n    </CheckboxCtx.Provider>\n  )\n}\nCheckboxBase.displayName = 'CheckboxBase'\n\nexport type CheckboxIndicatorProps = HTMLAttributes<HTMLSpanElement> &\n  AsChildProp & {\n    forceMount?: boolean\n  }\n\nexport const CheckboxIndicator = ({\n  asChild,\n  className,\n  forceMount,\n  ref,\n  ...props\n}: CheckboxIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}) => {\n  const ctx = useContext(CheckboxCtx)\n  if (!ctx) return null\n  const visible = ctx.state === true || ctx.state === 'indeterminate'\n  if (!visible && !forceMount) return null\n\n  const Comp: ElementType = asChild ? Slot : 'span'\n\n  return <Comp className={cn('flex items-center justify-center text-current', className)} data-indeterminate={ctx.state === 'indeterminate' ? '' : undefined} data-state={dataState(ctx.state)} ref={ref} {...props} />\n}\nCheckboxIndicator.displayName = 'CheckboxIndicator'\n"],"mappings":";;;;;;;;AAyBA,MAAM,cAAc,cAA0B,KAAK;AAEnD,MAAM,aAAa,YAAqE;AACtF,KAAI,YAAY,gBAAiB,QAAO;AACxC,QAAO,UAAU,YAAY;;AAG/B,MAAM,WAAW,YAAwC;AACvD,KAAI,YAAY,gBAAiB,QAAO;AACxC,QAAO,CAAC;;AAGV,MAAa,gBAAgB,EAC3B,SACA,SACA,WACA,iBAAiB,OACjB,UACA,MACA,IACA,MACA,iBACA,SACA,WACA,KACA,UAEA,MACA,QAAQ,MACR,GAAG,WAGC;CACJ,MAAM,WAAW,OAAgC,KAAK;CACtD,MAAM,SAAS,OAAO;CACtB,MAAM,aAAa,MAAM,OAAO;CAEhC,MAAM,CAAC,OAAO,YAAY,qBAAmC;EAC3D,cAAc;EACd,UAAU;EACV,OAAO;EACR,CAAC;AAEF,iBAAgB;AACd,MAAI,SAAS,QAAS,UAAS,QAAQ,gBAAgB,UAAU;IAChE,CAAC,MAAM,CAAC;AAEX,iBAAgB;EACd,MAAM,SAAS,SAAS,SAAS,QAAQ;AACzC,MAAI,CAAC,OAAQ;EACb,MAAM,oBAAoB;AACxB,YAAS,eAAe;;AAE1B,SAAO,iBAAiB,SAAS,YAAY;AAC7C,eAAa,OAAO,oBAAoB,SAAS,YAAY;IAC5D,CAAC,gBAAgB,SAAS,CAAC;CAE9B,MAAM,iBAAiB,kBAAkB;EACvC,MAAM,KAAK,SAAS;AACpB,MAAI,CAAC,GAAI;AACT,KAAG,UAAU,UAAU;AACvB,KAAG,gBAAgB,UAAU;EAC7B,MAAM,QAAQ,IAAI,MAAM,UAAU,EAAE,SAAS,MAAM,CAAC;AACpD,KAAG,cAAc,MAAM;IACtB,CAAC,MAAM,CAAC;CAEX,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAU;AAEd,WADa,QAAQ,MACR,CAAC;AACd,uBAAqB,gBAAgB,CAAC;IACrC;EAAC;EAAU;EAAgB;EAAU;EAAM,CAAC;CAE/C,MAAM,cAAc,aACjB,MAAqC;AACpC,YAAU,EAAE;AACZ,MAAI,EAAE,iBAAkB;AACxB,gBAAc;IAEhB,CAAC,cAAc,QAAQ,CACxB;CAED,MAAM,gBAAgB,aACnB,MAAwC;AACvC,cAAY,EAAE;AACd,MAAI,EAAE,iBAAkB;AACxB,MAAI,EAAE,QAAQ,KAAK;AACjB,KAAE,gBAAgB;AAClB,iBAAc;;IAGlB,CAAC,cAAc,UAAU,CAC1B;CAED,MAAM,OAAoB,UAAU,OAAO;AAE3C,QACE,oBAAC,YAAY,UAAb;EAAsB,OAAO;GAAE;GAAO;GAAU;YAC9C,qBAAC,MAAD;GACE,gBAAc,UAAU,kBAAkB,UAAU;GACpD,iBAAe,YAAY;GAC3B,WAAW,GACT,4DACA,gDACA,uGACA,mDACA,gFACA,UACD;GACD,sBAAoB,UAAU,kBAAkB,KAAK;GACrD,cAAY,UAAU,MAAM;GAClB;GACV,IAAI;GACC;GACL,MAAK;GACL,MAAK;GACL,SAAS;GACT,WAAW;GACX,GAAI;aApBN,CAuBE,oBAAC,SAAD;IACE,eAAY;IACZ,SAAS,UAAU;IACT;IACJ;IACA;IACN;IACA,KAAK;IACK;IAEV,OAAO;KACL,UAAU;KACV,SAAS;KACT,OAAO;KACP,QAAQ;KACR,eAAe;KAChB;IACD,UAAU;IACV,MAAK;IACE;IACP,GACD,KAAK,SACD;;EACc;;AAG3B,aAAa,cAAc;AAO3B,MAAa,qBAAqB,EAChC,SACA,WACA,YACA,KACA,GAAG,YAGC;CACJ,MAAM,MAAM,WAAW,YAAY;AACnC,KAAI,CAAC,IAAK,QAAO;AAEjB,KAAI,EADY,IAAI,UAAU,QAAQ,IAAI,UAAU,oBACpC,CAAC,WAAY,QAAO;AAIpC,QAAO,oBAFmB,UAAU,OAAO,QAEpC;EAAM,WAAW,GAAG,iDAAiD,UAAU;EAAE,sBAAoB,IAAI,UAAU,kBAAkB,KAAK;EAAW,cAAY,UAAU,IAAI,MAAM;EAAO;EAAK,GAAI;EAAS;;AAEvN,kBAAkB,cAAc"}
+{"version":3,"file":"CheckboxBase.js","names":[],"sources":["../../src/components/Checkbox/CheckboxBase.tsx"],"sourcesContent":["import { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { Slot, type AsChildProp } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { createContext, useCallback, useContext, useEffect, useId, useRef, type ButtonHTMLAttributes, type ElementType, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type Ref } from 'react'\n\nexport type CheckedState = boolean | 'indeterminate'\n\ntype BaseButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value'>\n\nexport type CheckboxBaseProps = BaseButtonProps &\n  AsChildProp & {\n    checked?: CheckedState\n    defaultChecked?: CheckedState\n    form?: string\n    name?: string\n    onCheckedChange?: (checked: CheckedState) => void\n    required?: boolean\n    value?: string\n  }\n\ninterface Ctx {\n  disabled: boolean | undefined\n  state: CheckedState\n}\n\nconst CheckboxCtx = createContext<Ctx | null>(null)\n\nconst dataState = (checked: CheckedState): 'checked' | 'unchecked' | 'indeterminate' => {\n  if (checked === 'indeterminate') return 'indeterminate'\n  return checked ? 'checked' : 'unchecked'\n}\n\nconst getNext = (checked: CheckedState): CheckedState => {\n  if (checked === 'indeterminate') return true\n  return !checked\n}\n\nexport const CheckboxBase = ({\n  asChild,\n  checked,\n  className,\n  defaultChecked = false,\n  disabled,\n  form,\n  id,\n  name,\n  onCheckedChange,\n  onClick,\n  onKeyDown,\n  ref,\n  required,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type,\n  value = 'on',\n  ...rest\n}: CheckboxBaseProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const autoId = useId()\n  const resolvedId = id ?? `chk-${autoId}`\n\n  const [state, setState] = useUncontrolledState<CheckedState>({\n    defaultValue: defaultChecked,\n    onChange: onCheckedChange,\n    value: checked,\n  })\n\n  useEffect(() => {\n    if (inputRef.current) inputRef.current.indeterminate = state === 'indeterminate'\n  }, [state])\n\n  useEffect(() => {\n    const formEl = inputRef.current?.form ?? null\n    if (!formEl) return\n    const handleReset = () => {\n      setState(defaultChecked)\n    }\n    formEl.addEventListener('reset', handleReset)\n    return () => formEl.removeEventListener('reset', handleReset)\n  }, [defaultChecked, setState])\n\n  const emitFormChange = useCallback(() => {\n    const el = inputRef.current\n    if (!el) return\n    el.checked = state === true\n    el.indeterminate = state === 'indeterminate'\n    const event = new Event('change', { bubbles: true })\n    el.dispatchEvent(event)\n  }, [state])\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return\n    const next = getNext(state)\n    setState(next)\n    queueMicrotask(() => emitFormChange())\n  }, [disabled, emitFormChange, setState, state])\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(e)\n      if (e.defaultPrevented) return\n      handleToggle()\n    },\n    [handleToggle, onClick],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(e)\n      if (e.defaultPrevented) return\n      if (e.key === ' ') {\n        e.preventDefault()\n        handleToggle()\n      }\n    },\n    [handleToggle, onKeyDown],\n  )\n\n  const Comp: ElementType = asChild ? Slot : 'button'\n\n  return (\n    <CheckboxCtx.Provider value={{ state, disabled }}>\n      <Comp\n        aria-checked={state === 'indeterminate' ? 'mixed' : state}\n        aria-disabled={disabled ?? undefined}\n        className={cn(\n          'h-4 w-4 inline-flex shrink-0 items-center justify-center',\n          'border-input rounded-sm border bg-background',\n          'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n          className,\n        )}\n        data-indeterminate={state === 'indeterminate' ? '' : undefined}\n        data-state={dataState(state)}\n        disabled={disabled}\n        id={resolvedId}\n        ref={ref}\n        role='checkbox' // oxlint-disable-line jsx-a11y/prefer-tag-over-role\n        type='button'\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {/* hidden input for forms */}\n        <input\n          aria-hidden='true'\n          checked={state === true}\n          disabled={disabled}\n          form={form}\n          name={name}\n          readOnly\n          ref={inputRef}\n          required={required}\n          // visually hidden but in the DOM for form submission\n          style={{\n            position: 'absolute',\n            opacity: 0,\n            width: 0,\n            height: 0,\n            pointerEvents: 'none',\n          }}\n          tabIndex={-1}\n          type='checkbox'\n          value={value}\n        />\n        {rest.children}\n      </Comp>\n    </CheckboxCtx.Provider>\n  )\n}\nCheckboxBase.displayName = 'CheckboxBase'\n\nexport type CheckboxIndicatorProps = HTMLAttributes<HTMLSpanElement> &\n  AsChildProp & {\n    forceMount?: boolean\n  }\n\nexport const CheckboxIndicator = ({\n  asChild,\n  className,\n  forceMount,\n  ref,\n  ...props\n}: CheckboxIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}) => {\n  const ctx = useContext(CheckboxCtx)\n  if (!ctx) return null\n  const visible = ctx.state === true || ctx.state === 'indeterminate'\n  if (!visible && !forceMount) return null\n\n  const Comp: ElementType = asChild ? Slot : 'span'\n\n  return (\n    <Comp\n      className={cn('flex items-center justify-center text-current', className)}\n      data-indeterminate={ctx.state === 'indeterminate' ? '' : undefined}\n      data-state={dataState(ctx.state)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\nCheckboxIndicator.displayName = 'CheckboxIndicator'\n"],"mappings":";;;;;;;;AAyBA,MAAM,cAAc,cAA0B,KAAK;AAEnD,MAAM,aAAa,YAAqE;AACtF,KAAI,YAAY,gBAAiB,QAAO;AACxC,QAAO,UAAU,YAAY;;AAG/B,MAAM,WAAW,YAAwC;AACvD,KAAI,YAAY,gBAAiB,QAAO;AACxC,QAAO,CAAC;;AAGV,MAAa,gBAAgB,EAC3B,SACA,SACA,WACA,iBAAiB,OACjB,UACA,MACA,IACA,MACA,iBACA,SACA,WACA,KACA,UAEA,MACA,QAAQ,MACR,GAAG,WAGC;CACJ,MAAM,WAAW,OAAgC,KAAK;CACtD,MAAM,SAAS,OAAO;CACtB,MAAM,aAAa,MAAM,OAAO;CAEhC,MAAM,CAAC,OAAO,YAAY,qBAAmC;EAC3D,cAAc;EACd,UAAU;EACV,OAAO;EACR,CAAC;AAEF,iBAAgB;AACd,MAAI,SAAS,QAAS,UAAS,QAAQ,gBAAgB,UAAU;IAChE,CAAC,MAAM,CAAC;AAEX,iBAAgB;EACd,MAAM,SAAS,SAAS,SAAS,QAAQ;AACzC,MAAI,CAAC,OAAQ;EACb,MAAM,oBAAoB;AACxB,YAAS,eAAe;;AAE1B,SAAO,iBAAiB,SAAS,YAAY;AAC7C,eAAa,OAAO,oBAAoB,SAAS,YAAY;IAC5D,CAAC,gBAAgB,SAAS,CAAC;CAE9B,MAAM,iBAAiB,kBAAkB;EACvC,MAAM,KAAK,SAAS;AACpB,MAAI,CAAC,GAAI;AACT,KAAG,UAAU,UAAU;AACvB,KAAG,gBAAgB,UAAU;EAC7B,MAAM,QAAQ,IAAI,MAAM,UAAU,EAAE,SAAS,MAAM,CAAC;AACpD,KAAG,cAAc,MAAM;IACtB,CAAC,MAAM,CAAC;CAEX,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAU;AAEd,WADa,QAAQ,MACR,CAAC;AACd,uBAAqB,gBAAgB,CAAC;IACrC;EAAC;EAAU;EAAgB;EAAU;EAAM,CAAC;CAE/C,MAAM,cAAc,aACjB,MAAqC;AACpC,YAAU,EAAE;AACZ,MAAI,EAAE,iBAAkB;AACxB,gBAAc;IAEhB,CAAC,cAAc,QAAQ,CACxB;CAED,MAAM,gBAAgB,aACnB,MAAwC;AACvC,cAAY,EAAE;AACd,MAAI,EAAE,iBAAkB;AACxB,MAAI,EAAE,QAAQ,KAAK;AACjB,KAAE,gBAAgB;AAClB,iBAAc;;IAGlB,CAAC,cAAc,UAAU,CAC1B;CAED,MAAM,OAAoB,UAAU,OAAO;AAE3C,QACE,oBAAC,YAAY,UAAb;EAAsB,OAAO;GAAE;GAAO;GAAU;YAC9C,qBAAC,MAAD;GACE,gBAAc,UAAU,kBAAkB,UAAU;GACpD,iBAAe,YAAY;GAC3B,WAAW,GACT,4DACA,gDACA,uGACA,mDACA,gFACA,UACD;GACD,sBAAoB,UAAU,kBAAkB,KAAK;GACrD,cAAY,UAAU,MAAM;GAClB;GACV,IAAI;GACC;GACL,MAAK;GACL,MAAK;GACL,SAAS;GACT,WAAW;GACX,GAAI;aApBN,CAuBE,oBAAC,SAAD;IACE,eAAY;IACZ,SAAS,UAAU;IACT;IACJ;IACA;IACN;IACA,KAAK;IACK;IAEV,OAAO;KACL,UAAU;KACV,SAAS;KACT,OAAO;KACP,QAAQ;KACR,eAAe;KAChB;IACD,UAAU;IACV,MAAK;IACE;IACP,GACD,KAAK,SACD;;EACc;;AAG3B,aAAa,cAAc;AAO3B,MAAa,qBAAqB,EAChC,SACA,WACA,YACA,KACA,GAAG,YAGC;CACJ,MAAM,MAAM,WAAW,YAAY;AACnC,KAAI,CAAC,IAAK,QAAO;AAEjB,KAAI,EADY,IAAI,UAAU,QAAQ,IAAI,UAAU,oBACpC,CAAC,WAAY,QAAO;AAIpC,QACE,oBAHwB,UAAU,OAAO,QAGzC;EACE,WAAW,GAAG,iDAAiD,UAAU;EACzE,sBAAoB,IAAI,UAAU,kBAAkB,KAAK;EACzD,cAAY,UAAU,IAAI,MAAM;EAC3B;EACL,GAAI;EACJ;;AAGN,kBAAkB,cAAc"}

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { CheckmarkIcon, MinusIcon } from '@components/Icons'\nimport { ErrorMessage, WarningMessage, useFormFieldId, type BaseFormFieldProps, type FormFieldState } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { type ComponentPropsWithoutRef, type ComponentRef, type Ref } from 'react'\nimport { CheckboxBase, CheckboxIndicator } from './CheckboxBase'\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof CheckboxBase>, 'onCheckedChange'> {\n  'aria-describedby'?: string\n  'aria-label'?: string\n  checked?: boolean | 'indeterminate'\n  disabled?: boolean\n  errorMessage?: BaseFormFieldProps['errorMessage']\n  id?: string\n  label?: string\n  labelText?: string\n  messageReserveLines?: number\n  messageReserveSpace?: boolean\n  name?: string\n  onCheckedChange: (value: boolean | 'indeterminate') => void\n  required?: boolean\n  state?: FormFieldState\n  value?: string\n  warningMessage?: BaseFormFieldProps['errorMessage']\n}\n\nexport const Checkbox = ({\n  checked,\n  className,\n  errorMessage,\n  id,\n  label,\n  labelText,\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  onCheckedChange,\n  ref,\n  required,\n  state = 'default',\n  warningMessage,\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': ariaLabel,\n  ...props\n}: CheckboxProps & {\n  ref?: Ref<ComponentRef<typeof CheckboxBase>>\n}) => {\n  const inputId = useFormFieldId(id, props.name)\n  const resolvedLabelText = labelText ?? label\n  const errorMessageId = `${inputId}-error`\n  const warningMessageId = `${inputId}-warning`\n  const messageId = state === 'error' && errorMessage && errorMessageId ? errorMessageId : state === 'warning' && warningMessage && warningMessageId ? warningMessageId : undefined\n\n  return (\n    <div>\n      <div className='gap-2 flex items-center'>\n        <CheckboxBase\n          aria-describedby={[messageId, ariaDescribedBy].filter(Boolean).join(' ') || undefined}\n          aria-invalid={state === 'error' ? true : undefined}\n          aria-label={ariaLabel ?? (!resolvedLabelText ? 'Checkbox' : undefined)}\n          aria-required={required ?? undefined}\n          checked={checked}\n          className={cn(\n            'checkbox peer h-5 w-5 rounded-sm shrink-0 border border-checkbox-border hover:opacity-80 focus:outline-none focus-visible:outline-1 focus-visible:outline-checkbox-border--focus',\n            'focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-checkbox-border--checked',\n            className,\n          )}\n          data-field-state={state}\n          data-testid='spectral-checkbox'\n          id={inputId}\n          onCheckedChange={onCheckedChange}\n          ref={ref}\n          {...props}\n        >\n          <CheckboxIndicator data-testid='spectral-checkbox-indicator' className={cn('checkbox-indicator flex items-center justify-center text-checkbox-indicator--checked')}>\n            {checked === 'indeterminate' ? <MinusIcon className='checkbox-indeterminate' size={16} strokeWidth={4} /> : <CheckmarkIcon className='checkbox-check' size={16} strokeWidth={4} />}\n          </CheckboxIndicator>\n        </CheckboxBase>\n        {resolvedLabelText && (\n          <label className='text-md peer-disabled:text-neutral-400 text-text-primary' data-testid='spectral-checkbox-label' htmlFor={inputId}>\n            {resolvedLabelText}\n          </label>\n        )}\n      </div>\n      <ErrorMessage dataTestId='spectral-checkbox-error-message' id={errorMessageId} message={state === 'error' ? errorMessage : null} messageReserveLines={messageReserveLines} messageReserveSpace={messageReserveSpace && state === 'error'} />\n      <WarningMessage dataTestId='spectral-checkbox-warning-message' id={warningMessageId} message={state === 'warning' ? warningMessage : null} messageReserveLines={messageReserveLines} messageReserveSpace={messageReserveSpace && state === 'warning'} />\n    </div>\n  )\n}\nCheckbox.displayName = 'Checkbox'\n"],"mappings":";;;;;;;;;;;AAyBA,MAAa,YAAY,EACvB,SACA,WACA,cACA,IACA,OACA,WACA,sBAAsB,GACtB,sBAAsB,OACtB,iBACA,KACA,UACA,QAAQ,WACR,gBACA,oBAAoB,iBACpB,cAAc,WACd,GAAG,YAGC;CACJ,MAAM,UAAU,eAAe,IAAI,MAAM,KAAK;CAC9C,MAAM,oBAAoB,aAAa;CACvC,MAAM,iBAAiB,GAAG,QAAQ;CAClC,MAAM,mBAAmB,GAAG,QAAQ;AAGpC,QACE,qBAAC,OAAD;EACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,cAAD;IACE,oBAAkB,CANR,UAAU,WAAW,gBAAgB,iBAAiB,iBAAiB,UAAU,aAAa,kBAAkB,mBAAmB,mBAAmB,QAMlI,gBAAgB,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IAAI;IAC5E,gBAAc,UAAU,UAAU,OAAO;IACzC,cAAY,cAAc,CAAC,oBAAoB,aAAa;IAC5D,iBAAe,YAAY;IAClB;IACT,WAAW,GACT,oLACA,uIACA,UACD;IACD,oBAAkB;IAClB,eAAY;IACZ,IAAI;IACa;IACZ;IACL,GAAI;cAEJ,oBAAC,mBAAD;KAAmB,eAAY;KAA8B,WAAW,GAAG,uFAAuF;eAC/J,YAAY,kBAAkB,oBAAC,WAAD;MAAW,WAAU;MAAyB,MAAM;MAAI,aAAa;MAAK,IAAG,oBAAC,eAAD;MAAe,WAAU;MAAiB,MAAM;MAAI,aAAa;MAAK;KAChK;IACP,GACd,qBACC,oBAAC,SAAD;IAAO,WAAU;IAA2D,eAAY;IAA0B,SAAS;cACxH;IACK,EAEN;;EACN,oBAAC,cAAD;GAAc,YAAW;GAAkC,IAAI;GAAgB,SAAS,UAAU,UAAU,eAAe;GAA2B;GAAqB,qBAAqB,uBAAuB,UAAU;GAAW;EAC5O,oBAAC,gBAAD;GAAgB,YAAW;GAAoC,IAAI;GAAkB,SAAS,UAAU,YAAY,iBAAiB;GAA2B;GAAqB,qBAAqB,uBAAuB,UAAU;GAAa;EACpP;;AAGV,SAAS,cAAc"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { CheckmarkIcon, MinusIcon } from '@components/Icons'\nimport { ErrorMessage, WarningMessage, useFormFieldId, type BaseFormFieldProps, type FormFieldState } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { type ComponentPropsWithoutRef, type ComponentRef, type Ref } from 'react'\nimport { CheckboxBase, CheckboxIndicator } from './CheckboxBase'\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof CheckboxBase>, 'onCheckedChange'> {\n  'aria-describedby'?: string\n  'aria-label'?: string\n  checked?: boolean | 'indeterminate'\n  disabled?: boolean\n  errorMessage?: BaseFormFieldProps['errorMessage']\n  id?: string\n  label?: string\n  labelText?: string\n  messageReserveLines?: number\n  messageReserveSpace?: boolean\n  name?: string\n  onCheckedChange: (value: boolean | 'indeterminate') => void\n  required?: boolean\n  state?: FormFieldState\n  value?: string\n  warningMessage?: BaseFormFieldProps['errorMessage']\n}\n\nexport const Checkbox = ({\n  checked,\n  className,\n  errorMessage,\n  id,\n  label,\n  labelText,\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  onCheckedChange,\n  ref,\n  required,\n  state = 'default',\n  warningMessage,\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': ariaLabel,\n  ...props\n}: CheckboxProps & {\n  ref?: Ref<ComponentRef<typeof CheckboxBase>>\n}) => {\n  const inputId = useFormFieldId(id, props.name)\n  const resolvedLabelText = labelText ?? label\n  const errorMessageId = `${inputId}-error`\n  const warningMessageId = `${inputId}-warning`\n  const messageId = state === 'error' && errorMessage && errorMessageId ? errorMessageId : state === 'warning' && warningMessage && warningMessageId ? warningMessageId : undefined\n\n  return (\n    <div>\n      <div className='gap-2 flex items-center'>\n        <CheckboxBase\n          aria-describedby={[messageId, ariaDescribedBy].filter(Boolean).join(' ') || undefined}\n          aria-invalid={state === 'error' ? true : undefined}\n          aria-label={ariaLabel ?? (!resolvedLabelText ? 'Checkbox' : undefined)}\n          aria-required={required ?? undefined}\n          checked={checked}\n          className={cn(\n            'checkbox peer h-5 w-5 rounded-sm shrink-0 border border-checkbox-border hover:opacity-80 focus:outline-none focus-visible:outline-1 focus-visible:outline-checkbox-border--focus',\n            'focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-checkbox-border--checked',\n            className,\n          )}\n          data-field-state={state}\n          data-testid='spectral-checkbox'\n          id={inputId}\n          onCheckedChange={onCheckedChange}\n          ref={ref}\n          {...props}\n        >\n          <CheckboxIndicator\n            data-testid='spectral-checkbox-indicator'\n            className={cn('checkbox-indicator flex items-center justify-center text-checkbox-indicator--checked')}\n          >\n            {checked === 'indeterminate' ? (\n              <MinusIcon\n                className='checkbox-indeterminate'\n                size={16}\n                strokeWidth={4}\n              />\n            ) : (\n              <CheckmarkIcon\n                className='checkbox-check'\n                size={16}\n                strokeWidth={4}\n              />\n            )}\n          </CheckboxIndicator>\n        </CheckboxBase>\n        {resolvedLabelText && (\n          <label\n            className='text-md peer-disabled:text-neutral-400 text-text-primary'\n            data-testid='spectral-checkbox-label'\n            htmlFor={inputId}\n          >\n            {resolvedLabelText}\n          </label>\n        )}\n      </div>\n      <ErrorMessage\n        dataTestId='spectral-checkbox-error-message'\n        id={errorMessageId}\n        message={state === 'error' ? errorMessage : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'error'}\n      />\n      <WarningMessage\n        dataTestId='spectral-checkbox-warning-message'\n        id={warningMessageId}\n        message={state === 'warning' ? warningMessage : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'warning'}\n      />\n    </div>\n  )\n}\nCheckbox.displayName = 'Checkbox'\n"],"mappings":";;;;;;;;;;;AAyBA,MAAa,YAAY,EACvB,SACA,WACA,cACA,IACA,OACA,WACA,sBAAsB,GACtB,sBAAsB,OACtB,iBACA,KACA,UACA,QAAQ,WACR,gBACA,oBAAoB,iBACpB,cAAc,WACd,GAAG,YAGC;CACJ,MAAM,UAAU,eAAe,IAAI,MAAM,KAAK;CAC9C,MAAM,oBAAoB,aAAa;CACvC,MAAM,iBAAiB,GAAG,QAAQ;CAClC,MAAM,mBAAmB,GAAG,QAAQ;AAGpC,QACE,qBAAC,OAAD;EACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,cAAD;IACE,oBAAkB,CANR,UAAU,WAAW,gBAAgB,iBAAiB,iBAAiB,UAAU,aAAa,kBAAkB,mBAAmB,mBAAmB,QAMlI,gBAAgB,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IAAI;IAC5E,gBAAc,UAAU,UAAU,OAAO;IACzC,cAAY,cAAc,CAAC,oBAAoB,aAAa;IAC5D,iBAAe,YAAY;IAClB;IACT,WAAW,GACT,oLACA,uIACA,UACD;IACD,oBAAkB;IAClB,eAAY;IACZ,IAAI;IACa;IACZ;IACL,GAAI;cAEJ,oBAAC,mBAAD;KACE,eAAY;KACZ,WAAW,GAAG,uFAAuF;eAEpG,YAAY,kBACX,oBAAC,WAAD;MACE,WAAU;MACV,MAAM;MACN,aAAa;MACb,IAEF,oBAAC,eAAD;MACE,WAAU;MACV,MAAM;MACN,aAAa;MACb;KAEc;IACP,GACd,qBACC,oBAAC,SAAD;IACE,WAAU;IACV,eAAY;IACZ,SAAS;cAER;IACK,EAEN;;EACN,oBAAC,cAAD;GACE,YAAW;GACX,IAAI;GACJ,SAAS,UAAU,UAAU,eAAe;GACvB;GACrB,qBAAqB,uBAAuB,UAAU;GACtD;EACF,oBAAC,gBAAD;GACE,YAAW;GACX,IAAI;GACJ,SAAS,UAAU,YAAY,iBAAiB;GAC3B;GACrB,qBAAqB,uBAAuB,UAAU;GACtD;EACE;;AAGV,SAAS,cAAc"}

package/dist/Combobox.js

@@ -126,7 +126,6 @@ const Combobox = ({ className, disabled, defaultValue = "", dropdownWidth = "tri
 						},
 						ref: inputRef,
 						placeholder: selectedOption?.label ?? placeholder,
-						role: "combobox",
 						...ariaProps
 					}), /* @__PURE__ */ jsx(InputGroupAddon, {
 						align: "inline-end",