@epilot/spark-ui 0.15.2 → 0.16.1

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":["DialogPrimitive"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\n// Our dialogs contain interactive elements that are mounted outside of the dialog\n// Browser extensions like password managers or grammar checkers are also mounted outside\n// We still dismiss on a click/tap outside: a genuine outside press lands on a\n// backdrop (our styled one, or Base UI's internal inert backdrop when modal)\nfunction isBackdropPress(event: Event | undefined) {\n  const target = event?.target\n  return (\n    target instanceof HTMLElement &&\n    (target.dataset.overlay === 'true' ||\n      target.hasAttribute('data-base-ui-inert'))\n  )\n}\n\nfunction Dialog({\n  onOpenChange,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return (\n    <DialogPrimitive.Root\n      {...props}\n      onOpenChange={(open, eventDetails) => {\n        if (\n          !open &&\n          eventDetails.reason === 'outside-press' &&\n          !isBackdropPress(eventDetails.event)\n        ) {\n          eventDetails.cancel()\n          return\n        }\n        onOpenChange?.(open, eventDetails)\n      }}\n    />\n  )\n}\n\nfunction DialogTrigger(\n  props: React.ComponentProps<typeof DialogPrimitive.Trigger>,\n) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal(\n  props: React.ComponentProps<typeof DialogPrimitive.Portal>,\n) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, custom closes)\nfunction DialogClose({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  if (children || props.render) {\n    return (\n      <DialogPrimitive.Close\n        data-slot=\"dialog-close\"\n        className={className}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Close>\n    )\n  }\n\n  return (\n    <DialogPrimitive.Close\n      data-slot=\"dialog-close\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-3 rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <MaterialSymbol\n        className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\"\n        name=\"close\"\n      />\n    </DialogPrimitive.Close>\n  )\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none',\n        className,\n      )}\n      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup>) {\n  return (\n    <DialogPrimitive.Popup\n      data-slot=\"dialog-content\"\n      className={cn(\n        'fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-1 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 motion-reduce:transition-none sm:w-1/2',\n        // enter/exit: fade + zoom + a slight upward offset (was animate-in/out)\n        'data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0',\n        'data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-4 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn('text-lg font-bold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"mappings":";;;;;;;;AAUA,SAAS,gBAAgB,OAA0B;CACjD,MAAM,SAAS,OAAO;CACtB,OACE,kBAAkB,gBACjB,OAAO,QAAQ,YAAY,UAC1B,OAAO,aAAa,oBAAoB;AAE9C;AAEA,SAAS,OAAO,EACd,cACA,GAAG,SACiD;CACpD,OACE,oBAACA,SAAgB,MAAjB;EACE,GAAI;EACJ,eAAe,MAAM,iBAAiB;GACpC,IACE,CAAC,QACD,aAAa,WAAW,mBACxB,CAAC,gBAAgB,aAAa,KAAK,GACnC;IACA,aAAa,OAAO;IACpB;GACF;GACA,eAAe,MAAM,YAAY;EACnC;CACD,CAAA;AAEL;AAEA,SAAS,cACP,OACA;CACA,OAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,YAAY,EACnB,WACA,UACA,GAAG,SACkD;CACrD,IAAI,YAAY,MAAM,QACpB,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACoB,CAAA;CAI3B,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,oBAAC,gBAAD;GACE,WAAU;GACV,MAAK;EACN,CAAA;CACoB,CAAA;AAE3B;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,kRACA,SACF;EACA,gBAAa;EACb,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,kRAEA,qGACA,+FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"dialog.js","names":["DialogPrimitive"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\n// Our dialogs contain interactive elements that are mounted outside of the dialog\n// Browser extensions like password managers or grammar checkers are also mounted outside\n// We still dismiss on a click/tap outside: a genuine outside press lands on a\n// backdrop (our styled one, or Base UI's internal inert backdrop when modal)\nfunction isBackdropPress(event: Event | undefined) {\n  const target = event?.target\n  return (\n    target instanceof HTMLElement &&\n    (target.dataset.overlay === 'true' ||\n      target.hasAttribute('data-base-ui-inert'))\n  )\n}\n\nfunction Dialog({\n  onOpenChange,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return (\n    <DialogPrimitive.Root\n      {...props}\n      onOpenChange={(open, eventDetails) => {\n        if (\n          !open &&\n          eventDetails.reason === 'outside-press' &&\n          !isBackdropPress(eventDetails.event)\n        ) {\n          eventDetails.cancel()\n          return\n        }\n        onOpenChange?.(open, eventDetails)\n      }}\n    />\n  )\n}\n\nfunction DialogTrigger(\n  props: React.ComponentProps<typeof DialogPrimitive.Trigger>,\n) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal(\n  props: React.ComponentProps<typeof DialogPrimitive.Portal>,\n) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, custom closes)\nfunction DialogClose({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  if (children || props.render) {\n    return (\n      <DialogPrimitive.Close\n        data-slot=\"dialog-close\"\n        className={className}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Close>\n    )\n  }\n\n  return (\n    <DialogPrimitive.Close\n      data-slot=\"dialog-close\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-3 rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n    </DialogPrimitive.Close>\n  )\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none',\n        className,\n      )}\n      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup>) {\n  return (\n    <DialogPrimitive.Popup\n      data-slot=\"dialog-content\"\n      className={cn(\n        'fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-1 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 motion-reduce:transition-none sm:w-1/2',\n        // enter/exit: fade + zoom + a slight upward offset (was animate-in/out)\n        'data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0',\n        'data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-4 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn('text-lg font-bold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"mappings":";;;;;;;;AAUA,SAAS,gBAAgB,OAA0B;CACjD,MAAM,SAAS,OAAO;CACtB,OACE,kBAAkB,gBACjB,OAAO,QAAQ,YAAY,UAC1B,OAAO,aAAa,oBAAoB;AAE9C;AAEA,SAAS,OAAO,EACd,cACA,GAAG,SACiD;CACpD,OACE,oBAACA,SAAgB,MAAjB;EACE,GAAI;EACJ,eAAe,MAAM,iBAAiB;GACpC,IACE,CAAC,QACD,aAAa,WAAW,mBACxB,CAAC,gBAAgB,aAAa,KAAK,GACnC;IACA,aAAa,OAAO;IACpB;GACF;GACA,eAAe,MAAM,YAAY;EACnC;CACD,CAAA;AAEL;AAEA,SAAS,cACP,OACA;CACA,OAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,YAAY,EACnB,WACA,UACA,GAAG,SACkD;CACrD,IAAI,YAAY,MAAM,QACpB,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACoB,CAAA;CAI3B,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,oBAAC,OAAD,EAAO,WAAU,wDAAyD,CAAA;CACrD,CAAA;AAE3B;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,kRACA,SACF;EACA,gBAAa;EACb,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,kRAEA,qGACA,+FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/drawer.cjs

@@ -46,7 +46,7 @@ const onInteractOutsideHandler = (event) => {
 function DrawerContent({ className, pillClassName, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(vaul.Drawer.Content, {
 		"data-slot": "drawer-content",
-		className: (0, cnfast.cn)("group/drawer-content fixed z-50 flex h-auto flex-col bg-gray-2 text-gray", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl", "data-[vaul-drawer-direction=left]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:border-gray-a1 data-[vaul-drawer-direction=left]:sm:max-w-sm", "data-[vaul-drawer-direction=right]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-gray-a1 data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
+		className: (0, cnfast.cn)("group/drawer-content fixed z-50 flex h-auto flex-col bg-gray-2 text-gray", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg", "data-[vaul-drawer-direction=left]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:border-gray-a1 data-[vaul-drawer-direction=left]:sm:max-w-sm", "data-[vaul-drawer-direction=right]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-gray-a1 data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
 		onInteractOutside: onInteractOutsideHandler,
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, cnfast.cn)("mx-auto mt-2.5 hidden h-1.5 w-16 shrink-0 rounded-full bg-base-gray-soft group-data-[vaul-drawer-direction=bottom]/drawer-content:block", pillClassName) }), children]

package/dist/components/drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.cjs","names":["DrawerPrimitive"],"sources":["../../src/components/drawer.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Drawer as DrawerPrimitive } from 'vaul'\nimport { cn } from '../utils/cn'\n\nfunction Drawer({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return (\n    <DrawerPrimitive.Root\n      data-slot=\"drawer\"\n      shouldScaleBackground={shouldScaleBackground}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTrigger(\n  props: React.ComponentProps<typeof DrawerPrimitive.Trigger>,\n) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal(\n  props: React.ComponentProps<typeof DrawerPrimitive.Portal>,\n) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose(\n  props: React.ComponentProps<typeof DrawerPrimitive.Close>,\n) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) supports-backdrop-filter:backdrop-blur-xs',\n        className,\n      )}\n      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\ninterface DrawerContentProps extends React.ComponentProps<\n  typeof DrawerPrimitive.Content\n> {\n  pillClassName?: string\n}\n\nconst onInteractOutsideHandler = (event: CustomEvent) => {\n  const target = event.target as HTMLElement\n  const isOverlay = target.dataset.overlay === 'true'\n\n  // Our drawers contain interactive elements that are mounted outside of the drawer\n  // Browser extensions like password managers or grammar checkers are also mounted outside\n  // We still dismiss on a click/tap outside\n  if (!isOverlay) event.preventDefault()\n}\n\nfunction DrawerContent({\n  className,\n  pillClassName,\n  children,\n  ...props\n}: DrawerContentProps) {\n  return (\n    <DrawerPrimitive.Content\n      data-slot=\"drawer-content\"\n      className={cn(\n        'group/drawer-content fixed z-50 flex h-auto flex-col bg-gray-2 text-gray',\n        'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl',\n        'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl',\n        'data-[vaul-drawer-direction=left]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:border-gray-a1 data-[vaul-drawer-direction=left]:sm:max-w-sm',\n        'data-[vaul-drawer-direction=right]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-gray-a1 data-[vaul-drawer-direction=right]:sm:max-w-sm',\n        className,\n      )}\n      onInteractOutside={onInteractOutsideHandler}\n      {...props}\n    >\n      <div\n        className={cn(\n          'mx-auto mt-2.5 hidden h-1.5 w-16 shrink-0 rounded-full bg-base-gray-soft group-data-[vaul-drawer-direction=bottom]/drawer-content:block',\n          pillClassName,\n        )}\n      />\n      {children}\n    </DrawerPrimitive.Content>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn('flex flex-col gap-1 px-6 py-3', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-lg font-bold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n}\nexport type { DrawerContentProps }\n"],"mappings":";;;;;;;;;AAIA,SAAS,OAAO,EACd,wBAAwB,MACxB,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,MAAjB;EACE,aAAU;EACa;EACvB,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,YACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,SAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,0JACA,SACF;EACA,gBAAa;EACb,GAAI;CACL,CAAA;AAEL;AAQA,MAAM,4BAA4B,UAAuB;CAOvD,IAAI,EANW,MAAM,OACI,QAAQ,YAAY,SAK7B,MAAM,eAAe;AACvC;AAEA,SAAS,cAAc,EACrB,WACA,eACA,UACA,GAAG,SACkB;CACrB,OACE,iBAAA,GAAA,kBAAA,MAACA,KAAAA,OAAgB,SAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,4EACA,2QACA,+OACA,gWACA,wWACA,SACF;EACA,mBAAmB;EACnB,GAAI;YAXN,CAaE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EACE,YAAA,GAAA,OAAA,IACE,2IACA,aACF,EACD,CAAA,GACA,QACsB;;AAE7B;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,aAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"drawer.cjs","names":["DrawerPrimitive"],"sources":["../../src/components/drawer.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Drawer as DrawerPrimitive } from 'vaul'\nimport { cn } from '../utils/cn'\n\nfunction Drawer({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return (\n    <DrawerPrimitive.Root\n      data-slot=\"drawer\"\n      shouldScaleBackground={shouldScaleBackground}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTrigger(\n  props: React.ComponentProps<typeof DrawerPrimitive.Trigger>,\n) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal(\n  props: React.ComponentProps<typeof DrawerPrimitive.Portal>,\n) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose(\n  props: React.ComponentProps<typeof DrawerPrimitive.Close>,\n) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) supports-backdrop-filter:backdrop-blur-xs',\n        className,\n      )}\n      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\ninterface DrawerContentProps extends React.ComponentProps<\n  typeof DrawerPrimitive.Content\n> {\n  pillClassName?: string\n}\n\nconst onInteractOutsideHandler = (event: CustomEvent) => {\n  const target = event.target as HTMLElement\n  const isOverlay = target.dataset.overlay === 'true'\n\n  // Our drawers contain interactive elements that are mounted outside of the drawer\n  // Browser extensions like password managers or grammar checkers are also mounted outside\n  // We still dismiss on a click/tap outside\n  if (!isOverlay) event.preventDefault()\n}\n\nfunction DrawerContent({\n  className,\n  pillClassName,\n  children,\n  ...props\n}: DrawerContentProps) {\n  return (\n    <DrawerPrimitive.Content\n      data-slot=\"drawer-content\"\n      className={cn(\n        'group/drawer-content fixed z-50 flex h-auto flex-col bg-gray-2 text-gray',\n        'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg',\n        'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg',\n        'data-[vaul-drawer-direction=left]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:border-gray-a1 data-[vaul-drawer-direction=left]:sm:max-w-sm',\n        'data-[vaul-drawer-direction=right]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-gray-a1 data-[vaul-drawer-direction=right]:sm:max-w-sm',\n        className,\n      )}\n      onInteractOutside={onInteractOutsideHandler}\n      {...props}\n    >\n      <div\n        className={cn(\n          'mx-auto mt-2.5 hidden h-1.5 w-16 shrink-0 rounded-full bg-base-gray-soft group-data-[vaul-drawer-direction=bottom]/drawer-content:block',\n          pillClassName,\n        )}\n      />\n      {children}\n    </DrawerPrimitive.Content>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn('flex flex-col gap-1 px-6 py-3', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-lg font-bold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n}\nexport type { DrawerContentProps }\n"],"mappings":";;;;;;;;;AAIA,SAAS,OAAO,EACd,wBAAwB,MACxB,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,MAAjB;EACE,aAAU;EACa;EACvB,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,YACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,SAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,0JACA,SACF;EACA,gBAAa;EACb,GAAI;CACL,CAAA;AAEL;AAQA,MAAM,4BAA4B,UAAuB;CAOvD,IAAI,EANW,MAAM,OACI,QAAQ,YAAY,SAK7B,MAAM,eAAe;AACvC;AAEA,SAAS,cAAc,EACrB,WACA,eACA,UACA,GAAG,SACkB;CACrB,OACE,iBAAA,GAAA,kBAAA,MAACA,KAAAA,OAAgB,SAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,4EACA,2QACA,+OACA,gWACA,wWACA,SACF;EACA,mBAAmB;EACnB,GAAI;YAXN,CAaE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EACE,YAAA,GAAA,OAAA,IACE,2IACA,aACF,EACD,CAAA,GACA,QACsB;;AAE7B;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,aAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/drawer.js

@@ -43,7 +43,7 @@ const onInteractOutsideHandler = (event) => {
 function DrawerContent({ className, pillClassName, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Drawer$1.Content, {
 		"data-slot": "drawer-content",
-		className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-gray-2 text-gray", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl", "data-[vaul-drawer-direction=left]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:border-gray-a1 data-[vaul-drawer-direction=left]:sm:max-w-sm", "data-[vaul-drawer-direction=right]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-gray-a1 data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
+		className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-gray-2 text-gray", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg", "data-[vaul-drawer-direction=left]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:border-gray-a1 data-[vaul-drawer-direction=left]:sm:max-w-sm", "data-[vaul-drawer-direction=right]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-gray-a1 data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
 		onInteractOutside: onInteractOutsideHandler,
 		...props,
 		children: [/* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-2.5 hidden h-1.5 w-16 shrink-0 rounded-full bg-base-gray-soft group-data-[vaul-drawer-direction=bottom]/drawer-content:block", pillClassName) }), children]

package/dist/components/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../../src/components/drawer.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Drawer as DrawerPrimitive } from 'vaul'\nimport { cn } from '../utils/cn'\n\nfunction Drawer({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return (\n    <DrawerPrimitive.Root\n      data-slot=\"drawer\"\n      shouldScaleBackground={shouldScaleBackground}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTrigger(\n  props: React.ComponentProps<typeof DrawerPrimitive.Trigger>,\n) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal(\n  props: React.ComponentProps<typeof DrawerPrimitive.Portal>,\n) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose(\n  props: React.ComponentProps<typeof DrawerPrimitive.Close>,\n) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) supports-backdrop-filter:backdrop-blur-xs',\n        className,\n      )}\n      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\ninterface DrawerContentProps extends React.ComponentProps<\n  typeof DrawerPrimitive.Content\n> {\n  pillClassName?: string\n}\n\nconst onInteractOutsideHandler = (event: CustomEvent) => {\n  const target = event.target as HTMLElement\n  const isOverlay = target.dataset.overlay === 'true'\n\n  // Our drawers contain interactive elements that are mounted outside of the drawer\n  // Browser extensions like password managers or grammar checkers are also mounted outside\n  // We still dismiss on a click/tap outside\n  if (!isOverlay) event.preventDefault()\n}\n\nfunction DrawerContent({\n  className,\n  pillClassName,\n  children,\n  ...props\n}: DrawerContentProps) {\n  return (\n    <DrawerPrimitive.Content\n      data-slot=\"drawer-content\"\n      className={cn(\n        'group/drawer-content fixed z-50 flex h-auto flex-col bg-gray-2 text-gray',\n        'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl',\n        'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl',\n        'data-[vaul-drawer-direction=left]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:border-gray-a1 data-[vaul-drawer-direction=left]:sm:max-w-sm',\n        'data-[vaul-drawer-direction=right]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-gray-a1 data-[vaul-drawer-direction=right]:sm:max-w-sm',\n        className,\n      )}\n      onInteractOutside={onInteractOutsideHandler}\n      {...props}\n    >\n      <div\n        className={cn(\n          'mx-auto mt-2.5 hidden h-1.5 w-16 shrink-0 rounded-full bg-base-gray-soft group-data-[vaul-drawer-direction=bottom]/drawer-content:block',\n          pillClassName,\n        )}\n      />\n      {children}\n    </DrawerPrimitive.Content>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn('flex flex-col gap-1 px-6 py-3', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-lg font-bold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n}\nexport type { DrawerContentProps }\n"],"mappings":";;;;;;AAIA,SAAS,OAAO,EACd,wBAAwB,MACxB,GAAG,SACiD;CACpD,OACE,oBAACA,SAAgB,MAAjB;EACE,aAAU;EACa;EACvB,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cACP,OACA;CACA,OAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,YACP,OACA;CACA,OAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,0JACA,SACF;EACA,gBAAa;EACb,GAAI;CACL,CAAA;AAEL;AAQA,MAAM,4BAA4B,UAAuB;CAOvD,IAAI,EANW,MAAM,OACI,QAAQ,YAAY,SAK7B,MAAM,eAAe;AACvC;AAEA,SAAS,cAAc,EACrB,WACA,eACA,UACA,GAAG,SACkB;CACrB,OACE,qBAACA,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,4EACA,2QACA,+OACA,gWACA,wWACA,SACF;EACA,mBAAmB;EACnB,GAAI;YAXN,CAaE,oBAAC,OAAD,EACE,WAAW,GACT,2IACA,aACF,EACD,CAAA,GACA,QACsB;;AAE7B;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../../src/components/drawer.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Drawer as DrawerPrimitive } from 'vaul'\nimport { cn } from '../utils/cn'\n\nfunction Drawer({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return (\n    <DrawerPrimitive.Root\n      data-slot=\"drawer\"\n      shouldScaleBackground={shouldScaleBackground}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTrigger(\n  props: React.ComponentProps<typeof DrawerPrimitive.Trigger>,\n) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal(\n  props: React.ComponentProps<typeof DrawerPrimitive.Portal>,\n) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose(\n  props: React.ComponentProps<typeof DrawerPrimitive.Close>,\n) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) supports-backdrop-filter:backdrop-blur-xs',\n        className,\n      )}\n      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\ninterface DrawerContentProps extends React.ComponentProps<\n  typeof DrawerPrimitive.Content\n> {\n  pillClassName?: string\n}\n\nconst onInteractOutsideHandler = (event: CustomEvent) => {\n  const target = event.target as HTMLElement\n  const isOverlay = target.dataset.overlay === 'true'\n\n  // Our drawers contain interactive elements that are mounted outside of the drawer\n  // Browser extensions like password managers or grammar checkers are also mounted outside\n  // We still dismiss on a click/tap outside\n  if (!isOverlay) event.preventDefault()\n}\n\nfunction DrawerContent({\n  className,\n  pillClassName,\n  children,\n  ...props\n}: DrawerContentProps) {\n  return (\n    <DrawerPrimitive.Content\n      data-slot=\"drawer-content\"\n      className={cn(\n        'group/drawer-content fixed z-50 flex h-auto flex-col bg-gray-2 text-gray',\n        'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg',\n        'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg',\n        'data-[vaul-drawer-direction=left]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:border-gray-a1 data-[vaul-drawer-direction=left]:sm:max-w-sm',\n        'data-[vaul-drawer-direction=right]:top-(--spark-viewport-top,0) data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:h-(--spark-viewport-height,100%) data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-gray-a1 data-[vaul-drawer-direction=right]:sm:max-w-sm',\n        className,\n      )}\n      onInteractOutside={onInteractOutsideHandler}\n      {...props}\n    >\n      <div\n        className={cn(\n          'mx-auto mt-2.5 hidden h-1.5 w-16 shrink-0 rounded-full bg-base-gray-soft group-data-[vaul-drawer-direction=bottom]/drawer-content:block',\n          pillClassName,\n        )}\n      />\n      {children}\n    </DrawerPrimitive.Content>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn('flex flex-col gap-1 px-6 py-3', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-lg font-bold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n}\nexport type { DrawerContentProps }\n"],"mappings":";;;;;;AAIA,SAAS,OAAO,EACd,wBAAwB,MACxB,GAAG,SACiD;CACpD,OACE,oBAACA,SAAgB,MAAjB;EACE,aAAU;EACa;EACvB,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cACP,OACA;CACA,OAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,YACP,OACA;CACA,OAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,0JACA,SACF;EACA,gBAAa;EACb,GAAI;CACL,CAAA;AAEL;AAQA,MAAM,4BAA4B,UAAuB;CAOvD,IAAI,EANW,MAAM,OACI,QAAQ,YAAY,SAK7B,MAAM,eAAe;AACvC;AAEA,SAAS,cAAc,EACrB,WACA,eACA,UACA,GAAG,SACkB;CACrB,OACE,qBAACA,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,4EACA,2QACA,+OACA,gWACA,wWACA,SACF;EACA,mBAAmB;EACnB,GAAI;YAXN,CAaE,oBAAC,OAAD,EACE,WAAW,GACT,2IACA,aACF,EACD,CAAA,GACA,QACsB;;AAE7B;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/dropdown-menu.cjs

@@ -1,9 +1,9 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_menu = require("@base-ui/react/menu");
 let cnfast = require("cnfast");
@@ -51,7 +51,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "dropdown-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: (0, cnfast.cn)("group/dropdown-menu-item relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 data-[variant=destructive]:text-error data-[variant=destructive]:data-highlighted:bg-base-error-soft [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
+		className: (0, cnfast.cn)("group/dropdown-menu-item relative flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 data-[variant=destructive]:text-error data-[variant=destructive]:data-highlighted:bg-base-error-soft [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
 		...props
 	});
 }
@@ -59,16 +59,13 @@ function DropdownMenuCheckboxItem({ className, children, checked, inset, ...prop
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_menu.Menu.CheckboxItem, {
 		"data-slot": "dropdown-menu-checkbox-item",
 		"data-inset": inset,
-		className: (0, cnfast.cn)("relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
+		className: (0, cnfast.cn)("relative flex min-h-7 cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center",
 			"data-slot": "dropdown-menu-checkbox-item-indicator",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-				className: "text-sm",
-				name: "check"
-			}) })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Check, { className: "text-sm" }) })
 		}), children]
 	});
 }
@@ -82,15 +79,12 @@ function DropdownMenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_menu.Menu.RadioItem, {
 		"data-slot": "dropdown-menu-radio-item",
 		"data-inset": inset,
-		className: (0, cnfast.cn)("relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
+		className: (0, cnfast.cn)("relative flex min-h-7 cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center",
 			"data-slot": "dropdown-menu-radio-item-indicator",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.RadioItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-				className: "text-sm",
-				name: "check"
-			}) })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.RadioItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Check, { className: "text-sm" }) })
 		}), children]
 	});
 }
@@ -126,12 +120,9 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_menu.Menu.SubmenuTrigger, {
 		"data-slot": "dropdown-menu-sub-trigger",
 		"data-inset": inset,
-		className: (0, cnfast.cn)("flex min-h-7 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-highlighted:bg-gray-a3 data-popup-open:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
+		className: (0, cnfast.cn)("flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-highlighted:bg-gray-a3 data-popup-open:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
 		...props,
-		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-			className: "ml-auto text-sm text-gray-light",
-			name: "chevron_right"
-		})]
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.ChevronRight, { className: "ml-auto text-sm text-gray-light" })]
 	});
 }
 function DropdownMenuSubContent({ className, ...props }) {

package/dist/components/dropdown-menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.cjs","names":["MenuPrimitive","MaterialSymbol"],"sources":["../../src/components/dropdown-menu.tsx"],"sourcesContent":["import { Menu as MenuPrimitive } from '@base-ui/react/menu'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Root>) {\n  return <MenuPrimitive.Root {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Portal>) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Trigger>) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\ntype DropdownMenuContentProps = React.ComponentProps<\n  typeof MenuPrimitive.Popup\n> &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    container?: React.ComponentProps<typeof MenuPrimitive.Portal>['container']\n  }\n\nfunction DropdownMenuContent({\n  className,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  container,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50 outline-none\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            'z-50 max-h-(--available-height) min-w-40 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 p-1 text-gray-a12 shadow-lg outline-none',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            className,\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Group>) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: 'default' | 'destructive'\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/dropdown-menu-item relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 data-[variant=destructive]:text-error data-[variant=destructive]:data-highlighted:bg-base-error-soft [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        'relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <MaterialSymbol className=\"text-sm\" name=\"check\" />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.RadioGroup>) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        'relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <MaterialSymbol className=\"text-sm\" name=\"check\" />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\n// plain div, not Menu.GroupLabel: Base UI's GroupLabel throws outside a\n// Group, while our labels float freely (radix Label was an unwired div too)\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<'div'> & {\n  inset?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        'px-2 py-1 text-xs text-gray-light data-[inset=true]:pl-7',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn('-mx-1 my-1 h-px bg-gray-a3', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        'ml-auto text-xs tracking-widest text-gray-light',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        'flex min-h-7 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-highlighted:bg-gray-a3 data-popup-open:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <MaterialSymbol\n        className=\"ml-auto text-sm text-gray-light\"\n        name=\"chevron_right\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\n// composes the public Content; the align/offset defaults visually align the\n// submenu with its parent menu\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      align=\"start\"\n      alignOffset={-3}\n      side=\"right\"\n      sideOffset={0}\n      className={cn('w-auto min-w-32', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n}\n"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.cjs","names":["MenuPrimitive","Check","ChevronRight"],"sources":["../../src/components/dropdown-menu.tsx"],"sourcesContent":["import { Menu as MenuPrimitive } from '@base-ui/react/menu'\nimport { Check, ChevronRight } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Root>) {\n  return <MenuPrimitive.Root {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Portal>) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Trigger>) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\ntype DropdownMenuContentProps = React.ComponentProps<\n  typeof MenuPrimitive.Popup\n> &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    container?: React.ComponentProps<typeof MenuPrimitive.Portal>['container']\n  }\n\nfunction DropdownMenuContent({\n  className,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  container,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50 outline-none\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            'z-50 max-h-(--available-height) min-w-40 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 p-1 text-gray-a12 shadow-lg outline-none',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            className,\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Group>) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: 'default' | 'destructive'\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/dropdown-menu-item relative flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 data-[variant=destructive]:text-error data-[variant=destructive]:data-highlighted:bg-base-error-soft [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        'relative flex min-h-7 cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <Check className=\"text-sm\" />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.RadioGroup>) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        'relative flex min-h-7 cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <Check className=\"text-sm\" />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\n// plain div, not Menu.GroupLabel: Base UI's GroupLabel throws outside a\n// Group, while our labels float freely (radix Label was an unwired div too)\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<'div'> & {\n  inset?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        'px-2 py-1 text-xs text-gray-light data-[inset=true]:pl-7',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn('-mx-1 my-1 h-px bg-gray-a3', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        'ml-auto text-xs tracking-widest text-gray-light',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        'flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-highlighted:bg-gray-a3 data-popup-open:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto text-sm text-gray-light\" />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\n// composes the public Content; the align/offset defaults visually align the\n// submenu with its parent menu\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      align=\"start\"\n      alignOffset={-3}\n      side=\"right\"\n      sideOffset={0}\n      className={cn('w-auto min-w-32', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n}\n"],"mappings":"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"}

package/dist/components/dropdown-menu.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { MaterialSymbol } from "../icons/material-symbol.js";
 import "react";
+import { Check, ChevronRight } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 //#region src/components/dropdown-menu.tsx
@@ -48,7 +48,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "dropdown-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("group/dropdown-menu-item relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 data-[variant=destructive]:text-error data-[variant=destructive]:data-highlighted:bg-base-error-soft [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
+		className: cn("group/dropdown-menu-item relative flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 data-[variant=destructive]:text-error data-[variant=destructive]:data-highlighted:bg-base-error-soft [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
 		...props
 	});
 }
@@ -56,16 +56,13 @@ function DropdownMenuCheckboxItem({ className, children, checked, inset, ...prop
 	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
 		"data-slot": "dropdown-menu-checkbox-item",
 		"data-inset": inset,
-		className: cn("relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
+		className: cn("relative flex min-h-7 cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center",
 			"data-slot": "dropdown-menu-checkbox-item-indicator",
-			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(MaterialSymbol, {
-				className: "text-sm",
-				name: "check"
-			}) })
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "text-sm" }) })
 		}), children]
 	});
 }
@@ -79,15 +76,12 @@ function DropdownMenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
 		"data-slot": "dropdown-menu-radio-item",
 		"data-inset": inset,
-		className: cn("relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
+		className: cn("relative flex min-h-7 cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center",
 			"data-slot": "dropdown-menu-radio-item-indicator",
-			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(MaterialSymbol, {
-				className: "text-sm",
-				name: "check"
-			}) })
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "text-sm" }) })
 		}), children]
 	});
 }
@@ -123,12 +117,9 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
 		"data-slot": "dropdown-menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("flex min-h-7 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-highlighted:bg-gray-a3 data-popup-open:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
+		className: cn("flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-highlighted:bg-gray-a3 data-popup-open:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(MaterialSymbol, {
-			className: "ml-auto text-sm text-gray-light",
-			name: "chevron_right"
-		})]
+		children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto text-sm text-gray-light" })]
 	});
 }
 function DropdownMenuSubContent({ className, ...props }) {

package/dist/components/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","names":["MenuPrimitive"],"sources":["../../src/components/dropdown-menu.tsx"],"sourcesContent":["import { Menu as MenuPrimitive } from '@base-ui/react/menu'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Root>) {\n  return <MenuPrimitive.Root {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Portal>) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Trigger>) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\ntype DropdownMenuContentProps = React.ComponentProps<\n  typeof MenuPrimitive.Popup\n> &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    container?: React.ComponentProps<typeof MenuPrimitive.Portal>['container']\n  }\n\nfunction DropdownMenuContent({\n  className,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  container,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50 outline-none\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            'z-50 max-h-(--available-height) min-w-40 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 p-1 text-gray-a12 shadow-lg outline-none',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            className,\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Group>) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: 'default' | 'destructive'\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/dropdown-menu-item relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 data-[variant=destructive]:text-error data-[variant=destructive]:data-highlighted:bg-base-error-soft [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        'relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <MaterialSymbol className=\"text-sm\" name=\"check\" />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.RadioGroup>) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        'relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <MaterialSymbol className=\"text-sm\" name=\"check\" />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\n// plain div, not Menu.GroupLabel: Base UI's GroupLabel throws outside a\n// Group, while our labels float freely (radix Label was an unwired div too)\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<'div'> & {\n  inset?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        'px-2 py-1 text-xs text-gray-light data-[inset=true]:pl-7',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn('-mx-1 my-1 h-px bg-gray-a3', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        'ml-auto text-xs tracking-widest text-gray-light',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        'flex min-h-7 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-highlighted:bg-gray-a3 data-popup-open:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <MaterialSymbol\n        className=\"ml-auto text-sm text-gray-light\"\n        name=\"chevron_right\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\n// composes the public Content; the align/offset defaults visually align the\n// submenu with its parent menu\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      align=\"start\"\n      alignOffset={-3}\n      side=\"right\"\n      sideOffset={0}\n      className={cn('w-auto min-w-32', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n}\n"],"mappings":";;;;;;;AAKA,SAAS,aAAa,EACpB,GAAG,SAC+C;CAClD,OAAO,oBAACA,KAAc,MAAf,EAAoB,GAAI,MAAQ,CAAA;AACzC;AAEA,SAAS,mBAAmB,EAC1B,GAAG,SACiD;CACpD,OAAO,oBAACA,KAAc,QAAf;EAAsB,aAAU;EAAuB,GAAI;CAAQ,CAAA;AAC5E;AAEA,SAAS,oBAAoB,EAC3B,GAAG,SACkD;CACrD,OAAO,oBAACA,KAAc,SAAf;EAAuB,aAAU;EAAwB,GAAI;CAAQ,CAAA;AAC9E;AAYA,SAAS,oBAAoB,EAC3B,WACA,QAAQ,SACR,aACA,MACA,aAAa,GACb,WACA,GAAG,SACwB;CAC3B,OACE,oBAACA,KAAc,QAAf;EAAiC;YAC/B,oBAACA,KAAc,YAAf;GACS;GACM;GACb,WAAU;GACJ;GACM;aAEZ,oBAACA,KAAc,OAAf;IACE,aAAU;IACV,WAAW,GACT,8LACA,uKACA,mNACA,SACF;IACA,GAAI;GACL,CAAA;EACuB,CAAA;CACN,CAAA;AAE1B;AAEA,SAAS,kBAAkB,EACzB,GAAG,SACgD;CACnD,OAAO,oBAACA,KAAc,OAAf;EAAqB,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAC1E;AAEA,SAAS,iBAAiB,EACxB,WACA,OACA,UAAU,WACV,GAAG,SAIF;CACD,OACE,oBAACA,KAAc,MAAf;EACE,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,mcACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,yBAAyB,EAChC,WACA,UACA,SACA,OACA,GAAG,SAGF;CACD,OACE,qBAACA,KAAc,cAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,2UACA,SACF;EACS;EACT,GAAI;YARN,CAUE,oBAAC,QAAD;GACE,WAAU;GACV,aAAU;aAEV,oBAACA,KAAc,uBAAf,EAAA,UACE,oBAAC,gBAAD;IAAgB,WAAU;IAAU,MAAK;GAAS,CAAA,EACf,CAAA;EACjC,CAAA,GACL,QACyB;;AAEhC;AAEA,SAAS,uBAAuB,EAC9B,GAAG,SACqD;CACxD,OACE,oBAACA,KAAc,YAAf;EACE,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,sBAAsB,EAC7B,WACA,UACA,OACA,GAAG,SAGF;CACD,OACE,qBAACA,KAAc,WAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,2UACA,SACF;EACA,GAAI;YAPN,CASE,oBAAC,QAAD;GACE,WAAU;GACV,aAAU;aAEV,oBAACA,KAAc,oBAAf,EAAA,UACE,oBAAC,gBAAD;IAAgB,WAAU;IAAU,MAAK;GAAS,CAAA,EAClB,CAAA;EAC9B,CAAA,GACL,QACsB;;AAE7B;AAIA,SAAS,kBAAkB,EACzB,WACA,OACA,GAAG,SAGF;CACD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,4DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,KAAc,WAAf;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,qBAAqB,EAC5B,WACA,GAAG,SAC4B;CAC/B,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,mDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EACvB,GAAG,SACsD;CACzD,OAAO,oBAACA,KAAc,aAAf;EAA2B,aAAU;EAAoB,GAAI;CAAQ,CAAA;AAC9E;AAEA,SAAS,uBAAuB,EAC9B,WACA,OACA,UACA,GAAG,SAGF;CACD,OACE,qBAACA,KAAc,gBAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,4RACA,SACF;EACA,GAAI;YAPN,CASG,UACD,oBAAC,gBAAD;GACE,WAAU;GACV,MAAK;EACN,CAAA,CAC2B;;AAElC;AAIA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SACwB;CAC3B,OACE,oBAAC,qBAAD;EACE,aAAU;EACV,OAAM;EACN,aAAa;EACb,MAAK;EACL,YAAY;EACZ,WAAW,GAAG,mBAAmB,SAAS;EAC1C,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"dropdown-menu.js","names":["MenuPrimitive"],"sources":["../../src/components/dropdown-menu.tsx"],"sourcesContent":["import { Menu as MenuPrimitive } from '@base-ui/react/menu'\nimport { Check, ChevronRight } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Root>) {\n  return <MenuPrimitive.Root {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Portal>) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Trigger>) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\ntype DropdownMenuContentProps = React.ComponentProps<\n  typeof MenuPrimitive.Popup\n> &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    container?: React.ComponentProps<typeof MenuPrimitive.Portal>['container']\n  }\n\nfunction DropdownMenuContent({\n  className,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  container,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50 outline-none\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            'z-50 max-h-(--available-height) min-w-40 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 p-1 text-gray-a12 shadow-lg outline-none',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            className,\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Group>) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: 'default' | 'destructive'\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/dropdown-menu-item relative flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 data-[variant=destructive]:text-error data-[variant=destructive]:data-highlighted:bg-base-error-soft [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        'relative flex min-h-7 cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <Check className=\"text-sm\" />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.RadioGroup>) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        'relative flex min-h-7 cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <Check className=\"text-sm\" />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\n// plain div, not Menu.GroupLabel: Base UI's GroupLabel throws outside a\n// Group, while our labels float freely (radix Label was an unwired div too)\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<'div'> & {\n  inset?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        'px-2 py-1 text-xs text-gray-light data-[inset=true]:pl-7',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn('-mx-1 my-1 h-px bg-gray-a3', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        'ml-auto text-xs tracking-widest text-gray-light',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        'flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-highlighted:bg-gray-a3 data-popup-open:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto text-sm text-gray-light\" />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\n// composes the public Content; the align/offset defaults visually align the\n// submenu with its parent menu\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      align=\"start\"\n      alignOffset={-3}\n      side=\"right\"\n      sideOffset={0}\n      className={cn('w-auto min-w-32', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n}\n"],"mappings":"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"}

package/dist/components/empty-state.cjs

@@ -5,19 +5,19 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/empty-state.tsx
 const emptyStateVariants = (0, require("class-variance-authority").cva)("flex flex-col items-center gap-4 px-6 py-12 text-center", {
 	variants: { variant: {
-		dashed: "rounded-2xl border border-dashed border-gray",
+		dashed: "rounded-lg border border-dashed border-gray",
 		ghost: ""
 	} },
 	defaultVariants: { variant: "dashed" }
 });
-function EmptyState({ action, description, icon, title, variant }) {
+function EmptyState({ action, description, icon: Glyph, title, variant }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: emptyStateVariants({ variant }),
 		children: [
-			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_icon.Icon, {
-				name: icon,
-				size: "xl"
-			}),
+			Glyph ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_icon.Icon, {
+				size: "xl",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {})
+			}) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-col gap-1",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {

package/dist/components/empty-state.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.cjs","names":["Icon"],"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport type { MaterialSymbolIconName } from '../icons/material-symbol'\nimport { Icon } from './icon'\n\nconst emptyStateVariants = cva(\n  'flex flex-col items-center gap-4 px-6 py-12 text-center',\n  {\n    variants: {\n      variant: {\n        dashed: 'rounded-2xl border border-dashed border-gray',\n        ghost: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'dashed',\n    },\n  },\n)\n\ninterface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {\n  title: string\n  description?: string\n  icon?: MaterialSymbolIconName\n  action?: ReactNode\n}\n\nexport function EmptyState({\n  action,\n  description,\n  icon,\n  title,\n  variant,\n}: EmptyStateProps) {\n  return (\n    <div className={emptyStateVariants({ variant })}>\n      {icon && <Icon name={icon} size=\"xl\" />}\n      <div className=\"flex flex-col gap-1\">\n        <h3 className=\"text-base font-bold text-gray\">{title}</h3>\n        {description && (\n          <p className=\"mx-auto max-w-md text-sm text-gray-light\">\n            {description}\n          </p>\n        )}\n      </div>\n      {action}\n    </div>\n  )\n}\n\nexport type { EmptyStateProps }\n"],"mappings":";;;;;AAKA,MAAM,sBAAA,qCAAA,EAAA,KACJ,2DACA;CACE,UAAU,EACR,SAAS;EACP,QAAQ;EACR,OAAO;CACT,EACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CACF;AASA,SAAgB,WAAW,EACzB,QACA,aACA,MACA,OACA,WACkB;CAClB,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAW,mBAAmB,EAAE,QAAQ,CAAC;YAA9C;GACG,QAAQ,iBAAA,GAAA,kBAAA,KAACA,wBAAAA,MAAD;IAAM,MAAM;IAAM,MAAK;GAAM,CAAA;GACtC,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;KAAI,WAAU;eAAiC;IAAU,CAAA,GACxD,eACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;KAAG,WAAU;eACV;IACA,CAAA,CAEF;;GACJ;EACE;;AAET"}
+{"version":3,"file":"empty-state.cjs","names":["Icon"],"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import type { SparkIcon } from '@epilot/spark-icons'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { Icon } from './icon'\n\nconst emptyStateVariants = cva(\n  'flex flex-col items-center gap-4 px-6 py-12 text-center',\n  {\n    variants: {\n      variant: {\n        dashed: 'rounded-lg border border-dashed border-gray',\n        ghost: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'dashed',\n    },\n  },\n)\n\ninterface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {\n  title: string\n  description?: string\n  icon?: SparkIcon\n  action?: ReactNode\n}\n\nexport function EmptyState({\n  action,\n  description,\n  icon: Glyph,\n  title,\n  variant,\n}: EmptyStateProps) {\n  return (\n    <div className={emptyStateVariants({ variant })}>\n      {Glyph ? (\n        <Icon size=\"xl\">\n          <Glyph />\n        </Icon>\n      ) : null}\n      <div className=\"flex flex-col gap-1\">\n        <h3 className=\"text-base font-bold text-gray\">{title}</h3>\n        {description && (\n          <p className=\"mx-auto max-w-md text-sm text-gray-light\">\n            {description}\n          </p>\n        )}\n      </div>\n      {action}\n    </div>\n  )\n}\n\nexport type { EmptyStateProps }\n"],"mappings":";;;;;AAKA,MAAM,sBAAA,qCAAA,EAAA,KACJ,2DACA;CACE,UAAU,EACR,SAAS;EACP,QAAQ;EACR,OAAO;CACT,EACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CACF;AASA,SAAgB,WAAW,EACzB,QACA,aACA,MAAM,OACN,OACA,WACkB;CAClB,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAW,mBAAmB,EAAE,QAAQ,CAAC;YAA9C;GACG,QACC,iBAAA,GAAA,kBAAA,KAACA,wBAAAA,MAAD;IAAM,MAAK;cACT,iBAAA,GAAA,kBAAA,KAAC,OAAD,CAAQ,CAAA;GACJ,CAAA,IACJ;GACJ,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;KAAI,WAAU;eAAiC;IAAU,CAAA,GACxD,eACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;KAAG,WAAU;eACV;IACA,CAAA,CAEF;;GACJ;EACE;;AAET"}

package/dist/components/empty-state.d.cts

@@ -1,8 +1,8 @@
 "use client";
 
-import { MaterialSymbolIconName } from "../icons/material-symbol.cjs";
 import { ReactNode } from "react";
 import { VariantProps } from "class-variance-authority";
+import { SparkIcon } from "@epilot/spark-icons";
 
 //#region src/components/empty-state.d.ts
 declare const emptyStateVariants: (props?: ({
@@ -11,13 +11,13 @@ declare const emptyStateVariants: (props?: ({
 interface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {
   title: string;
   description?: string;
-  icon?: MaterialSymbolIconName;
+  icon?: SparkIcon;
   action?: ReactNode;
 }
 declare function EmptyState({
   action,
   description,
-  icon,
+  icon: Glyph,
   title,
   variant
 }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/empty-state.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import { MaterialSymbolIconName } from "../icons/material-symbol.js";
 import { ReactNode } from "react";
+import { SparkIcon } from "@epilot/spark-icons";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/components/empty-state.d.ts
@@ -11,13 +11,13 @@ declare const emptyStateVariants: (props?: ({
 interface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {
   title: string;
   description?: string;
-  icon?: MaterialSymbolIconName;
+  icon?: SparkIcon;
   action?: ReactNode;
 }
 declare function EmptyState({
   action,
   description,
-  icon,
+  icon: Glyph,
   title,
   variant
 }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/empty-state.js

@@ -5,19 +5,19 @@ import { cva } from "class-variance-authority";
 //#region src/components/empty-state.tsx
 const emptyStateVariants = cva("flex flex-col items-center gap-4 px-6 py-12 text-center", {
 	variants: { variant: {
-		dashed: "rounded-2xl border border-dashed border-gray",
+		dashed: "rounded-lg border border-dashed border-gray",
 		ghost: ""
 	} },
 	defaultVariants: { variant: "dashed" }
 });
-function EmptyState({ action, description, icon, title, variant }) {
+function EmptyState({ action, description, icon: Glyph, title, variant }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: emptyStateVariants({ variant }),
 		children: [
-			icon && /* @__PURE__ */ jsx(Icon, {
-				name: icon,
-				size: "xl"
-			}),
+			Glyph ? /* @__PURE__ */ jsx(Icon, {
+				size: "xl",
+				children: /* @__PURE__ */ jsx(Glyph, {})
+			}) : null,
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-1",
 				children: [/* @__PURE__ */ jsx("h3", {

package/dist/components/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport type { MaterialSymbolIconName } from '../icons/material-symbol'\nimport { Icon } from './icon'\n\nconst emptyStateVariants = cva(\n  'flex flex-col items-center gap-4 px-6 py-12 text-center',\n  {\n    variants: {\n      variant: {\n        dashed: 'rounded-2xl border border-dashed border-gray',\n        ghost: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'dashed',\n    },\n  },\n)\n\ninterface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {\n  title: string\n  description?: string\n  icon?: MaterialSymbolIconName\n  action?: ReactNode\n}\n\nexport function EmptyState({\n  action,\n  description,\n  icon,\n  title,\n  variant,\n}: EmptyStateProps) {\n  return (\n    <div className={emptyStateVariants({ variant })}>\n      {icon && <Icon name={icon} size=\"xl\" />}\n      <div className=\"flex flex-col gap-1\">\n        <h3 className=\"text-base font-bold text-gray\">{title}</h3>\n        {description && (\n          <p className=\"mx-auto max-w-md text-sm text-gray-light\">\n            {description}\n          </p>\n        )}\n      </div>\n      {action}\n    </div>\n  )\n}\n\nexport type { EmptyStateProps }\n"],"mappings":";;;;;AAKA,MAAM,qBAAqB,IACzB,2DACA;CACE,UAAU,EACR,SAAS;EACP,QAAQ;EACR,OAAO;CACT,EACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CACF;AASA,SAAgB,WAAW,EACzB,QACA,aACA,MACA,OACA,WACkB;CAClB,OACE,qBAAC,OAAD;EAAK,WAAW,mBAAmB,EAAE,QAAQ,CAAC;YAA9C;GACG,QAAQ,oBAAC,MAAD;IAAM,MAAM;IAAM,MAAK;GAAM,CAAA;GACtC,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,MAAD;KAAI,WAAU;eAAiC;IAAU,CAAA,GACxD,eACC,oBAAC,KAAD;KAAG,WAAU;eACV;IACA,CAAA,CAEF;;GACJ;EACE;;AAET"}
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import type { SparkIcon } from '@epilot/spark-icons'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { Icon } from './icon'\n\nconst emptyStateVariants = cva(\n  'flex flex-col items-center gap-4 px-6 py-12 text-center',\n  {\n    variants: {\n      variant: {\n        dashed: 'rounded-lg border border-dashed border-gray',\n        ghost: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'dashed',\n    },\n  },\n)\n\ninterface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {\n  title: string\n  description?: string\n  icon?: SparkIcon\n  action?: ReactNode\n}\n\nexport function EmptyState({\n  action,\n  description,\n  icon: Glyph,\n  title,\n  variant,\n}: EmptyStateProps) {\n  return (\n    <div className={emptyStateVariants({ variant })}>\n      {Glyph ? (\n        <Icon size=\"xl\">\n          <Glyph />\n        </Icon>\n      ) : null}\n      <div className=\"flex flex-col gap-1\">\n        <h3 className=\"text-base font-bold text-gray\">{title}</h3>\n        {description && (\n          <p className=\"mx-auto max-w-md text-sm text-gray-light\">\n            {description}\n          </p>\n        )}\n      </div>\n      {action}\n    </div>\n  )\n}\n\nexport type { EmptyStateProps }\n"],"mappings":";;;;;AAKA,MAAM,qBAAqB,IACzB,2DACA;CACE,UAAU,EACR,SAAS;EACP,QAAQ;EACR,OAAO;CACT,EACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CACF;AASA,SAAgB,WAAW,EACzB,QACA,aACA,MAAM,OACN,OACA,WACkB;CAClB,OACE,qBAAC,OAAD;EAAK,WAAW,mBAAmB,EAAE,QAAQ,CAAC;YAA9C;GACG,QACC,oBAAC,MAAD;IAAM,MAAK;cACT,oBAAC,OAAD,CAAQ,CAAA;GACJ,CAAA,IACJ;GACJ,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,MAAD;KAAI,WAAU;eAAiC;IAAU,CAAA,GACxD,eACC,oBAAC,KAAD;KAAG,WAAU;eACV;IACA,CAAA,CAEF;;GACJ;EACE;;AAET"}

package/dist/components/feed-in-hero.cjs

@@ -6,7 +6,7 @@ let cnfast = require("cnfast");
 //#region src/components/feed-in-hero.tsx
 const FeedInHero = ({ className, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, cnfast.cn)("flex flex-col items-center gap-1 rounded-2xl border border-gray p-5 text-center", className),
+		className: (0, cnfast.cn)("flex flex-col items-center gap-1 rounded-lg border border-gray p-5 text-center", className),
 		...rest
 	});
 };

package/dist/components/feed-in-hero.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"feed-in-hero.cjs","names":[],"sources":["../../src/components/feed-in-hero.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst FeedInHero = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center gap-1 rounded-2xl border border-gray p-5 text-center',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * Label row above the value. Lays out children in a flex row with a small\n * gap so a tooltip / icon can sit alongside the label text.\n */\nconst FeedInHeroLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-1.5 text-xs font-medium text-gray-light',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst valueToneVariants = cva('text-4xl font-bold tabular-nums', {\n  variants: {\n    tone: {\n      success: 'text-success',\n      warning: 'text-warning',\n      error: 'text-error',\n      accent: 'text-accent',\n      neutral: 'text-gray',\n    },\n  },\n  defaultVariants: {\n    tone: 'neutral',\n  },\n})\n\nconst FeedInHeroValue = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'span'> & { tone?: Tone }) => {\n  return <span className={valueToneVariants({ tone, className })} {...rest} />\n}\n\n/** Smaller-weight unit suffix that sits inline with the value (e.g. \"W\"). */\nconst FeedInHeroValueUnit = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return <span className={cn('text-2xl font-semibold', className)} {...rest} />\n}\n\nexport { FeedInHero, FeedInHeroLabel, FeedInHeroValue, FeedInHeroValueUnit }\n"],"mappings":";;;;;;AAIA,MAAM,cAAc,EAAE,WAAW,GAAG,WAAwC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;AAMA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,iEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,qBAAA,GAAA,yBAAA,KAAwB,mCAAmC;CAC/D,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;CACX,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CAAC;AAED,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WACiD;CACpD,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,WAAW,kBAAkB;GAAE;GAAM;EAAU,CAAC;EAAG,GAAI;CAAO,CAAA;AAC7E;;AAGA,MAAM,uBAAuB,EAC3B,WACA,GAAG,WAC+B;CAClC,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,0BAA0B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC9E"}
+{"version":3,"file":"feed-in-hero.cjs","names":[],"sources":["../../src/components/feed-in-hero.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst FeedInHero = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center gap-1 rounded-lg border border-gray p-5 text-center',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * Label row above the value. Lays out children in a flex row with a small\n * gap so a tooltip / icon can sit alongside the label text.\n */\nconst FeedInHeroLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-1.5 text-xs font-medium text-gray-light',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst valueToneVariants = cva('text-4xl font-bold tabular-nums', {\n  variants: {\n    tone: {\n      success: 'text-success',\n      warning: 'text-warning',\n      error: 'text-error',\n      accent: 'text-accent',\n      neutral: 'text-gray',\n    },\n  },\n  defaultVariants: {\n    tone: 'neutral',\n  },\n})\n\nconst FeedInHeroValue = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'span'> & { tone?: Tone }) => {\n  return <span className={valueToneVariants({ tone, className })} {...rest} />\n}\n\n/** Smaller-weight unit suffix that sits inline with the value (e.g. \"W\"). */\nconst FeedInHeroValueUnit = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return <span className={cn('text-2xl font-semibold', className)} {...rest} />\n}\n\nexport { FeedInHero, FeedInHeroLabel, FeedInHeroValue, FeedInHeroValueUnit }\n"],"mappings":";;;;;;AAIA,MAAM,cAAc,EAAE,WAAW,GAAG,WAAwC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,kFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;AAMA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,iEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,qBAAA,GAAA,yBAAA,KAAwB,mCAAmC;CAC/D,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;CACX,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CAAC;AAED,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WACiD;CACpD,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,WAAW,kBAAkB;GAAE;GAAM;EAAU,CAAC;EAAG,GAAI;CAAO,CAAA;AAC7E;;AAGA,MAAM,uBAAuB,EAC3B,WACA,GAAG,WAC+B;CAClC,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,0BAA0B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC9E"}

package/dist/components/feed-in-hero.js

@@ -5,7 +5,7 @@ import { cva } from "class-variance-authority";
 //#region src/components/feed-in-hero.tsx
 const FeedInHero = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex flex-col items-center gap-1 rounded-2xl border border-gray p-5 text-center", className),
+		className: cn("flex flex-col items-center gap-1 rounded-lg border border-gray p-5 text-center", className),
 		...rest
 	});
 };