@magiclabs/ui-components 1.13.0 → 1.13.2

package/dist/cjs/components/feedback/callout.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var w=require("../icons/ico-alert-circle-fill.js"),k=require("../icons/ico-checkmark-circle-fill.js"),S=require("../icons/ico-dismiss.js"),I=require("../icons/ico-info-circle-fill.js"),P=require("../icons/ico-lightbulb-fill.js"),R=require("../icons/ico-warning-fill.js"),A=require("../../recipes/callout.js"),y=require("@styled/css"),a=require("@styled/jsx"),i=require("react"),l=require("react-aria");const D={branded:P.default,success:k.default,error:w.default,warning:R.default,neutral:I.default},d=i.forwardRef((m,b)=>{const{label:f,description:s,variant:t="branded",icon:c=!1,dismissible:n=!1}=m,[h,v]=i.useState(!0),[q,x]=i.useState(!1),u=s?16:20,r=A.callout({variant:t,icon:c,description:!!s,isDismissed:q,dismissible:n}),p=D[t],g=i.useCallback(()=>{x(!0)},[]),j=i.useRef(null),o=b||j,{buttonProps:C}=l.useButton({onPress:g},o),{isFocusVisible:F,focusProps:N}=l.useFocusRing();return h?e.jsxs(a.VStack,{className:r.container,alignItems:"flex-start",gap:1.5,onAnimationEnd:()=>v(!1),children:[e.jsxs(a.HStack,{w:"full",justifyContent:"space-between",ref:o,children:[e.jsxs(a.HStack,{alignItems:"center",children:[c&&e.jsx(p,{className:r.icon,width:u,height:u}),e.jsx("p",{className:r.label,children:f})]}),n&&e.jsx("button",{className:y.cx(r.button,F?r.focus:""),...l.mergeProps(C,N),children:e.jsx(S.default,{className:r.button,width:16,height:16})})]}),!!s&&e.jsx("p",{className:r.description,children:s})]}):null});d.displayName="Callout",exports.Callout=d;
+"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var w=require("../icons/ico-alert-circle-fill.js"),k=require("../icons/ico-caret-right.js"),S=require("../icons/ico-checkmark-circle-fill.js"),F=require("../icons/ico-dismiss.js"),I=require("../icons/ico-info-circle-fill.js"),R=require("../icons/ico-lightbulb-fill.js"),A=require("../icons/ico-warning-fill.js"),H=require("../../recipes/callout.js"),s=require("@styled/jsx"),t=require("react"),P=require("react-aria");const y={branded:R.default,success:S.default,error:w.default,warning:A.default,neutral:I.default},h=t.forwardRef((m,b)=>{const{label:j,description:a,variant:l="branded",icon:n=!1,dismissible:c=!1,onPress:r}=m,[x,f]=t.useState(!0),[v,q]=t.useState(!1),u=a?16:20,i=H.callout({variant:l,icon:n,description:!!a,isDismissed:v,dismissible:c,interactive:!!r}),g=y[l],C=()=>{q(!0)},p=t.useRef(null),o=b||p,{buttonProps:N}=P.useButton({onPress:r},o),d=()=>e.jsxs(s.HStack,{className:r?"":i.container,onAnimationEnd:()=>f(!1),ref:o,children:[e.jsxs(s.VStack,{alignItems:"flex-start",gap:1.5,children:[e.jsxs(s.HStack,{w:"full",justifyContent:"space-between",children:[e.jsxs(s.HStack,{alignItems:"center",children:[n&&e.jsx(g,{className:i.icon,width:u,height:u}),e.jsx("p",{className:i.label,children:j})]}),c&&e.jsx("button",{className:i.button,onClick:C,"aria-label":"dismiss callout",children:e.jsx(F.default,{className:i.button,width:16,height:16})})]}),!!a&&e.jsx("p",{className:i.description,children:a})]}),!!r&&e.jsx(k.default,{className:i.button,width:16,height:16})]});return x?r?e.jsx("button",{...N,className:i.container,children:e.jsx(d,{})}):e.jsx(d,{}):null});h.displayName="Callout",exports.Callout=h;
 //# sourceMappingURL=callout.js.map

package/dist/cjs/components/feedback/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","sources":["../../../../src/components/feedback/callout.tsx"],"sourcesContent":["import {\n  IcoAlertCircleFill,\n  IcoCheckmarkCircleFill,\n  IcoDismiss,\n  IcoInfoCircleFill,\n  IcoLightbulbFill,\n  IcoWarningFill,\n} from '@components/icons';\nimport { callout } from '@recipes/callout';\nimport { cx } from '@styled/css';\nimport { HStack, VStack } from '@styled/jsx';\nimport { forwardRef, useCallback, useRef, useState } from 'react';\nimport { mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface CalloutProps {\n  label: string;\n  description?: string;\n  variant?: 'branded' | 'success' | 'error' | 'warning' | 'neutral';\n  icon?: boolean;\n  dismissible?: boolean;\n}\n\nconst svgIcon = {\n  branded: IcoLightbulbFill,\n  success: IcoCheckmarkCircleFill,\n  error: IcoAlertCircleFill,\n  warning: IcoWarningFill,\n  neutral: IcoInfoCircleFill,\n};\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>((props, forwardedRef) => {\n  const { label, description, variant = 'branded', icon = false, dismissible = false } = props;\n  const [isVisible, setIsVisible] = useState(true);\n  const [isDismissed, setIsDismissed] = useState(false);\n\n  const iconSize = description ? 16 : 20;\n\n  const classes = callout({ variant, icon, description: !!description, isDismissed, dismissible });\n\n  const IconComponent = svgIcon[variant];\n\n  const dismissCallout = useCallback(() => {\n    setIsDismissed(true);\n  }, []);\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton({ onPress: dismissCallout }, ref as React.RefObject<HTMLButtonElement>);\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <VStack\n      className={classes.container}\n      alignItems={'flex-start'}\n      gap={1.5}\n      onAnimationEnd={() => setIsVisible(false)}\n    >\n      <HStack w={'full'} justifyContent={'space-between'} ref={ref}>\n        <HStack alignItems={'center'}>\n          {icon && <IconComponent className={classes.icon} width={iconSize} height={iconSize} />}\n          <p className={classes.label}>{label}</p>\n        </HStack>\n\n        {dismissible && (\n          <button\n            className={cx(classes.button, isFocusVisible ? classes.focus : '')}\n            {...mergeProps(buttonProps, focusProps)}\n          >\n            <IcoDismiss className={classes.button} width={16} height={16} />\n          </button>\n        )}\n      </HStack>\n      {!!description && <p className={classes.description}>{description}</p>}\n    </VStack>\n  );\n});\n\nCallout.displayName = 'Callout';\n"],"names":["svgIcon","IcoLightbulbFill","IcoCheckmarkCircleFill","IcoAlertCircleFill","IcoWarningFill","IcoInfoCircleFill","Callout","forwardRef","props","forwardedRef","label","description","variant","icon","dismissible","isVisible","setIsVisible","useState","isDismissed","setIsDismissed","iconSize","classes","callout","IconComponent","dismissCallout","useCallback","internalRef","useRef","ref","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","_jsxs","VStack","HStack","_jsx","cx","mergeProps","IcoDismiss"],"mappings":"4dAsBA,MAAMA,EAAU,CACd,QAASC,EAAAA,QACT,QAASC,EAAAA,QACT,MAAOC,UACP,QAASC,EACT,QAAA,QAASC,EAAAA,SAGEC,EAAUC,EAAAA,WAAyC,CAACC,EAAOC,IAAgB,CACtF,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,QAAAC,EAAU,UAAW,KAAAC,EAAO,GAAO,YAAAC,EAAc,EAAO,EAAGN,EACjF,CAACO,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAI,EACzC,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SAAS,EAAK,EAE9CG,EAAWT,EAAc,GAAK,GAE9BU,EAAUC,EAAAA,QAAQ,CAAE,QAAAV,EAAS,KAAAC,EAAM,YAAa,CAAC,CAACF,EAAa,YAAAO,EAAa,YAAAJ,CAAW,CAAE,EAEzFS,EAAgBvB,EAAQY,CAAO,EAE/BY,EAAiBC,EAAAA,YAAY,IAAK,CACtCN,EAAe,EAAI,CACrB,EAAG,CAAA,CAAE,EAECO,EAAcC,EAAO,OAAA,IAAI,EACzBC,EAAMnB,GAAgBiB,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAAA,UAAU,CAAE,QAASN,CAAc,EAAII,CAAyC,EAClG,CAAE,eAAAG,EAAgB,WAAAC,GAAeC,EAAAA,aAEvC,EAAA,OAAKlB,EAKHmB,EAACC,KAAAA,SAAM,CACL,UAAWd,EAAQ,UACnB,WAAY,aACZ,IAAK,IACL,eAAgB,IAAML,EAAa,EAAK,EAAC,SAAA,CAEzCkB,OAACE,SAAM,CAAC,EAAG,OAAQ,eAAgB,gBAAiB,IAAKR,YACvDM,EAAAA,KAACE,EAAO,OAAA,CAAA,WAAY,SAAQ,SAAA,CACzBvB,GAAQwB,EAACd,IAAAA,EAAa,CAAC,UAAWF,EAAQ,KAAM,MAAOD,EAAU,OAAQA,CAAQ,CAAA,EAClFiB,MAAA,IAAA,CAAG,UAAWhB,EAAQ,MAAQ,SAAAX,CAAU,CAAA,CAAA,CAAA,CAAA,EAGzCI,GACCuB,MAAA,SAAA,CACE,UAAWC,EAAAA,GAAGjB,EAAQ,OAAQU,EAAiBV,EAAQ,MAAQ,EAAE,EAC7D,GAAAkB,EAAAA,WAAWV,EAAaG,CAAU,EAEtC,SAAAK,MAACG,UAAU,CAAC,UAAWnB,EAAQ,OAAQ,MAAO,GAAI,OAAQ,EAAM,CAAA,CAAA,CAAA,CAEnE,CAAA,CAAA,EAEF,CAAC,CAACV,GAAe0B,EAAAA,SAAG,UAAWhB,EAAQ,YAAc,SAAAV,CAAgB,CAAA,CAAA,CAAA,CAAA,EAzBjE,IA4BX,CAAC,EAEDL,EAAQ,YAAc"}
+{"version":3,"file":"callout.js","sources":["../../../../src/components/feedback/callout.tsx"],"sourcesContent":["import {\n  IcoAlertCircleFill,\n  IcoCaretRight,\n  IcoCheckmarkCircleFill,\n  IcoDismiss,\n  IcoInfoCircleFill,\n  IcoLightbulbFill,\n  IcoWarningFill,\n} from '@components/icons';\nimport { callout } from '@recipes/callout';\nimport { HStack, VStack } from '@styled/jsx';\nimport { forwardRef, useRef, useState } from 'react';\nimport { useButton } from 'react-aria';\n\ninterface BaseCalloutProps {\n  label: string;\n  description?: string;\n  variant?: 'branded' | 'success' | 'error' | 'warning' | 'neutral';\n  icon?: boolean;\n}\n\ninterface DefaultCalloutProps extends BaseCalloutProps {\n  dismissible?: false;\n  onPress?: never;\n}\n\ninterface DismissibleCalloutProps extends BaseCalloutProps {\n  dismissible: true;\n  onPress?: never;\n}\n\ninterface InteractiveCalloutProps extends BaseCalloutProps {\n  dismissible?: false;\n  onPress: () => void;\n}\n\n// Disallows `onPress` and `dismissible` to be set at the same time\nexport type CalloutProps = DefaultCalloutProps | DismissibleCalloutProps | InteractiveCalloutProps;\n\nconst svgIcon = {\n  branded: IcoLightbulbFill,\n  success: IcoCheckmarkCircleFill,\n  error: IcoAlertCircleFill,\n  warning: IcoWarningFill,\n  neutral: IcoInfoCircleFill,\n};\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>((props, forwardedRef) => {\n  const { label, description, variant = 'branded', icon = false, dismissible = false, onPress } = props;\n  const [isVisible, setIsVisible] = useState(true);\n  const [isDismissed, setIsDismissed] = useState(false);\n\n  const iconSize = description ? 16 : 20;\n\n  const classes = callout({\n    variant,\n    icon,\n    description: !!description,\n    isDismissed,\n    dismissible,\n    interactive: !!onPress,\n  });\n\n  const IconComponent = svgIcon[variant];\n\n  const dismissCallout = () => {\n    setIsDismissed(true);\n  };\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton({ onPress }, ref as React.RefObject<HTMLButtonElement>);\n\n  const CalloutBase = () => {\n    return (\n      <HStack className={!onPress ? classes.container : ''} onAnimationEnd={() => setIsVisible(false)} ref={ref}>\n        <VStack alignItems={'flex-start'} gap={1.5}>\n          <HStack w={'full'} justifyContent={'space-between'}>\n            <HStack alignItems={'center'}>\n              {icon && <IconComponent className={classes.icon} width={iconSize} height={iconSize} />}\n              <p className={classes.label}>{label}</p>\n            </HStack>\n\n            {dismissible && (\n              <button className={classes.button} onClick={dismissCallout} aria-label=\"dismiss callout\">\n                <IcoDismiss className={classes.button} width={16} height={16} />\n              </button>\n            )}\n          </HStack>\n          {!!description && <p className={classes.description}>{description}</p>}\n        </VStack>\n        {!!onPress && <IcoCaretRight className={classes.button} width={16} height={16} />}\n      </HStack>\n    );\n  };\n\n  if (!isVisible) {\n    return null;\n  }\n\n  if (onPress) {\n    return (\n      <button {...buttonProps} className={classes.container}>\n        <CalloutBase />\n      </button>\n    );\n  }\n\n  return <CalloutBase />;\n});\n\nCallout.displayName = 'Callout';\n"],"names":["svgIcon","IcoLightbulbFill","IcoCheckmarkCircleFill","IcoAlertCircleFill","IcoWarningFill","IcoInfoCircleFill","Callout","forwardRef","props","forwardedRef","label","description","variant","icon","dismissible","onPress","isVisible","setIsVisible","useState","isDismissed","setIsDismissed","iconSize","classes","callout","IconComponent","dismissCallout","internalRef","useRef","ref","buttonProps","useButton","CalloutBase","_jsxs","HStack","VStack","_jsx","IcoDismiss","IcoCaretRight"],"mappings":"4eAuCA,MAAMA,EAAU,CACd,QAASC,UACT,QAASC,EAAAA,QACT,MAAOC,EAAAA,QACP,QAASC,EAAAA,QACT,QAASC,EAAAA,SAGEC,EAAUC,aAAyC,CAACC,EAAOC,IAAgB,CACtF,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,QAAAC,EAAU,UAAW,KAAAC,EAAO,GAAO,YAAAC,EAAc,GAAO,QAAAC,CAAO,EAAKP,EAC1F,CAACQ,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAI,EACzC,CAACC,EAAaC,CAAc,EAAIF,WAAS,EAAK,EAE9CG,EAAWV,EAAc,GAAK,GAE9BW,EAAUC,EAAAA,QAAQ,CACtB,QAAAX,EACA,KAAAC,EACA,YAAa,CAAC,CAACF,EACf,YAAAQ,EACA,YAAAL,EACA,YAAa,CAAC,CAACC,CAChB,CAAA,EAEKS,EAAgBxB,EAAQY,CAAO,EAE/Ba,EAAiB,IAAK,CAC1BL,EAAe,EAAI,CACrB,EAEMM,EAAcC,EAAO,OAAA,IAAI,EACzBC,EAAMnB,GAAgBiB,EAEtB,CAAE,YAAAG,CAAa,EAAGC,YAAU,CAAE,QAAAf,CAAS,EAAEa,CAAyC,EAElFG,EAAc,IAEhBC,OAACC,EAAAA,OAAO,CAAA,UAAYlB,EAA8B,GAApBO,EAAQ,UAAgB,eAAgB,IAAML,EAAa,EAAK,EAAG,IAAKW,YACpGI,EAAAA,KAACE,EAAAA,QAAO,WAAY,aAAc,IAAK,cACrCF,EAAAA,KAACC,EAAAA,OAAO,CAAA,EAAG,OAAQ,eAAgB,gBACjC,SAAA,CAAAD,EAAAA,KAACC,EAAAA,OAAO,CAAA,WAAY,SAAQ,SAAA,CACzBpB,GAAQsB,EAAAA,IAACX,EAAa,CAAC,UAAWF,EAAQ,KAAM,MAAOD,EAAU,OAAQA,CAAQ,CAAA,EAClFc,EAAG,IAAA,IAAA,CAAA,UAAWb,EAAQ,MAAK,SAAGZ,CAAK,CAAA,CAAK,IAGzCI,GACCqB,EAAAA,cAAQ,UAAWb,EAAQ,OAAQ,QAASG,EAAc,aAAa,kBACrE,SAAAU,EAAAA,IAACC,EAAAA,QAAW,CAAA,UAAWd,EAAQ,OAAQ,MAAO,GAAI,OAAQ,EAAM,CAAA,CAAA,CAAA,CAEnE,CAAA,CAAA,EAEF,CAAC,CAACX,GAAewB,WAAG,UAAWb,EAAQ,YAAc,SAAAX,GAAgB,CAC/D,CAAA,EACR,CAAC,CAACI,GAAWoB,EAACE,IAAAA,EAAAA,QAAc,CAAA,UAAWf,EAAQ,OAAQ,MAAO,GAAI,OAAQ,EAAM,CAAA,CAAA,CAAA,CAAA,EAKvF,OAAKN,EAIDD,EAEAoB,EAAA,IAAA,SAAA,CAAA,GAAYN,EAAa,UAAWP,EAAQ,mBAC1Ca,EAAAA,IAACJ,EAAc,CAAA,CAAA,CAAA,CAAA,EAKdI,EAAAA,IAACJ,EAAW,CAAA,CAAA,EAXV,IAYX,CAAC,EAEDzB,EAAQ,YAAc"}

package/dist/cjs/components/primitives/button.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime");require("../feedback/callout.js");var B=require("../feedback/loading-spinner.js");require("../feedback/tooltip.js");var I=require("../../recipes/button.js"),F=require("@styled/css"),c=require("@styled/jsx"),g=require("create-slots"),o=require("react"),d=require("react-aria");const f=g.createSlot(({children:r,...t})=>i.jsx(c.Flex,{alignItems:"center",justifyContent:"center",children:o.Children.map(r,e=>o.cloneElement(e,t))})),q=g.createSlot(({children:r,...t})=>i.jsx(c.Flex,{alignItems:"center",justifyContent:"center",children:o.Children.map(r,e=>o.cloneElement(e,t))})),R=({variant:r="primary",size:t="md"})=>{const e=r==="primary"||r==="negative",u=r==="neutral"||r==="tertiary";return i.jsx(B.LoadingSpinner,{size:{sm:20,md:24,lg:28}[t],strokeWidth:2.5,inverted:e,neutral:u})},y=o.forwardRef((r,t)=>{const{label:e,variant:u="primary",size:p="md",disabled:m,expand:v,validating:h,iconSize:w}=r,l=w||(p==="sm"?16:24),s=I.button({variant:u,expand:v,size:p,validating:h,iconOnly:!e}),S=o.useRef(null),x=t||S,{buttonProps:z}=d.useButton({...r,isDisabled:m??!1},x),{hoverProps:C}=d.useHover({isDisabled:m??!1}),{isFocusVisible:N,focusProps:P}=d.useFocusRing();return g.createHost(r.children,j=>{const a=j.get(f),n=j.get(q),b=l/4;return i.jsx("button",{className:F.cx(s.button,"group",!e&&s.iconContainer,N&&s.focus),ref:x,...d.mergeProps(z,C,P),"aria-disabled":m,children:h?i.jsx(R,{variant:u,size:p}):i.jsxs(c.HStack,{w:"full",gap:2,justify:e&&(a||n)?"space-between":"center",children:[a&&{...a,props:{...a.props,className:a.props.color?void 0:s.icon,width:l,height:l}},n&&e&&v&&i.jsx(c.Box,{w:b}),e&&i.jsx("span",{className:s.label,children:e}),a&&e&&v&&i.jsx(c.Box,{w:b}),n&&{...n,props:{...n.props,className:n.props.color?void 0:s.icon,width:l,height:l}}]})})})}),H=Object.assign(y,{LeadingIcon:f,TrailingIcon:q});y.displayName="Button",exports.default=H;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime");require("../feedback/callout.js");var H=require("../feedback/loading-spinner.js");require("../feedback/tooltip.js");var I=require("../../recipes/button.js"),F=require("@styled/css"),c=require("@styled/jsx"),h=require("create-slots"),o=require("react"),d=require("react-aria");const q=h.createSlot(({children:r,...t})=>i.jsx(c.Flex,{alignItems:"center",justifyContent:"center",children:o.Children.map(r,e=>o.cloneElement(e,t))})),y=h.createSlot(({children:r,...t})=>i.jsx(c.Flex,{alignItems:"center",justifyContent:"center",children:o.Children.map(r,e=>o.cloneElement(e,t))})),R=({variant:r="primary",size:t="md"})=>{const e=r==="primary"||r==="negative",u=r==="neutral"||r==="tertiary";return i.jsx(H.LoadingSpinner,{size:{sm:20,md:24,lg:28}[t],strokeWidth:2.5,inverted:e,neutral:u})},w=o.forwardRef((r,t)=>{const{label:e,variant:u="primary",size:p="md",disabled:m,expand:v,validating:g,iconSize:S,onHover:x}=r,l=S||(p==="sm"?16:24),s=I.button({variant:u,expand:v,size:p,validating:g,iconOnly:!e}),z=o.useRef(null),j=t||z,{buttonProps:C}=d.useButton({...r,isDisabled:m??!1},j),{hoverProps:N}=d.useHover({isDisabled:m??!1}),{isFocusVisible:P,focusProps:B}=d.useFocusRing();return h.createHost(r.children,b=>{const n=b.get(q),a=b.get(y),f=l/4;return i.jsx("button",{className:F.cx(s.button,"group",!e&&s.iconContainer,P&&s.focus),ref:j,...d.mergeProps(C,N,B),"aria-disabled":m,onMouseEnter:x,onTouchStart:x,children:g?i.jsx(R,{variant:u,size:p}):i.jsxs(c.HStack,{w:"full",gap:2,justify:e&&(n||a)?"space-between":"center",children:[n&&{...n,props:{...n.props,className:n.props.color?void 0:s.icon,width:l,height:l}},a&&e&&v&&i.jsx(c.Box,{w:f}),e&&i.jsx("span",{className:s.label,children:e}),n&&e&&v&&i.jsx(c.Box,{w:f}),a&&{...a,props:{...a.props,className:a.props.color?void 0:s.icon,width:l,height:l}}]})})})}),E=Object.assign(w,{LeadingIcon:q,TrailingIcon:y});w.displayName="Button",exports.default=E;
 //# sourceMappingURL=button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n  label?: string;\n  size?: 'sm' | 'md' | 'lg';\n  variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent';\n  disabled?: boolean;\n  expand?: boolean;\n  validating?: boolean;\n  iconSize?: number;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n  const spinnerInverted = variant === 'primary' || variant === 'negative';\n  const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n  const spinnerSizes = {\n    sm: 20,\n    md: 24,\n    lg: 28,\n  };\n\n  return (\n    <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n  );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n  const { label, variant = 'primary', size = 'md', disabled, expand, validating, iconSize: iconSizeOverride } = props;\n\n  const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n  const classes = button({ variant, expand, size, validating, iconOnly: !label });\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton(\n    { ...props, isDisabled: disabled ?? false },\n    ref as React.RefObject<HTMLButtonElement>,\n  );\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n    const containerSize = iconSize / 4;\n\n    return (\n      <button\n        className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n        aria-disabled={disabled}\n      >\n        {validating ? (\n          <Validation variant={variant} size={size} />\n        ) : (\n          <HStack w=\"full\" gap={2} justify={label && (leadingIcon || trailingIcon) ? 'space-between' : 'center'}>\n            {leadingIcon && {\n              ...leadingIcon,\n              props: {\n                ...leadingIcon.props,\n                className: !leadingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n            {trailingIcon && label && expand && <Box w={containerSize} />}\n            {label && <span className={classes.label}>{label}</span>}\n            {leadingIcon && label && expand && <Box w={containerSize} />}\n            {trailingIcon && {\n              ...trailingIcon,\n              props: {\n                ...trailingIcon.props,\n                className: !trailingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n          </HStack>\n        )}\n      </button>\n    );\n  });\n});\n\nconst Button = Object.assign(Component, {\n  LeadingIcon,\n  TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","disabled","expand","validating","iconSizeOverride","iconSize","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n  label?: string;\n  size?: 'sm' | 'md' | 'lg';\n  variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent';\n  disabled?: boolean;\n  expand?: boolean;\n  validating?: boolean;\n  iconSize?: number;\n  onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n  const spinnerInverted = variant === 'primary' || variant === 'negative';\n  const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n  const spinnerSizes = {\n    sm: 20,\n    md: 24,\n    lg: 28,\n  };\n\n  return (\n    <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n  );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n  const {\n    label,\n    variant = 'primary',\n    size = 'md',\n    disabled,\n    expand,\n    validating,\n    iconSize: iconSizeOverride,\n    onHover,\n  } = props;\n\n  const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n  const classes = button({ variant, expand, size, validating, iconOnly: !label });\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton(\n    { ...props, isDisabled: disabled ?? false },\n    ref as React.RefObject<HTMLButtonElement>,\n  );\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n    const containerSize = iconSize / 4;\n\n    return (\n      <button\n        className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n        aria-disabled={disabled}\n        onMouseEnter={onHover as MouseEventHandler}\n        onTouchStart={onHover as TouchEventHandler}\n      >\n        {validating ? (\n          <Validation variant={variant} size={size} />\n        ) : (\n          <HStack w=\"full\" gap={2} justify={label && (leadingIcon || trailingIcon) ? 'space-between' : 'center'}>\n            {leadingIcon && {\n              ...leadingIcon,\n              props: {\n                ...leadingIcon.props,\n                className: !leadingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n            {trailingIcon && label && expand && <Box w={containerSize} />}\n            {label && <span className={classes.label}>{label}</span>}\n            {leadingIcon && label && expand && <Box w={containerSize} />}\n            {trailingIcon && {\n              ...trailingIcon,\n              props: {\n                ...trailingIcon.props,\n                className: !trailingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n          </HStack>\n        )}\n      </button>\n    );\n  });\n});\n\nconst Button = Object.assign(Component, {\n  LeadingIcon,\n  TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","disabled","expand","validating","iconSizeOverride","onHover","iconSize","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"iYAmBMA,EAAcC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,MAACC,EAAAA,KAAI,CAAC,WAAW,SAAS,eAAe,SACtC,SAAAC,WAAS,IAAIJ,EAAUK,GACfC,EAAaD,aAAAA,EAAOJ,CAAK,CACjC,CACI,CAAA,CAEV,EAEKM,EAAeR,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,MAACC,OAAI,CAAC,WAAW,SAAS,eAAe,SACtC,SAAAC,EAAS,SAAA,IAAIJ,EAAUK,GACfC,EAAaD,aAAAA,EAAOJ,CAAK,CACjC,CACI,CAAA,CAEV,EAEKO,EAAa,CAAC,CAAE,QAAAC,EAAU,UAAW,KAAAC,EAAO,IAAI,IAA4B,CAChF,MAAMC,EAAkBF,IAAY,WAAaA,IAAY,WACvDG,EAAiBH,IAAY,WAAaA,IAAY,WAO5D,OACEP,EAAAA,IAACW,EAAAA,eAAe,CAAA,KAPG,CACnB,GAAI,GACJ,GAAI,GACJ,GAAI,IAI+BH,CAAI,EAAG,YAAa,IAAK,SAAUC,EAAiB,QAASC,CAAkB,CAAA,CAEtH,EAEME,EAAYC,aAA2C,CAACd,EAAOe,IAAgB,CACnF,KAAM,CACJ,MAAAC,EACA,QAAAR,EAAU,UACV,KAAAC,EAAO,KACP,SAAAQ,EACA,OAAAC,EACA,WAAAC,EACA,SAAUC,EACV,QAAAC,CAAO,EACLrB,EAEEsB,EAAWF,IAAqBX,IAAS,KAAO,GAAK,IAErDc,EAAUC,EAAAA,OAAO,CAAE,QAAAhB,EAAS,OAAAU,EAAQ,KAAAT,EAAM,WAAAU,EAAY,SAAU,CAACH,CAAK,CAAE,EAExES,EAAcC,SAAO,IAAI,EACzBC,EAAMZ,GAAgBU,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAAA,UACtB,CAAE,GAAG7B,EAAO,WAAYiB,GAAY,EAAO,EAC3CU,CAAyC,EAErC,CAAE,WAAAG,CAAU,EAAKC,WAAS,CAAE,WAAYd,GAAY,EAAK,CAAE,EAC3D,CAAE,eAAAe,EAAgB,WAAAC,GAAeC,EAAAA,aAEvC,EAAA,OAAOC,EAAWnC,WAAAA,EAAM,SAAUoC,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAIvC,CAAW,EACnCyC,EAAeF,EAAM,IAAI9B,CAAY,EACrCiC,EAAgBjB,EAAW,EAEjC,OACErB,gBACE,UAAWuC,EAAAA,GAAGjB,EAAQ,OAAQ,QAAS,CAACP,GAASO,EAAQ,cAAeS,GAAkBT,EAAQ,KAAK,EACvG,IAAKI,EAAG,GACJc,aAAWb,EAAaE,EAAYG,CAAU,EACnC,gBAAAhB,EACf,aAAcI,EACd,aAAcA,EAEb,SAAAF,EACClB,MAACM,GAAW,QAASC,EAAS,KAAMC,CAAQ,CAAA,EAE5CiC,OAACC,EAAAA,OAAO,CAAA,EAAE,OAAO,IAAK,EAAG,QAAS3B,IAAUqB,GAAeC,GAAgB,gBAAkB,SAC1F,SAAA,CAAAD,GAAe,CACd,GAAGA,EACH,MAAO,CACL,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuB,OAAfd,EAAQ,KAC9C,MAAOD,EACP,OAAQA,CACT,CACF,EACAgB,GAAgBtB,GAASE,GAAUjB,EAAAA,IAAC2C,EAAG,IAAA,CAAC,EAAGL,CAAiB,CAAA,EAC5DvB,GAASf,EAAAA,IAAA,OAAA,CAAM,UAAWsB,EAAQ,eAAQP,CAAK,CAAA,EAC/CqB,GAAerB,GAASE,GAAUjB,MAAC2C,EAAAA,KAAI,EAAGL,CAAiB,CAAA,EAC3DD,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAAuB,OAAff,EAAQ,KAC/C,MAAOD,EACP,OAAQA,CACT,EACF,CACM,CAAA,CAEJ,CAAA,CAEb,CAAC,CACH,CAAC,EAEKuB,EAAS,OAAO,OAAOhC,EAAW,CACtC,YAAAhB,EACA,aAAAS,CACD,CAAA,EAEDO,EAAU,YAAc"}

package/dist/cjs/components/primitives/popover.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),x=require("./button.js");require("./checkbox.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js"),require("./text.js");var _=require("../../hooks/useToggleState.js"),R=require("@styled/css"),q=require("@styled/jsx"),z=require("@styled/patterns"),N=require("@styled/tokens"),u=require("create-slots"),n=require("react"),o=require("react-aria");const O="bottom left",T=8,m=u.createSlot(({children:s})=>r.jsx(r.Fragment,{children:s})),E=u.createSlot(({children:s,...e})=>r.jsx(q.Center,{children:n.Children.map(s,t=>n.cloneElement(t,e))})),y=u.createSlot(({children:s,...e})=>r.jsx(q.Center,{children:n.Children.map(s,t=>n.cloneElement(t,e))})),S=({children:s,...e})=>u.createHost(s,t=>{var g;const{isSelected:b,setSelected:a}=_.useToggleState({isOpen:e.isOpen,defaultSelected:e.defaultOpen,onChange:e.onOpenChange,...e}),l=e.isOpen!==void 0?e.isOpen:b,v=n.useMemo(()=>({isOpen:l,open:()=>{a(!0)},close:()=>{a(!1)},setOpen(A){a(A)},toggle(){a(!l)}}),[l]),f=t.getProps(m),h=n.useRef(null),{triggerProps:P,overlayProps:C}=o.useOverlayTrigger({type:"dialog"},v,h),j=n.useRef(null),{popoverProps:I,underlayProps:L}=o.usePopover({placement:O,offset:T,popoverRef:j,triggerRef:h,...f},v),i=o.mergeProps(f,I);!((g=i?.style)===null||g===void 0)&&g.zIndex&&(i.style.zIndex=N.token("zIndex.max")),P.onPress=()=>{v.toggle()};const c=e.size==="sm"?16:24,d=t.get(E),p=t.get(y);return r.jsxs(r.Fragment,{children:[r.jsxs(x.default,{ref:h,...o.mergeProps(P,e),children:[d&&r.jsx(x.default.LeadingIcon,{children:d&&{...d,props:{...d.props,width:c,height:c}}}),p&&r.jsx(x.default.TrailingIcon,{children:p&&{...p,props:{...p.props,width:c,height:c}}})]}),l&&r.jsxs(o.Overlay,{...C,children:[r.jsx("div",{...L,className:"underlay"}),r.jsx("div",{ref:j,...i,className:R.cx(z.vstack({bg:"surface.primary",p:3,gap:0,color:"text.secondary",borderWidth:1,borderColor:"neutral.secondary",borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",maxW:52,alignItems:"start"}),i.className),children:t.get(m)})]})]})}),F=Object.assign(S,{LeadingIcon:E,TrailingIcon:y,Content:m});exports.DEFAULT_OFFSET=T,exports.DEFAULT_PLACEMENT=O,exports.Popover=F,exports.PopoverHost=S,exports.default=F;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),C=require("./button.js");require("./checkbox.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js"),require("./text.js");var U=require("../../hooks/useToggleState.js"),B=require("@styled/css"),T=require("@styled/jsx"),W=require("@styled/patterns"),K=require("@styled/tokens"),f=require("create-slots"),n=require("react"),d=require("react-aria");const S="bottom left",F=8,P=f.createSlot(({children:i})=>t.jsx(t.Fragment,{children:i})),L=f.createSlot(({children:i,...r})=>t.jsx(T.Center,{children:n.Children.map(i,o=>n.cloneElement(o,r))})),A=f.createSlot(({children:i,...r})=>t.jsx(T.Center,{children:n.Children.map(i,o=>n.cloneElement(o,r))})),I=({children:i,...r})=>f.createHost(i,o=>{var b;const{isSelected:k,setSelected:q}=U.useToggleState({isOpen:r.isOpen,defaultSelected:r.defaultOpen,onChange:r.onOpenChange,...r}),p=r.isOpen!==void 0?r.isOpen:k,s=24,l=n.useMemo(()=>({isOpen:p,open:()=>{q(!0)},close:()=>{q(!1)},setOpen(e){q(e)},toggle(){}}),[p]),O=o.getProps(P),g=n.useRef(null),{triggerProps:D,overlayProps:N}=d.useOverlayTrigger({type:"dialog"},l,g),a=n.useRef(null),{popoverProps:_,underlayProps:z}=d.usePopover({placement:S,offset:F,popoverRef:a,triggerRef:g,...O},l),v=d.mergeProps(O,_);!((b=v?.style)===null||b===void 0)&&b.zIndex&&(v.style.zIndex=K.token("zIndex.max"));const H=n.useCallback(()=>{l.open()},[l]),y=n.useCallback(e=>{var E,j;const c=(E=g.current)===null||E===void 0?void 0:E.getBoundingClientRect(),u=(j=a.current)===null||j===void 0?void 0:j.getBoundingClientRect();if(c&&u){const Y=e.clientX>=c.left-s&&e.clientX<=c.right+s&&e.clientY>=c.top-s&&e.clientY<=c.bottom+s,w=e.clientX>=u.left-s&&e.clientX<=u.right+s&&e.clientY>=u.top-s&&e.clientY<=u.bottom+s;!Y&&!w&&l.close()}},[l]),M=()=>{if(a.current){const e=a.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.length>0&&e[0].focus()}},X=e=>{e.key==="Enter"&&(e.preventDefault(),p?l.close():(l.open(),setTimeout(M,0)))};n.useEffect(()=>(document.addEventListener("mousemove",y),()=>{document.removeEventListener("mousemove",y)}),[y]);const m=r.size==="sm"?16:24,h=o.get(L),x=o.get(A);return t.jsxs(t.Fragment,{children:[t.jsxs(C.default,{ref:g,...d.mergeProps(D,r),onHover:H,onKeyDown:X,children:[h&&t.jsx(C.default.LeadingIcon,{children:h&&{...h,props:{...h.props,width:m,height:m}}}),x&&t.jsx(C.default.TrailingIcon,{children:x&&{...x,props:{...x.props,width:m,height:m}}})]}),p&&t.jsxs(d.Overlay,{...N,children:[t.jsx("div",{...z,className:"underlay"}),t.jsx("div",{ref:a,...v,className:B.cx(W.vstack({bg:"surface.primary",p:3,gap:0,color:"text.secondary",borderWidth:1,borderColor:"neutral.secondary",borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",maxW:52,alignItems:"start"}),v.className),children:o.get(P)})]})]})}),R=Object.assign(I,{LeadingIcon:L,TrailingIcon:A,Content:P});exports.DEFAULT_OFFSET=F,exports.DEFAULT_PLACEMENT=S,exports.Popover=R,exports.PopoverHost=I,exports.default=R;
 //# sourceMappingURL=popover.js.map

package/dist/cjs/components/primitives/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, ComponentProps, PropsWithChildren, cloneElement, useMemo, useRef, type ReactNode } from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n  isOpen?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\ninterface OverlayTriggerState {\n  readonly isOpen: boolean;\n  setOpen(isOpen: boolean): void;\n  open(): void;\n  close(): void;\n  toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'> & {\n  children?: ReactNode;\n  state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n  return createHost(children, slots => {\n    const { isSelected, setSelected: setOpen } = useToggleState({\n      isOpen: props.isOpen,\n      defaultSelected: props.defaultOpen,\n      onChange: props.onOpenChange,\n      ...props,\n    });\n\n    const isOpen = props.isOpen !== undefined ? props.isOpen : isSelected;\n\n    const state = useMemo(\n      () => ({\n        isOpen,\n        open: () => {\n          setOpen(true);\n        },\n        close: () => {\n          setOpen(false);\n        },\n        setOpen(value: boolean) {\n          setOpen(value);\n        },\n        toggle() {\n          setOpen(!isOpen);\n        },\n      }),\n      [isOpen],\n    );\n\n    const popoverContentProps = slots.getProps(PopoverContent);\n\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { popoverProps, underlayProps } = usePopover(\n      {\n        placement: DEFAULT_PLACEMENT,\n        offset: DEFAULT_OFFSET,\n        popoverRef: contentRef,\n        triggerRef,\n        ...popoverContentProps,\n      },\n      state,\n    );\n\n    const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n    // Need to override zIndex set by react-aria so popover displays over iframe\n    if (contentProps?.style?.zIndex) {\n      contentProps.style.zIndex = token('zIndex.max');\n    }\n\n    triggerProps.onPress = () => {\n      state.toggle();\n    };\n\n    const iconSize = props.size === 'sm' ? 16 : 24;\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n\n    return (\n      <>\n        <Button ref={triggerRef} {...mergeProps(triggerProps, props)}>\n          {leadingIcon && (\n            <Button.LeadingIcon>\n              {leadingIcon && { ...leadingIcon, props: { ...leadingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.LeadingIcon>\n          )}\n          {trailingIcon && (\n            <Button.TrailingIcon>\n              {trailingIcon && { ...trailingIcon, props: { ...trailingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.TrailingIcon>\n          )}\n        </Button>\n        {isOpen && (\n          <Overlay {...overlayProps}>\n            <div {...underlayProps} className=\"underlay\" />\n            <div\n              ref={contentRef}\n              {...contentProps}\n              className={cx(\n                vstack({\n                  bg: 'surface.primary',\n                  p: 3,\n                  gap: 0,\n                  color: 'text.secondary',\n                  borderWidth: 1,\n                  borderColor: 'neutral.secondary',\n                  borderRadius: 'xl',\n                  boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n                  maxW: 52,\n                  alignItems: 'start',\n                }),\n                contentProps.className,\n              )}\n            >\n              {slots.get(PopoverContent)}\n            </div>\n          </Overlay>\n        )}\n      </>\n    );\n  });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n  LeadingIcon,\n  TrailingIcon,\n  Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","PopoverContent","createSlot","children","_jsx","_Fragment","LeadingIcon","props","Center","Children","child","cloneElement","TrailingIcon","PopoverHost","createHost","slots","isSelected","setOpen","useToggleState","isOpen","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","iconSize","leadingIcon","trailingIcon","_jsxs","Button","Overlay","cx","vstack","Popover"],"mappings":"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"}
+{"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n  Children,\n  ComponentProps,\n  PropsWithChildren,\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n  isOpen?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\ninterface OverlayTriggerState {\n  readonly isOpen: boolean;\n  setOpen(isOpen: boolean): void;\n  open(): void;\n  close(): void;\n  toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'> & {\n  children?: ReactNode;\n  state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n  return createHost(children, slots => {\n    const { isSelected, setSelected: setOpen } = useToggleState({\n      isOpen: props.isOpen,\n      defaultSelected: props.defaultOpen,\n      onChange: props.onOpenChange,\n      ...props,\n    });\n\n    const isOpen = props.isOpen !== undefined ? props.isOpen : isSelected;\n    const safeZoneRadius = 24;\n\n    const state = useMemo(\n      () => ({\n        isOpen,\n        open: () => {\n          setOpen(true);\n        },\n        close: () => {\n          setOpen(false);\n        },\n        setOpen(value: boolean) {\n          setOpen(value);\n        },\n        toggle() {},\n      }),\n      [isOpen],\n    );\n\n    const popoverContentProps = slots.getProps(PopoverContent);\n\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { popoverProps, underlayProps } = usePopover(\n      {\n        placement: DEFAULT_PLACEMENT,\n        offset: DEFAULT_OFFSET,\n        popoverRef: contentRef,\n        triggerRef,\n        ...popoverContentProps,\n      },\n      state,\n    );\n\n    const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n    // Need to override zIndex set by react-aria so popover displays over iframe\n    if (contentProps?.style?.zIndex) {\n      contentProps.style.zIndex = token('zIndex.max');\n    }\n\n    const handleMouseEnter = useCallback(() => {\n      state.open();\n    }, [state]);\n\n    const handleMouseLeave = useCallback(\n      (event: MouseEvent) => {\n        const buttonRect = triggerRef.current?.getBoundingClientRect();\n        const popoverRect = contentRef.current?.getBoundingClientRect();\n\n        if (buttonRect && popoverRect) {\n          const withinButtonSafeZone =\n            event.clientX >= buttonRect.left - safeZoneRadius &&\n            event.clientX <= buttonRect.right + safeZoneRadius &&\n            event.clientY >= buttonRect.top - safeZoneRadius &&\n            event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n          const withinPopoverSafeZone =\n            event.clientX >= popoverRect.left - safeZoneRadius &&\n            event.clientX <= popoverRect.right + safeZoneRadius &&\n            event.clientY >= popoverRect.top - safeZoneRadius &&\n            event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n          if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n            state.close();\n          }\n        }\n      },\n      [state],\n    );\n\n    const focusFirstInteractiveElement = () => {\n      if (contentRef.current) {\n        const interactiveElements = contentRef.current.querySelectorAll(\n          'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n        if (interactiveElements.length > 0) {\n          (interactiveElements[0] as HTMLElement).focus();\n        }\n      }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        if (isOpen) {\n          state.close();\n        } else {\n          state.open();\n          setTimeout(focusFirstInteractiveElement, 0);\n        }\n      }\n    };\n\n    useEffect(() => {\n      document.addEventListener('mousemove', handleMouseLeave);\n      return () => {\n        document.removeEventListener('mousemove', handleMouseLeave);\n      };\n    }, [handleMouseLeave]);\n\n    const iconSize = props.size === 'sm' ? 16 : 24;\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n\n    return (\n      <>\n        <Button\n          ref={triggerRef}\n          {...mergeProps(triggerProps, props)}\n          onHover={handleMouseEnter}\n          onKeyDown={handleKeyDown}\n        >\n          {leadingIcon && (\n            <Button.LeadingIcon>\n              {leadingIcon && { ...leadingIcon, props: { ...leadingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.LeadingIcon>\n          )}\n          {trailingIcon && (\n            <Button.TrailingIcon>\n              {trailingIcon && { ...trailingIcon, props: { ...trailingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.TrailingIcon>\n          )}\n        </Button>\n        {isOpen && (\n          <Overlay {...overlayProps}>\n            <div {...underlayProps} className=\"underlay\" />\n            <div\n              ref={contentRef}\n              {...contentProps}\n              className={cx(\n                vstack({\n                  bg: 'surface.primary',\n                  p: 3,\n                  gap: 0,\n                  color: 'text.secondary',\n                  borderWidth: 1,\n                  borderColor: 'neutral.secondary',\n                  borderRadius: 'xl',\n                  boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n                  maxW: 52,\n                  alignItems: 'start',\n                }),\n                contentProps.className,\n              )}\n            >\n              {slots.get(PopoverContent)}\n            </div>\n          </Overlay>\n        )}\n      </>\n    );\n  });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n  LeadingIcon,\n  TrailingIcon,\n  Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","PopoverContent","createSlot","children","_jsx","_Fragment","LeadingIcon","props","Center","Children","child","cloneElement","TrailingIcon","PopoverHost","createHost","slots","isSelected","setOpen","useToggleState","isOpen","safeZoneRadius","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","handleMouseEnter","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","iconSize","leadingIcon","trailingIcon","_jsxs","Button","Overlay","cx","vstack","Popover"],"mappings":"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"}

package/dist/cjs/recipes/callout.js

@@ -1,2 +1,2 @@
-"use strict";var o=require("@styled/css");const e=o.sva({slots:["container","label","description","icon","button","focus"],base:{container:{px:4,py:3,rounded:10,w:"full"},label:{fontSize:"md"},button:{cursor:"pointer",outline:"none"},focus:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,rounded:2}},variants:{variant:{branded:{container:{bg:"brand.lightest"},label:{color:"brand.darkest"},description:{color:"brand.darkest"},icon:{color:"brand.darkest"},button:{color:"brand.darkest"}},success:{container:{bg:"positive.lightest"},label:{color:"positive.darkest"},description:{color:"positive.darkest"},icon:{color:"positive.darkest"},button:{color:"positive.darkest"}},error:{container:{bg:"negative.lightest"},label:{color:"negative.darkest"},description:{color:"negative.darkest"},icon:{color:"negative.darkest"},button:{color:"negative.darkest"}},warning:{container:{bg:"warning.lightest"},label:{color:"warning.darkest"},description:{color:"warning.darkest"},icon:{color:"warning.darkest"},button:{color:"warning.darkest"}},neutral:{container:{bg:"surface.secondary"},label:{color:"text.secondary"},description:{color:"text.secondary"},icon:{color:"text.secondary"},button:{color:"text.secondary"}}},icon:{true:{description:{ml:7}}},dismissible:{true:{description:{mr:7}}},description:{true:{label:{textTransform:"uppercase",fontSize:"xs",fontWeight:"semibold",letterSpacing:"0.06rem"}}},isDismissed:{true:{container:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}}});exports.callout=e;
+"use strict";var e=require("@styled/css");const o=e.sva({slots:["container","label","description","icon","button","focus"],base:{container:{px:4,py:3,rounded:10,w:"full"},label:{fontSize:"md"},button:{cursor:"pointer",outline:"none",_focusVisible:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,rounded:2}}},variants:{variant:{branded:{container:{bg:"brand.lightest",_focusVisible:{outlineColor:"brand.lightest"}},label:{color:"brand.darkest"},description:{color:"brand.darkest"},icon:{color:"brand.darkest"},button:{color:"brand.darkest"}},success:{container:{bg:"positive.lightest",_focusVisible:{outlineColor:"positive.lightest"}},label:{color:"positive.darkest"},description:{color:"positive.darkest"},icon:{color:"positive.darkest"},button:{color:"positive.darkest"}},error:{container:{bg:"negative.lightest",_focusVisible:{outlineColor:"negative.lightest"}},label:{color:"negative.darkest"},description:{color:"negative.darkest"},icon:{color:"negative.darkest"},button:{color:"negative.darkest"}},warning:{container:{bg:"warning.lightest",_focusVisible:{outlineColor:"warning.lightest"}},label:{color:"warning.darkest"},description:{color:"warning.darkest"},icon:{color:"warning.darkest"},button:{color:"warning.darkest"}},neutral:{container:{bg:"surface.secondary",_focusVisible:{outlineColor:"surface.secondary"}},label:{color:"text.secondary"},description:{color:"text.secondary"},icon:{color:"text.secondary"},button:{color:"text.secondary"}}},icon:{true:{description:{ml:7}}},dismissible:{true:{description:{mr:7}}},interactive:{true:{container:{cursor:"pointer",transition:"transform 0.2s ease, opacity 0.2s ease",_active:{transform:"scale(0.95)"},_hover:{opacity:.8},_focusVisible:{outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}}}},description:{true:{label:{textTransform:"uppercase",fontSize:"xs",fontWeight:"semibold",letterSpacing:"0.06rem"}}},isDismissed:{true:{container:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}}});exports.callout=o;
 //# sourceMappingURL=callout.js.map

package/dist/cjs/recipes/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","sources":["../../../src/recipes/callout.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const callout = sva({\n  slots: ['container', 'label', 'description', 'icon', 'button', 'focus'],\n  base: {\n    container: {\n      px: 4,\n      py: 3,\n      rounded: 10,\n      w: 'full',\n    },\n    label: {\n      fontSize: 'md',\n    },\n    button: {\n      cursor: 'pointer',\n      outline: 'none',\n    },\n    focus: {\n      outlineColor: 'brand.base',\n      outlineStyle: 'solid',\n      outlineWidth: 'thick',\n      outlineOffset: 0.5,\n      rounded: 2,\n    },\n  },\n  variants: {\n    variant: {\n      branded: {\n        container: {\n          bg: 'brand.lightest',\n        },\n        label: {\n          color: 'brand.darkest',\n        },\n        description: {\n          color: 'brand.darkest',\n        },\n        icon: {\n          color: 'brand.darkest',\n        },\n        button: {\n          color: 'brand.darkest',\n        },\n      },\n      success: {\n        container: {\n          bg: 'positive.lightest',\n        },\n        label: {\n          color: 'positive.darkest',\n        },\n        description: {\n          color: 'positive.darkest',\n        },\n        icon: {\n          color: 'positive.darkest',\n        },\n        button: {\n          color: 'positive.darkest',\n        },\n      },\n      error: {\n        container: {\n          bg: 'negative.lightest',\n        },\n        label: {\n          color: 'negative.darkest',\n        },\n        description: {\n          color: 'negative.darkest',\n        },\n        icon: {\n          color: 'negative.darkest',\n        },\n        button: {\n          color: 'negative.darkest',\n        },\n      },\n      warning: {\n        container: {\n          bg: 'warning.lightest',\n        },\n        label: {\n          color: 'warning.darkest',\n        },\n        description: {\n          color: 'warning.darkest',\n        },\n        icon: {\n          color: 'warning.darkest',\n        },\n        button: {\n          color: 'warning.darkest',\n        },\n      },\n      neutral: {\n        container: {\n          bg: 'surface.secondary',\n        },\n        label: {\n          color: 'text.secondary',\n        },\n        description: {\n          color: 'text.secondary',\n        },\n        icon: {\n          color: 'text.secondary',\n        },\n        button: {\n          color: 'text.secondary',\n        },\n      },\n    },\n    icon: {\n      true: {\n        description: {\n          ml: 7,\n        },\n      },\n    },\n    dismissible: {\n      true: {\n        description: {\n          mr: 7,\n        },\n      },\n    },\n    description: {\n      true: {\n        label: {\n          textTransform: 'uppercase',\n          fontSize: 'xs',\n          fontWeight: 'semibold',\n          letterSpacing: '0.06rem',\n        },\n      },\n    },\n    isDismissed: {\n      true: {\n        container: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleOut',\n          animationDuration: '150ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n  },\n});\n"],"names":["callout","sva"],"mappings":"0CAEO,MAAMA,EAAUC,EAAAA,IAAI,CACzB,MAAO,CAAC,YAAa,QAAS,cAAe,OAAQ,SAAU,OAAO,EACtE,KAAM,CACJ,UAAW,CACT,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,EAAG,MACJ,EACD,MAAO,CACL,SAAU,IACX,EACD,OAAQ,CACN,OAAQ,UACR,QAAS,MACV,EACD,MAAO,CACL,aAAc,aACd,aAAc,QACd,aAAc,QACd,cAAe,GACf,QAAS,CACV,CACF,EACD,SAAU,CACR,QAAS,CACP,QAAS,CACP,UAAW,CACT,GAAI,gBACL,EACD,MAAO,CACL,MAAO,eACR,EACD,YAAa,CACX,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,EACD,OAAQ,CACN,MAAO,eACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,mBACL,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,MAAO,CACL,UAAW,CACT,GAAI,mBACL,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,kBACL,EACD,MAAO,CACL,MAAO,iBACR,EACD,YAAa,CACX,MAAO,iBACR,EACD,KAAM,CACJ,MAAO,iBACR,EACD,OAAQ,CACN,MAAO,iBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,mBACL,EACD,MAAO,CACL,MAAO,gBACR,EACD,YAAa,CACX,MAAO,gBACR,EACD,KAAM,CACJ,MAAO,gBACR,EACD,OAAQ,CACN,MAAO,gBACR,CACF,CACF,EACD,KAAM,CACJ,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,MAAO,CACL,cAAe,YACf,SAAU,KACV,WAAY,WACZ,cAAe,SAChB,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,UAAW,CACT,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,CACF,CAAA"}
+{"version":3,"file":"callout.js","sources":["../../../src/recipes/callout.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const callout = sva({\n  slots: ['container', 'label', 'description', 'icon', 'button', 'focus'],\n  base: {\n    container: {\n      px: 4,\n      py: 3,\n      rounded: 10,\n      w: 'full',\n    },\n    label: {\n      fontSize: 'md',\n    },\n    button: {\n      cursor: 'pointer',\n      outline: 'none',\n      _focusVisible: {\n        outlineColor: 'brand.base',\n        outlineStyle: 'solid',\n        outlineWidth: 'thick',\n        outlineOffset: 0.5,\n        rounded: 2,\n      },\n    },\n  },\n  variants: {\n    variant: {\n      branded: {\n        container: {\n          bg: 'brand.lightest',\n          _focusVisible: {\n            outlineColor: 'brand.lightest',\n          },\n        },\n        label: {\n          color: 'brand.darkest',\n        },\n        description: {\n          color: 'brand.darkest',\n        },\n        icon: {\n          color: 'brand.darkest',\n        },\n        button: {\n          color: 'brand.darkest',\n        },\n      },\n      success: {\n        container: {\n          bg: 'positive.lightest',\n          _focusVisible: {\n            outlineColor: 'positive.lightest',\n          },\n        },\n        label: {\n          color: 'positive.darkest',\n        },\n        description: {\n          color: 'positive.darkest',\n        },\n        icon: {\n          color: 'positive.darkest',\n        },\n        button: {\n          color: 'positive.darkest',\n        },\n      },\n      error: {\n        container: {\n          bg: 'negative.lightest',\n          _focusVisible: {\n            outlineColor: 'negative.lightest',\n          },\n        },\n        label: {\n          color: 'negative.darkest',\n        },\n        description: {\n          color: 'negative.darkest',\n        },\n        icon: {\n          color: 'negative.darkest',\n        },\n        button: {\n          color: 'negative.darkest',\n        },\n      },\n      warning: {\n        container: {\n          bg: 'warning.lightest',\n          _focusVisible: {\n            outlineColor: 'warning.lightest',\n          },\n        },\n        label: {\n          color: 'warning.darkest',\n        },\n        description: {\n          color: 'warning.darkest',\n        },\n        icon: {\n          color: 'warning.darkest',\n        },\n        button: {\n          color: 'warning.darkest',\n        },\n      },\n      neutral: {\n        container: {\n          bg: 'surface.secondary',\n          _focusVisible: {\n            outlineColor: 'surface.secondary',\n          },\n        },\n        label: {\n          color: 'text.secondary',\n        },\n        description: {\n          color: 'text.secondary',\n        },\n        icon: {\n          color: 'text.secondary',\n        },\n        button: {\n          color: 'text.secondary',\n        },\n      },\n    },\n    icon: {\n      true: {\n        description: {\n          ml: 7,\n        },\n      },\n    },\n    dismissible: {\n      true: {\n        description: {\n          mr: 7,\n        },\n      },\n    },\n    interactive: {\n      true: {\n        container: {\n          cursor: 'pointer',\n          transition: 'transform 0.2s ease, opacity 0.2s ease',\n          _active: { transform: 'scale(0.95)' },\n          _hover: {\n            opacity: 0.8,\n          },\n          _focusVisible: {\n            outlineStyle: 'solid',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n          },\n        },\n      },\n    },\n    description: {\n      true: {\n        label: {\n          textTransform: 'uppercase',\n          fontSize: 'xs',\n          fontWeight: 'semibold',\n          letterSpacing: '0.06rem',\n        },\n      },\n    },\n    isDismissed: {\n      true: {\n        container: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleOut',\n          animationDuration: '150ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n  },\n});\n"],"names":["callout","sva"],"mappings":"0CAEa,MAAAA,EAAUC,EAAAA,IAAI,CACzB,MAAO,CAAC,YAAa,QAAS,cAAe,OAAQ,SAAU,OAAO,EACtE,KAAM,CACJ,UAAW,CACT,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,EAAG,MACJ,EACD,MAAO,CACL,SAAU,IACX,EACD,OAAQ,CACN,OAAQ,UACR,QAAS,OACT,cAAe,CACb,aAAc,aACd,aAAc,QACd,aAAc,QACd,cAAe,GACf,QAAS,CACV,CACF,CACF,EACD,SAAU,CACR,QAAS,CACP,QAAS,CACP,UAAW,CACT,GAAI,iBACJ,cAAe,CACb,aAAc,gBACf,CACF,EACD,MAAO,CACL,MAAO,eACR,EACD,YAAa,CACX,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,EACD,OAAQ,CACN,MAAO,eACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,MAAO,CACL,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,mBACJ,cAAe,CACb,aAAc,kBACf,CACF,EACD,MAAO,CACL,MAAO,iBACR,EACD,YAAa,CACX,MAAO,iBACR,EACD,KAAM,CACJ,MAAO,iBACR,EACD,OAAQ,CACN,MAAO,iBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,gBACR,EACD,YAAa,CACX,MAAO,gBACR,EACD,KAAM,CACJ,MAAO,gBACR,EACD,OAAQ,CACN,MAAO,gBACR,CACF,CACF,EACD,KAAM,CACJ,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,UAAW,CACT,OAAQ,UACR,WAAY,yCACZ,QAAS,CAAE,UAAW,aAAe,EACrC,OAAQ,CACN,QAAS,EACV,EACD,cAAe,CACb,aAAc,QACd,aAAc,QACd,cAAe,EAChB,CACF,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,MAAO,CACL,cAAe,YACf,SAAU,KACV,WAAY,WACZ,cAAe,SAChB,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,UAAW,CACT,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,CACF,CAAA"}

package/dist/es/components/feedback/callout.js

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as r}from"react/jsx-runtime";import"@styled/tokens";import k from"../icons/ico-alert-circle-fill.js";import F from"../icons/ico-checkmark-circle-fill.js";import I from"../icons/ico-dismiss.js";import R from"../icons/ico-info-circle-fill.js";import S from"../icons/ico-lightbulb-fill.js";import v from"../icons/ico-warning-fill.js";import{callout as y}from"../../recipes/callout.js";import{cx as V}from"@styled/css";import{VStack as A,HStack as m}from"@styled/jsx";import{forwardRef as B,useState as c,useCallback as D,useRef as E}from"react";import{useButton as H,useFocusRing as L,mergeProps as q}from"react-aria";const z={branded:S,success:F,error:k,warning:v,neutral:R},p=B((u,d)=>{const{label:f,description:s,variant:t="branded",icon:e=!1,dismissible:n=!1}=u,[b,h]=c(!0),[g,N]=c(!1),a=s?16:20,o=y({variant:t,icon:e,description:!!s,isDismissed:g,dismissible:n}),w=z[t],C=D(()=>{N(!0)},[]),x=E(null),l=d||x,{buttonProps:P}=H({onPress:C},l),{isFocusVisible:$,focusProps:j}=L();return b?i(A,{className:o.container,alignItems:"flex-start",gap:1.5,onAnimationEnd:()=>h(!1),children:[i(m,{w:"full",justifyContent:"space-between",ref:l,children:[i(m,{alignItems:"center",children:[e&&r(w,{className:o.icon,width:a,height:a}),r("p",{className:o.label,children:f})]}),n&&r("button",{className:V(o.button,$?o.focus:""),...q(P,j),children:r(I,{className:o.button,width:16,height:16})})]}),!!s&&r("p",{className:o.description,children:s})]}):null});p.displayName="Callout";export{p as Callout};
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import"@styled/tokens";import v from"../icons/ico-alert-circle-fill.js";import I from"../icons/ico-caret-right.js";import P from"../icons/ico-checkmark-circle-fill.js";import S from"../icons/ico-dismiss.js";import y from"../icons/ico-info-circle-fill.js";import R from"../icons/ico-lightbulb-fill.js";import z from"../icons/ico-warning-fill.js";import{callout as A}from"../../recipes/callout.js";import{HStack as n,VStack as B}from"@styled/jsx";import{forwardRef as D,useState as p,useRef as E}from"react";import{useButton as H}from"react-aria";const V={branded:R,success:P,error:v,warning:z,neutral:y},u=D((f,h)=>{const{label:b,description:e,variant:s="branded",icon:a=!1,dismissible:l=!1,onPress:r}=f,[N,g]=p(!0),[w,C]=p(!1),m=e?16:20,i=A({variant:s,icon:a,description:!!e,isDismissed:w,dismissible:l,interactive:!!r}),x=V[s],$=()=>{C(!0)},j=E(null),c=h||j,{buttonProps:k}=H({onPress:r},c),d=()=>o(n,{className:r?"":i.container,onAnimationEnd:()=>g(!1),ref:c,children:[o(B,{alignItems:"flex-start",gap:1.5,children:[o(n,{w:"full",justifyContent:"space-between",children:[o(n,{alignItems:"center",children:[a&&t(x,{className:i.icon,width:m,height:m}),t("p",{className:i.label,children:b})]}),l&&t("button",{className:i.button,onClick:$,"aria-label":"dismiss callout",children:t(S,{className:i.button,width:16,height:16})})]}),!!e&&t("p",{className:i.description,children:e})]}),!!r&&t(I,{className:i.button,width:16,height:16})]});return N?r?t("button",{...k,className:i.container,children:t(d,{})}):t(d,{}):null});u.displayName="Callout";export{u as Callout};
 //# sourceMappingURL=callout.js.map

package/dist/es/components/feedback/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","sources":["../../../../src/components/feedback/callout.tsx"],"sourcesContent":["import {\n  IcoAlertCircleFill,\n  IcoCheckmarkCircleFill,\n  IcoDismiss,\n  IcoInfoCircleFill,\n  IcoLightbulbFill,\n  IcoWarningFill,\n} from '@components/icons';\nimport { callout } from '@recipes/callout';\nimport { cx } from '@styled/css';\nimport { HStack, VStack } from '@styled/jsx';\nimport { forwardRef, useCallback, useRef, useState } from 'react';\nimport { mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface CalloutProps {\n  label: string;\n  description?: string;\n  variant?: 'branded' | 'success' | 'error' | 'warning' | 'neutral';\n  icon?: boolean;\n  dismissible?: boolean;\n}\n\nconst svgIcon = {\n  branded: IcoLightbulbFill,\n  success: IcoCheckmarkCircleFill,\n  error: IcoAlertCircleFill,\n  warning: IcoWarningFill,\n  neutral: IcoInfoCircleFill,\n};\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>((props, forwardedRef) => {\n  const { label, description, variant = 'branded', icon = false, dismissible = false } = props;\n  const [isVisible, setIsVisible] = useState(true);\n  const [isDismissed, setIsDismissed] = useState(false);\n\n  const iconSize = description ? 16 : 20;\n\n  const classes = callout({ variant, icon, description: !!description, isDismissed, dismissible });\n\n  const IconComponent = svgIcon[variant];\n\n  const dismissCallout = useCallback(() => {\n    setIsDismissed(true);\n  }, []);\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton({ onPress: dismissCallout }, ref as React.RefObject<HTMLButtonElement>);\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <VStack\n      className={classes.container}\n      alignItems={'flex-start'}\n      gap={1.5}\n      onAnimationEnd={() => setIsVisible(false)}\n    >\n      <HStack w={'full'} justifyContent={'space-between'} ref={ref}>\n        <HStack alignItems={'center'}>\n          {icon && <IconComponent className={classes.icon} width={iconSize} height={iconSize} />}\n          <p className={classes.label}>{label}</p>\n        </HStack>\n\n        {dismissible && (\n          <button\n            className={cx(classes.button, isFocusVisible ? classes.focus : '')}\n            {...mergeProps(buttonProps, focusProps)}\n          >\n            <IcoDismiss className={classes.button} width={16} height={16} />\n          </button>\n        )}\n      </HStack>\n      {!!description && <p className={classes.description}>{description}</p>}\n    </VStack>\n  );\n});\n\nCallout.displayName = 'Callout';\n"],"names":["svgIcon","IcoLightbulbFill","IcoCheckmarkCircleFill","IcoAlertCircleFill","IcoWarningFill","IcoInfoCircleFill","Callout","forwardRef","props","forwardedRef","label","description","variant","icon","dismissible","isVisible","setIsVisible","useState","isDismissed","setIsDismissed","iconSize","classes","callout","IconComponent","dismissCallout","useCallback","internalRef","useRef","ref","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","_jsxs","VStack","HStack","_jsx","cx","mergeProps","IcoDismiss"],"mappings":"4nBAsBA,MAAMA,EAAU,CACd,QAASC,EACT,QAASC,EACT,MAAOC,EACP,QAASC,EACT,QAASC,GAGEC,EAAUC,EAAyC,CAACC,EAAOC,IAAgB,CACtF,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,QAAAC,EAAU,UAAW,KAAAC,EAAO,GAAO,YAAAC,EAAc,EAAO,EAAGN,EACjF,CAACO,EAAWC,CAAY,EAAIC,EAAS,EAAI,EACzC,CAACC,EAAaC,CAAc,EAAIF,EAAS,EAAK,EAE9CG,EAAWT,EAAc,GAAK,GAE9BU,EAAUC,EAAQ,CAAE,QAAAV,EAAS,KAAAC,EAAM,YAAa,CAAC,CAACF,EAAa,YAAAO,EAAa,YAAAJ,CAAW,CAAE,EAEzFS,EAAgBvB,EAAQY,CAAO,EAE/BY,EAAiBC,EAAY,IAAK,CACtCN,EAAe,EAAI,CACrB,EAAG,CAAA,CAAE,EAECO,EAAcC,EAAO,IAAI,EACzBC,EAAMnB,GAAgBiB,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAU,CAAE,QAASN,CAAc,EAAII,CAAyC,EAClG,CAAE,eAAAG,EAAgB,WAAAC,GAAeC,EAEvC,EAAA,OAAKlB,EAKHmB,EAACC,EAAM,CACL,UAAWd,EAAQ,UACnB,WAAY,aACZ,IAAK,IACL,eAAgB,IAAML,EAAa,EAAK,EAAC,SAAA,CAEzCkB,EAACE,EAAM,CAAC,EAAG,OAAQ,eAAgB,gBAAiB,IAAKR,YACvDM,EAACE,EAAO,CAAA,WAAY,SAAQ,SAAA,CACzBvB,GAAQwB,EAACd,EAAa,CAAC,UAAWF,EAAQ,KAAM,MAAOD,EAAU,OAAQA,CAAQ,CAAA,EAClFiB,EAAA,IAAA,CAAG,UAAWhB,EAAQ,MAAQ,SAAAX,CAAU,CAAA,CAAA,CAAA,CAAA,EAGzCI,GACCuB,EAAA,SAAA,CACE,UAAWC,EAAGjB,EAAQ,OAAQU,EAAiBV,EAAQ,MAAQ,EAAE,EAC7D,GAAAkB,EAAWV,EAAaG,CAAU,EAEtC,SAAAK,EAACG,EAAU,CAAC,UAAWnB,EAAQ,OAAQ,MAAO,GAAI,OAAQ,EAAM,CAAA,CAAA,CAAA,CAEnE,CAAA,CAAA,EAEF,CAAC,CAACV,GAAe0B,OAAG,UAAWhB,EAAQ,YAAc,SAAAV,CAAgB,CAAA,CAAA,CAAA,CAAA,EAzBjE,IA4BX,CAAC,EAEDL,EAAQ,YAAc"}
+{"version":3,"file":"callout.js","sources":["../../../../src/components/feedback/callout.tsx"],"sourcesContent":["import {\n  IcoAlertCircleFill,\n  IcoCaretRight,\n  IcoCheckmarkCircleFill,\n  IcoDismiss,\n  IcoInfoCircleFill,\n  IcoLightbulbFill,\n  IcoWarningFill,\n} from '@components/icons';\nimport { callout } from '@recipes/callout';\nimport { HStack, VStack } from '@styled/jsx';\nimport { forwardRef, useRef, useState } from 'react';\nimport { useButton } from 'react-aria';\n\ninterface BaseCalloutProps {\n  label: string;\n  description?: string;\n  variant?: 'branded' | 'success' | 'error' | 'warning' | 'neutral';\n  icon?: boolean;\n}\n\ninterface DefaultCalloutProps extends BaseCalloutProps {\n  dismissible?: false;\n  onPress?: never;\n}\n\ninterface DismissibleCalloutProps extends BaseCalloutProps {\n  dismissible: true;\n  onPress?: never;\n}\n\ninterface InteractiveCalloutProps extends BaseCalloutProps {\n  dismissible?: false;\n  onPress: () => void;\n}\n\n// Disallows `onPress` and `dismissible` to be set at the same time\nexport type CalloutProps = DefaultCalloutProps | DismissibleCalloutProps | InteractiveCalloutProps;\n\nconst svgIcon = {\n  branded: IcoLightbulbFill,\n  success: IcoCheckmarkCircleFill,\n  error: IcoAlertCircleFill,\n  warning: IcoWarningFill,\n  neutral: IcoInfoCircleFill,\n};\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>((props, forwardedRef) => {\n  const { label, description, variant = 'branded', icon = false, dismissible = false, onPress } = props;\n  const [isVisible, setIsVisible] = useState(true);\n  const [isDismissed, setIsDismissed] = useState(false);\n\n  const iconSize = description ? 16 : 20;\n\n  const classes = callout({\n    variant,\n    icon,\n    description: !!description,\n    isDismissed,\n    dismissible,\n    interactive: !!onPress,\n  });\n\n  const IconComponent = svgIcon[variant];\n\n  const dismissCallout = () => {\n    setIsDismissed(true);\n  };\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton({ onPress }, ref as React.RefObject<HTMLButtonElement>);\n\n  const CalloutBase = () => {\n    return (\n      <HStack className={!onPress ? classes.container : ''} onAnimationEnd={() => setIsVisible(false)} ref={ref}>\n        <VStack alignItems={'flex-start'} gap={1.5}>\n          <HStack w={'full'} justifyContent={'space-between'}>\n            <HStack alignItems={'center'}>\n              {icon && <IconComponent className={classes.icon} width={iconSize} height={iconSize} />}\n              <p className={classes.label}>{label}</p>\n            </HStack>\n\n            {dismissible && (\n              <button className={classes.button} onClick={dismissCallout} aria-label=\"dismiss callout\">\n                <IcoDismiss className={classes.button} width={16} height={16} />\n              </button>\n            )}\n          </HStack>\n          {!!description && <p className={classes.description}>{description}</p>}\n        </VStack>\n        {!!onPress && <IcoCaretRight className={classes.button} width={16} height={16} />}\n      </HStack>\n    );\n  };\n\n  if (!isVisible) {\n    return null;\n  }\n\n  if (onPress) {\n    return (\n      <button {...buttonProps} className={classes.container}>\n        <CalloutBase />\n      </button>\n    );\n  }\n\n  return <CalloutBase />;\n});\n\nCallout.displayName = 'Callout';\n"],"names":["svgIcon","IcoLightbulbFill","IcoCheckmarkCircleFill","IcoAlertCircleFill","IcoWarningFill","IcoInfoCircleFill","Callout","forwardRef","props","forwardedRef","label","description","variant","icon","dismissible","onPress","isVisible","setIsVisible","useState","isDismissed","setIsDismissed","iconSize","classes","callout","IconComponent","dismissCallout","internalRef","useRef","ref","buttonProps","useButton","CalloutBase","_jsxs","HStack","VStack","_jsx","IcoDismiss","IcoCaretRight"],"mappings":"mlBAuCA,MAAMA,EAAU,CACd,QAASC,EACT,QAASC,EACT,MAAOC,EACP,QAASC,EACT,QAASC,GAGEC,EAAUC,EAAyC,CAACC,EAAOC,IAAgB,CACtF,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,QAAAC,EAAU,UAAW,KAAAC,EAAO,GAAO,YAAAC,EAAc,GAAO,QAAAC,CAAO,EAAKP,EAC1F,CAACQ,EAAWC,CAAY,EAAIC,EAAS,EAAI,EACzC,CAACC,EAAaC,CAAc,EAAIF,EAAS,EAAK,EAE9CG,EAAWV,EAAc,GAAK,GAE9BW,EAAUC,EAAQ,CACtB,QAAAX,EACA,KAAAC,EACA,YAAa,CAAC,CAACF,EACf,YAAAQ,EACA,YAAAL,EACA,YAAa,CAAC,CAACC,CAChB,CAAA,EAEKS,EAAgBxB,EAAQY,CAAO,EAE/Ba,EAAiB,IAAK,CAC1BL,EAAe,EAAI,CACrB,EAEMM,EAAcC,EAAO,IAAI,EACzBC,EAAMnB,GAAgBiB,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAU,CAAE,QAAAf,CAAS,EAAEa,CAAyC,EAElFG,EAAc,IAEhBC,EAACC,EAAO,CAAA,UAAYlB,EAA8B,GAApBO,EAAQ,UAAgB,eAAgB,IAAML,EAAa,EAAK,EAAG,IAAKW,YACpGI,EAACE,GAAO,WAAY,aAAc,IAAK,cACrCF,EAACC,EAAO,CAAA,EAAG,OAAQ,eAAgB,gBACjC,SAAA,CAAAD,EAACC,EAAO,CAAA,WAAY,SAAQ,SAAA,CACzBpB,GAAQsB,EAACX,EAAa,CAAC,UAAWF,EAAQ,KAAM,MAAOD,EAAU,OAAQA,CAAQ,CAAA,EAClFc,EAAG,IAAA,CAAA,UAAWb,EAAQ,MAAK,SAAGZ,CAAK,CAAA,CAAK,IAGzCI,GACCqB,YAAQ,UAAWb,EAAQ,OAAQ,QAASG,EAAc,aAAa,kBACrE,SAAAU,EAACC,EAAW,CAAA,UAAWd,EAAQ,OAAQ,MAAO,GAAI,OAAQ,EAAM,CAAA,CAAA,CAAA,CAEnE,CAAA,CAAA,EAEF,CAAC,CAACX,GAAewB,OAAG,UAAWb,EAAQ,YAAc,SAAAX,GAAgB,CAC/D,CAAA,EACR,CAAC,CAACI,GAAWoB,EAACE,EAAc,CAAA,UAAWf,EAAQ,OAAQ,MAAO,GAAI,OAAQ,EAAM,CAAA,CAAA,CAAA,CAAA,EAKvF,OAAKN,EAIDD,EAEAoB,EAAA,SAAA,CAAA,GAAYN,EAAa,UAAWP,EAAQ,mBAC1Ca,EAACJ,EAAc,CAAA,CAAA,CAAA,CAAA,EAKdI,EAACJ,EAAW,CAAA,CAAA,EAXV,IAYX,CAAC,EAEDzB,EAAQ,YAAc"}

package/dist/es/components/primitives/button.js

@@ -1,2 +1,2 @@
-import{jsx as i,jsxs as F}from"react/jsx-runtime";import"../feedback/callout.js";import{LoadingSpinner as H}from"../feedback/loading-spinner.js";import"../feedback/tooltip.js";import{button as R}from"../../recipes/button.js";import{cx as k}from"@styled/css";import{Flex as h,HStack as D,Box as b}from"@styled/jsx";import{createSlot as v,createHost as L}from"create-slots";import{Children as y,cloneElement as w,forwardRef as O,useRef as q}from"react";import{useButton as A,useHover as E,useFocusRing as T,mergeProps as V}from"react-aria";const x=v(({children:r,...t})=>i(h,{alignItems:"center",justifyContent:"center",children:y.map(r,e=>w(e,t))})),j=v(({children:r,...t})=>i(h,{alignItems:"center",justifyContent:"center",children:y.map(r,e=>w(e,t))})),W=({variant:r="primary",size:t="md"})=>{const e=r==="primary"||r==="negative",l=r==="neutral"||r==="tertiary";return i(H,{size:{sm:20,md:24,lg:28}[t],strokeWidth:2.5,inverted:e,neutral:l})},z=O((r,t)=>{const{label:e,variant:l="primary",size:c="md",disabled:p,expand:m,validating:d,iconSize:N}=r,a=N||(c==="sm"?16:24),o=R({variant:l,expand:m,size:c,validating:d,iconOnly:!e}),C=q(null),u=t||C,{buttonProps:I}=A({...r,isDisabled:p??!1},u),{hoverProps:P}=E({isDisabled:p??!1}),{isFocusVisible:S,focusProps:B}=T();return L(r.children,g=>{const n=g.get(x),s=g.get(j),f=a/4;return i("button",{className:k(o.button,"group",!e&&o.iconContainer,S&&o.focus),ref:u,...V(I,P,B),"aria-disabled":p,children:d?i(W,{variant:l,size:c}):F(D,{w:"full",gap:2,justify:e&&(n||s)?"space-between":"center",children:[n&&{...n,props:{...n.props,className:n.props.color?void 0:o.icon,width:a,height:a}},s&&e&&m&&i(b,{w:f}),e&&i("span",{className:o.label,children:e}),n&&e&&m&&i(b,{w:f}),s&&{...s,props:{...s.props,className:s.props.color?void 0:o.icon,width:a,height:a}}]})})})}),G=Object.assign(z,{LeadingIcon:x,TrailingIcon:j});z.displayName="Button";export{G as default};
+import{jsx as t,jsxs as F}from"react/jsx-runtime";import"../feedback/callout.js";import{LoadingSpinner as R}from"../feedback/loading-spinner.js";import"../feedback/tooltip.js";import{button as k}from"../../recipes/button.js";import{cx as D}from"@styled/css";import{Flex as b,HStack as E,Box as v}from"@styled/jsx";import{createSlot as y,createHost as L}from"create-slots";import{Children as w,cloneElement as x,forwardRef as O,useRef as T}from"react";import{useButton as q,useHover as A,useFocusRing as M,mergeProps as V}from"react-aria";const j=y(({children:r,...i})=>t(b,{alignItems:"center",justifyContent:"center",children:w.map(r,e=>x(e,i))})),z=y(({children:r,...i})=>t(b,{alignItems:"center",justifyContent:"center",children:w.map(r,e=>x(e,i))})),W=({variant:r="primary",size:i="md"})=>{const e=r==="primary"||r==="negative",l=r==="neutral"||r==="tertiary";return t(R,{size:{sm:20,md:24,lg:28}[i],strokeWidth:2.5,inverted:e,neutral:l})},N=O((r,i)=>{const{label:e,variant:l="primary",size:c="md",disabled:p,expand:m,validating:d,iconSize:C,onHover:u}=r,a=C||(c==="sm"?16:24),o=k({variant:l,expand:m,size:c,validating:d,iconOnly:!e}),H=T(null),f=i||H,{buttonProps:I}=q({...r,isDisabled:p??!1},f),{hoverProps:P}=A({isDisabled:p??!1}),{isFocusVisible:S,focusProps:B}=M();return L(r.children,h=>{const n=h.get(j),s=h.get(z),g=a/4;return t("button",{className:D(o.button,"group",!e&&o.iconContainer,S&&o.focus),ref:f,...V(I,P,B),"aria-disabled":p,onMouseEnter:u,onTouchStart:u,children:d?t(W,{variant:l,size:c}):F(E,{w:"full",gap:2,justify:e&&(n||s)?"space-between":"center",children:[n&&{...n,props:{...n.props,className:n.props.color?void 0:o.icon,width:a,height:a}},s&&e&&m&&t(v,{w:g}),e&&t("span",{className:o.label,children:e}),n&&e&&m&&t(v,{w:g}),s&&{...s,props:{...s.props,className:s.props.color?void 0:o.icon,width:a,height:a}}]})})})}),G=Object.assign(N,{LeadingIcon:j,TrailingIcon:z});N.displayName="Button";export{G as default};
 //# sourceMappingURL=button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n  label?: string;\n  size?: 'sm' | 'md' | 'lg';\n  variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent';\n  disabled?: boolean;\n  expand?: boolean;\n  validating?: boolean;\n  iconSize?: number;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n  const spinnerInverted = variant === 'primary' || variant === 'negative';\n  const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n  const spinnerSizes = {\n    sm: 20,\n    md: 24,\n    lg: 28,\n  };\n\n  return (\n    <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n  );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n  const { label, variant = 'primary', size = 'md', disabled, expand, validating, iconSize: iconSizeOverride } = props;\n\n  const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n  const classes = button({ variant, expand, size, validating, iconOnly: !label });\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton(\n    { ...props, isDisabled: disabled ?? false },\n    ref as React.RefObject<HTMLButtonElement>,\n  );\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n    const containerSize = iconSize / 4;\n\n    return (\n      <button\n        className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n        aria-disabled={disabled}\n      >\n        {validating ? (\n          <Validation variant={variant} size={size} />\n        ) : (\n          <HStack w=\"full\" gap={2} justify={label && (leadingIcon || trailingIcon) ? 'space-between' : 'center'}>\n            {leadingIcon && {\n              ...leadingIcon,\n              props: {\n                ...leadingIcon.props,\n                className: !leadingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n            {trailingIcon && label && expand && <Box w={containerSize} />}\n            {label && <span className={classes.label}>{label}</span>}\n            {leadingIcon && label && expand && <Box w={containerSize} />}\n            {trailingIcon && {\n              ...trailingIcon,\n              props: {\n                ...trailingIcon.props,\n                className: !trailingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n          </HStack>\n        )}\n      </button>\n    );\n  });\n});\n\nconst Button = Object.assign(Component, {\n  LeadingIcon,\n  TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","disabled","expand","validating","iconSizeOverride","iconSize","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n  label?: string;\n  size?: 'sm' | 'md' | 'lg';\n  variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent';\n  disabled?: boolean;\n  expand?: boolean;\n  validating?: boolean;\n  iconSize?: number;\n  onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n  const spinnerInverted = variant === 'primary' || variant === 'negative';\n  const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n  const spinnerSizes = {\n    sm: 20,\n    md: 24,\n    lg: 28,\n  };\n\n  return (\n    <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n  );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n  const {\n    label,\n    variant = 'primary',\n    size = 'md',\n    disabled,\n    expand,\n    validating,\n    iconSize: iconSizeOverride,\n    onHover,\n  } = props;\n\n  const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n  const classes = button({ variant, expand, size, validating, iconOnly: !label });\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton(\n    { ...props, isDisabled: disabled ?? false },\n    ref as React.RefObject<HTMLButtonElement>,\n  );\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n    const containerSize = iconSize / 4;\n\n    return (\n      <button\n        className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n        aria-disabled={disabled}\n        onMouseEnter={onHover as MouseEventHandler}\n        onTouchStart={onHover as TouchEventHandler}\n      >\n        {validating ? (\n          <Validation variant={variant} size={size} />\n        ) : (\n          <HStack w=\"full\" gap={2} justify={label && (leadingIcon || trailingIcon) ? 'space-between' : 'center'}>\n            {leadingIcon && {\n              ...leadingIcon,\n              props: {\n                ...leadingIcon.props,\n                className: !leadingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n            {trailingIcon && label && expand && <Box w={containerSize} />}\n            {label && <span className={classes.label}>{label}</span>}\n            {leadingIcon && label && expand && <Box w={containerSize} />}\n            {trailingIcon && {\n              ...trailingIcon,\n              props: {\n                ...trailingIcon.props,\n                className: !trailingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n          </HStack>\n        )}\n      </button>\n    );\n  });\n});\n\nconst Button = Object.assign(Component, {\n  LeadingIcon,\n  TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","disabled","expand","validating","iconSizeOverride","onHover","iconSize","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"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"}

package/dist/es/components/primitives/popover.js

@@ -1,2 +1,2 @@
-import{jsx as t,Fragment as P,jsxs as g}from"react/jsx-runtime";import h from"./button.js";import"./checkbox.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import{useToggleState as k}from"../../hooks/useToggleState.js";import{cx as D}from"@styled/css";import{Center as y}from"@styled/jsx";import{vstack as H}from"@styled/patterns";import{token as M}from"@styled/tokens";import{createSlot as f,createHost as U}from"create-slots";import{Children as T,cloneElement as b,useMemo as W,useRef as I}from"react";import{useOverlayTrigger as q,usePopover as B,mergeProps as C,Overlay as G}from"react-aria";const E="bottom left",S=8,u=f(({children:o})=>t(P,{children:o})),F=f(({children:o,...e})=>t(y,{children:T.map(o,r=>b(r,e))})),z=f(({children:o,...e})=>t(y,{children:T.map(o,r=>b(r,e))})),L=({children:o,...e})=>U(o,r=>{var d;const{isSelected:A,setSelected:n}=k({isOpen:e.isOpen,defaultSelected:e.defaultOpen,onChange:e.onOpenChange,...e}),i=e.isOpen!==void 0?e.isOpen:A,m=W(()=>({isOpen:i,open:()=>{n(!0)},close:()=>{n(!1)},setOpen(_){n(_)},toggle(){n(!i)}}),[i]),x=r.getProps(u),c=I(null),{triggerProps:v,overlayProps:N}=q({type:"dialog"},m,c),O=I(null),{popoverProps:R,underlayProps:w}=B({placement:E,offset:S,popoverRef:O,triggerRef:c,...x},m),p=C(x,R);!((d=p?.style)===null||d===void 0)&&d.zIndex&&(p.style.zIndex=M("zIndex.max")),v.onPress=()=>{m.toggle()};const s=e.size==="sm"?16:24,l=r.get(F),a=r.get(z);return g(P,{children:[g(h,{ref:c,...C(v,e),children:[l&&t(h.LeadingIcon,{children:l&&{...l,props:{...l.props,width:s,height:s}}}),a&&t(h.TrailingIcon,{children:a&&{...a,props:{...a.props,width:s,height:s}}})]}),i&&g(G,{...N,children:[t("div",{...w,className:"underlay"}),t("div",{ref:O,...p,className:D(H({bg:"surface.primary",p:3,gap:0,color:"text.secondary",borderWidth:1,borderColor:"neutral.secondary",borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",maxW:52,alignItems:"start"}),p.className),children:r.get(u)})]})]})}),j=Object.assign(L,{LeadingIcon:F,TrailingIcon:z,Content:u});export{S as DEFAULT_OFFSET,E as DEFAULT_PLACEMENT,j as Popover,L as PopoverHost,j as default};
+import{jsx as l,Fragment as T,jsxs as O}from"react/jsx-runtime";import C from"./button.js";import"./checkbox.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import{useToggleState as $}from"../../hooks/useToggleState.js";import{cx as G}from"@styled/css";import{Center as S}from"@styled/jsx";import{vstack as J}from"@styled/patterns";import{token as Q}from"@styled/tokens";import{createSlot as E,createHost as V}from"create-slots";import{Children as L,cloneElement as A,useMemo as ee,useRef as R,useCallback as k,useEffect as oe}from"react";import{useOverlayTrigger as te,usePopover as re,mergeProps as z,Overlay as ne}from"react-aria";const D="bottom left",F=8,P=E(({children:i})=>l(T,{children:i})),N=E(({children:i,...o})=>l(S,{children:L.map(i,t=>A(t,o))})),X=E(({children:i,...o})=>l(S,{children:L.map(i,t=>A(t,o))})),Y=({children:i,...o})=>V(i,t=>{var h;const{isSelected:w,setSelected:v}=$({isOpen:o.isOpen,defaultSelected:o.defaultOpen,onChange:o.onOpenChange,...o}),a=o.isOpen!==void 0?o.isOpen:w,r=24,n=ee(()=>({isOpen:a,open:()=>{v(!0)},close:()=>{v(!1)},setOpen(e){v(e)},toggle(){}}),[a]),I=t.getProps(P),d=R(null),{triggerProps:H,overlayProps:B}=te({type:"dialog"},n,d),s=R(null),{popoverProps:M,underlayProps:U}=re({placement:D,offset:F,popoverRef:s,triggerRef:d,...I},n),m=z(I,M);!((h=m?.style)===null||h===void 0)&&h.zIndex&&(m.style.zIndex=Q("zIndex.max"));const W=k(()=>{n.open()},[n]),x=k(e=>{var b,y;const c=(b=d.current)===null||b===void 0?void 0:b.getBoundingClientRect(),p=(y=s.current)===null||y===void 0?void 0:y.getBoundingClientRect();if(c&&p){const K=e.clientX>=c.left-r&&e.clientX<=c.right+r&&e.clientY>=c.top-r&&e.clientY<=c.bottom+r,Z=e.clientX>=p.left-r&&e.clientX<=p.right+r&&e.clientY>=p.top-r&&e.clientY<=p.bottom+r;!K&&!Z&&n.close()}},[n]),_=()=>{if(s.current){const e=s.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.length>0&&e[0].focus()}},q=e=>{e.key==="Enter"&&(e.preventDefault(),a?n.close():(n.open(),setTimeout(_,0)))};oe(()=>(document.addEventListener("mousemove",x),()=>{document.removeEventListener("mousemove",x)}),[x]);const g=o.size==="sm"?16:24,u=t.get(N),f=t.get(X);return O(T,{children:[O(C,{ref:d,...z(H,o),onHover:W,onKeyDown:q,children:[u&&l(C.LeadingIcon,{children:u&&{...u,props:{...u.props,width:g,height:g}}}),f&&l(C.TrailingIcon,{children:f&&{...f,props:{...f.props,width:g,height:g}}})]}),a&&O(ne,{...B,children:[l("div",{...U,className:"underlay"}),l("div",{ref:s,...m,className:G(J({bg:"surface.primary",p:3,gap:0,color:"text.secondary",borderWidth:1,borderColor:"neutral.secondary",borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",maxW:52,alignItems:"start"}),m.className),children:t.get(P)})]})]})}),j=Object.assign(Y,{LeadingIcon:N,TrailingIcon:X,Content:P});export{F as DEFAULT_OFFSET,D as DEFAULT_PLACEMENT,j as Popover,Y as PopoverHost,j as default};
 //# sourceMappingURL=popover.js.map

package/dist/es/components/primitives/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, ComponentProps, PropsWithChildren, cloneElement, useMemo, useRef, type ReactNode } from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n  isOpen?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\ninterface OverlayTriggerState {\n  readonly isOpen: boolean;\n  setOpen(isOpen: boolean): void;\n  open(): void;\n  close(): void;\n  toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'> & {\n  children?: ReactNode;\n  state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n  return createHost(children, slots => {\n    const { isSelected, setSelected: setOpen } = useToggleState({\n      isOpen: props.isOpen,\n      defaultSelected: props.defaultOpen,\n      onChange: props.onOpenChange,\n      ...props,\n    });\n\n    const isOpen = props.isOpen !== undefined ? props.isOpen : isSelected;\n\n    const state = useMemo(\n      () => ({\n        isOpen,\n        open: () => {\n          setOpen(true);\n        },\n        close: () => {\n          setOpen(false);\n        },\n        setOpen(value: boolean) {\n          setOpen(value);\n        },\n        toggle() {\n          setOpen(!isOpen);\n        },\n      }),\n      [isOpen],\n    );\n\n    const popoverContentProps = slots.getProps(PopoverContent);\n\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { popoverProps, underlayProps } = usePopover(\n      {\n        placement: DEFAULT_PLACEMENT,\n        offset: DEFAULT_OFFSET,\n        popoverRef: contentRef,\n        triggerRef,\n        ...popoverContentProps,\n      },\n      state,\n    );\n\n    const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n    // Need to override zIndex set by react-aria so popover displays over iframe\n    if (contentProps?.style?.zIndex) {\n      contentProps.style.zIndex = token('zIndex.max');\n    }\n\n    triggerProps.onPress = () => {\n      state.toggle();\n    };\n\n    const iconSize = props.size === 'sm' ? 16 : 24;\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n\n    return (\n      <>\n        <Button ref={triggerRef} {...mergeProps(triggerProps, props)}>\n          {leadingIcon && (\n            <Button.LeadingIcon>\n              {leadingIcon && { ...leadingIcon, props: { ...leadingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.LeadingIcon>\n          )}\n          {trailingIcon && (\n            <Button.TrailingIcon>\n              {trailingIcon && { ...trailingIcon, props: { ...trailingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.TrailingIcon>\n          )}\n        </Button>\n        {isOpen && (\n          <Overlay {...overlayProps}>\n            <div {...underlayProps} className=\"underlay\" />\n            <div\n              ref={contentRef}\n              {...contentProps}\n              className={cx(\n                vstack({\n                  bg: 'surface.primary',\n                  p: 3,\n                  gap: 0,\n                  color: 'text.secondary',\n                  borderWidth: 1,\n                  borderColor: 'neutral.secondary',\n                  borderRadius: 'xl',\n                  boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n                  maxW: 52,\n                  alignItems: 'start',\n                }),\n                contentProps.className,\n              )}\n            >\n              {slots.get(PopoverContent)}\n            </div>\n          </Overlay>\n        )}\n      </>\n    );\n  });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n  LeadingIcon,\n  TrailingIcon,\n  Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","PopoverContent","createSlot","children","_jsx","_Fragment","LeadingIcon","props","Center","Children","child","cloneElement","TrailingIcon","PopoverHost","createHost","slots","isSelected","setOpen","useToggleState","isOpen","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","iconSize","leadingIcon","trailingIcon","_jsxs","Button","Overlay","cx","vstack","Popover"],"mappings":"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"}
+{"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n  Children,\n  ComponentProps,\n  PropsWithChildren,\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n  isOpen?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\ninterface OverlayTriggerState {\n  readonly isOpen: boolean;\n  setOpen(isOpen: boolean): void;\n  open(): void;\n  close(): void;\n  toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'> & {\n  children?: ReactNode;\n  state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n  return createHost(children, slots => {\n    const { isSelected, setSelected: setOpen } = useToggleState({\n      isOpen: props.isOpen,\n      defaultSelected: props.defaultOpen,\n      onChange: props.onOpenChange,\n      ...props,\n    });\n\n    const isOpen = props.isOpen !== undefined ? props.isOpen : isSelected;\n    const safeZoneRadius = 24;\n\n    const state = useMemo(\n      () => ({\n        isOpen,\n        open: () => {\n          setOpen(true);\n        },\n        close: () => {\n          setOpen(false);\n        },\n        setOpen(value: boolean) {\n          setOpen(value);\n        },\n        toggle() {},\n      }),\n      [isOpen],\n    );\n\n    const popoverContentProps = slots.getProps(PopoverContent);\n\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { popoverProps, underlayProps } = usePopover(\n      {\n        placement: DEFAULT_PLACEMENT,\n        offset: DEFAULT_OFFSET,\n        popoverRef: contentRef,\n        triggerRef,\n        ...popoverContentProps,\n      },\n      state,\n    );\n\n    const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n    // Need to override zIndex set by react-aria so popover displays over iframe\n    if (contentProps?.style?.zIndex) {\n      contentProps.style.zIndex = token('zIndex.max');\n    }\n\n    const handleMouseEnter = useCallback(() => {\n      state.open();\n    }, [state]);\n\n    const handleMouseLeave = useCallback(\n      (event: MouseEvent) => {\n        const buttonRect = triggerRef.current?.getBoundingClientRect();\n        const popoverRect = contentRef.current?.getBoundingClientRect();\n\n        if (buttonRect && popoverRect) {\n          const withinButtonSafeZone =\n            event.clientX >= buttonRect.left - safeZoneRadius &&\n            event.clientX <= buttonRect.right + safeZoneRadius &&\n            event.clientY >= buttonRect.top - safeZoneRadius &&\n            event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n          const withinPopoverSafeZone =\n            event.clientX >= popoverRect.left - safeZoneRadius &&\n            event.clientX <= popoverRect.right + safeZoneRadius &&\n            event.clientY >= popoverRect.top - safeZoneRadius &&\n            event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n          if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n            state.close();\n          }\n        }\n      },\n      [state],\n    );\n\n    const focusFirstInteractiveElement = () => {\n      if (contentRef.current) {\n        const interactiveElements = contentRef.current.querySelectorAll(\n          'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n        if (interactiveElements.length > 0) {\n          (interactiveElements[0] as HTMLElement).focus();\n        }\n      }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        if (isOpen) {\n          state.close();\n        } else {\n          state.open();\n          setTimeout(focusFirstInteractiveElement, 0);\n        }\n      }\n    };\n\n    useEffect(() => {\n      document.addEventListener('mousemove', handleMouseLeave);\n      return () => {\n        document.removeEventListener('mousemove', handleMouseLeave);\n      };\n    }, [handleMouseLeave]);\n\n    const iconSize = props.size === 'sm' ? 16 : 24;\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n\n    return (\n      <>\n        <Button\n          ref={triggerRef}\n          {...mergeProps(triggerProps, props)}\n          onHover={handleMouseEnter}\n          onKeyDown={handleKeyDown}\n        >\n          {leadingIcon && (\n            <Button.LeadingIcon>\n              {leadingIcon && { ...leadingIcon, props: { ...leadingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.LeadingIcon>\n          )}\n          {trailingIcon && (\n            <Button.TrailingIcon>\n              {trailingIcon && { ...trailingIcon, props: { ...trailingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.TrailingIcon>\n          )}\n        </Button>\n        {isOpen && (\n          <Overlay {...overlayProps}>\n            <div {...underlayProps} className=\"underlay\" />\n            <div\n              ref={contentRef}\n              {...contentProps}\n              className={cx(\n                vstack({\n                  bg: 'surface.primary',\n                  p: 3,\n                  gap: 0,\n                  color: 'text.secondary',\n                  borderWidth: 1,\n                  borderColor: 'neutral.secondary',\n                  borderRadius: 'xl',\n                  boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n                  maxW: 52,\n                  alignItems: 'start',\n                }),\n                contentProps.className,\n              )}\n            >\n              {slots.get(PopoverContent)}\n            </div>\n          </Overlay>\n        )}\n      </>\n    );\n  });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n  LeadingIcon,\n  TrailingIcon,\n  Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","PopoverContent","createSlot","children","_jsx","_Fragment","LeadingIcon","props","Center","Children","child","cloneElement","TrailingIcon","PopoverHost","createHost","slots","isSelected","setOpen","useToggleState","isOpen","safeZoneRadius","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","handleMouseEnter","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","iconSize","leadingIcon","trailingIcon","_jsxs","Button","Overlay","cx","vstack","Popover"],"mappings":"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"}

package/dist/es/recipes/callout.js

@@ -1,2 +1,2 @@
-import{sva as o}from"@styled/css";const e=o({slots:["container","label","description","icon","button","focus"],base:{container:{px:4,py:3,rounded:10,w:"full"},label:{fontSize:"md"},button:{cursor:"pointer",outline:"none"},focus:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,rounded:2}},variants:{variant:{branded:{container:{bg:"brand.lightest"},label:{color:"brand.darkest"},description:{color:"brand.darkest"},icon:{color:"brand.darkest"},button:{color:"brand.darkest"}},success:{container:{bg:"positive.lightest"},label:{color:"positive.darkest"},description:{color:"positive.darkest"},icon:{color:"positive.darkest"},button:{color:"positive.darkest"}},error:{container:{bg:"negative.lightest"},label:{color:"negative.darkest"},description:{color:"negative.darkest"},icon:{color:"negative.darkest"},button:{color:"negative.darkest"}},warning:{container:{bg:"warning.lightest"},label:{color:"warning.darkest"},description:{color:"warning.darkest"},icon:{color:"warning.darkest"},button:{color:"warning.darkest"}},neutral:{container:{bg:"surface.secondary"},label:{color:"text.secondary"},description:{color:"text.secondary"},icon:{color:"text.secondary"},button:{color:"text.secondary"}}},icon:{true:{description:{ml:7}}},dismissible:{true:{description:{mr:7}}},description:{true:{label:{textTransform:"uppercase",fontSize:"xs",fontWeight:"semibold",letterSpacing:"0.06rem"}}},isDismissed:{true:{container:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}}});export{e as callout};
+import{sva as o}from"@styled/css";const e=o({slots:["container","label","description","icon","button","focus"],base:{container:{px:4,py:3,rounded:10,w:"full"},label:{fontSize:"md"},button:{cursor:"pointer",outline:"none",_focusVisible:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,rounded:2}}},variants:{variant:{branded:{container:{bg:"brand.lightest",_focusVisible:{outlineColor:"brand.lightest"}},label:{color:"brand.darkest"},description:{color:"brand.darkest"},icon:{color:"brand.darkest"},button:{color:"brand.darkest"}},success:{container:{bg:"positive.lightest",_focusVisible:{outlineColor:"positive.lightest"}},label:{color:"positive.darkest"},description:{color:"positive.darkest"},icon:{color:"positive.darkest"},button:{color:"positive.darkest"}},error:{container:{bg:"negative.lightest",_focusVisible:{outlineColor:"negative.lightest"}},label:{color:"negative.darkest"},description:{color:"negative.darkest"},icon:{color:"negative.darkest"},button:{color:"negative.darkest"}},warning:{container:{bg:"warning.lightest",_focusVisible:{outlineColor:"warning.lightest"}},label:{color:"warning.darkest"},description:{color:"warning.darkest"},icon:{color:"warning.darkest"},button:{color:"warning.darkest"}},neutral:{container:{bg:"surface.secondary",_focusVisible:{outlineColor:"surface.secondary"}},label:{color:"text.secondary"},description:{color:"text.secondary"},icon:{color:"text.secondary"},button:{color:"text.secondary"}}},icon:{true:{description:{ml:7}}},dismissible:{true:{description:{mr:7}}},interactive:{true:{container:{cursor:"pointer",transition:"transform 0.2s ease, opacity 0.2s ease",_active:{transform:"scale(0.95)"},_hover:{opacity:.8},_focusVisible:{outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}}}},description:{true:{label:{textTransform:"uppercase",fontSize:"xs",fontWeight:"semibold",letterSpacing:"0.06rem"}}},isDismissed:{true:{container:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}}});export{e as callout};
 //# sourceMappingURL=callout.js.map

package/dist/es/recipes/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","sources":["../../../src/recipes/callout.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const callout = sva({\n  slots: ['container', 'label', 'description', 'icon', 'button', 'focus'],\n  base: {\n    container: {\n      px: 4,\n      py: 3,\n      rounded: 10,\n      w: 'full',\n    },\n    label: {\n      fontSize: 'md',\n    },\n    button: {\n      cursor: 'pointer',\n      outline: 'none',\n    },\n    focus: {\n      outlineColor: 'brand.base',\n      outlineStyle: 'solid',\n      outlineWidth: 'thick',\n      outlineOffset: 0.5,\n      rounded: 2,\n    },\n  },\n  variants: {\n    variant: {\n      branded: {\n        container: {\n          bg: 'brand.lightest',\n        },\n        label: {\n          color: 'brand.darkest',\n        },\n        description: {\n          color: 'brand.darkest',\n        },\n        icon: {\n          color: 'brand.darkest',\n        },\n        button: {\n          color: 'brand.darkest',\n        },\n      },\n      success: {\n        container: {\n          bg: 'positive.lightest',\n        },\n        label: {\n          color: 'positive.darkest',\n        },\n        description: {\n          color: 'positive.darkest',\n        },\n        icon: {\n          color: 'positive.darkest',\n        },\n        button: {\n          color: 'positive.darkest',\n        },\n      },\n      error: {\n        container: {\n          bg: 'negative.lightest',\n        },\n        label: {\n          color: 'negative.darkest',\n        },\n        description: {\n          color: 'negative.darkest',\n        },\n        icon: {\n          color: 'negative.darkest',\n        },\n        button: {\n          color: 'negative.darkest',\n        },\n      },\n      warning: {\n        container: {\n          bg: 'warning.lightest',\n        },\n        label: {\n          color: 'warning.darkest',\n        },\n        description: {\n          color: 'warning.darkest',\n        },\n        icon: {\n          color: 'warning.darkest',\n        },\n        button: {\n          color: 'warning.darkest',\n        },\n      },\n      neutral: {\n        container: {\n          bg: 'surface.secondary',\n        },\n        label: {\n          color: 'text.secondary',\n        },\n        description: {\n          color: 'text.secondary',\n        },\n        icon: {\n          color: 'text.secondary',\n        },\n        button: {\n          color: 'text.secondary',\n        },\n      },\n    },\n    icon: {\n      true: {\n        description: {\n          ml: 7,\n        },\n      },\n    },\n    dismissible: {\n      true: {\n        description: {\n          mr: 7,\n        },\n      },\n    },\n    description: {\n      true: {\n        label: {\n          textTransform: 'uppercase',\n          fontSize: 'xs',\n          fontWeight: 'semibold',\n          letterSpacing: '0.06rem',\n        },\n      },\n    },\n    isDismissed: {\n      true: {\n        container: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleOut',\n          animationDuration: '150ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n  },\n});\n"],"names":["callout","sva"],"mappings":"kCAEO,MAAMA,EAAUC,EAAI,CACzB,MAAO,CAAC,YAAa,QAAS,cAAe,OAAQ,SAAU,OAAO,EACtE,KAAM,CACJ,UAAW,CACT,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,EAAG,MACJ,EACD,MAAO,CACL,SAAU,IACX,EACD,OAAQ,CACN,OAAQ,UACR,QAAS,MACV,EACD,MAAO,CACL,aAAc,aACd,aAAc,QACd,aAAc,QACd,cAAe,GACf,QAAS,CACV,CACF,EACD,SAAU,CACR,QAAS,CACP,QAAS,CACP,UAAW,CACT,GAAI,gBACL,EACD,MAAO,CACL,MAAO,eACR,EACD,YAAa,CACX,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,EACD,OAAQ,CACN,MAAO,eACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,mBACL,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,MAAO,CACL,UAAW,CACT,GAAI,mBACL,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,kBACL,EACD,MAAO,CACL,MAAO,iBACR,EACD,YAAa,CACX,MAAO,iBACR,EACD,KAAM,CACJ,MAAO,iBACR,EACD,OAAQ,CACN,MAAO,iBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,mBACL,EACD,MAAO,CACL,MAAO,gBACR,EACD,YAAa,CACX,MAAO,gBACR,EACD,KAAM,CACJ,MAAO,gBACR,EACD,OAAQ,CACN,MAAO,gBACR,CACF,CACF,EACD,KAAM,CACJ,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,MAAO,CACL,cAAe,YACf,SAAU,KACV,WAAY,WACZ,cAAe,SAChB,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,UAAW,CACT,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,CACF,CAAA"}
+{"version":3,"file":"callout.js","sources":["../../../src/recipes/callout.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const callout = sva({\n  slots: ['container', 'label', 'description', 'icon', 'button', 'focus'],\n  base: {\n    container: {\n      px: 4,\n      py: 3,\n      rounded: 10,\n      w: 'full',\n    },\n    label: {\n      fontSize: 'md',\n    },\n    button: {\n      cursor: 'pointer',\n      outline: 'none',\n      _focusVisible: {\n        outlineColor: 'brand.base',\n        outlineStyle: 'solid',\n        outlineWidth: 'thick',\n        outlineOffset: 0.5,\n        rounded: 2,\n      },\n    },\n  },\n  variants: {\n    variant: {\n      branded: {\n        container: {\n          bg: 'brand.lightest',\n          _focusVisible: {\n            outlineColor: 'brand.lightest',\n          },\n        },\n        label: {\n          color: 'brand.darkest',\n        },\n        description: {\n          color: 'brand.darkest',\n        },\n        icon: {\n          color: 'brand.darkest',\n        },\n        button: {\n          color: 'brand.darkest',\n        },\n      },\n      success: {\n        container: {\n          bg: 'positive.lightest',\n          _focusVisible: {\n            outlineColor: 'positive.lightest',\n          },\n        },\n        label: {\n          color: 'positive.darkest',\n        },\n        description: {\n          color: 'positive.darkest',\n        },\n        icon: {\n          color: 'positive.darkest',\n        },\n        button: {\n          color: 'positive.darkest',\n        },\n      },\n      error: {\n        container: {\n          bg: 'negative.lightest',\n          _focusVisible: {\n            outlineColor: 'negative.lightest',\n          },\n        },\n        label: {\n          color: 'negative.darkest',\n        },\n        description: {\n          color: 'negative.darkest',\n        },\n        icon: {\n          color: 'negative.darkest',\n        },\n        button: {\n          color: 'negative.darkest',\n        },\n      },\n      warning: {\n        container: {\n          bg: 'warning.lightest',\n          _focusVisible: {\n            outlineColor: 'warning.lightest',\n          },\n        },\n        label: {\n          color: 'warning.darkest',\n        },\n        description: {\n          color: 'warning.darkest',\n        },\n        icon: {\n          color: 'warning.darkest',\n        },\n        button: {\n          color: 'warning.darkest',\n        },\n      },\n      neutral: {\n        container: {\n          bg: 'surface.secondary',\n          _focusVisible: {\n            outlineColor: 'surface.secondary',\n          },\n        },\n        label: {\n          color: 'text.secondary',\n        },\n        description: {\n          color: 'text.secondary',\n        },\n        icon: {\n          color: 'text.secondary',\n        },\n        button: {\n          color: 'text.secondary',\n        },\n      },\n    },\n    icon: {\n      true: {\n        description: {\n          ml: 7,\n        },\n      },\n    },\n    dismissible: {\n      true: {\n        description: {\n          mr: 7,\n        },\n      },\n    },\n    interactive: {\n      true: {\n        container: {\n          cursor: 'pointer',\n          transition: 'transform 0.2s ease, opacity 0.2s ease',\n          _active: { transform: 'scale(0.95)' },\n          _hover: {\n            opacity: 0.8,\n          },\n          _focusVisible: {\n            outlineStyle: 'solid',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n          },\n        },\n      },\n    },\n    description: {\n      true: {\n        label: {\n          textTransform: 'uppercase',\n          fontSize: 'xs',\n          fontWeight: 'semibold',\n          letterSpacing: '0.06rem',\n        },\n      },\n    },\n    isDismissed: {\n      true: {\n        container: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleOut',\n          animationDuration: '150ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n  },\n});\n"],"names":["callout","sva"],"mappings":"kCAEa,MAAAA,EAAUC,EAAI,CACzB,MAAO,CAAC,YAAa,QAAS,cAAe,OAAQ,SAAU,OAAO,EACtE,KAAM,CACJ,UAAW,CACT,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,EAAG,MACJ,EACD,MAAO,CACL,SAAU,IACX,EACD,OAAQ,CACN,OAAQ,UACR,QAAS,OACT,cAAe,CACb,aAAc,aACd,aAAc,QACd,aAAc,QACd,cAAe,GACf,QAAS,CACV,CACF,CACF,EACD,SAAU,CACR,QAAS,CACP,QAAS,CACP,UAAW,CACT,GAAI,iBACJ,cAAe,CACb,aAAc,gBACf,CACF,EACD,MAAO,CACL,MAAO,eACR,EACD,YAAa,CACX,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,EACD,OAAQ,CACN,MAAO,eACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,MAAO,CACL,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,mBACJ,cAAe,CACb,aAAc,kBACf,CACF,EACD,MAAO,CACL,MAAO,iBACR,EACD,YAAa,CACX,MAAO,iBACR,EACD,KAAM,CACJ,MAAO,iBACR,EACD,OAAQ,CACN,MAAO,iBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,gBACR,EACD,YAAa,CACX,MAAO,gBACR,EACD,KAAM,CACJ,MAAO,gBACR,EACD,OAAQ,CACN,MAAO,gBACR,CACF,CACF,EACD,KAAM,CACJ,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,UAAW,CACT,OAAQ,UACR,WAAY,yCACZ,QAAS,CAAE,UAAW,aAAe,EACrC,OAAQ,CACN,QAAS,EACV,EACD,cAAe,CACb,aAAc,QACd,aAAc,QACd,cAAe,EAChB,CACF,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,MAAO,CACL,cAAe,YACf,SAAU,KACV,WAAY,WACZ,cAAe,SAChB,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,UAAW,CACT,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,CACF,CAAA"}

package/dist/panda.buildinfo.json

@@ -1 +1 @@
-{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.2s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.2s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.tertiary","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.base]___[cond:_groupHover<___>_dark","color]___[value:chalk","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","borderRadius]___[value:10","background]___[value:positive.lightest","background]___[value:negative.lightest","background]___[value:warning.lightest","background]___[value:surface.secondary","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","borderRadius]___[value:2","height]___[value:full","background]___[value:surface.primary","overflow]___[value:hidden","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","backgroundColor]___[value:surface.tertiary","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","flexDirection]___[value:column","gap]___[value:2","textAlign]___[value:left","textAlign]___[value:right","opacity]___[value:0.3","fontWeight]___[value:medium","fontSize]___[value:xl","transition]___[value:all linear 120ms","width]___[value:100%","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","backgroundColor]___[value:transparent","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","outlineColor]___[value:brand.base]___[cond:_focus","outlineStyle]___[value:solid]___[cond:_focus","outlineWidth]___[value:thick]___[cond:_focus","outlineOffset]___[value:0.5]___[cond:_focus","height]___[value:10","borderColor]___[value:negative.base","paddingLeft]___[value:11","paddingRight]___[value:11","paddingLeft]___[value:9","paddingRight]___[value:9","position]___[value:absolute","top]___[value:50%","transform]___[value:translateY(-50%)","transition]___[value:opacity linear 120ms","left]___[value:3","right]___[value:3","color]___[value:negative.darker","color]___[value:positive.base","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","gap]___[value:10px","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","paddingInline]___[value:8","display]___[value:block","display]___[value:none","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","flexDirection]___[value:row","padding]___[value:6","paddingBottom]___[value:5","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","alignItems]___[value:flex-start","gap]___[value:1.5","width]___[value:16","width]___[value:20","height]___[value:16","height]___[value:20","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","maxWidth]___[value:72","width]___[value:max","backgroundColor]___[value:surface.primary","paddingBlock]___[value:2","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","width]___[value:72","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","borderColor]___[value:neutral.primary]___[cond:_hover","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","gap]___[value:4","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","gap]___[value:0","marginTop]___[value:8","marginTop]___[value:4","background]___[value:neutral.quaternary","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","borderRadius]___[value:lg","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","alignItems]___[value:flex-end","minHeight]___[value:20","outlineOffset]___[value:1","strokeWidth]___[value:2.5","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","borderWidth]___[value:thick","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","marginLeft]___[value:3","srOnly]___[value:true","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:5","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease, width 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","height]___[value:8","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","width]___[value:4","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","gap]___[value:3","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","borderRadius]___[value:1rem","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","cursor]___[value:default","justifyContent]___[value:space-around","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","borderColor]___[value:surface.primary","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","color]___[value:positive.darker","color]___[value:text.tertiary","fontVariant]___[value:no-contextual","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:1","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}
+{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.2s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.2s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.tertiary","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.base]___[cond:_groupHover<___>_dark","color]___[value:chalk","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","height]___[value:full","background]___[value:surface.primary","overflow]___[value:hidden","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","backgroundColor]___[value:surface.tertiary","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","flexDirection]___[value:column","gap]___[value:2","textAlign]___[value:left","textAlign]___[value:right","opacity]___[value:0.3","fontWeight]___[value:medium","fontSize]___[value:xl","transition]___[value:all linear 120ms","width]___[value:100%","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","backgroundColor]___[value:transparent","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","outlineColor]___[value:brand.base]___[cond:_focus","outlineStyle]___[value:solid]___[cond:_focus","outlineWidth]___[value:thick]___[cond:_focus","outlineOffset]___[value:0.5]___[cond:_focus","height]___[value:10","borderColor]___[value:negative.base","paddingLeft]___[value:11","paddingRight]___[value:11","paddingLeft]___[value:9","paddingRight]___[value:9","position]___[value:absolute","top]___[value:50%","transform]___[value:translateY(-50%)","transition]___[value:opacity linear 120ms","left]___[value:3","right]___[value:3","color]___[value:negative.darker","color]___[value:positive.base","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","gap]___[value:10px","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","paddingInline]___[value:8","display]___[value:block","display]___[value:none","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","flexDirection]___[value:row","padding]___[value:6","paddingBottom]___[value:5","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","alignItems]___[value:flex-start","gap]___[value:1.5","width]___[value:16","width]___[value:20","height]___[value:16","height]___[value:20","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","maxWidth]___[value:72","width]___[value:max","backgroundColor]___[value:surface.primary","paddingBlock]___[value:2","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","width]___[value:72","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","borderColor]___[value:neutral.primary]___[cond:_hover","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","gap]___[value:4","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","gap]___[value:0","marginTop]___[value:8","marginTop]___[value:4","background]___[value:neutral.quaternary","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","borderRadius]___[value:lg","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","alignItems]___[value:flex-end","minHeight]___[value:20","outlineOffset]___[value:1","strokeWidth]___[value:2.5","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","borderWidth]___[value:thick","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","marginLeft]___[value:3","srOnly]___[value:true","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:5","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease, width 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","height]___[value:8","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","width]___[value:4","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","gap]___[value:3","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","borderRadius]___[value:1rem","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","cursor]___[value:default","justifyContent]___[value:space-around","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","borderColor]___[value:surface.primary","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","color]___[value:positive.darker","color]___[value:text.tertiary","fontVariant]___[value:no-contextual","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:1","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}

package/dist/types/components/feedback/callout.d.ts

@@ -1,10 +1,23 @@
 /// <reference types="react" />
-export interface CalloutProps {
+interface BaseCalloutProps {
     label: string;
     description?: string;
     variant?: 'branded' | 'success' | 'error' | 'warning' | 'neutral';
     icon?: boolean;
-    dismissible?: boolean;
 }
+interface DefaultCalloutProps extends BaseCalloutProps {
+    dismissible?: false;
+    onPress?: never;
+}
+interface DismissibleCalloutProps extends BaseCalloutProps {
+    dismissible: true;
+    onPress?: never;
+}
+interface InteractiveCalloutProps extends BaseCalloutProps {
+    dismissible?: false;
+    onPress: () => void;
+}
+export type CalloutProps = DefaultCalloutProps | DismissibleCalloutProps | InteractiveCalloutProps;
 export declare const Callout: import("react").ForwardRefExoticComponent<CalloutProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};
 //# sourceMappingURL=callout.d.ts.map

package/dist/types/components/feedback/callout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/callout.tsx"],"names":[],"mappings":";AAcA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IAClE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAUD,eAAO,MAAM,OAAO,yGAkDlB,CAAC"}
+{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/callout.tsx"],"names":[],"mappings":";AAcA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IAClE,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,UAAU,mBAAoB,SAAQ,gBAAgB;IACpD,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,uBAAwB,SAAQ,gBAAgB;IACxD,WAAW,EAAE,IAAI,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,uBAAwB,SAAQ,gBAAgB;IACxD,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAGD,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,uBAAuB,GAAG,uBAAuB,CAAC;AAUnG,eAAO,MAAM,OAAO,yGA+DlB,CAAC"}

package/dist/types/components/primitives/button.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEventHandler, TouchEventHandler } from 'react';
 import { type AriaButtonProps } from 'react-aria';
 export interface ButtonProps extends AriaButtonProps {
     label?: string;
@@ -8,6 +8,7 @@ export interface ButtonProps extends AriaButtonProps {
     expand?: boolean;
     validating?: boolean;
     iconSize?: number;
+    onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>> & {
     LeadingIcon: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/primitives/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAiD,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAEjG,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;IACjG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAiGD,QAAA,MAAM,MAAM;;;CAGV,CAAC;AAIH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAChH,OAAO,EAAiD,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAEjG,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;IACjG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACvF;AA4GD,QAAA,MAAM,MAAM;;;CAGV,CAAC;AAIH,eAAe,MAAM,CAAC"}

package/dist/types/components/primitives/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAO7D,OAAO,EAAY,cAAc,EAAE,iBAAiB,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnH,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG9D,UAAU,mBAAoB,SAAQ,WAAW;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,KAAK,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,YAAY,CAAC,GAAG;IAC/E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC7B,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1B,eAAO,MAAM,iBAAiB,EAAE,SAAyB,CAAC;AAC1D,eAAO,MAAM,cAAc,IAAI,CAAC;AAwBhC,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;AAElE,eAAO,MAAM,WAAW,2BAA4B,YAAY,gBAyG/D,CAAC;AAEF,eAAO,MAAM,OAAO,4BA3GgC,YAAY;;;4BAxBf,mBAAmB;CAuIlE,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAO7D,OAAO,EAEL,cAAc,EACd,iBAAiB,EAMjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG9D,UAAU,mBAAoB,SAAQ,WAAW;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,KAAK,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,YAAY,CAAC,GAAG;IAC/E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC7B,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1B,eAAO,MAAM,iBAAiB,EAAE,SAAyB,CAAC;AAC1D,eAAO,MAAM,cAAc,IAAI,CAAC;AAwBhC,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;AAElE,eAAO,MAAM,WAAW,2BAA4B,YAAY,gBAqK/D,CAAC;AAEF,eAAO,MAAM,OAAO,4BAvKgC,YAAY;;;4BAxBf,mBAAmB;CAmMlE,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/types/recipes/callout.d.ts

@@ -3,6 +3,9 @@ export declare const callout: import("../../styled-system/types").SlotRecipeRunt
         branded: {
             container: {
                 bg: "brand.lightest";
+                _focusVisible: {
+                    outlineColor: "brand.lightest";
+                };
             };
             label: {
                 color: "brand.darkest";
@@ -20,6 +23,9 @@ export declare const callout: import("../../styled-system/types").SlotRecipeRunt
         success: {
             container: {
                 bg: "positive.lightest";
+                _focusVisible: {
+                    outlineColor: "positive.lightest";
+                };
             };
             label: {
                 color: "positive.darkest";
@@ -37,6 +43,9 @@ export declare const callout: import("../../styled-system/types").SlotRecipeRunt
         error: {
             container: {
                 bg: "negative.lightest";
+                _focusVisible: {
+                    outlineColor: "negative.lightest";
+                };
             };
             label: {
                 color: "negative.darkest";
@@ -54,6 +63,9 @@ export declare const callout: import("../../styled-system/types").SlotRecipeRunt
         warning: {
             container: {
                 bg: "warning.lightest";
+                _focusVisible: {
+                    outlineColor: "warning.lightest";
+                };
             };
             label: {
                 color: "warning.darkest";
@@ -71,6 +83,9 @@ export declare const callout: import("../../styled-system/types").SlotRecipeRunt
         neutral: {
             container: {
                 bg: "surface.secondary";
+                _focusVisible: {
+                    outlineColor: "surface.secondary";
+                };
             };
             label: {
                 color: "text.secondary";
@@ -100,6 +115,25 @@ export declare const callout: import("../../styled-system/types").SlotRecipeRunt
             };
         };
     };
+    interactive: {
+        true: {
+            container: {
+                cursor: "pointer";
+                transition: "transform 0.2s ease, opacity 0.2s ease";
+                _active: {
+                    transform: "scale(0.95)";
+                };
+                _hover: {
+                    opacity: number;
+                };
+                _focusVisible: {
+                    outlineStyle: "solid";
+                    outlineWidth: "thick";
+                    outlineOffset: number;
+                };
+            };
+        };
+    };
     description: {
         true: {
             label: {

package/dist/types/recipes/callout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../../src/recipes/callout.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmJlB,CAAC"}
+{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../../src/recipes/callout.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmLlB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magiclabs/ui-components",
-  "version": "1.13.0",
+  "version": "1.13.2",
   "description": "💅 A theme-able library of reusable UI components",
   "author": "Magic Labs <open-source@magic.link>",
   "repository": {