@spear-ai/spectral 1.15.5 → 1.16.0

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

@@ -76,7 +76,7 @@ const AccordionTrigger = ({ ref, className, title, subtitle, ...props }) => {
 			ref: useMergedRef,
 			...props,
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex w-full flex-col gap-0.5 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 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 <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-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='flex w-full flex-col gap-0.5 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,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;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.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-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  }) => <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,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,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.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      }, 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 aria-live={ariaLive} className={cn('alert-wrapper transition-opacity duration-200 ease-out', 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;AAIhB,QACE,oBAAC,aAAD,YACE,qBAAC,WAAD;EAAW,aAJE,YAAY,aAAa,YAAY,WAAW,cAAc;EAI3C,WAAW,GAAG,0DAA0D,UAAU;EAAE,aAAU;EAAQ,gBAAc;EAAa;EAAI,KAAK;EAAqB;YAA/L,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.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: '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 className='flex size-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 size-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 size-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,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;GAAM,WAAU;GAA6C,eAAY;aACtE;GACI;AAKX,MAAI,SACF,QACE,oBAAC,QAAD;GAAM,WAAW,GAAG,gEAAgE,gBAAgB,MAAsC;GAAE,eAAY;aACrJ;GACI;AAKX,MAAI,eAAe,gBAAgB,UACjC,QAAO,oBAAC,QAAD;GAAM,WAAU;GAAuE,eAAY;GAA4B;AAIxI,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.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 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: '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 <Comp className={cn(badgeVariants({ variant }), className)} data-slot='badge' data-testid='spectral-badge' {...props} />\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,gBAAgB,IACpB,6XACA;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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","names":[],"sources":["../src/components/Button/Button.tsx"],"mappings":";;;;;;;;cAMM,cAAA,GAAc,KAAA;;;;IA4BnB,iCAAA,CAAA,SAAA;AAAA,UAEgB,WAAA,SAAoB,WAAA,EAAa,IAAA,CAAK,oBAAA,CAAqB,iBAAA,aAA8B,YAAA,QAAoB,cAAA;EAC5H,UAAA;EACA,QAAA;EACA,OAAA,GAAU,SAAA;EACV,KAAA;EACA,OAAA,IAAW,KAAA,EAAO,UAAA,CAAW,WAAA;EAC7B,IAAA;EACA,SAAA,GAAY,SAAA;EACZ,KAAA;EACA,IAAA;EACA,OAAA;AAAA;AAAA;EAIA,OAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,QAAA;EACA,OAAA;EACA,EAAA;EACA,KAAA;EACA,OAAA;EACA,GAAA;EACA,IAAA;EACA,SAAA;EACA,KAAA;EACA,IAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,WAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}
+{"version":3,"file":"Button.d.ts","names":[],"sources":["../src/components/Button/Button.tsx"],"mappings":";;;;;;;;cAMM,cAAA,GAAc,KAAA;;;;IA6BnB,iCAAA,CAAA,SAAA;AAAA,UAEgB,WAAA,SAAoB,WAAA,EAAa,IAAA,CAAK,oBAAA,CAAqB,iBAAA,aAA8B,YAAA,QAAoB,cAAA;EAC5H,UAAA;EACA,QAAA;EACA,OAAA,GAAU,SAAA;EACV,KAAA;EACA,OAAA,IAAW,KAAA,EAAO,UAAA,CAAW,WAAA;EAC7B,IAAA;EACA,SAAA,GAAY,SAAA;EACZ,KAAA;EACA,IAAA;EACA,OAAA;AAAA;AAAA;EAIA,OAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,QAAA;EACA,OAAA;EACA,EAAA;EACA,KAAA;EACA,OAAA;EACA,GAAA;EACA,IAAA;EACA,SAAA;EACA,KAAA;EACA,IAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,WAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/Button.js

@@ -7,14 +7,14 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 
 //#region src/components/Button/Button.tsx
-const buttonVariants = cva(`gap-2 rounded-lg font-semibold [&_svg]:size-4 relative flex cursor-pointer items-center justify-center border font-sans! whitespace-nowrap transition-[background-color,color,transform] disabled:active:scale-100 focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0`, {
+const buttonVariants = cva(`gap-2 rounded-lg font-semibold [&_svg]:size-4 relative flex cursor-pointer items-center justify-center border font-sans! whitespace-nowrap transition-[background-color,color,transform] focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0`, {
 	variants: {
 		variant: {
-			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 active:scale-[0.97] focus-visible:outline-button-primary-border disabled:border-button-primary-border--disabled disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled`,
-			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 active:scale-[0.97] focus-visible:outline-button-secondary-border disabled:border-button-secondary-border--disabled disabled:bg-button-secondary-bg--disabled disabled:text-button-secondary-text--disabled`,
-			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 active:scale-[0.97] focus-visible:outline-button-outline-border disabled:border-button-outline-border--disabled disabled:text-button-outline-text--disabled`,
-			ghost: "border-none bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg--hover hover:text-button-ghost-text--hover active:scale-[0.97] focus-visible:outline-button-outline-border disabled:text-button-ghost-text--disabled",
-			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 active:scale-100 focus-visible:outline-button-outline-border disabled:opacity-50"
+			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 active:scale-[0.97] disabled:border-button-primary-border--disabled disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled`,
+			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 active:scale-[0.97] disabled:border-button-secondary-border--disabled disabled:bg-button-secondary-bg--disabled disabled:text-button-secondary-text--disabled`,
+			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 active:scale-[0.97] disabled:border-button-outline-border--disabled disabled:text-button-outline-text--disabled`,
+			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-button-outline-border active:scale-[0.97] disabled:text-button-ghost-text--disabled",
+			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 active:scale-100 disabled:opacity-50"
 		},
 		size: {
 			small: "py-1 px-4 text-sm! w-fit",

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-[background-color,color,transform] disabled:active:scale-100 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 active:scale-[0.97] 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 active:scale-[0.97] 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 active:scale-[0.97] 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 active:scale-[0.97] focus-visible:outline-button-outline-border 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 active:scale-100 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,0WACA;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-[background-color,color,transform] focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:active:scale-100 [&_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 active:scale-[0.97] 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 active:scale-[0.97] 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 active:scale-[0.97] 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-button-outline-border active:scale-[0.97] disabled:text-button-ghost-text--disabled',\n        unstyled:\n          '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 active:scale-100 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,0WACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,UACE;GACH;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.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-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        divided: '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,gkBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,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        divided: '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;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;;;;EA2BD,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

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 
 //#region src/components/ButtonGroup/ButtonGroup.tsx
-const buttonGroupVariants = cva(`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 data-[variant='divided']:[&>[data-slot=button-group-item]]:border-y-0 data-[variant='divided']:[&>[data-slot=button-group-item]:first-of-type]:border-l-0 data-[variant='divided']:[&>[data-slot=button-group-item]:last-of-type]:border-r-0 data-[orientation='vertical']:data-[variant='divided']:[&>[data-slot=button-group-item]]:border-x-0 data-[orientation='vertical']:data-[variant='divided']:[&>[data-slot=button-group-item]:first-of-type]:border-t-0 data-[orientation='vertical']:data-[variant='divided']:[&>[data-slot=button-group-item]:last-of-type]:border-b-0`, {
+const buttonGroupVariants = cva(`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-[variant='divided']:[&>[data-slot=button-group-item]]:border-y-0 data-[orientation='vertical']:data-[variant='divided']:[&>[data-slot=button-group-item]]:border-x-0 data-[variant='divided']:[&>[data-slot=button-group-item]:first-of-type]:border-l-0 data-[orientation='vertical']:data-[variant='divided']:[&>[data-slot=button-group-item]:first-of-type]:border-t-0 data-[variant='divided']:[&>[data-slot=button-group-item]:last-of-type]:border-r-0 data-[orientation='vertical']:data-[variant='divided']:[&>[data-slot=button-group-item]:last-of-type]:border-b-0 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1`, {
 	variants: { orientation: {
 		horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
 		vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"

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' | 'divided'\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 data-[variant='divided']:[&>[data-slot=button-group-item]]:border-y-0 data-[variant='divided']:[&>[data-slot=button-group-item]:first-of-type]:border-l-0 data-[variant='divided']:[&>[data-slot=button-group-item]:last-of-type]:border-r-0 data-[orientation='vertical']:data-[variant='divided']:[&>[data-slot=button-group-item]]:border-x-0 data-[orientation='vertical']:data-[variant='divided']:[&>[data-slot=button-group-item]:first-of-type]:border-t-0 data-[orientation='vertical']:data-[variant='divided']:[&>[data-slot=button-group-item]:last-of-type]:border-b-0`,\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' | 'divided'\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' data-variant={variant} 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' | 'divided'\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,w1BACA;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,gBAAc;EAAS,MAAK;EAAQ,GAAI;YACvO,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' | 'divided'\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-[variant='divided']:[&>[data-slot=button-group-item]]:border-y-0 data-[orientation='vertical']:data-[variant='divided']:[&>[data-slot=button-group-item]]:border-x-0 data-[variant='divided']:[&>[data-slot=button-group-item]:first-of-type]:border-l-0 data-[orientation='vertical']:data-[variant='divided']:[&>[data-slot=button-group-item]:first-of-type]:border-t-0 data-[variant='divided']:[&>[data-slot=button-group-item]:last-of-type]:border-r-0 data-[orientation='vertical']:data-[variant='divided']:[&>[data-slot=button-group-item]:last-of-type]:border-b-0 [&>[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' | 'divided'\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      data-variant={variant}\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' | 'divided'\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,w1BACA;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,gBAAc;EACd,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

@@ -10,15 +10,15 @@ const buttonStyles = `bg-level-one hover:bg-level-three text-text-primary hover:
   disabled:pointer-events-none disabled:text-text-secondary disabled:hover:bg-level-one`;
 const sizeConfig = {
 	sm: {
-		button: "size-8",
+		button: "size-8 min-size-8",
 		icon: 16
 	},
 	md: {
-		button: "size-10",
+		button: "size-10 min-size-10",
 		icon: 24
 	},
 	lg: {
-		button: "size-12",
+		button: "size-12 min-size-12",
 		icon: 32
 	}
 };

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-level-one hover:bg-level-three text-text-primary hover:text-text-secondary inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-[background-color,color,transform]\n  active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-level-three cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 disabled:opacity-50\n  disabled:pointer-events-none disabled:text-text-secondary disabled:hover:bg-level-one`\n\nconst sizeConfig = {\n  sm: { button: 'size-8', icon: 16 },\n  md: { button: 'size-10', icon: 24 },\n  lg: { button: 'size-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;;;AAIrB,MAAM,aAAa;CACjB,IAAI;EAAE,QAAQ;EAAU,MAAM;EAAI;CAClC,IAAI;EAAE,QAAQ;EAAW,MAAM;EAAI;CACnC,IAAI;EAAE,QAAQ;EAAW,MAAM;EAAI;CACpC;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-level-one hover:bg-level-three text-text-primary hover:text-text-secondary inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-[background-color,color,transform]\n  active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-level-three cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 disabled:opacity-50\n  disabled:pointer-events-none disabled:text-text-secondary disabled:hover:bg-level-one`\n\nconst sizeConfig = {\n  sm: { button: 'size-8 min-size-8', icon: 16 },\n  md: { button: 'size-10 min-size-10', icon: 24 },\n  lg: { button: 'size-12 min-size-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;;;AAIrB,MAAM,aAAa;CACjB,IAAI;EAAE,QAAQ;EAAqB,MAAM;EAAI;CAC7C,IAAI;EAAE,QAAQ;EAAuB,MAAM;EAAI;CAC/C,IAAI;EAAE,QAAQ;EAAuB,MAAM;EAAI;CAChD;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/ButtonIconSlideout.d.ts

@@ -6,6 +6,7 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/ButtonIconSlideout/ButtonIconSlideout.d.ts
 type SlideoutIcons = [openIcon: ComponentType<IconProps>, closeIcon: ComponentType<IconProps>];
+type SlideoutLayout = 'overlay' | 'inline';
 interface ButtonIconSlideoutProps extends Omit<ButtonIconProps, 'className' | 'content' | 'icon' | 'label' | 'onClick'> {
   buttonClassName?: string;
   className?: string;
@@ -16,6 +17,16 @@ interface ButtonIconSlideoutProps extends Omit<ButtonIconProps, 'className' | 'c
   defaultOpen?: boolean;
   icons?: SlideoutIcons;
   label: string;
+  /**
+   * Controls how the slideout panel relates to surrounding layout flow:
+   *
+   * - `'overlay'` (default): the panel is absolutely positioned and slides over its
+   *   neighbors. Use when the trigger sits in free space (toolbars, floating actions).
+   * - `'inline'`: the panel participates in flex/grid flow and pushes its neighbors as
+   *   it opens. Use when the trigger sits inside a row alongside other content (such
+   *   as a header where a title should slide aside).
+   */
+  layout?: SlideoutLayout;
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
   onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
   onOpen?: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -32,6 +43,7 @@ declare function ButtonIconSlideout({
   defaultOpen,
   icons,
   label,
+  layout,
   shape,
   size,
   onClick,

package/dist/ButtonIconSlideout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIconSlideout.d.ts","names":[],"sources":["../src/components/ButtonIconSlideout/ButtonIconSlideout.tsx"],"mappings":";;;;;;;KAQK,aAAA,IAAiB,QAAA,EAAU,aAAA,CAAc,SAAA,GAAY,SAAA,EAAW,aAAA,CAAc,SAAA;AAAA,UA0BlE,uBAAA,SAAgC,IAAA,CAAK,eAAA;EACpD,eAAA;EACA,SAAA;EACA,UAAA;EACA,OAAA;EACA,gBAAA;EACA,UAAA;EACA,WAAA;EACA,KAAA,GAAQ,aAAA;EACR,KAAA;EACA,OAAA,IAAW,KAAA,EAAO,UAAA,CAAW,iBAAA;EAC7B,OAAA,IAAW,KAAA,EAAO,UAAA,CAAW,iBAAA;EAC7B,MAAA,IAAU,KAAA,EAAO,UAAA,CAAW,iBAAA;EAC5B,YAAA,IAAgB,MAAA;EAChB,IAAA;AAAA;AAAA;EAIA,eAAA;EACA,SAAA;EACA,UAAA;EACA,OAAA;EACA,gBAAA;EACA,UAAA;EACA,WAAA;EACA,KAAA;EACA,KAAA;EACA,KAAA;EACA,IAAA;EACA,OAAA;EACA,OAAA;EACA,MAAA;EACA,YAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}
+{"version":3,"file":"ButtonIconSlideout.d.ts","names":[],"sources":["../src/components/ButtonIconSlideout/ButtonIconSlideout.tsx"],"mappings":";;;;;;;KAQK,aAAA,IAAiB,QAAA,EAAU,aAAA,CAAc,SAAA,GAAY,SAAA,EAAW,aAAA,CAAc,SAAA;AAAA,KAC9E,cAAA;AAAA,UAgCY,uBAAA,SAAgC,IAAA,CAAK,eAAA;EACpD,eAAA;EACA,SAAA;EACA,UAAA;EACA,OAAA;EACA,gBAAA;EACA,UAAA;EACA,WAAA;EACA,KAAA,GAAQ,aAAA;EACR,KAAA;EA1CoB;;;;;;;;AAAsE;EAoD1F,MAAA,GAAS,cAAA;EACT,OAAA,IAAW,KAAA,EAAO,UAAA,CAAW,iBAAA;EAC7B,OAAA,IAAW,KAAA,EAAO,UAAA,CAAW,iBAAA;EAC7B,MAAA,IAAU,KAAA,EAAO,UAAA,CAAW,iBAAA;EAC5B,YAAA,IAAgB,MAAA;EAChB,IAAA;AAAA;AAAA;EAIA,eAAA;EACA,SAAA;EACA,UAAA;EACA,OAAA;EACA,gBAAA;EACA,UAAA;EACA,WAAA;EACA,KAAA;EACA,KAAA;EACA,MAAA;EACA,KAAA;EACA,IAAA;EACA,OAAA;EACA,OAAA;EACA,MAAA;EACA,YAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/ButtonIconSlideout.js

@@ -28,7 +28,12 @@ const fontSizeByButtonSize = {
 	md: "text-sm",
 	lg: "text-base"
 };
-const ButtonIconSlideout = ({ buttonClassName, className, closeLabel = "Close panel", content, contentClassName, dataTestId = "spectral-button-icon-slideout", defaultOpen = false, icons = [LabelIcon, CloseIcon], label, shape = "square", size = "md", onClick, onClose, onOpen, onOpenChange, open, ...buttonProps }) => {
+const inlineCircleMarginBySize = {
+	sm: "-ml-4",
+	md: "-ml-5",
+	lg: "-ml-6"
+};
+const ButtonIconSlideout = ({ buttonClassName, className, closeLabel = "Close panel", content, contentClassName, dataTestId = "spectral-button-icon-slideout", defaultOpen = false, icons = [LabelIcon, CloseIcon], label, layout = "overlay", shape = "square", size = "md", onClick, onClose, onOpen, onOpenChange, open, ...buttonProps }) => {
 	const [isOpen, setIsOpen] = useControllableState({
 		value: open,
 		defaultValue: defaultOpen,
@@ -44,7 +49,8 @@ const ButtonIconSlideout = ({ buttonClassName, className, closeLabel = "Close pa
 	};
 	const [OpenIcon, CloseIconComponent] = icons;
 	const iconSize = iconPixelsByButtonSize[size];
-	const contentLeftPosition = shape === "circle" ? {
+	const isInlineLayout = layout === "inline";
+	const overlayContentLeftPosition = shape === "circle" ? {
 		sm: "left-[calc(100%-1rem)]",
 		md: "left-[calc(100%-1.25rem)]",
 		lg: "left-[calc(100%-1.5rem)]"
@@ -54,29 +60,21 @@ const ButtonIconSlideout = ({ buttonClassName, className, closeLabel = "Close pa
 		md: "pl-6",
 		lg: "pl-7"
 	}[size] : "pl-4";
+	const inlineContentMargin = shape === "circle" ? inlineCircleMarginBySize[size] : "-ml-3";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative isolate inline-flex w-fit items-center", className),
+		className: cn("relative isolate items-center", isInlineLayout ? cn("inline-grid transition-[grid-template-columns] duration-200 ease-in motion-reduce:transition-none", isOpen ? "grid-cols-[auto_1fr]" : "grid-cols-[auto_0fr]") : "inline-flex w-fit", className),
 		"data-testid": dataTestId,
-		children: [/* @__PURE__ */ jsx("div", {
-			"aria-hidden": !isOpen,
-			className: cn("pointer-events-none absolute inset-y-0 z-0 w-max max-w-44 rounded-r-xl bg-level-three pr-3 text-text-primary font-medium", contentLeftPosition, contentLeftPadding, contentHeightBySize[size], "flex items-center overflow-hidden transition-[transform,opacity,clip-path] duration-200 ease-in motion-reduce:transition-none", isOpen ? "translate-x-0 opacity-100 [clip-path:inset(0_0_0_0)]" : "-translate-x-2 opacity-0 [clip-path:inset(0_100%_0_0)]"),
-			"data-testid": `${dataTestId}-content`,
-			id: contentId,
-			children: /* @__PURE__ */ jsx("span", {
-				className: cn("block max-w-full truncate whitespace-nowrap leading-5", fontSizeByButtonSize[size], contentClassName),
-				children: content
-			})
-		}), /* @__PURE__ */ jsx(ButtonIcon, {
+		children: [/* @__PURE__ */ jsx(ButtonIcon, {
 			...buttonProps,
 			"aria-controls": contentId,
 			"aria-expanded": isOpen,
-			className: cn("relative z-10", isOpen && "bg-level-three hover:bg-level-three shadow-[4px_0_10px_rgb(0_0_0_/_0.18)]", buttonClassName),
+			className: cn("relative z-10", isOpen && "bg-level-three shadow-[4px_0_10px_rgb(0_0_0_/_0.18)] hover:bg-level-three", buttonClassName),
 			"data-testid": `${dataTestId}-button`,
 			icon: () => /* @__PURE__ */ jsxs("span", {
 				className: cn("relative inline-flex items-center justify-center", iconContainerSizeByButtonSize[size]),
 				children: [/* @__PURE__ */ jsx("span", {
 					"aria-hidden": isOpen,
-					className: cn("absolute inset-0 flex items-center justify-center transition-[filter,opacity,transform] duration-200 ease-in motion-reduce:transition-none", isOpen ? "pointer-events-none opacity-0 blur-[2px] scale-95" : "opacity-100 blur-0 scale-100"),
+					className: cn("inset-0 absolute flex items-center justify-center transition-[filter,opacity,transform] duration-200 ease-in motion-reduce:transition-none", isOpen ? "pointer-events-none scale-95 opacity-0 blur-[2px]" : "blur-0 scale-100 opacity-100"),
 					"data-icon-state": "closed",
 					children: /* @__PURE__ */ jsx(OpenIcon, {
 						"aria-hidden": "true",
@@ -85,7 +83,7 @@ const ButtonIconSlideout = ({ buttonClassName, className, closeLabel = "Close pa
 					})
 				}), /* @__PURE__ */ jsx("span", {
 					"aria-hidden": !isOpen,
-					className: cn("absolute inset-0 flex items-center justify-center transition-[filter,opacity,transform] duration-200 ease-in motion-reduce:transition-none", isOpen ? "opacity-100 blur-0 scale-100" : "pointer-events-none opacity-0 blur-[2px] scale-95"),
+					className: cn("inset-0 absolute flex items-center justify-center transition-[filter,opacity,transform] duration-200 ease-in motion-reduce:transition-none", isOpen ? "blur-0 scale-100 opacity-100" : "pointer-events-none scale-95 opacity-0 blur-[2px]"),
 					"data-icon-state": "open",
 					children: /* @__PURE__ */ jsx(CloseIconComponent, {
 						"aria-hidden": "true",
@@ -98,6 +96,15 @@ const ButtonIconSlideout = ({ buttonClassName, className, closeLabel = "Close pa
 			onClick: handleToggle,
 			shape,
 			size
+		}), /* @__PURE__ */ jsx("div", {
+			"aria-hidden": !isOpen,
+			className: cn("rounded-r-xl pr-3 font-medium pointer-events-none bg-level-three text-text-primary", contentHeightBySize[size], "flex items-center overflow-hidden transition-[transform,opacity,clip-path] duration-200 ease-in motion-reduce:transition-none", isOpen ? "translate-x-0 opacity-100 [clip-path:inset(0_0_0_0)]" : "-translate-x-2 opacity-0 [clip-path:inset(0_100%_0_0)]", isInlineLayout ? cn("min-w-0 max-w-44 relative z-0", inlineContentMargin, contentLeftPadding) : cn("inset-y-0 max-w-44 absolute z-0 w-max", overlayContentLeftPosition, contentLeftPadding)),
+			"data-testid": `${dataTestId}-content`,
+			id: contentId,
+			children: /* @__PURE__ */ jsx("span", {
+				className: cn("leading-5 block max-w-full truncate", fontSizeByButtonSize[size], contentClassName),
+				children: content
+			})
 		})]
 	});
 };

package/dist/ButtonIconSlideout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIconSlideout.js","names":[],"sources":["../src/components/ButtonIconSlideout/ButtonIconSlideout.tsx"],"sourcesContent":["import { ButtonIcon, type ButtonIconProps } from '@components/ButtonIcon/ButtonIcon'\nimport { CloseIcon, LabelIcon } from '@components/Icons'\nimport { type IconProps } from '@components/Icons/iconTypes'\nimport { useControllableState } from '@hooks/useControllableState'\nimport { cn } from '@utils/twUtils'\nimport { type ComponentType, type MouseEvent, useId } from 'react'\n\ntype SlideoutSize = NonNullable<ButtonIconProps['size']>\ntype SlideoutIcons = [openIcon: ComponentType<IconProps>, closeIcon: ComponentType<IconProps>]\n\nconst contentHeightBySize: Record<SlideoutSize, string> = {\n  sm: 'h-8',\n  md: 'h-10',\n  lg: 'h-12',\n}\n\nconst iconContainerSizeByButtonSize: Record<SlideoutSize, string> = {\n  sm: 'size-4',\n  md: 'size-6',\n  lg: 'size-8',\n}\n\nconst iconPixelsByButtonSize: Record<SlideoutSize, number> = {\n  sm: 16,\n  md: 24,\n  lg: 32,\n}\n\nconst fontSizeByButtonSize: Record<SlideoutSize, string> = {\n  sm: 'text-xs',\n  md: 'text-sm',\n  lg: 'text-base',\n}\n\nexport interface ButtonIconSlideoutProps extends Omit<ButtonIconProps, 'className' | 'content' | 'icon' | 'label' | 'onClick'> {\n  buttonClassName?: string\n  className?: string\n  closeLabel?: string\n  content: number | string\n  contentClassName?: string\n  dataTestId?: string\n  defaultOpen?: boolean\n  icons?: SlideoutIcons\n  label: string\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void\n  onOpen?: (event: MouseEvent<HTMLButtonElement>) => void\n  onOpenChange?: (isOpen: boolean) => void\n  open?: boolean\n}\n\nexport const ButtonIconSlideout = ({\n  buttonClassName,\n  className,\n  closeLabel = 'Close panel',\n  content,\n  contentClassName,\n  dataTestId = 'spectral-button-icon-slideout',\n  defaultOpen = false,\n  icons = [LabelIcon, CloseIcon],\n  label,\n  shape = 'square',\n  size = 'md',\n  onClick,\n  onClose,\n  onOpen,\n  onOpenChange,\n  open,\n  ...buttonProps\n}: ButtonIconSlideoutProps) => {\n  const [isOpen, setIsOpen] = useControllableState<boolean>({\n    value: open,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  })\n  const contentId = useId()\n\n  const handleToggle = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event)\n\n    if (event.defaultPrevented) return\n\n    if (isOpen) {\n      onClose?.(event)\n    } else {\n      onOpen?.(event)\n    }\n\n    setIsOpen((previous) => !previous)\n  }\n\n  const [OpenIcon, CloseIconComponent] = icons\n  const iconSize = iconPixelsByButtonSize[size]\n  const contentLeftPosition =\n    shape === 'circle'\n      ? {\n          sm: 'left-[calc(100%-1rem)]',\n          md: 'left-[calc(100%-1.25rem)]',\n          lg: 'left-[calc(100%-1.5rem)]',\n        }[size]\n      : 'left-[calc(100%-0.75rem)]'\n  const contentLeftPadding =\n    shape === 'circle'\n      ? {\n          sm: 'pl-5',\n          md: 'pl-6',\n          lg: 'pl-7',\n        }[size]\n      : 'pl-4'\n\n  return (\n    <div className={cn('relative isolate inline-flex w-fit items-center', className)} data-testid={dataTestId}>\n      <div\n        aria-hidden={!isOpen}\n        className={cn(\n          'pointer-events-none absolute inset-y-0 z-0 w-max max-w-44 rounded-r-xl bg-level-three pr-3 text-text-primary font-medium',\n          contentLeftPosition,\n          contentLeftPadding,\n          contentHeightBySize[size],\n          'flex items-center overflow-hidden transition-[transform,opacity,clip-path] duration-200 ease-in motion-reduce:transition-none',\n          isOpen ? 'translate-x-0 opacity-100 [clip-path:inset(0_0_0_0)]' : '-translate-x-2 opacity-0 [clip-path:inset(0_100%_0_0)]',\n        )}\n        data-testid={`${dataTestId}-content`}\n        id={contentId}\n      >\n        <span className={cn('block max-w-full truncate whitespace-nowrap leading-5', fontSizeByButtonSize[size], contentClassName)}>{content}</span>\n      </div>\n\n      <ButtonIcon\n        {...buttonProps}\n        aria-controls={contentId}\n        aria-expanded={isOpen}\n        className={cn('relative z-10', isOpen && 'bg-level-three hover:bg-level-three shadow-[4px_0_10px_rgb(0_0_0_/_0.18)]', buttonClassName)}\n        data-testid={`${dataTestId}-button`}\n        icon={() => (\n          <span className={cn('relative inline-flex items-center justify-center', iconContainerSizeByButtonSize[size])}>\n            <span\n              aria-hidden={isOpen}\n              className={cn(\n                'absolute inset-0 flex items-center justify-center transition-[filter,opacity,transform] duration-200 ease-in motion-reduce:transition-none',\n                isOpen ? 'pointer-events-none opacity-0 blur-[2px] scale-95' : 'opacity-100 blur-0 scale-100',\n              )}\n              data-icon-state='closed'\n            >\n              <OpenIcon aria-hidden='true' className='size-full shrink-0' size={iconSize} />\n            </span>\n\n            <span\n              aria-hidden={!isOpen}\n              className={cn(\n                'absolute inset-0 flex items-center justify-center transition-[filter,opacity,transform] duration-200 ease-in motion-reduce:transition-none',\n                isOpen ? 'opacity-100 blur-0 scale-100' : 'pointer-events-none opacity-0 blur-[2px] scale-95',\n              )}\n              data-icon-state='open'\n            >\n              <CloseIconComponent aria-hidden='true' className='size-full shrink-0' size={iconSize} />\n            </span>\n          </span>\n        )}\n        label={isOpen ? closeLabel : label}\n        onClick={handleToggle}\n        shape={shape}\n        size={size}\n      />\n    </div>\n  )\n}\n\nButtonIconSlideout.displayName = 'ButtonIconSlideout'\n"],"mappings":";;;;;;;;;;AAUA,MAAM,sBAAoD;CACxD,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,gCAA8D;CAClE,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,yBAAuD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,uBAAqD;CACzD,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAmBD,MAAa,sBAAsB,EACjC,iBACA,WACA,aAAa,eACb,SACA,kBACA,aAAa,iCACb,cAAc,OACd,QAAQ,CAAC,WAAW,UAAU,EAC9B,OACA,QAAQ,UACR,OAAO,MACP,SACA,SACA,QACA,cACA,MACA,GAAG,kBAC0B;CAC7B,MAAM,CAAC,QAAQ,aAAa,qBAA8B;EACxD,OAAO;EACP,cAAc;EACd,UAAU;EACX,CAAC;CACF,MAAM,YAAY,OAAO;CAEzB,MAAM,gBAAgB,UAAyC;AAC7D,YAAU,MAAM;AAEhB,MAAI,MAAM,iBAAkB;AAE5B,MAAI,OACF,WAAU,MAAM;MAEhB,UAAS,MAAM;AAGjB,aAAW,aAAa,CAAC,SAAS;;CAGpC,MAAM,CAAC,UAAU,sBAAsB;CACvC,MAAM,WAAW,uBAAuB;CACxC,MAAM,sBACJ,UAAU,WACN;EACE,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAAC,QACF;CACN,MAAM,qBACJ,UAAU,WACN;EACE,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAAC,QACF;AAEN,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,mDAAmD,UAAU;EAAE,eAAa;YAA/F,CACE,oBAAC,OAAD;GACE,eAAa,CAAC;GACd,WAAW,GACT,4HACA,qBACA,oBACA,oBAAoB,OACpB,iIACA,SAAS,yDAAyD,yDACnE;GACD,eAAa,GAAG,WAAW;GAC3B,IAAI;aAEJ,oBAAC,QAAD;IAAM,WAAW,GAAG,yDAAyD,qBAAqB,OAAO,iBAAiB;cAAG;IAAe;GACxI,GAEN,oBAAC,YAAD;GACE,GAAI;GACJ,iBAAe;GACf,iBAAe;GACf,WAAW,GAAG,iBAAiB,UAAU,6EAA6E,gBAAgB;GACtI,eAAa,GAAG,WAAW;GAC3B,YACE,qBAAC,QAAD;IAAM,WAAW,GAAG,oDAAoD,8BAA8B,MAAM;cAA5G,CACE,oBAAC,QAAD;KACE,eAAa;KACb,WAAW,GACT,8IACA,SAAS,sDAAsD,+BAChE;KACD,mBAAgB;eAEhB,oBAAC,UAAD;MAAU,eAAY;MAAO,WAAU;MAAqB,MAAM;MAAY;KACzE,GAEP,oBAAC,QAAD;KACE,eAAa,CAAC;KACd,WAAW,GACT,8IACA,SAAS,iCAAiC,oDAC3C;KACD,mBAAgB;eAEhB,oBAAC,oBAAD;MAAoB,eAAY;MAAO,WAAU;MAAqB,MAAM;MAAY;KACnF,EACF;;GAET,OAAO,SAAS,aAAa;GAC7B,SAAS;GACF;GACD;GACN,EACE;;;AAIV,mBAAmB,cAAc"}
+{"version":3,"file":"ButtonIconSlideout.js","names":[],"sources":["../src/components/ButtonIconSlideout/ButtonIconSlideout.tsx"],"sourcesContent":["import { ButtonIcon, type ButtonIconProps } from '@components/ButtonIcon/ButtonIcon'\nimport { CloseIcon, LabelIcon } from '@components/Icons'\nimport { type IconProps } from '@components/Icons/iconTypes'\nimport { useControllableState } from '@hooks/useControllableState'\nimport { cn } from '@utils/twUtils'\nimport { type ComponentType, type MouseEvent, useId } from 'react'\n\ntype SlideoutSize = NonNullable<ButtonIconProps['size']>\ntype SlideoutIcons = [openIcon: ComponentType<IconProps>, closeIcon: ComponentType<IconProps>]\ntype SlideoutLayout = 'overlay' | 'inline'\n\nconst contentHeightBySize: Record<SlideoutSize, string> = {\n  sm: 'h-8',\n  md: 'h-10',\n  lg: 'h-12',\n}\n\nconst iconContainerSizeByButtonSize: Record<SlideoutSize, string> = {\n  sm: 'size-4',\n  md: 'size-6',\n  lg: 'size-8',\n}\n\nconst iconPixelsByButtonSize: Record<SlideoutSize, number> = {\n  sm: 16,\n  md: 24,\n  lg: 32,\n}\n\nconst fontSizeByButtonSize: Record<SlideoutSize, string> = {\n  sm: 'text-xs',\n  md: 'text-sm',\n  lg: 'text-base',\n}\n\nconst inlineCircleMarginBySize: Record<SlideoutSize, string> = {\n  sm: '-ml-4',\n  md: '-ml-5',\n  lg: '-ml-6',\n}\n\nexport interface ButtonIconSlideoutProps extends Omit<ButtonIconProps, 'className' | 'content' | 'icon' | 'label' | 'onClick'> {\n  buttonClassName?: string\n  className?: string\n  closeLabel?: string\n  content: number | string\n  contentClassName?: string\n  dataTestId?: string\n  defaultOpen?: boolean\n  icons?: SlideoutIcons\n  label: string\n  /**\n   * Controls how the slideout panel relates to surrounding layout flow:\n   *\n   * - `'overlay'` (default): the panel is absolutely positioned and slides over its\n   *   neighbors. Use when the trigger sits in free space (toolbars, floating actions).\n   * - `'inline'`: the panel participates in flex/grid flow and pushes its neighbors as\n   *   it opens. Use when the trigger sits inside a row alongside other content (such\n   *   as a header where a title should slide aside).\n   */\n  layout?: SlideoutLayout\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void\n  onOpen?: (event: MouseEvent<HTMLButtonElement>) => void\n  onOpenChange?: (isOpen: boolean) => void\n  open?: boolean\n}\n\nexport const ButtonIconSlideout = ({\n  buttonClassName,\n  className,\n  closeLabel = 'Close panel',\n  content,\n  contentClassName,\n  dataTestId = 'spectral-button-icon-slideout',\n  defaultOpen = false,\n  icons = [LabelIcon, CloseIcon],\n  label,\n  layout = 'overlay',\n  shape = 'square',\n  size = 'md',\n  onClick,\n  onClose,\n  onOpen,\n  onOpenChange,\n  open,\n  ...buttonProps\n}: ButtonIconSlideoutProps) => {\n  const [isOpen, setIsOpen] = useControllableState<boolean>({\n    value: open,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  })\n  const contentId = useId()\n\n  const handleToggle = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event)\n\n    if (event.defaultPrevented) return\n\n    if (isOpen) {\n      onClose?.(event)\n    } else {\n      onOpen?.(event)\n    }\n\n    setIsOpen((previous) => !previous)\n  }\n\n  const [OpenIcon, CloseIconComponent] = icons\n  const iconSize = iconPixelsByButtonSize[size]\n  const isInlineLayout = layout === 'inline'\n  const overlayContentLeftPosition =\n    shape === 'circle'\n      ? {\n          sm: 'left-[calc(100%-1rem)]',\n          md: 'left-[calc(100%-1.25rem)]',\n          lg: 'left-[calc(100%-1.5rem)]',\n        }[size]\n      : 'left-[calc(100%-0.75rem)]'\n  const contentLeftPadding =\n    shape === 'circle'\n      ? {\n          sm: 'pl-5',\n          md: 'pl-6',\n          lg: 'pl-7',\n        }[size]\n      : 'pl-4'\n  const inlineContentMargin = shape === 'circle' ? inlineCircleMarginBySize[size] : '-ml-3'\n\n  return (\n    <div\n      // This is an approved exception to the layout-property animation rule in order to maintain lockstep sibling reflow animation.\n      className={cn('relative isolate items-center', isInlineLayout ? cn('inline-grid transition-[grid-template-columns] duration-200 ease-in motion-reduce:transition-none', isOpen ? 'grid-cols-[auto_1fr]' : 'grid-cols-[auto_0fr]') : 'inline-flex w-fit', className)}\n      data-testid={dataTestId}\n    >\n      <ButtonIcon\n        {...buttonProps}\n        aria-controls={contentId}\n        aria-expanded={isOpen}\n        className={cn('relative z-10', isOpen && 'bg-level-three shadow-[4px_0_10px_rgb(0_0_0_/_0.18)] hover:bg-level-three', buttonClassName)}\n        data-testid={`${dataTestId}-button`}\n        icon={() => (\n          <span className={cn('relative inline-flex items-center justify-center', iconContainerSizeByButtonSize[size])}>\n            <span\n              aria-hidden={isOpen}\n              className={cn('inset-0 absolute flex items-center justify-center transition-[filter,opacity,transform] duration-200 ease-in motion-reduce:transition-none', isOpen ? 'pointer-events-none scale-95 opacity-0 blur-[2px]' : 'blur-0 scale-100 opacity-100')}\n              data-icon-state='closed'\n            >\n              <OpenIcon\n                aria-hidden='true'\n                className='size-full shrink-0'\n                size={iconSize}\n              />\n            </span>\n\n            <span\n              aria-hidden={!isOpen}\n              className={cn('inset-0 absolute flex items-center justify-center transition-[filter,opacity,transform] duration-200 ease-in motion-reduce:transition-none', isOpen ? 'blur-0 scale-100 opacity-100' : 'pointer-events-none scale-95 opacity-0 blur-[2px]')}\n              data-icon-state='open'\n            >\n              <CloseIconComponent\n                aria-hidden='true'\n                className='size-full shrink-0'\n                size={iconSize}\n              />\n            </span>\n          </span>\n        )}\n        label={isOpen ? closeLabel : label}\n        onClick={handleToggle}\n        shape={shape}\n        size={size}\n      />\n\n      <div\n        aria-hidden={!isOpen}\n        className={cn(\n          'rounded-r-xl pr-3 font-medium pointer-events-none bg-level-three text-text-primary',\n          contentHeightBySize[size],\n          'flex items-center overflow-hidden transition-[transform,opacity,clip-path] duration-200 ease-in motion-reduce:transition-none',\n          isOpen ? 'translate-x-0 opacity-100 [clip-path:inset(0_0_0_0)]' : '-translate-x-2 opacity-0 [clip-path:inset(0_100%_0_0)]',\n          isInlineLayout ? cn('min-w-0 max-w-44 relative z-0', inlineContentMargin, contentLeftPadding) : cn('inset-y-0 max-w-44 absolute z-0 w-max', overlayContentLeftPosition, contentLeftPadding),\n        )}\n        data-testid={`${dataTestId}-content`}\n        id={contentId}\n      >\n        <span className={cn('leading-5 block max-w-full truncate', fontSizeByButtonSize[size], contentClassName)}>{content}</span>\n      </div>\n    </div>\n  )\n}\n\nButtonIconSlideout.displayName = 'ButtonIconSlideout'\n"],"mappings":";;;;;;;;;;AAWA,MAAM,sBAAoD;CACxD,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,gCAA8D;CAClE,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,yBAAuD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,uBAAqD;CACzD,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,2BAAyD;CAC7D,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AA6BD,MAAa,sBAAsB,EACjC,iBACA,WACA,aAAa,eACb,SACA,kBACA,aAAa,iCACb,cAAc,OACd,QAAQ,CAAC,WAAW,UAAU,EAC9B,OACA,SAAS,WACT,QAAQ,UACR,OAAO,MACP,SACA,SACA,QACA,cACA,MACA,GAAG,kBAC0B;CAC7B,MAAM,CAAC,QAAQ,aAAa,qBAA8B;EACxD,OAAO;EACP,cAAc;EACd,UAAU;EACX,CAAC;CACF,MAAM,YAAY,OAAO;CAEzB,MAAM,gBAAgB,UAAyC;AAC7D,YAAU,MAAM;AAEhB,MAAI,MAAM,iBAAkB;AAE5B,MAAI,OACF,WAAU,MAAM;MAEhB,UAAS,MAAM;AAGjB,aAAW,aAAa,CAAC,SAAS;;CAGpC,MAAM,CAAC,UAAU,sBAAsB;CACvC,MAAM,WAAW,uBAAuB;CACxC,MAAM,iBAAiB,WAAW;CAClC,MAAM,6BACJ,UAAU,WACN;EACE,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAAC,QACF;CACN,MAAM,qBACJ,UAAU,WACN;EACE,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAAC,QACF;CACN,MAAM,sBAAsB,UAAU,WAAW,yBAAyB,QAAQ;AAElF,QACE,qBAAC,OAAD;EAEE,WAAW,GAAG,iCAAiC,iBAAiB,GAAG,qGAAqG,SAAS,yBAAyB,uBAAuB,GAAG,qBAAqB,UAAU;EACnQ,eAAa;YAHf,CAKE,oBAAC,YAAD;GACE,GAAI;GACJ,iBAAe;GACf,iBAAe;GACf,WAAW,GAAG,iBAAiB,UAAU,6EAA6E,gBAAgB;GACtI,eAAa,GAAG,WAAW;GAC3B,YACE,qBAAC,QAAD;IAAM,WAAW,GAAG,oDAAoD,8BAA8B,MAAM;cAA5G,CACE,oBAAC,QAAD;KACE,eAAa;KACb,WAAW,GAAG,8IAA8I,SAAS,sDAAsD,+BAA+B;KAC1P,mBAAgB;eAEhB,oBAAC,UAAD;MACE,eAAY;MACZ,WAAU;MACV,MAAM;MACN;KACG,GAEP,oBAAC,QAAD;KACE,eAAa,CAAC;KACd,WAAW,GAAG,8IAA8I,SAAS,iCAAiC,oDAAoD;KAC1P,mBAAgB;eAEhB,oBAAC,oBAAD;MACE,eAAY;MACZ,WAAU;MACV,MAAM;MACN;KACG,EACF;;GAET,OAAO,SAAS,aAAa;GAC7B,SAAS;GACF;GACD;GACN,GAEF,oBAAC,OAAD;GACE,eAAa,CAAC;GACd,WAAW,GACT,sFACA,oBAAoB,OACpB,iIACA,SAAS,yDAAyD,0DAClE,iBAAiB,GAAG,iCAAiC,qBAAqB,mBAAmB,GAAG,GAAG,yCAAyC,4BAA4B,mBAAmB,CAC5L;GACD,eAAa,GAAG,WAAW;GAC3B,IAAI;aAEJ,oBAAC,QAAD;IAAM,WAAW,GAAG,uCAAuC,qBAAqB,OAAO,iBAAiB;cAAG;IAAe;GACtH,EACF;;;AAIV,mBAAmB,cAAc"}