@magiclabs/ui-components 1.15.2 → 1.16.1

package/dist/cjs/components/containers/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sources":["../../../../src/components/containers/drawer.tsx"],"sourcesContent":["import { IcoCaretDown } from '@components/icons';\nimport { Button, Text } from '@components/primitives';\nimport { Box, HStack } from '@styled/jsx';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface DrawerProps {\n  onToggle: (isOpen: boolean) => void;\n  isOpen: boolean;\n  title?: string;\n  children: React.ReactNode;\n}\n\nexport const Drawer = ({ isOpen = false, title, onToggle, children }: DrawerProps) => {\n  const [shouldRender, setShouldRender] = useState(isOpen);\n  const [isVisible, setIsVisible] = useState(isOpen);\n  const drawerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let timeoutId: NodeJS.Timeout;\n\n    if (isOpen) {\n      setShouldRender(true);\n      timeoutId = setTimeout(() => setIsVisible(true), 10);\n    } else {\n      setIsVisible(false);\n    }\n\n    return () => clearTimeout(timeoutId);\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (drawerRef.current && !drawerRef.current.contains(event.target as Node)) {\n        onToggle(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [onToggle]);\n\n  const handleTransitionEnd = () => {\n    if (!isOpen) {\n      setShouldRender(false);\n    }\n  };\n  const handleClose = useCallback(() => {\n    onToggle(false);\n  }, [onToggle]);\n\n  return (\n    <>\n      <Box\n        position=\"absolute\"\n        display={isOpen ? 'block' : 'none'}\n        h=\"full\"\n        bottom={0}\n        left={0}\n        right={0}\n        bg=\"text.primary/20\"\n        backdropFilter=\"blur(3px)\"\n      />\n      {shouldRender && (\n        <Box\n          ref={drawerRef}\n          position=\"absolute\"\n          transform={isVisible ? 'translateY(0)' : 'translateY(100%)'}\n          transition=\"transform 0.3s\"\n          bottom={0}\n          left={0}\n          right={0}\n          bg=\"surface.primary\"\n          rounded=\"xl\"\n          boxShadow=\"0px -12px 56px 0px rgba(119, 118, 122, 0.15)\"\n          onTransitionEnd={handleTransitionEnd}\n        >\n          <HStack justifyContent=\"space-between\" p={6} pb={5}>\n            <Text styles={{ fontWeight: 'bold' }}>{title}</Text>\n            <Button size=\"sm\" variant=\"neutral\" onPress={handleClose}>\n              <Button.LeadingIcon>\n                <IcoCaretDown />\n              </Button.LeadingIcon>\n            </Button>\n          </HStack>\n          <Box px={6} pb={8}>\n            {children}\n          </Box>\n        </Box>\n      )}\n    </>\n  );\n};\n"],"names":["Drawer","isOpen","title","onToggle","children","shouldRender","setShouldRender","useState","isVisible","setIsVisible","drawerRef","useRef","useEffect","timeoutId","handleClickOutside","event","handleTransitionEnd","handleClose","useCallback","_jsxs","_Fragment","_jsx","Box","HStack","Text","Button","IcoCaretDown"],"mappings":"0aAYa,MAAAA,EAAS,CAAC,CAAE,OAAAC,EAAS,GAAO,MAAAC,EAAO,SAAAC,EAAU,SAAAC,CAAQ,IAAmB,CACnF,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAASN,SAAAA,CAAM,EACjD,CAACO,EAAWC,CAAY,EAAIF,EAASN,SAAAA,CAAM,EAC3CS,EAAYC,EAAuB,OAAA,IAAI,EAE7CC,YAAU,IAAK,CACb,IAAIC,EAEJ,OAAIZ,GACFK,EAAgB,EAAI,EACpBO,EAAY,WAAW,IAAMJ,EAAa,EAAI,EAAG,EAAE,GAEnDA,EAAa,EAAK,EAGb,IAAM,aAAaI,CAAS,CACrC,EAAG,CAACZ,CAAM,CAAC,EAEXW,EAAAA,UAAU,IAAK,CACb,MAAME,EAAsBC,GAAqB,CAC3CL,EAAU,SAAW,CAACA,EAAU,QAAQ,SAASK,EAAM,MAAc,GACvEZ,EAAS,EAAK,CAElB,EAEA,OAAS,SAAA,iBAAiB,YAAaW,CAAkB,EAClD,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAACX,CAAQ,CAAC,EAEb,MAAMa,EAAsB,IAAK,CAC1Bf,GACHK,EAAgB,EAAK,CAEzB,EACMW,EAAcC,EAAAA,YAAY,IAAK,CACnCf,EAAS,EAAK,CAChB,EAAG,CAACA,CAAQ,CAAC,EAEb,OACEgB,EAAAA,KACEC,EAAAA,SAAA,CAAA,SAAA,CAAAC,MAACC,EAAAA,IACC,CAAA,SAAS,WACT,QAASrB,EAAS,QAAU,OAC5B,EAAE,OACF,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAG,kBACH,eAAe,WAAW,CAAA,EAE3BI,GACCc,EAACG,KAAAA,EAAAA,KACC,IAAKZ,EACL,SAAS,WACT,UAAWF,EAAY,gBAAkB,mBACzC,WAAW,iBACX,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAG,kBACH,QAAQ,KACR,UAAU,+CACV,gBAAiBQ,EAAmB,SAAA,CAEpCG,EAACI,KAAAA,SAAM,CAAC,eAAe,gBAAgB,EAAG,EAAG,GAAI,YAC/CF,EAAAA,IAACG,WAAK,OAAQ,CAAE,WAAY,MAAQ,EAAA,SAAGtB,CAAa,CAAA,EACpDmB,EAACI,IAAAA,WAAO,KAAK,KAAK,QAAQ,UAAU,QAASR,WAC3CI,EAAAA,IAACI,UAAO,YAAW,CAAA,SACjBJ,MAACK,EAAAA,QAAY,CAAA,CAAA,CACM,CAAA,CAAA,CAAA,CACd,IAEXL,EAACC,IAAAA,MAAI,CAAA,GAAI,EAAG,GAAI,WACblB,CAAQ,CAAA,CACL,GAET,CAAA,CAAA,CAGP"}
+{"version":3,"file":"drawer.js","sources":["../../../../src/components/containers/drawer.tsx"],"sourcesContent":["import { IcoCaretDown } from '@components/icons';\nimport { Button, Text } from '@components/primitives';\nimport { Box, HStack } from '@styled/jsx';\nimport { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface DrawerProps extends PropsWithChildren {\n  onToggle: (isOpen: boolean) => void;\n  isOpen: boolean;\n  title?: string;\n}\n\nexport const Drawer = ({ isOpen = false, title, onToggle, children }: DrawerProps) => {\n  const [shouldRender, setShouldRender] = useState(isOpen);\n  const [isVisible, setIsVisible] = useState(isOpen);\n  const drawerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let timeoutId: NodeJS.Timeout;\n\n    if (isOpen) {\n      setShouldRender(true);\n      timeoutId = setTimeout(() => setIsVisible(true), 10);\n    } else {\n      setIsVisible(false);\n    }\n\n    return () => clearTimeout(timeoutId);\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (drawerRef.current && !drawerRef.current.contains(event.target as Node)) {\n        onToggle(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [onToggle]);\n\n  const handleTransitionEnd = () => {\n    if (!isOpen) {\n      setShouldRender(false);\n    }\n  };\n  const handleClose = useCallback(() => {\n    onToggle(false);\n  }, [onToggle]);\n\n  return (\n    <>\n      <Box\n        position=\"absolute\"\n        display={isOpen ? 'block' : 'none'}\n        h=\"full\"\n        bottom={0}\n        left={0}\n        right={0}\n        bg=\"text.primary/20\"\n        backdropFilter=\"blur(3px)\"\n      />\n      {shouldRender && (\n        <Box\n          ref={drawerRef}\n          position=\"absolute\"\n          transform={isVisible ? 'translateY(0)' : 'translateY(100%)'}\n          transition=\"transform 0.3s\"\n          bottom={0}\n          left={0}\n          right={0}\n          bg=\"surface.primary\"\n          rounded=\"xl\"\n          boxShadow=\"0px -12px 56px 0px rgba(119, 118, 122, 0.15)\"\n          onTransitionEnd={handleTransitionEnd}\n        >\n          <HStack justifyContent=\"space-between\" p={6} pb={5}>\n            <Text styles={{ fontWeight: 'bold' }}>{title}</Text>\n            <Button size=\"sm\" variant=\"neutral\" onPress={handleClose}>\n              <Button.LeadingIcon>\n                <IcoCaretDown />\n              </Button.LeadingIcon>\n            </Button>\n          </HStack>\n          <Box px={6} pb={8}>\n            {children}\n          </Box>\n        </Box>\n      )}\n    </>\n  );\n};\n"],"names":["Drawer","isOpen","title","onToggle","children","shouldRender","setShouldRender","useState","isVisible","setIsVisible","drawerRef","useRef","useEffect","timeoutId","handleClickOutside","event","handleTransitionEnd","handleClose","useCallback","_jsxs","_Fragment","_jsx","Box","HStack","Text","Button","IcoCaretDown"],"mappings":"0aAWa,MAAAA,EAAS,CAAC,CAAE,OAAAC,EAAS,GAAO,MAAAC,EAAO,SAAAC,EAAU,SAAAC,CAAQ,IAAmB,CACnF,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAASN,SAAAA,CAAM,EACjD,CAACO,EAAWC,CAAY,EAAIF,EAASN,SAAAA,CAAM,EAC3CS,EAAYC,EAAuB,OAAA,IAAI,EAE7CC,YAAU,IAAK,CACb,IAAIC,EAEJ,OAAIZ,GACFK,EAAgB,EAAI,EACpBO,EAAY,WAAW,IAAMJ,EAAa,EAAI,EAAG,EAAE,GAEnDA,EAAa,EAAK,EAGb,IAAM,aAAaI,CAAS,CACrC,EAAG,CAACZ,CAAM,CAAC,EAEXW,EAAAA,UAAU,IAAK,CACb,MAAME,EAAsBC,GAAqB,CAC3CL,EAAU,SAAW,CAACA,EAAU,QAAQ,SAASK,EAAM,MAAc,GACvEZ,EAAS,EAAK,CAElB,EAEA,OAAS,SAAA,iBAAiB,YAAaW,CAAkB,EAClD,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAACX,CAAQ,CAAC,EAEb,MAAMa,EAAsB,IAAK,CAC1Bf,GACHK,EAAgB,EAAK,CAEzB,EACMW,EAAcC,EAAAA,YAAY,IAAK,CACnCf,EAAS,EAAK,CAChB,EAAG,CAACA,CAAQ,CAAC,EAEb,OACEgB,EAAAA,KACEC,EAAAA,SAAA,CAAA,SAAA,CAAAC,MAACC,EAAAA,IACC,CAAA,SAAS,WACT,QAASrB,EAAS,QAAU,OAC5B,EAAE,OACF,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAG,kBACH,eAAe,WAAW,CAAA,EAE3BI,GACCc,EAACG,KAAAA,EAAAA,KACC,IAAKZ,EACL,SAAS,WACT,UAAWF,EAAY,gBAAkB,mBACzC,WAAW,iBACX,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAG,kBACH,QAAQ,KACR,UAAU,+CACV,gBAAiBQ,EAAmB,SAAA,CAEpCG,EAACI,KAAAA,SAAM,CAAC,eAAe,gBAAgB,EAAG,EAAG,GAAI,YAC/CF,EAAAA,IAACG,WAAK,OAAQ,CAAE,WAAY,MAAQ,EAAA,SAAGtB,CAAa,CAAA,EACpDmB,EAACI,IAAAA,WAAO,KAAK,KAAK,QAAQ,UAAU,QAASR,WAC3CI,EAAAA,IAACI,UAAO,YAAW,CAAA,SACjBJ,MAACK,EAAAA,QAAY,CAAA,CAAA,CACM,CAAA,CAAA,CAAA,CACd,IAEXL,EAACC,IAAAA,MAAI,CAAA,GAAI,EAAG,GAAI,WACblB,CAAQ,CAAA,CACL,GAET,CAAA,CAAA,CAGP"}

package/dist/cjs/components/external/paypal-button.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("../feedback/callout.js");var b=require("../feedback/loading-spinner.js");require("../feedback/tooltip.js");var g=require("@styled/tokens"),h=require("../logos/logo-pay-pal-wordmark.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var j=require("../primitives/text.js"),p=require("../../recipes/button.js"),u=require("@styled/css"),n=require("@styled/jsx"),o=require("react"),r=require("react-aria");const l=o.forwardRef((i,d)=>{const{disabled:t,expand:c,validating:a}=i,q=p.button({expand:c,validating:a}),f=o.useRef(null),s=d||f,{buttonProps:v}=r.useButton({...i,isDisabled:t??!1},s),{isFocusVisible:x,focusProps:P}=r.useFocusRing();return e.jsx("button",{className:u.cx(q.button,u.css({bg:"#ffc439",outlineColor:"#ffc439",outlineWidth:"thick",outlineOffset:.5,outlineStyle:x?"solid":"none"})),ref:s,...r.mergeProps(v,P),"aria-disabled":t,children:a?e.jsx(b.LoadingSpinner,{size:24,strokeWidth:2.5,inverted:!0}):e.jsxs(n.HStack,{w:"full",gap:1,justifyContent:"center",children:[e.jsx(j.default,{styles:{fontWeight:600,color:g.token("colors.ink.90")},children:"Pay with"}),e.jsx(n.Box,{mt:.5,children:e.jsx(h.default,{width:60})})]})})});l.displayName="PayPalButton",exports.PayPalButton=l;
+"use strict";var e=require("react/jsx-runtime");require("../feedback/callout.js");var b=require("../feedback/loading-spinner.js"),g=require("@styled/tokens");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var h=require("../primitives/text.js");require("../primitives/portal.js");var s=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var n=require("@styled/jsx");require("../feedback/tooltip.js");var j=require("../logos/logo-pay-pal-wordmark.js"),p=require("../../recipes/button.js"),o=require("@styled/css"),r=require("react-aria");const l=s.forwardRef((i,d)=>{const{disabled:t,expand:c,validating:u}=i,q=p.button({expand:c,validating:u}),f=s.useRef(null),a=d||f,{buttonProps:v}=r.useButton({...i,isDisabled:t??!1},a),{isFocusVisible:x,focusProps:P}=r.useFocusRing();return e.jsx("button",{className:o.cx(q.button,o.css({bg:"#ffc439",outlineColor:"#ffc439",outlineWidth:"thick",outlineOffset:.5,outlineStyle:x?"solid":"none"})),ref:a,...r.mergeProps(v,P),"aria-disabled":t,children:u?e.jsx(b.LoadingSpinner,{size:24,strokeWidth:2.5,inverted:!0}):e.jsxs(n.HStack,{w:"full",gap:1,justifyContent:"center",children:[e.jsx(h.default,{styles:{fontWeight:600,color:g.token("colors.ink.90")},children:"Pay with"}),e.jsx(n.Box,{mt:.5,children:e.jsx(j.default,{width:60})})]})})});l.displayName="PayPalButton",exports.PayPalButton=l;
 //# sourceMappingURL=paypal-button.js.map

package/dist/cjs/components/external/paypal-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"paypal-button.js","sources":["../../../../src/components/external/paypal-button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { LogoPayPalWordmark } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { button } from '@recipes/button';\nimport { css, cx } from '@styled/css';\nimport { Box, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport React, { forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, type AriaButtonProps } from 'react-aria';\n\nexport interface PayPalButtonProps extends AriaButtonProps {\n  disabled?: boolean;\n  expand?: boolean;\n  validating?: boolean;\n}\n\nexport const PayPalButton = forwardRef<HTMLButtonElement, PayPalButtonProps>((props, forwardedRef) => {\n  const { disabled, expand, validating } = props;\n\n  const classes = button({ expand, validating });\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\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return (\n    <button\n      className={cx(\n        classes.button,\n        css({\n          bg: '#ffc439',\n          outlineColor: '#ffc439',\n          outlineWidth: 'thick',\n          outlineOffset: 0.5,\n          outlineStyle: isFocusVisible ? 'solid' : 'none',\n        }),\n      )}\n      ref={ref}\n      {...mergeProps(buttonProps, focusProps)}\n      aria-disabled={disabled}\n    >\n      {validating ? (\n        <LoadingSpinner size={24} strokeWidth={2.5} inverted />\n      ) : (\n        <HStack w=\"full\" gap={1} justifyContent=\"center\">\n          <Text styles={{ fontWeight: 600, color: token('colors.ink.90') }}>Pay with</Text>\n          <Box mt={0.5}>\n            <LogoPayPalWordmark width={60} />\n          </Box>\n        </HStack>\n      )}\n    </button>\n  );\n});\n\nPayPalButton.displayName = 'PayPalButton';\n"],"names":["PayPalButton","forwardRef","props","forwardedRef","disabled","expand","validating","classes","button","internalRef","useRef","ref","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","_jsx","cx","css","mergeProps","LoadingSpinner","_jsxs","HStack","Text","token","Box","LogoPayPalWordmark"],"mappings":"2nBAgBO,MAAMA,EAAeC,EAAiD,WAAA,CAACC,EAAOC,IAAgB,CACnG,KAAM,CAAE,SAAAC,EAAU,OAAAC,EAAQ,WAAAC,CAAU,EAAKJ,EAEnCK,EAAUC,EAAAA,OAAO,CAAE,OAAAH,EAAQ,WAAAC,CAAY,CAAA,EAEvCG,EAAcC,SAAO,IAAI,EACzBC,EAAMR,GAAgBM,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAAA,UACtB,CAAE,GAAGX,EAAO,WAAYE,GAAY,EAAO,EAC3CO,CAAyC,EAGrC,CAAE,eAAAG,EAAgB,WAAAC,GAAeC,iBAEvC,OACEC,MACE,SAAA,CAAA,UAAWC,EAAAA,GACTX,EAAQ,OACRY,EAAAA,IAAI,CACF,GAAI,UACJ,aAAc,UACd,aAAc,QACd,cAAe,GACf,aAAcL,EAAiB,QAAU,MAC1C,CAAA,CAAC,EAEJ,IAAKH,EAAG,GACJS,EAAAA,WAAWR,EAAaG,CAAU,kBACvBX,EAAQ,SAEtBE,EACCW,EAAAA,IAACI,iBAAe,CAAA,KAAM,GAAI,YAAa,IAAK,SAAQ,EAAA,CAAA,EAEpDC,OAACC,EAAO,OAAA,CAAA,EAAE,OAAO,IAAK,EAAG,eAAe,SACtC,SAAA,CAAAN,EAAAA,IAACO,EAAAA,QAAK,CAAA,OAAQ,CAAE,WAAY,IAAK,MAAOC,EAAAA,MAAM,eAAe,GAAoB,SAAA,UAAA,CAAA,EACjFR,EAAAA,IAACS,EAAAA,IAAG,CAAC,GAAI,YACPT,EAACU,IAAAA,EAAAA,SAAmB,MAAO,EAAM,CAAA,CAAA,CAAA,CAC7B,GAET,CAAA,CAGP,CAAC,EAED3B,EAAa,YAAc"}
+{"version":3,"file":"paypal-button.js","sources":["../../../../src/components/external/paypal-button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { LogoPayPalWordmark } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { button } from '@recipes/button';\nimport { css, cx } from '@styled/css';\nimport { Box, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport React, { forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, type AriaButtonProps } from 'react-aria';\n\nexport interface PayPalButtonProps extends AriaButtonProps {\n  disabled?: boolean;\n  expand?: boolean;\n  validating?: boolean;\n}\n\nexport const PayPalButton = forwardRef<HTMLButtonElement, PayPalButtonProps>((props, forwardedRef) => {\n  const { disabled, expand, validating } = props;\n\n  const classes = button({ expand, validating });\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\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return (\n    <button\n      className={cx(\n        classes.button,\n        css({\n          bg: '#ffc439',\n          outlineColor: '#ffc439',\n          outlineWidth: 'thick',\n          outlineOffset: 0.5,\n          outlineStyle: isFocusVisible ? 'solid' : 'none',\n        }),\n      )}\n      ref={ref}\n      {...mergeProps(buttonProps, focusProps)}\n      aria-disabled={disabled}\n    >\n      {validating ? (\n        <LoadingSpinner size={24} strokeWidth={2.5} inverted />\n      ) : (\n        <HStack w=\"full\" gap={1} justifyContent=\"center\">\n          <Text styles={{ fontWeight: 600, color: token('colors.ink.90') }}>Pay with</Text>\n          <Box mt={0.5}>\n            <LogoPayPalWordmark width={60} />\n          </Box>\n        </HStack>\n      )}\n    </button>\n  );\n});\n\nPayPalButton.displayName = 'PayPalButton';\n"],"names":["PayPalButton","forwardRef","props","forwardedRef","disabled","expand","validating","classes","button","internalRef","useRef","ref","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","_jsx","cx","css","mergeProps","LoadingSpinner","_jsxs","HStack","Text","token","Box","LogoPayPalWordmark"],"mappings":"2uBAgBO,MAAMA,EAAeC,EAAiD,WAAA,CAACC,EAAOC,IAAgB,CACnG,KAAM,CAAE,SAAAC,EAAU,OAAAC,EAAQ,WAAAC,CAAU,EAAKJ,EAEnCK,EAAUC,EAAAA,OAAO,CAAE,OAAAH,EAAQ,WAAAC,CAAY,CAAA,EAEvCG,EAAcC,SAAO,IAAI,EACzBC,EAAMR,GAAgBM,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAAA,UACtB,CAAE,GAAGX,EAAO,WAAYE,GAAY,EAAO,EAC3CO,CAAyC,EAGrC,CAAE,eAAAG,EAAgB,WAAAC,GAAeC,iBAEvC,OACEC,MACE,SAAA,CAAA,UAAWC,EAAAA,GACTX,EAAQ,OACRY,EAAAA,IAAI,CACF,GAAI,UACJ,aAAc,UACd,aAAc,QACd,cAAe,GACf,aAAcL,EAAiB,QAAU,MAC1C,CAAA,CAAC,EAEJ,IAAKH,EAAG,GACJS,EAAAA,WAAWR,EAAaG,CAAU,kBACvBX,EAAQ,SAEtBE,EACCW,EAAAA,IAACI,iBAAe,CAAA,KAAM,GAAI,YAAa,IAAK,SAAQ,EAAA,CAAA,EAEpDC,OAACC,EAAO,OAAA,CAAA,EAAE,OAAO,IAAK,EAAG,eAAe,SACtC,SAAA,CAAAN,EAAAA,IAACO,EAAAA,QAAK,CAAA,OAAQ,CAAE,WAAY,IAAK,MAAOC,EAAAA,MAAM,eAAe,GAAoB,SAAA,UAAA,CAAA,EACjFR,EAAAA,IAACS,EAAAA,IAAG,CAAC,GAAI,YACPT,EAACU,IAAAA,EAAAA,SAAmB,MAAO,EAAM,CAAA,CAAA,CAAA,CAC7B,GAET,CAAA,CAGP,CAAC,EAED3B,EAAa,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),n=require("@styled/tokens"),F=require("../icons/ico-alert-circle-fill.js"),I=require("../icons/ico-caret-right.js"),R=require("../icons/ico-checkmark-circle-fill.js"),A=require("../icons/ico-dismiss.js"),H=require("../icons/ico-info-circle-fill.js"),P=require("../icons/ico-lightbulb-fill.js"),y=require("../icons/ico-warning-fill.js"),z=require("../../recipes/callout.js"),t=require("@styled/jsx"),l=require("react"),D=require("react-aria");const L={branded:P.default,success:R.default,error:F.default,warning:y.default,neutral:H.default},x=l.forwardRef((b,f)=>{const{label:v,description:a,size:c="md",variant:u="branded",icon:o=!1,dismissible:d=!1,onPress:r}=b,[g,p]=l.useState(!0),[q,k]=l.useState(!1),s={sm:n.token("spacing.4"),md:n.token("spacing.5"),lg:n.token("spacing.6")},m=a?s.sm:s[c],i=z.callout({size:c,variant:u,icon:o,description:!!a,isDismissed:q,dismissible:d,interactive:!!r}),C=L[u],N=()=>{k(!0)},w=l.useRef(null),h=f||w,{buttonProps:S}=D.useButton({onPress:r},h),j=()=>e.jsxs(t.HStack,{className:r?"":i.container,onAnimationEnd:()=>p(!1),ref:h,children:[e.jsxs(t.VStack,{alignItems:"flex-start",gap:1.5,children:[e.jsxs(t.HStack,{w:"full",justifyContent:"space-between",children:[e.jsxs(t.HStack,{alignItems:"center",children:[o&&e.jsx(C,{className:i.icon,width:m,height:m}),e.jsx("p",{className:i.label,children:v})]}),d&&e.jsx("button",{className:i.button,onClick:N,"aria-label":"dismiss callout",children:e.jsx(A.default,{className:i.button,width:s.sm,height:s.sm})})]}),!!a&&e.jsx("p",{className:i.description,children:a})]}),!!r&&e.jsx(I.default,{className:i.button,width:s.sm,height:s.sm})]});return g?r?e.jsx("button",{...S,className:i.container,children:e.jsx(j,{})}):e.jsx(j,{}):null});x.displayName="Callout",exports.Callout=x;
+"use strict";var e=require("react/jsx-runtime"),l=require("@styled/tokens"),C=require("../icons/ico-caret-right.js"),I=require("../icons/ico-dismiss.js"),R=require("../../recipes/callout.js"),r=require("@styled/jsx"),n=require("react"),H=require("react-aria"),P=require("./status-icon.js");const x=n.forwardRef((b,p)=>{const{label:v,description:i,size:c="md",variant:o="branded",icon:u=!1,dismissible:d=!1,onPress:a}=b,[g,f]=n.useState(!0),[k,N]=n.useState(!1),t={sm:l.token("spacing.4"),md:l.token("spacing.5"),lg:l.token("spacing.6")},m=i?t.sm:t[c],s=R.callout({size:c,variant:o,icon:u,description:!!i,isDismissed:k,dismissible:d,interactive:!!a}),q=()=>{N(!0)},S=n.useRef(null),h=p||S,{buttonProps:w}=H.useButton({onPress:a},h),j=()=>e.jsxs(r.HStack,{className:a?"":s.container,onAnimationEnd:()=>f(!1),ref:h,children:[e.jsxs(r.VStack,{alignItems:"flex-start",gap:1.5,children:[e.jsxs(r.HStack,{w:"full",justifyContent:"space-between",children:[e.jsxs(r.HStack,{alignItems:"center",children:[u&&e.jsx(P.StatusIcon,{variant:o,className:s.icon,width:m,height:m}),e.jsx("p",{className:s.label,children:v})]}),d&&e.jsx("button",{className:s.button,onClick:q,"aria-label":"dismiss callout",children:e.jsx(I.default,{className:s.button,width:t.sm,height:t.sm})})]}),!!i&&e.jsx("p",{className:s.description,children:i})]}),!!a&&e.jsx(C.default,{className:s.button,width:t.sm,height:t.sm})]});return g?a?e.jsx("button",{...w,className:s.container,children:e.jsx(j,{})}):e.jsx(j,{}):null});x.displayName="Callout",exports.Callout=x;
 //# 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  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 { token } from '@styled/tokens';\nimport { forwardRef, useRef, useState } from 'react';\nimport { useButton } from 'react-aria';\n\ninterface BaseCalloutProps {\n  label: string;\n  description?: string;\n  size?: 'sm' | 'md' | 'lg';\n  variant?: 'branded' | 'success' | 'error' | 'warning' | 'neutral';\n  icon?: boolean;\n}\n\ninterface DefaultCalloutProps extends BaseCalloutProps {\n  dismissible?: boolean;\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, size = 'md', variant = 'branded', icon = false, dismissible = false, onPress } = props;\n  const [isVisible, setIsVisible] = useState(true);\n  const [isDismissed, setIsDismissed] = useState(false);\n\n  const iconSizes = {\n    sm: token('spacing.4'),\n    md: token('spacing.5'),\n    lg: token('spacing.6'),\n  };\n  const iconSize = description ? iconSizes.sm : iconSizes[size];\n\n  const classes = callout({\n    size,\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={iconSizes.sm} height={iconSizes.sm} />\n              </button>\n            )}\n          </HStack>\n          {!!description && <p className={classes.description}>{description}</p>}\n        </VStack>\n        {!!onPress && <IcoCaretRight className={classes.button} width={iconSizes.sm} height={iconSizes.sm} />}\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","size","variant","icon","dismissible","onPress","isVisible","setIsVisible","useState","isDismissed","setIsDismissed","iconSizes","token","iconSize","classes","callout","IconComponent","dismissCallout","internalRef","useRef","ref","buttonProps","useButton","CalloutBase","_jsxs","HStack","VStack","_jsx","IcoDismiss","IcoCaretRight"],"mappings":"0eAyCA,MAAMA,EAAU,CACd,QAASC,EACT,QAAA,QAASC,UACT,MAAOC,EAAAA,QACP,QAASC,EACT,QAAA,QAASC,WAGEC,EAAUC,EAAAA,WAAyC,CAACC,EAAOC,IAAgB,CACtF,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,KAAAC,EAAO,KAAM,QAAAC,EAAU,UAAW,KAAAC,EAAO,GAAO,YAAAC,EAAc,GAAO,QAAAC,CAAO,EAAKR,EACvG,CAACS,EAAWC,CAAY,EAAIC,EAAS,SAAA,EAAI,EACzC,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SAAS,EAAK,EAE9CG,EAAY,CAChB,GAAIC,EAAAA,MAAM,WAAW,EACrB,GAAIA,EAAM,MAAA,WAAW,EACrB,GAAIA,EAAAA,MAAM,WAAW,GAEjBC,EAAWb,EAAcW,EAAU,GAAKA,EAAUV,CAAI,EAEtDa,EAAUC,EAAAA,QAAQ,CACtB,KAAAd,EACA,QAAAC,EACA,KAAAC,EACA,YAAa,CAAC,CAACH,EACf,YAAAS,EACA,YAAAL,EACA,YAAa,CAAC,CAACC,CAChB,CAAA,EAEKW,EAAgB3B,EAAQa,CAAO,EAE/Be,EAAiB,IAAK,CAC1BP,EAAe,EAAI,CACrB,EAEMQ,EAAcC,EAAAA,OAAO,IAAI,EACzBC,EAAMtB,GAAgBoB,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAU,UAAA,CAAE,QAAAjB,CAAS,EAAEe,CAAyC,EAElFG,EAAc,IAEhBC,EAAAA,KAACC,UAAO,UAAYpB,EAA8B,GAApBS,EAAQ,UAAgB,eAAgB,IAAMP,EAAa,EAAK,EAAG,IAAKa,EACpG,SAAA,CAAAI,OAACE,EAAO,OAAA,CAAA,WAAY,aAAc,IAAK,IACrC,SAAA,CAAAF,EAACC,KAAAA,EAAAA,OAAO,CAAA,EAAG,OAAQ,eAAgB,gBACjC,SAAA,CAAAD,EAAAA,KAACC,SAAO,CAAA,WAAY,SAAQ,SAAA,CACzBtB,GAAQwB,EAACX,IAAAA,EAAa,CAAC,UAAWF,EAAQ,KAAM,MAAOD,EAAU,OAAQA,CAAY,CAAA,EACtFc,EAAAA,SAAG,UAAWb,EAAQ,MAAQ,SAAAf,GAAU,CACjC,CAAA,EAERK,GACCuB,gBAAQ,UAAWb,EAAQ,OAAQ,QAASG,EAAc,aAAa,kBACrE,SAAAU,EAAAA,IAACC,EAAAA,QAAU,CAAC,UAAWd,EAAQ,OAAQ,MAAOH,EAAU,GAAI,OAAQA,EAAU,EAAE,CAAA,GAEnF,CAAA,CAAA,EAEF,CAAC,CAACX,GAAe2B,WAAG,UAAWb,EAAQ,YAAc,SAAAd,GAAgB,CAC/D,CAAA,EACR,CAAC,CAACK,GAAWsB,MAACE,EAAc,QAAA,CAAA,UAAWf,EAAQ,OAAQ,MAAOH,EAAU,GAAI,OAAQA,EAAU,EAAM,CAAA,CAAA,CAAA,CAAA,EAK3G,OAAKL,EAIDD,EAEAsB,EAAAA,IAAA,SAAA,CAAA,GAAYN,EAAa,UAAWP,EAAQ,mBAC1Ca,EAAAA,IAACJ,EAAc,CAAA,CAAA,CAAA,CAAA,EAKdI,EAACJ,IAAAA,EAAW,CAAA,CAAA,EAXV,IAYX,CAAC,EAED5B,EAAQ,YAAc"}
+{"version":3,"file":"callout.js","sources":["../../../../src/components/feedback/callout.tsx"],"sourcesContent":["import { IcoCaretRight, IcoDismiss } from '@components/icons';\nimport { callout } from '@recipes/callout';\nimport { HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { forwardRef, useRef, useState } from 'react';\nimport { useButton } from 'react-aria';\nimport { StatusIcon } from './status-icon';\n\ninterface BaseCalloutProps {\n  label: string;\n  description?: string;\n  size?: 'sm' | 'md' | 'lg';\n  variant?: 'branded' | 'success' | 'error' | 'warning' | 'neutral';\n  icon?: boolean;\n}\n\ninterface DefaultCalloutProps extends BaseCalloutProps {\n  dismissible?: boolean;\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\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>((props, forwardedRef) => {\n  const { label, description, size = 'md', variant = 'branded', icon = false, dismissible = false, onPress } = props;\n  const [isVisible, setIsVisible] = useState(true);\n  const [isDismissed, setIsDismissed] = useState(false);\n\n  const iconSizes = {\n    sm: token('spacing.4'),\n    md: token('spacing.5'),\n    lg: token('spacing.6'),\n  };\n  const iconSize = description ? iconSizes.sm : iconSizes[size];\n\n  const classes = callout({\n    size,\n    variant,\n    icon,\n    description: !!description,\n    isDismissed,\n    dismissible,\n    interactive: !!onPress,\n  });\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 && <StatusIcon variant={variant} 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={iconSizes.sm} height={iconSizes.sm} />\n              </button>\n            )}\n          </HStack>\n          {!!description && <p className={classes.description}>{description}</p>}\n        </VStack>\n        {!!onPress && <IcoCaretRight className={classes.button} width={iconSizes.sm} height={iconSizes.sm} />}\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":["Callout","forwardRef","props","forwardedRef","label","description","size","variant","icon","dismissible","onPress","isVisible","setIsVisible","useState","isDismissed","setIsDismissed","iconSizes","token","iconSize","classes","callout","dismissCallout","internalRef","useRef","ref","buttonProps","useButton","CalloutBase","_jsxs","HStack","VStack","_jsx","StatusIcon","IcoDismiss","IcoCaretRight"],"mappings":"kSAkCa,MAAAA,EAAUC,EAAAA,WAAyC,CAACC,EAAOC,IAAgB,CACtF,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,KAAAC,EAAO,KAAM,QAAAC,EAAU,UAAW,KAAAC,EAAO,GAAO,YAAAC,EAAc,GAAO,QAAAC,CAAO,EAAKR,EACvG,CAACS,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAI,EACzC,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SAAS,EAAK,EAE9CG,EAAY,CAChB,GAAIC,EAAAA,MAAM,WAAW,EACrB,GAAIA,EAAAA,MAAM,WAAW,EACrB,GAAIA,EAAAA,MAAM,WAAW,GAEjBC,EAAWb,EAAcW,EAAU,GAAKA,EAAUV,CAAI,EAEtDa,EAAUC,UAAQ,CACtB,KAAAd,EACA,QAAAC,EACA,KAAAC,EACA,YAAa,CAAC,CAACH,EACf,YAAAS,EACA,YAAAL,EACA,YAAa,CAAC,CAACC,CAChB,CAAA,EAEKW,EAAiB,IAAK,CAC1BN,EAAe,EAAI,CACrB,EAEMO,EAAcC,EAAAA,OAAO,IAAI,EACzBC,EAAMrB,GAAgBmB,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAAA,UAAU,CAAE,QAAAhB,CAAS,EAAEc,CAAyC,EAElFG,EAAc,IAEhBC,EAAAA,KAACC,UAAO,UAAYnB,EAA8B,GAApBS,EAAQ,UAAgB,eAAgB,IAAMP,EAAa,EAAK,EAAG,IAAKY,YACpGI,EAAAA,KAACE,EAAAA,QAAO,WAAY,aAAc,IAAK,IAAG,SAAA,CACxCF,EAAAA,KAACC,EAAAA,QAAO,EAAG,OAAQ,eAAgB,gBAAe,SAAA,CAChDD,EAAAA,KAACC,SAAM,CAAC,WAAY,mBACjBrB,GAAQuB,EAAAA,IAACC,EAAAA,WAAU,CAAC,QAASzB,EAAS,UAAWY,EAAQ,KAAM,MAAOD,EAAU,OAAQA,IACzFa,EAAA,IAAA,IAAA,CAAG,UAAWZ,EAAQ,eAAQf,CAAK,CAAA,CAAK,IAGzCK,GACCsB,EAAAA,IAAA,SAAA,CAAQ,UAAWZ,EAAQ,OAAQ,QAASE,eAA2B,kBAAiB,SACtFU,MAACE,WAAW,UAAWd,EAAQ,OAAQ,MAAOH,EAAU,GAAI,OAAQA,EAAU,IACvE,CAAA,CACV,CACM,CAAA,EACR,CAAC,CAACX,GAAe0B,EAAAA,IAAG,IAAA,CAAA,UAAWZ,EAAQ,YAAc,SAAAd,GAAgB,CAC/D,CAAA,EACR,CAAC,CAACK,GAAWqB,MAACG,EAAc,QAAA,CAAA,UAAWf,EAAQ,OAAQ,MAAOH,EAAU,GAAI,OAAQA,EAAU,EAAM,CAAA,CAAA,CAAA,CAAA,EAK3G,OAAKL,EAIDD,EAEAqB,EAAAA,IAAA,SAAA,CAAA,GAAYN,EAAa,UAAWN,EAAQ,mBAC1CY,EAACJ,IAAAA,EAAc,CAAA,CAAA,CAAA,CAAA,EAKdI,EAAAA,IAACJ,EAAW,CAAA,CAAA,EAXV,IAYX,CAAC,EAED3B,EAAQ,YAAc"}

package/dist/cjs/components/feedback/status-icon.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("react/jsx-runtime");require("@styled/tokens");var t=require("../icons/ico-alert-circle-fill.js"),u=require("../icons/ico-checkmark-circle-fill.js"),c=require("../icons/ico-info-circle-fill.js"),n=require("../icons/ico-lightbulb-fill.js"),s=require("../icons/ico-warning-fill.js"),o=require("@styled/jsx");const d={branded:n.default,success:u.default,error:t.default,warning:s.default,neutral:c.default},q=e=>{const{variant:i="branded",...a}=e,l=d[i];return r.jsx(o.HStack,{children:r.jsx(l,{...a})})};exports.StatusIcon=q;
+//# sourceMappingURL=status-icon.js.map

package/dist/cjs/components/feedback/status-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-icon.js","sources":["../../../../src/components/feedback/status-icon.tsx"],"sourcesContent":["import {\n  IcoAlertCircleFill,\n  IcoCheckmarkCircleFill,\n  IcoInfoCircleFill,\n  IcoLightbulbFill,\n  IcoWarningFill,\n} from '@components/icons';\nimport { HStack } from '@styled/jsx';\n\nconst svgIcon = {\n  branded: IcoLightbulbFill,\n  success: IcoCheckmarkCircleFill,\n  error: IcoAlertCircleFill,\n  warning: IcoWarningFill,\n  neutral: IcoInfoCircleFill,\n};\n\nexport interface StatusIconProps {\n  className?: string;\n  height?: string | number;\n  width?: string | number;\n  variant?: 'branded' | 'success' | 'error' | 'warning' | 'neutral';\n}\n\nexport const StatusIcon = (props: StatusIconProps) => {\n  const { variant = 'branded', ...iconProps } = props;\n  const IconComponent = svgIcon[variant];\n\n  return (\n    <HStack>\n      <IconComponent {...iconProps} />\n    </HStack>\n  );\n};\n"],"names":["svgIcon","IcoLightbulbFill","IcoCheckmarkCircleFill","IcoAlertCircleFill","IcoWarningFill","IcoInfoCircleFill","StatusIcon","props","variant","iconProps","IconComponent","_jsx","HStack"],"mappings":"6UASA,MAAMA,EAAU,CACd,QAASC,EAAAA,QACT,QAASC,EAAAA,QACT,MAAOC,UACP,QAASC,EAAAA,QACT,QAASC,EAAAA,SAUEC,EAAcC,GAA0B,CACnD,KAAM,CAAE,QAAAC,EAAU,UAAW,GAAGC,CAAS,EAAKF,EACxCG,EAAgBV,EAAQQ,CAAO,EAErC,OACEG,EAAAA,IAACC,EACC,OAAA,CAAA,SAAAD,EAAAA,IAACD,EAAa,CAAA,GAAKD,CAAS,CAAA,CACrB,CAAA,CAEb"}

package/dist/cjs/components/feedback/toast-provider.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),T=require("@styled/tokens"),f=require("../icons/ico-dismiss.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var k=require("../primitives/text.js"),b=require("../primitives/portal.js"),N=require("../utils/animate.js"),C=require("../../hooks/useToast.js"),q=require("../../recipes/toast.js"),x=require("@styled/jsx"),n=require("react"),S=require("./status-icon.js");let P=0;const h=r=>{const{lifespan:c=0,message:i,variant:o="branded"}=r,a=q.toast({variant:o}),s=r.dismissible&&r.id,l=r.removeToast,[d,u]=n.useState(!0);return c&&s&&setTimeout(()=>{u(!1)},c),e.jsx(N.default,{"aria-live":["error"].includes(o||"")?"assertive":"polite",show:d,type:"slide",onHidden:()=>{s&&l(s)},children:e.jsxs(x.HStack,{className:a.toast,children:[r.icon&&e.jsx(S.StatusIcon,{className:a.icon,variant:o}),e.jsx(k.default,{styles:{color:T.token("colors.chalk")},children:i}),s&&e.jsx("button",{className:a.dismiss,onClick:()=>u(!1),"aria-label":`dismiss toast ${s}`,children:e.jsx(f.default,{className:a.icon})})]})})},R=({position:r,children:c})=>{const i=n.useRef([]),o=n.useReducer(t=>t+1,0)[1],a=n.useCallback(t=>{i.current=i.current.filter(v=>v.id!==t),o()},[]),s=n.useCallback(t=>{const{lifespan:v=0,variant:j="branded",...p}=t,m=++P;return i.current.push({lifespan:v,variant:j,id:m,...p}),o(),m},[]),l=n.useMemo(()=>({createToast:s,removeToast:a}),[s,a]),d=(r?.startsWith("top")?[...i.current]:[...i.current].reverse()).map(t=>e.jsx(h,{...t,removeToast:a},t.id)),u=q.toast({position:r});return e.jsxs(C.ToastContext.Provider,{value:l,children:[c,e.jsx(b.default,{children:e.jsx("div",{className:u.portal,children:e.jsx(x.VStack,{className:u.container,children:d})})})]})};exports.Toast=h,exports.ToastProvider=R;
+//# sourceMappingURL=toast-provider.js.map

package/dist/cjs/components/feedback/toast-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-provider.js","sources":["../../../../src/components/feedback/toast-provider.tsx"],"sourcesContent":["import { IcoDismiss } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport Portal from '@components/primitives/portal';\nimport Animate from '@components/utils/animate';\nimport { ToastProps as BaseToastProps, ToastContext, ToastDefinition } from '@hooks/useToast';\nimport { toast as classes } from '@recipes/toast';\nimport { HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { PropsWithChildren, useCallback, useMemo, useReducer, useRef, useState } from 'react';\nimport { StatusIcon } from './status-icon';\n\nlet toastID = 0;\n\ninterface InternalToast extends ToastDefinition {\n  removeToast: ToastContext['removeToast'];\n}\n\nexport interface ToastProps extends BaseToastProps {}\nexport interface ToastProviderProps extends PropsWithChildren {\n  position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';\n}\n\nexport const Toast = (props: ToastProps | InternalToast) => {\n  const { lifespan = 0, message, variant = 'branded' } = props;\n  const toastClasses = classes({ variant });\n  const dismissId = props.dismissible && (props as InternalToast).id;\n  const removeToast = (props as InternalToast).removeToast;\n  const [show, setShow] = useState(true);\n\n  if (lifespan && dismissId) {\n    setTimeout(() => {\n      setShow(false);\n    }, lifespan);\n  }\n\n  return (\n    <Animate\n      aria-live={['error'].includes(variant || '') ? 'assertive' : 'polite'}\n      show={show}\n      type=\"slide\"\n      onHidden={() => {\n        if (dismissId) {\n          removeToast(dismissId);\n        }\n      }}\n    >\n      <HStack className={toastClasses.toast}>\n        {props.icon && <StatusIcon className={toastClasses.icon} variant={variant} />}\n        <Text styles={{ color: token('colors.chalk') }}>{message}</Text>\n        {dismissId && (\n          <button\n            className={toastClasses.dismiss}\n            onClick={() => setShow(false)}\n            aria-label={`dismiss toast ${dismissId}`}\n          >\n            <IcoDismiss className={toastClasses.icon} />\n          </button>\n        )}\n      </HStack>\n    </Animate>\n  );\n};\n\nexport const ToastProvider = ({ position, children }: ToastProviderProps) => {\n  const toastsRef = useRef<ToastDefinition[]>([]);\n  const forceUpdate = useReducer((x: number) => x + 1, 0)[1];\n\n  const removeToast: ToastContext['removeToast'] = useCallback((id: number) => {\n    toastsRef.current = toastsRef.current.filter(toast => toast.id !== id);\n    forceUpdate();\n  }, []);\n\n  const createToast: ToastContext['createToast'] = useCallback(options => {\n    const { lifespan = 0, variant = 'branded', ...props } = options;\n    const id = ++toastID;\n\n    toastsRef.current.push({ lifespan, variant, id, ...props });\n    forceUpdate();\n\n    return id;\n  }, []);\n\n  const toastCtx = useMemo(() => ({ createToast, removeToast }), [createToast, removeToast]);\n  const toasts = position?.startsWith('top') ? [...toastsRef.current] : [...toastsRef.current].reverse();\n  const activeToasts = toasts.map(toast => {\n    return <Toast key={toast.id} {...toast} removeToast={removeToast} />;\n  });\n\n  const providerClasses = classes({ position });\n\n  return (\n    <ToastContext.Provider value={toastCtx}>\n      {children}\n      <Portal>\n        <div className={providerClasses.portal}>\n          <VStack className={providerClasses.container}>{activeToasts}</VStack>\n        </div>\n      </Portal>\n    </ToastContext.Provider>\n  );\n};\n"],"names":["toastID","Toast","props","lifespan","message","variant","toastClasses","classes","dismissId","removeToast","show","setShow","useState","_jsx","Animate","_jsxs","HStack","StatusIcon","Text","token","IcoDismiss","ToastProvider","position","children","toastsRef","useRef","forceUpdate","useReducer","x","useCallback","id","toast","createToast","options","toastCtx","useMemo","activeToasts","providerClasses","ToastContext","Portal","VStack"],"mappings":"glBAWA,IAAIA,EAAU,QAWDC,EAASC,GAAqC,CACzD,KAAM,CAAE,SAAAC,EAAW,EAAG,QAAAC,EAAS,QAAAC,EAAU,SAAW,EAAGH,EACjDI,EAAeC,EAAAA,MAAQ,CAAE,QAAAF,CAAO,CAAE,EAClCG,EAAYN,EAAM,aAAgBA,EAAwB,GAC1DO,EAAeP,EAAwB,YACvC,CAACQ,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAI,EAErC,OAAIT,GAAYK,GACd,WAAW,IAAK,CACdG,EAAQ,EAAK,CACf,EAAGR,CAAQ,EAIXU,EAAAA,IAACC,EAAAA,QAAO,CAAA,YACK,CAAC,OAAO,EAAE,SAAST,GAAW,EAAE,EAAI,YAAc,SAC7D,KAAMK,EACN,KAAK,QACL,SAAU,IAAK,CACTF,GACFC,EAAYD,CAAS,CAEzB,WAEAO,EAAAA,KAACC,EAAAA,OAAO,CAAA,UAAWV,EAAa,MAAK,SAAA,CAClCJ,EAAM,MAAQW,EAAAA,IAACI,EAAAA,YAAW,UAAWX,EAAa,KAAM,QAASD,CAAO,CAAA,EACzEQ,EAAAA,IAACK,EAAAA,QAAK,CAAA,OAAQ,CAAE,MAAOC,EAAAA,MAAM,cAAc,CAAC,EAAK,SAAAf,IAChDI,GACCK,EAAAA,IAAA,SAAA,CACE,UAAWP,EAAa,QACxB,QAAS,IAAMK,EAAQ,EAAK,EAAC,aACjB,iBAAiBH,CAAS,YAEtCK,EAAAA,IAACO,EAAAA,SAAW,UAAWd,EAAa,IAAQ,CAAA,CAAA,CAAA,CAE/C,CACM,CAAA,CAAA,CAAA,CAGf,EAEae,EAAgB,CAAC,CAAE,SAAAC,EAAU,SAAAC,CAA8B,IAAI,CAC1E,MAAMC,EAAYC,EAAAA,OAA0B,CAAA,CAAE,EACxCC,EAAcC,aAAYC,GAAcA,EAAI,EAAG,CAAC,EAAE,CAAC,EAEnDnB,EAA2CoB,cAAaC,GAAc,CAC1EN,EAAU,QAAUA,EAAU,QAAQ,OAAOO,GAASA,EAAM,KAAOD,CAAE,EACrEJ,EACF,CAAA,EAAG,CAAA,CAAE,EAECM,EAA2CH,cAAYI,GAAU,CACrE,KAAM,CAAE,SAAA9B,EAAW,EAAG,QAAAE,EAAU,UAAW,GAAGH,CAAO,EAAG+B,EAClDH,EAAK,EAAE9B,EAEb,OAAAwB,EAAU,QAAQ,KAAK,CAAE,SAAArB,EAAU,QAAAE,EAAS,GAAAyB,EAAI,GAAG5B,CAAK,CAAE,EAC1DwB,EAEOI,EAAAA,CACT,EAAG,CAAA,CAAE,EAECI,EAAWC,UAAQ,KAAO,CAAE,YAAAH,EAAa,YAAAvB,CAAW,GAAK,CAACuB,EAAavB,CAAW,CAAC,EAEnF2B,GADSd,GAAU,WAAW,KAAK,EAAI,CAAC,GAAGE,EAAU,OAAO,EAAI,CAAC,GAAGA,EAAU,OAAO,EAAE,WACjE,IAAIO,GACvBlB,EAAAA,IAACZ,EAAyB,CAAA,GAAA8B,EAAO,YAAatB,CAAlC,EAAAsB,EAAM,EAAE,CAC5B,EAEKM,EAAkB9B,EAAAA,MAAQ,CAAE,SAAAe,CAAQ,CAAE,EAE5C,OACEP,EAACuB,KAAAA,EAAAA,aAAa,UAAS,MAAOJ,EAAQ,SAAA,CACnCX,EACDV,EAAC0B,IAAAA,EAAAA,QAAM,CAAA,SACL1B,EAAAA,WAAK,UAAWwB,EAAgB,OAC9B,SAAAxB,EAAAA,IAAC2B,EAAAA,OAAM,CAAC,UAAWH,EAAgB,mBAAYD,CAAY,CAAA,GAEtD,CAAA,CAAA,CAAA,CAAA,CAGf"}

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 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;
+"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("@styled/tokens"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js"),require("./text.js"),require("./portal.js");var o=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var l=require("@styled/jsx");require("../feedback/tooltip.js");var I=require("../../recipes/button.js"),F=require("@styled/css"),q=require("create-slots"),d=require("react-aria");const f=q.createSlot(({children:r,...t})=>i.jsx(l.Flex,{alignItems:"center",justifyContent:"center",children:o.Children.map(r,e=>o.cloneElement(e,t))})),y=q.createSlot(({children:r,...t})=>i.jsx(l.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",c=r==="neutral"||r==="tertiary";return i.jsx(H.LoadingSpinner,{size:{sm:20,md:24,lg:28}[t],strokeWidth:2.5,inverted:e,neutral:c})},w=o.forwardRef((r,t)=>{const{label:e,variant:c="primary",size:p="md",disabled:m,expand:v,validating:h,iconSize:S,onHover:g}=r,u=S||(p==="sm"?16:24),s=I.button({variant:c,expand:v,size:p,validating:h,iconOnly:!e}),z=o.useRef(null),x=t||z,{buttonProps:C}=d.useButton({...r,isDisabled:m??!1},x),{hoverProps:N}=d.useHover({isDisabled:m??!1}),{isFocusVisible:P,focusProps:B}=d.useFocusRing();return q.createHost(r.children,j=>{const n=j.get(f),a=j.get(y),b=u/4;return i.jsx("button",{className:F.cx(s.button,"group",!e&&s.iconContainer,P&&s.focus),ref:x,...d.mergeProps(C,N,B),"aria-disabled":m,onMouseEnter:g,onTouchStart:g,children:h?i.jsx(R,{variant:c,size:p}):i.jsxs(l.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:u,height:u}},a&&e&&v&&i.jsx(l.Box,{w:b}),e&&i.jsx("span",{className:s.label,children:e}),n&&e&&v&&i.jsx(l.Box,{w:b}),a&&{...a,props:{...a.props,className:a.props.color?void 0:s.icon,width:u,height:u}}]})})})}),E=Object.assign(w,{LeadingIcon:f,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, 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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"}
+{"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/cjs/components/primitives/portal.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("react/jsx-runtime"),r=require("react"),d=require("react-dom");const a=r.forwardRef((o,u)=>{var e;const{container:i,...l}=o,[s,n]=r.useState(!1);r.useLayoutEffect(()=>n(!0),[]);const t=i||s&&((e=globalThis?.document)===null||e===void 0?void 0:e.body);return t?d.createPortal(c.jsx("div",{...l,ref:u}),t):null});a.displayName="Portal",exports.default=a;
+//# sourceMappingURL=portal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"portal.js","sources":["../../../../src/components/primitives/portal.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\ntype PortalElement = React.ElementRef<'div'>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<'div'>;\n\nexport interface PortalProps extends PrimitiveDivProps {\n  container?: Element | null;\n}\n\nconst Portal = forwardRef<PortalElement, PortalProps>((props, forwardedRef) => {\n  const { container: containerProp, ...portalProps } = props;\n  const [mounted, setMounted] = useState(false);\n\n  useLayoutEffect(() => setMounted(true), []);\n\n  const container = containerProp || (mounted && globalThis?.document?.body);\n  return container ? ReactDOM.createPortal(<div {...portalProps} ref={forwardedRef} />, container) : null;\n});\n\nPortal.displayName = 'Portal';\n\nexport default Portal;\n"],"names":["Portal","forwardRef","props","forwardedRef","containerProp","portalProps","mounted","setMounted","useState","useLayoutEffect","container","_a","ReactDOM","_jsx"],"mappings":"iJAUMA,MAAAA,EAASC,EAAAA,WAAuC,CAACC,EAAOC,IAAgB,OAC5E,KAAM,CAAE,UAAWC,EAAe,GAAGC,CAAW,EAAKH,EAC/C,CAACI,EAASC,CAAU,EAAIC,EAAS,SAAA,EAAK,EAE5CC,EAAAA,gBAAgB,IAAMF,EAAW,EAAI,EAAG,CAAA,CAAE,EAE1C,MAAMG,EAAYN,GAAkBE,KAAWK,EAAA,YAAY,sCAAU,MACrE,OAAOD,EAAYE,EAAS,aAAaC,MAAA,MAAA,CAAA,GAASR,EAAa,IAAKF,IAAkBO,CAAS,EAAI,IACrG,CAAC,EAEDV,EAAO,YAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sources":["../../../../src/components/primitives/radio.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { Box, Circle, Flex } from '@styled/jsx';\nimport { flex } from '@styled/patterns';\nimport { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport {\n  AriaRadioGroupProps,\n  AriaRadioProps,\n  VisuallyHidden,\n  mergeProps,\n  useFocusRing,\n  useHover,\n  usePress,\n} from 'react-aria';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps {\n  children: React.ReactNode;\n  onChange: (value: string) => void;\n  selectedValue?: string;\n  vertical?: boolean;\n}\n\nexport interface RadioProps extends AriaRadioProps {\n  label?: string;\n}\n\nconst RadioContext = createContext<{\n  currentValue: string | undefined;\n  setCurrentValue: (value: string) => void;\n}>({\n  currentValue: undefined,\n  setCurrentValue: () => {},\n});\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n  const { children, onChange, selectedValue, vertical } = props;\n  const [currentValue, setCurrentValue] = useState<string | undefined>(selectedValue);\n\n  useEffect(() => {\n    if (selectedValue !== undefined) {\n      setCurrentValue(selectedValue);\n    }\n  }, [selectedValue]);\n\n  const handleSelect = useCallback(\n    (value: string) => {\n      setCurrentValue(value);\n      onChange(value);\n    },\n    [setCurrentValue, onChange],\n  );\n\n  return (\n    <Flex direction={vertical ? 'column' : 'row'} gap={vertical ? 5 : 10} role=\"radiogroup\">\n      <RadioContext.Provider value={{ currentValue, setCurrentValue: handleSelect }}>{children}</RadioContext.Provider>\n    </Flex>\n  );\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>((props, forwardedRef) => {\n  const { label, value } = props;\n  const state = useContext(RadioContext);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  const handlePress = useCallback(() => {\n    state.setCurrentValue(value);\n  }, [state, value]);\n\n  const { hoverProps } = useHover({});\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { pressProps } = usePress({\n    onPress: handlePress,\n  });\n\n  const isSelected = state.currentValue === value;\n\n  const tabIndex = isSelected ? 0 : -1;\n\n  return (\n    <label className={flex({ alignItems: 'center' })}>\n      <VisuallyHidden>\n        <input\n          {...mergeProps(pressProps, focusProps, hoverProps)}\n          ref={ref}\n          type=\"radio\"\n          checked={isSelected}\n          tabIndex={tabIndex}\n          readOnly\n        />\n      </VisuallyHidden>\n      <Flex\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        borderWidth=\"thick\"\n        borderColor={isFocusVisible || isSelected ? 'brand.base' : 'text.tertiary'}\n        transition=\"border-color 0.2s ease\"\n        outlineColor=\"brand.base\"\n        outlineStyle={isFocusVisible ? 'solid' : 'none'}\n        outlineWidth=\"thick\"\n        outlineOffset={0.5}\n        _hover={{ borderColor: 'brand.base' }}\n        cursor=\"pointer\"\n        w={6}\n        h={6}\n        rounded=\"full\"\n        aria-hidden=\"true\"\n      >\n        {isSelected && <Circle size={3} bg=\"brand.base\" />}\n      </Flex>\n      <Box ml={3}>\n        <Text size=\"lg\" styles={{ fontWeight: 500 }}>\n          {label}\n        </Text>\n      </Box>\n    </label>\n  );\n});\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"],"names":["RadioContext","createContext","RadioGroup","props","children","onChange","selectedValue","vertical","currentValue","setCurrentValue","useState","useEffect","handleSelect","useCallback","value","_jsx","Flex","Radio","forwardRef","forwardedRef","label","state","useContext","internalRef","useRef","ref","handlePress","hoverProps","useHover","focusProps","isFocusVisible","useFocusRing","pressProps","usePress","isSelected","tabIndex","_jsxs","flex","VisuallyHidden","mergeProps","Circle","Box","Text"],"mappings":"yKAyBA,MAAMA,EAAeC,EAAAA,cAGlB,CACD,aAAc,OACd,gBAAiB,IAAK,CACvB,CAAA,CAAA,EAEYC,EAAcC,GAA0B,CACnD,KAAM,CAAE,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,SAAAC,CAAQ,EAAKJ,EAClD,CAACK,EAAcC,CAAe,EAAIC,EAA6BJ,SAAAA,CAAa,EAElFK,EAAAA,UAAU,IAAK,CACTL,IAAkB,QACpBG,EAAgBH,CAAa,CAEjC,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMM,EAAeC,EAAAA,YAClBC,GAAiB,CAChBL,EAAgBK,CAAK,EACrBT,EAASS,CAAK,CAChB,EACA,CAACL,EAAiBJ,CAAQ,CAAC,EAG7B,OACEU,MAACC,EAAI,KAAA,CAAC,UAAWT,EAAW,SAAW,MAAO,IAAKA,EAAW,EAAI,GAAI,KAAK,aAAY,SACrFQ,EAACf,IAAAA,EAAa,SAAQ,CAAC,MAAO,CAAE,aAAAQ,EAAc,gBAAiBI,CAAY,WAAKR,CAAQ,CAAA,CACnF,CAAA,CAEX,EAEaa,EAAQC,EAAAA,WAAyC,CAACf,EAAOgB,IAAgB,CACpF,KAAM,CAAE,MAAAC,EAAO,MAAAN,CAAO,EAAGX,EACnBkB,EAAQC,EAAWtB,WAAAA,CAAY,EAE/BuB,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAMN,GAAgBI,EAEtBG,EAAcb,EAAAA,YAAY,IAAK,CACnCQ,EAAM,gBAAgBP,CAAK,CAC7B,EAAG,CAACO,EAAOP,CAAK,CAAC,EAEX,CAAE,WAAAa,CAAY,EAAGC,EAAAA,SAAS,CAAE,CAAA,EAC5B,CAAE,WAAAC,EAAY,eAAAC,GAAmBC,EAAAA,eACjC,CAAE,WAAAC,CAAY,EAAGC,EAAAA,SAAS,CAC9B,QAASP,CACV,CAAA,EAEKQ,EAAab,EAAM,eAAiBP,EAEpCqB,EAAWD,EAAa,EAAI,GAElC,OACEE,OAAO,QAAA,CAAA,UAAWC,EAAK,KAAA,CAAE,WAAY,SAAU,EAAC,SAAA,CAC9CtB,EAACuB,IAAAA,EAAAA,eAAc,CAAA,SACbvB,EAAAA,gBACMwB,EAAWP,WAAAA,EAAYH,EAAYF,CAAU,EACjD,IAAKF,EACL,KAAK,QACL,QAASS,EACT,SAAUC,EACV,aAEa,CAAA,EACjBpB,EAAAA,IAACC,EAAAA,KAAI,CACH,eAAe,SACf,WAAW,SACX,YAAY,QACZ,YAAac,GAAkBI,EAAa,aAAe,gBAC3D,WAAW,yBACX,aAAa,aACb,aAAcJ,EAAiB,QAAU,OACzC,aAAa,QACb,cAAe,GACf,OAAQ,CAAE,YAAa,cACvB,OAAO,UACP,EAAG,EACH,EAAG,EACH,QAAQ,qBACI,OAAM,SAEjBI,GAAcnB,EAACyB,IAAAA,EAAAA,OAAM,CAAC,KAAM,EAAG,GAAG,YAAY,CAAA,IAEjDzB,EAAC0B,IAAAA,EAAAA,IAAI,CAAA,GAAI,EAAC,SACR1B,EAAAA,IAAC2B,EAAAA,SAAK,KAAK,KAAK,OAAQ,CAAE,WAAY,KACnC,SAAAtB,GAEC,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAEDlB,EAAW,YAAc,aACzBe,EAAM,YAAc"}
+{"version":3,"file":"radio.js","sources":["../../../../src/components/primitives/radio.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { Box, Circle, Flex } from '@styled/jsx';\nimport { flex } from '@styled/patterns';\nimport {\n  PropsWithChildren,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  AriaRadioGroupProps,\n  AriaRadioProps,\n  VisuallyHidden,\n  mergeProps,\n  useFocusRing,\n  useHover,\n  usePress,\n} from 'react-aria';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, PropsWithChildren {\n  onChange: (value: string) => void;\n  selectedValue?: string;\n  vertical?: boolean;\n}\n\nexport interface RadioProps extends AriaRadioProps {\n  label?: string;\n}\n\nconst RadioContext = createContext<{\n  currentValue: string | undefined;\n  setCurrentValue: (value: string) => void;\n}>({\n  currentValue: undefined,\n  setCurrentValue: () => {},\n});\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n  const { children, onChange, selectedValue, vertical } = props;\n  const [currentValue, setCurrentValue] = useState<string | undefined>(selectedValue);\n\n  useEffect(() => {\n    if (selectedValue !== undefined) {\n      setCurrentValue(selectedValue);\n    }\n  }, [selectedValue]);\n\n  const handleSelect = useCallback(\n    (value: string) => {\n      setCurrentValue(value);\n      onChange(value);\n    },\n    [setCurrentValue, onChange],\n  );\n\n  return (\n    <Flex direction={vertical ? 'column' : 'row'} gap={vertical ? 5 : 10} role=\"radiogroup\">\n      <RadioContext.Provider value={{ currentValue, setCurrentValue: handleSelect }}>{children}</RadioContext.Provider>\n    </Flex>\n  );\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>((props, forwardedRef) => {\n  const { label, value } = props;\n  const state = useContext(RadioContext);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  const handlePress = useCallback(() => {\n    state.setCurrentValue(value);\n  }, [state, value]);\n\n  const { hoverProps } = useHover({});\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { pressProps } = usePress({\n    onPress: handlePress,\n  });\n\n  const isSelected = state.currentValue === value;\n\n  const tabIndex = isSelected ? 0 : -1;\n\n  return (\n    <label className={flex({ alignItems: 'center' })}>\n      <VisuallyHidden>\n        <input\n          {...mergeProps(pressProps, focusProps, hoverProps)}\n          ref={ref}\n          type=\"radio\"\n          checked={isSelected}\n          tabIndex={tabIndex}\n          readOnly\n        />\n      </VisuallyHidden>\n      <Flex\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        borderWidth=\"thick\"\n        borderColor={isFocusVisible || isSelected ? 'brand.base' : 'text.tertiary'}\n        transition=\"border-color 0.2s ease\"\n        outlineColor=\"brand.base\"\n        outlineStyle={isFocusVisible ? 'solid' : 'none'}\n        outlineWidth=\"thick\"\n        outlineOffset={0.5}\n        _hover={{ borderColor: 'brand.base' }}\n        cursor=\"pointer\"\n        w={6}\n        h={6}\n        rounded=\"full\"\n        aria-hidden=\"true\"\n      >\n        {isSelected && <Circle size={3} bg=\"brand.base\" />}\n      </Flex>\n      <Box ml={3}>\n        <Text size=\"lg\" styles={{ fontWeight: 500 }}>\n          {label}\n        </Text>\n      </Box>\n    </label>\n  );\n});\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"],"names":["RadioContext","createContext","RadioGroup","props","children","onChange","selectedValue","vertical","currentValue","setCurrentValue","useState","useEffect","handleSelect","useCallback","value","_jsx","Flex","Radio","forwardRef","forwardedRef","label","state","useContext","internalRef","useRef","ref","handlePress","hoverProps","useHover","focusProps","isFocusVisible","useFocusRing","pressProps","usePress","isSelected","tabIndex","_jsxs","flex","VisuallyHidden","mergeProps","Circle","Box","Text"],"mappings":"yKAiCA,MAAMA,EAAeC,EAAAA,cAGlB,CACD,aAAc,OACd,gBAAiB,IAAK,CACvB,CAAA,CAAA,EAEYC,EAAcC,GAA0B,CACnD,KAAM,CAAE,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,SAAAC,CAAQ,EAAKJ,EAClD,CAACK,EAAcC,CAAe,EAAIC,EAA6BJ,SAAAA,CAAa,EAElFK,EAAAA,UAAU,IAAK,CACTL,IAAkB,QACpBG,EAAgBH,CAAa,CAEjC,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMM,EAAeC,EAAAA,YAClBC,GAAiB,CAChBL,EAAgBK,CAAK,EACrBT,EAASS,CAAK,CAChB,EACA,CAACL,EAAiBJ,CAAQ,CAAC,EAG7B,OACEU,MAACC,EAAI,KAAA,CAAC,UAAWT,EAAW,SAAW,MAAO,IAAKA,EAAW,EAAI,GAAI,KAAK,aAAY,SACrFQ,EAACf,IAAAA,EAAa,SAAQ,CAAC,MAAO,CAAE,aAAAQ,EAAc,gBAAiBI,CAAY,WAAKR,CAAQ,CAAA,CACnF,CAAA,CAEX,EAEaa,EAAQC,EAAAA,WAAyC,CAACf,EAAOgB,IAAgB,CACpF,KAAM,CAAE,MAAAC,EAAO,MAAAN,CAAO,EAAGX,EACnBkB,EAAQC,EAAWtB,WAAAA,CAAY,EAE/BuB,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAMN,GAAgBI,EAEtBG,EAAcb,EAAAA,YAAY,IAAK,CACnCQ,EAAM,gBAAgBP,CAAK,CAC7B,EAAG,CAACO,EAAOP,CAAK,CAAC,EAEX,CAAE,WAAAa,CAAY,EAAGC,EAAAA,SAAS,CAAE,CAAA,EAC5B,CAAE,WAAAC,EAAY,eAAAC,GAAmBC,EAAAA,eACjC,CAAE,WAAAC,CAAY,EAAGC,EAAAA,SAAS,CAC9B,QAASP,CACV,CAAA,EAEKQ,EAAab,EAAM,eAAiBP,EAEpCqB,EAAWD,EAAa,EAAI,GAElC,OACEE,OAAO,QAAA,CAAA,UAAWC,EAAK,KAAA,CAAE,WAAY,SAAU,EAAC,SAAA,CAC9CtB,EAACuB,IAAAA,EAAAA,eAAc,CAAA,SACbvB,EAAAA,gBACMwB,EAAWP,WAAAA,EAAYH,EAAYF,CAAU,EACjD,IAAKF,EACL,KAAK,QACL,QAASS,EACT,SAAUC,EACV,aAEa,CAAA,EACjBpB,EAAAA,IAACC,EAAAA,KAAI,CACH,eAAe,SACf,WAAW,SACX,YAAY,QACZ,YAAac,GAAkBI,EAAa,aAAe,gBAC3D,WAAW,yBACX,aAAa,aACb,aAAcJ,EAAiB,QAAU,OACzC,aAAa,QACb,cAAe,GACf,OAAQ,CAAE,YAAa,cACvB,OAAO,UACP,EAAG,EACH,EAAG,EACH,QAAQ,qBACI,OAAM,SAEjBI,GAAcnB,EAACyB,IAAAA,EAAAA,OAAM,CAAC,KAAM,EAAG,GAAG,YAAY,CAAA,IAEjDzB,EAAC0B,IAAAA,EAAAA,IAAI,CAAA,GAAI,EAAC,SACR1B,EAAAA,IAAC2B,EAAAA,SAAK,KAAK,KAAK,OAAQ,CAAE,WAAY,KACnC,SAAAtB,GAEC,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAEDlB,EAAW,YAAc,aACzBe,EAAM,YAAc"}

package/dist/cjs/components/primitives/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","sources":["../../../../src/components/primitives/segmented-control.tsx"],"sourcesContent":["import { css } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, {\n  Children,\n  RefObject,\n  cloneElement,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useHover } from 'react-aria';\n\nexport interface SegmentedControlProps {\n  children: React.ReactNode;\n  onChange: (value: string) => void;\n  selectedTab: string;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport interface TabProps extends AriaButtonProps {\n  label: string;\n  id: string;\n}\n\ntype TabRefs = {\n  [key: string]: HTMLButtonElement | null;\n};\n\nconst SegmentedControlContext = createContext<{\n  currentTab: string | undefined;\n  setCurrentTab: (id: string) => void;\n  size?: 'sm' | 'md' | 'lg';\n  tabRefs: RefObject<TabRefs>;\n}>({\n  currentTab: undefined,\n  setCurrentTab: () => {},\n  tabRefs: { current: {} },\n});\n\nconst Icon = 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\nexport const SegmentedControl = (props: SegmentedControlProps) => {\n  const { children, onChange, selectedTab, size = 'md' } = props;\n  const [currentTab, setCurrentTab] = useState(selectedTab);\n  const tabRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});\n  const observer = useRef<ResizeObserver>();\n  const [indicatorStyle, setIndicatorStyle] = useState({ transform: 'translateX(4px)', width: '', height: '' });\n\n  useEffect(() => {\n    if (selectedTab !== undefined) {\n      setCurrentTab(selectedTab);\n    }\n  }, [selectedTab]);\n\n  useEffect(() => {\n    if (!observer.current) {\n      observer.current = new ResizeObserver(() => {\n        const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n        setIndicatorStyle({\n          transform: `translateX(${offsetLeft}px)`,\n          width: `${clientWidth}px`,\n          height: `${clientHeight}px`,\n        });\n      });\n    }\n\n    observer.current.observe(tabRefs.current[currentTab]!);\n\n    return () => {\n      if (observer.current && tabRefs.current[currentTab]) {\n        observer.current.unobserve(tabRefs.current[currentTab]!);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    if (currentTab && tabRefs.current[currentTab]) {\n      const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n      setIndicatorStyle({\n        transform: `translateX(${offsetLeft}px)`,\n        width: `${clientWidth}px`,\n        height: `${clientHeight}px`,\n      });\n    }\n  }, [currentTab, size]);\n\n  const handleSelect = useCallback(\n    (id: string) => {\n      setCurrentTab(id);\n      onChange(id);\n    },\n    [setCurrentTab, onChange],\n  );\n\n  return (\n    <Flex\n      w=\"full\"\n      role=\"tablist\"\n      p={1}\n      rounded=\"full\"\n      bg=\"ink.10\"\n      _dark={{ bg: 'slate.2' }}\n      aria-label=\"Segmented Control\"\n      position=\"relative\"\n    >\n      <Box\n        position=\"absolute\"\n        bg=\"paper\"\n        _dark={{ bg: 'slate.4' }}\n        boxShadow=\"0px 4px 20px 0px {colors.ink.90/10}\"\n        transition=\"transform 0.2s ease\"\n        rounded=\"inherit\"\n        ml={-1}\n        style={{ ...indicatorStyle }}\n      />\n      <SegmentedControlContext.Provider value={{ currentTab, setCurrentTab: handleSelect, size, tabRefs }}>\n        {children}\n      </SegmentedControlContext.Provider>\n    </Flex>\n  );\n};\n\nconst TabComponent = forwardRef<HTMLButtonElement, TabProps>((props, forwardedRef) => {\n  const { label, id } = props;\n  const { currentTab, setCurrentTab, tabRefs, size } = useContext(SegmentedControlContext);\n\n  const isSelected = currentTab === id;\n  const height = size === 'sm' ? 8 : size === 'md' ? 10 : 13;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef<HTMLButtonElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  useEffect(() => {\n    if (typeof ref === 'object' && tabRefs.current) {\n      tabRefs.current[id] = ref.current;\n    }\n  }, [id]);\n\n  const handlePress = useCallback(() => {\n    setCurrentTab(id);\n  }, [setCurrentTab, id]);\n\n  const { buttonProps, isPressed } = useButton({ onPress: handlePress }, ref as React.RefObject<HTMLButtonElement>);\n  const { hoverProps } = useHover({});\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const icon = slots.get(Icon);\n\n    return (\n      <button\n        className={css({\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          h: height,\n          w: 'full',\n          rounded: 'button',\n          zIndex: 0,\n          cursor: 'pointer',\n          color: isSelected ? 'text.primary' : 'text.secondary',\n          fontSize: size,\n          fontWeight: 'semibold',\n          whiteSpace: 'nowrap',\n          bg: 'transparent',\n          outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n          outlineStyle: 'solid',\n          outlineWidth: 'thick',\n          transition: isSelected ? 'background 0s' : 'background 0.2s ease',\n          _hover: {\n            bg: isSelected ? 'transparent' : 'ink.20',\n            _dark: { bg: isSelected ? 'transparent' : 'slate.1' },\n          },\n        })}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n      >\n        <Flex opacity={isPressed && !isSelected ? 0.5 : 1} align=\"center\" justify=\"center\">\n          {icon && {\n            ...icon,\n            props: {\n              ...icon.props,\n              className: css({ mr: 1, color: isSelected ? 'text.primary' : 'text.secondary' }),\n              width: iconSize,\n              height: iconSize,\n            },\n          }}\n          {label}\n        </Flex>\n      </button>\n    );\n  });\n});\n\nexport const Tab = Object.assign(TabComponent, {\n  Icon,\n});\n\nTabComponent.displayName = 'Tab';\nSegmentedControl.displayName = 'SegmentedControl';\n"],"names":["SegmentedControlContext","createContext","Icon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","SegmentedControl","onChange","selectedTab","size","currentTab","setCurrentTab","useState","tabRefs","useRef","observer","indicatorStyle","setIndicatorStyle","useEffect","offsetLeft","clientWidth","clientHeight","handleSelect","useCallback","id","_jsxs","Box","TabComponent","forwardRef","forwardedRef","label","useContext","isSelected","height","iconSize","internalRef","ref","handlePress","buttonProps","isPressed","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","icon","css","mergeProps","Tab"],"mappings":"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"}
+{"version":3,"file":"segmented-control.js","sources":["../../../../src/components/primitives/segmented-control.tsx"],"sourcesContent":["import { css } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, {\n  Children,\n  PropsWithChildren,\n  RefObject,\n  cloneElement,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useHover } from 'react-aria';\n\nexport interface SegmentedControlProps extends PropsWithChildren {\n  onChange: (value: string) => void;\n  selectedTab: string;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport interface TabProps extends AriaButtonProps {\n  label: string;\n  id: string;\n}\n\ntype TabRefs = {\n  [key: string]: HTMLButtonElement | null;\n};\n\nconst SegmentedControlContext = createContext<{\n  currentTab: string | undefined;\n  setCurrentTab: (id: string) => void;\n  size?: 'sm' | 'md' | 'lg';\n  tabRefs: RefObject<TabRefs>;\n}>({\n  currentTab: undefined,\n  setCurrentTab: () => {},\n  tabRefs: { current: {} },\n});\n\nconst Icon = 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\nexport const SegmentedControl = (props: SegmentedControlProps) => {\n  const { children, onChange, selectedTab, size = 'md' } = props;\n  const [currentTab, setCurrentTab] = useState(selectedTab);\n  const tabRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});\n  const observer = useRef<ResizeObserver>();\n  const [indicatorStyle, setIndicatorStyle] = useState({ transform: 'translateX(4px)', width: '', height: '' });\n\n  useEffect(() => {\n    if (selectedTab !== undefined) {\n      setCurrentTab(selectedTab);\n    }\n  }, [selectedTab]);\n\n  useEffect(() => {\n    if (!observer.current) {\n      observer.current = new ResizeObserver(() => {\n        const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n        setIndicatorStyle({\n          transform: `translateX(${offsetLeft}px)`,\n          width: `${clientWidth}px`,\n          height: `${clientHeight}px`,\n        });\n      });\n    }\n\n    observer.current.observe(tabRefs.current[currentTab]!);\n\n    return () => {\n      if (observer.current && tabRefs.current[currentTab]) {\n        observer.current.unobserve(tabRefs.current[currentTab]!);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    if (currentTab && tabRefs.current[currentTab]) {\n      const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n      setIndicatorStyle({\n        transform: `translateX(${offsetLeft}px)`,\n        width: `${clientWidth}px`,\n        height: `${clientHeight}px`,\n      });\n    }\n  }, [currentTab, size]);\n\n  const handleSelect = useCallback(\n    (id: string) => {\n      setCurrentTab(id);\n      onChange(id);\n    },\n    [setCurrentTab, onChange],\n  );\n\n  return (\n    <Flex\n      w=\"full\"\n      role=\"tablist\"\n      p={1}\n      rounded=\"full\"\n      bg=\"ink.10\"\n      _dark={{ bg: 'slate.2' }}\n      aria-label=\"Segmented Control\"\n      position=\"relative\"\n    >\n      <Box\n        position=\"absolute\"\n        bg=\"paper\"\n        _dark={{ bg: 'slate.4' }}\n        boxShadow=\"0px 4px 20px 0px {colors.ink.90/10}\"\n        transition=\"transform 0.2s ease\"\n        rounded=\"inherit\"\n        ml={-1}\n        style={{ ...indicatorStyle }}\n      />\n      <SegmentedControlContext.Provider value={{ currentTab, setCurrentTab: handleSelect, size, tabRefs }}>\n        {children}\n      </SegmentedControlContext.Provider>\n    </Flex>\n  );\n};\n\nconst TabComponent = forwardRef<HTMLButtonElement, TabProps>((props, forwardedRef) => {\n  const { label, id } = props;\n  const { currentTab, setCurrentTab, tabRefs, size } = useContext(SegmentedControlContext);\n\n  const isSelected = currentTab === id;\n  const height = size === 'sm' ? 8 : size === 'md' ? 10 : 13;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef<HTMLButtonElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  useEffect(() => {\n    if (typeof ref === 'object' && tabRefs.current) {\n      tabRefs.current[id] = ref.current;\n    }\n  }, [id]);\n\n  const handlePress = useCallback(() => {\n    setCurrentTab(id);\n  }, [setCurrentTab, id]);\n\n  const { buttonProps, isPressed } = useButton({ onPress: handlePress }, ref as React.RefObject<HTMLButtonElement>);\n  const { hoverProps } = useHover({});\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const icon = slots.get(Icon);\n\n    return (\n      <button\n        className={css({\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          h: height,\n          w: 'full',\n          rounded: 'button',\n          zIndex: 0,\n          cursor: 'pointer',\n          color: isSelected ? 'text.primary' : 'text.secondary',\n          fontSize: size,\n          fontWeight: 'semibold',\n          whiteSpace: 'nowrap',\n          bg: 'transparent',\n          outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n          outlineStyle: 'solid',\n          outlineWidth: 'thick',\n          transition: isSelected ? 'background 0s' : 'background 0.2s ease',\n          _hover: {\n            bg: isSelected ? 'transparent' : 'ink.20',\n            _dark: { bg: isSelected ? 'transparent' : 'slate.1' },\n          },\n        })}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n      >\n        <Flex opacity={isPressed && !isSelected ? 0.5 : 1} align=\"center\" justify=\"center\">\n          {icon && {\n            ...icon,\n            props: {\n              ...icon.props,\n              className: css({ mr: 1, color: isSelected ? 'text.primary' : 'text.secondary' }),\n              width: iconSize,\n              height: iconSize,\n            },\n          }}\n          {label}\n        </Flex>\n      </button>\n    );\n  });\n});\n\nexport const Tab = Object.assign(TabComponent, {\n  Icon,\n});\n\nTabComponent.displayName = 'Tab';\nSegmentedControl.displayName = 'SegmentedControl';\n"],"names":["SegmentedControlContext","createContext","Icon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","SegmentedControl","onChange","selectedTab","size","currentTab","setCurrentTab","useState","tabRefs","useRef","observer","indicatorStyle","setIndicatorStyle","useEffect","offsetLeft","clientWidth","clientHeight","handleSelect","useCallback","id","_jsxs","Box","TabComponent","forwardRef","forwardedRef","label","useContext","isSelected","height","iconSize","internalRef","ref","handlePress","buttonProps","isPressed","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","icon","css","mergeProps","Tab"],"mappings":"uKAiCA,MAAMA,EAA0BC,EAAAA,cAK7B,CACD,WAAY,OACZ,cAAe,IAAK,GACpB,QAAS,CAAE,QAAS,CAAI,CAAA,CACzB,CAAA,EAEKC,EAAOC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAE3CC,EAACC,IAAAA,EAAAA,KAAI,CAAC,WAAW,SAAS,eAAe,SACtC,SAAAC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAAA,aAAaD,EAAOJ,CAAK,CACjC,CACI,CAAA,CAEV,EAEYM,EAAoBN,GAAgC,CAC/D,KAAM,CAAE,SAAAD,EAAU,SAAAQ,EAAU,YAAAC,EAAa,KAAAC,EAAO,IAAM,EAAGT,EACnD,CAACU,EAAYC,CAAa,EAAIC,EAAAA,SAASJ,CAAW,EAClDK,EAAUC,EAAoD,OAAA,CAAE,CAAA,EAChEC,EAAWD,EAAM,OAAA,EACjB,CAACE,EAAgBC,CAAiB,EAAIL,EAAAA,SAAS,CAAE,UAAW,kBAAmB,MAAO,GAAI,OAAQ,EAAI,CAAA,EAE5GM,EAAAA,UAAU,IAAK,CACTV,IAAgB,QAClBG,EAAcH,CAAW,CAE7B,EAAG,CAACA,CAAW,CAAC,EAEhBU,EAAU,UAAA,KACHH,EAAS,UACZA,EAAS,QAAU,IAAI,eAAe,IAAK,CACzC,KAAM,CAAE,WAAAI,EAAY,YAAAC,EAAa,aAAAC,CAAY,EAAKR,EAAQ,QAAQH,CAAU,EAC5EO,EAAkB,CAChB,UAAW,cAAcE,CAAU,MACnC,MAAO,GAAGC,CAAW,KACrB,OAAQ,GAAGC,CAAY,IACxB,CAAA,CACH,CAAC,GAGHN,EAAS,QAAQ,QAAQF,EAAQ,QAAQH,CAAU,CAAE,EAE9C,IAAK,CACNK,EAAS,SAAWF,EAAQ,QAAQH,CAAU,GAChDK,EAAS,QAAQ,UAAUF,EAAQ,QAAQH,CAAU,CAAE,CAE3D,GACC,CAAA,CAAE,EAELQ,EAAAA,UAAU,IAAK,CACb,GAAIR,GAAcG,EAAQ,QAAQH,CAAU,EAAG,CAC7C,KAAM,CAAE,WAAAS,EAAY,YAAAC,EAAa,aAAAC,CAAY,EAAKR,EAAQ,QAAQH,CAAU,EAC5EO,EAAkB,CAChB,UAAW,cAAcE,CAAU,MACnC,MAAO,GAAGC,CAAW,KACrB,OAAQ,GAAGC,CAAY,IACxB,CAAA,CACH,CACF,EAAG,CAACX,EAAYD,CAAI,CAAC,EAErB,MAAMa,EAAeC,EAAAA,YAClBC,GAAc,CACbb,EAAca,CAAE,EAChBjB,EAASiB,CAAE,CACb,EACA,CAACb,EAAeJ,CAAQ,CAAC,EAG3B,OACEkB,EAAAA,KAACvB,EAAAA,KAAI,CACH,EAAE,OACF,KAAK,UACL,EAAG,EACH,QAAQ,OACR,GAAG,SACH,MAAO,CAAE,GAAI,SAAS,eACX,oBACX,SAAS,WAAU,SAAA,CAEnBD,MAACyB,EAAAA,IAAG,CACF,SAAS,WACT,GAAG,QACH,MAAO,CAAE,GAAI,WACb,UAAU,sCACV,WAAW,sBACX,QAAQ,UACR,GAAI,GACJ,MAAO,CAAE,GAAGV,EACZ,CAAA,EACFf,EAAAA,IAACN,EAAwB,UAAS,MAAO,CAAE,WAAAe,EAAY,cAAeY,EAAc,KAAAb,EAAM,QAAAI,CAAO,WAC9Fd,CAAQ,CAAA,CACwB,CAC9B,CAAA,CAEX,EAEM4B,EAAeC,EAAAA,WAAwC,CAAC5B,EAAO6B,IAAgB,CACnF,KAAM,CAAE,MAAAC,EAAO,GAAAN,CAAI,EAAGxB,EAChB,CAAE,WAAAU,EAAY,cAAAC,EAAe,QAAAE,EAAS,KAAAJ,CAAI,EAAKsB,EAAAA,WAAWpC,CAAuB,EAEjFqC,EAAatB,IAAec,EAC5BS,EAASxB,IAAS,KAAO,EAAIA,IAAS,KAAO,GAAK,GAClDyB,EAAWzB,IAAS,KAAO,GAAK,GAEhC0B,EAAcrB,EAAAA,OAA0B,IAAI,EAC5CsB,EAAMP,GAAgBM,EAE5BjB,EAAAA,UAAU,IAAK,CACT,OAAOkB,GAAQ,UAAYvB,EAAQ,UACrCA,EAAQ,QAAQW,CAAE,EAAIY,EAAI,QAE9B,EAAG,CAACZ,CAAE,CAAC,EAEP,MAAMa,EAAcd,EAAAA,YAAY,IAAK,CACnCZ,EAAca,CAAE,CAClB,EAAG,CAACb,EAAea,CAAE,CAAC,EAEhB,CAAE,YAAAc,EAAa,UAAAC,CAAS,EAAKC,EAAAA,UAAU,CAAE,QAASH,CAAW,EAAID,CAAyC,EAC1G,CAAE,WAAAK,CAAY,EAAGC,EAAAA,SAAS,CAAA,CAAE,EAC5B,CAAE,eAAAC,EAAgB,WAAAC,GAAeC,EAAAA,eAEvC,OAAOC,EAAAA,WAAW9C,EAAM,SAAU+C,GAAQ,CACxC,MAAMC,EAAOD,EAAM,IAAIlD,CAAI,EAE3B,OACEI,EAAAA,IAAA,SAAA,CACE,UAAWgD,EAAAA,IAAI,CACb,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,EAAGhB,EACH,EAAG,OACH,QAAS,SACT,OAAQ,EACR,OAAQ,UACR,MAAOD,EAAa,eAAiB,iBACrC,SAAUvB,EACV,WAAY,WACZ,WAAY,SACZ,GAAI,cACJ,aAAckC,EAAiB,aAAe,cAC9C,aAAc,QACd,aAAc,QACd,WAAYX,EAAa,gBAAkB,uBAC3C,OAAQ,CACN,GAAIA,EAAa,cAAgB,SACjC,MAAO,CAAE,GAAIA,EAAa,cAAgB,SAAW,CACtD,CACF,CAAA,EACD,IAAKI,EACD,GAAAc,aAAWZ,EAAaG,EAAYG,CAAU,EAAC,SAEnDnB,EAAAA,KAACvB,EAAAA,KAAI,CAAC,QAASqC,GAAa,CAACP,EAAa,GAAM,EAAG,MAAM,SAAS,QAAQ,SAAQ,SAAA,CAC/EgB,GAAQ,CACP,GAAGA,EACH,MAAO,CACL,GAAGA,EAAK,MACR,UAAWC,EAAI,IAAA,CAAE,GAAI,EAAG,MAAOjB,EAAa,eAAiB,iBAAkB,EAC/E,MAAOE,EACP,OAAQA,CACT,CACF,EACAJ,CAAK,CAAA,CAAA,CAED,CAAA,CAEb,CAAC,CACH,CAAC,EAEYqB,EAAM,OAAO,OAAOxB,EAAc,CAC7C,KAAA9B,CACD,CAAA,EAED8B,EAAa,YAAc,MAC3BrB,EAAiB,YAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../../src/components/primitives/text.tsx"],"sourcesContent":["import { text } from '@recipes/text';\nimport { css } from '@styled/css';\nimport { CSSProperties, ReactNode, forwardRef } from 'react';\n\nexport type TextStyles = {\n  color?: CSSProperties['color'];\n  fontWeight?: CSSProperties['fontWeight'];\n  fontSize?: CSSProperties['fontSize'];\n  lineHeight?: CSSProperties['lineHeight'];\n  letterSpacing?: CSSProperties['letterSpacing'];\n  textAlign?: CSSProperties['textAlign'];\n  textDecoration?: CSSProperties['textDecoration'];\n  textTransform?: CSSProperties['textTransform'];\n};\n\nexport interface TextProps {\n  children: ReactNode;\n  styles?: TextStyles;\n  scale?: boolean;\n}\n\nexport interface BodyProps extends TextProps {\n  inline?: boolean;\n  variant?: 'text' | 'error' | 'info' | 'success' | 'warning';\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  truncate?: boolean;\n}\n\nconst defaultColor = { color: 'text.primary' };\n\nconst TextH1 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h1 ref={ref} className={css({ textStyle: scale ? 'h1-scaled' : 'h1', ...defaultColor })} style={styles}>\n    {children}\n  </h1>\n));\n\nconst TextH2 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h2 ref={ref} className={css({ textStyle: scale ? 'h2-scaled' : 'h2', ...defaultColor })} style={styles}>\n    {children}\n  </h2>\n));\n\nconst TextH3 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h3 ref={ref} className={css({ textStyle: scale ? 'h3-scaled' : 'h3', ...defaultColor })} style={styles}>\n    {children}\n  </h3>\n));\n\nconst TextH4 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h4 ref={ref} className={css({ textStyle: scale ? 'h4-scaled' : 'h4', ...defaultColor })} style={styles}>\n    {children}\n  </h4>\n));\n\nconst TextH5 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h5 ref={ref} className={css({ textStyle: scale ? 'h5-scaled' : 'h5', ...defaultColor })} style={styles}>\n    {children}\n  </h5>\n));\n\nconst TextH6 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h6 ref={ref} className={css({ textStyle: scale ? 'h6-scaled' : 'h6', color: 'text.secondary' })} style={styles}>\n    {children}\n  </h6>\n));\n\nconst TextMono = forwardRef<HTMLParagraphElement, BodyProps>(\n  ({ children, styles = {}, variant = 'text', size = 'md', truncate = false }, ref) => {\n    const classStyles = text({ mono: true, variant, size });\n\n    return (\n      <span ref={ref} className={`${classStyles} ${css({ truncate })}`} style={styles}>\n        {children}\n      </span>\n    );\n  },\n);\n\nconst Body = forwardRef<HTMLParagraphElement, BodyProps>(\n  ({ children, styles = {}, scale, inline = false, variant = 'text', size = 'md', truncate = false }, ref) => {\n    const classStyles = text({ variant, size, scale });\n    const bodyProps = {\n      ref,\n      className: `${classStyles} ${css({ truncate })}`,\n      style: styles,\n    };\n\n    if (inline) {\n      return <span {...bodyProps}>{children}</span>;\n    }\n\n    return <p {...bodyProps}>{children}</p>;\n  },\n);\n\nconst Text = Object.assign(Body, {\n  H1: TextH1,\n  H2: TextH2,\n  H3: TextH3,\n  H4: TextH4,\n  H5: TextH5,\n  H6: TextH6,\n  Mono: TextMono,\n});\n\nBody.displayName = 'Text';\nTextH1.displayName = 'Text.H1';\nTextH2.displayName = 'Text.H2';\nTextH3.displayName = 'Text.H3';\nTextH4.displayName = 'Text.H4';\nTextH5.displayName = 'Text.H5';\nTextH6.displayName = 'Text.H6';\nTextMono.displayName = 'Text.Mono';\n\nexport default Text;\n"],"names":["defaultColor","TextH1","forwardRef","children","styles","scale","ref","_jsx","css","TextH2","TextH3","TextH4","TextH5","TextH6","TextMono","variant","size","truncate","classStyles","text","Body","inline","bodyProps","Text"],"mappings":"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"}
+{"version":3,"file":"text.js","sources":["../../../../src/components/primitives/text.tsx"],"sourcesContent":["import { text } from '@recipes/text';\nimport { css } from '@styled/css';\nimport { CSSProperties, PropsWithChildren, forwardRef } from 'react';\n\nexport type TextStyles = {\n  color?: CSSProperties['color'];\n  fontWeight?: CSSProperties['fontWeight'];\n  fontSize?: CSSProperties['fontSize'];\n  lineHeight?: CSSProperties['lineHeight'];\n  letterSpacing?: CSSProperties['letterSpacing'];\n  textAlign?: CSSProperties['textAlign'];\n  textDecoration?: CSSProperties['textDecoration'];\n  textTransform?: CSSProperties['textTransform'];\n};\n\nexport interface TextProps extends PropsWithChildren {\n  styles?: TextStyles;\n  scale?: boolean;\n}\n\nexport interface BodyProps extends TextProps {\n  inline?: boolean;\n  variant?: 'text' | 'error' | 'info' | 'success' | 'warning';\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  truncate?: boolean;\n}\n\nconst defaultColor = { color: 'text.primary' };\n\nconst TextH1 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h1 ref={ref} className={css({ textStyle: scale ? 'h1-scaled' : 'h1', ...defaultColor })} style={styles}>\n    {children}\n  </h1>\n));\n\nconst TextH2 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h2 ref={ref} className={css({ textStyle: scale ? 'h2-scaled' : 'h2', ...defaultColor })} style={styles}>\n    {children}\n  </h2>\n));\n\nconst TextH3 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h3 ref={ref} className={css({ textStyle: scale ? 'h3-scaled' : 'h3', ...defaultColor })} style={styles}>\n    {children}\n  </h3>\n));\n\nconst TextH4 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h4 ref={ref} className={css({ textStyle: scale ? 'h4-scaled' : 'h4', ...defaultColor })} style={styles}>\n    {children}\n  </h4>\n));\n\nconst TextH5 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h5 ref={ref} className={css({ textStyle: scale ? 'h5-scaled' : 'h5', ...defaultColor })} style={styles}>\n    {children}\n  </h5>\n));\n\nconst TextH6 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h6 ref={ref} className={css({ textStyle: scale ? 'h6-scaled' : 'h6', color: 'text.secondary' })} style={styles}>\n    {children}\n  </h6>\n));\n\nconst TextMono = forwardRef<HTMLParagraphElement, BodyProps>(\n  ({ children, styles = {}, variant = 'text', size = 'md', truncate = false }, ref) => {\n    const classStyles = text({ mono: true, variant, size });\n\n    return (\n      <span ref={ref} className={`${classStyles} ${css({ truncate })}`} style={styles}>\n        {children}\n      </span>\n    );\n  },\n);\n\nconst Body = forwardRef<HTMLParagraphElement, BodyProps>(\n  ({ children, styles = {}, scale, inline = false, variant = 'text', size = 'md', truncate = false }, ref) => {\n    const classStyles = text({ variant, size, scale });\n    const bodyProps = {\n      ref,\n      className: `${classStyles} ${css({ truncate })}`,\n      style: styles,\n    };\n\n    if (inline) {\n      return <span {...bodyProps}>{children}</span>;\n    }\n\n    return <p {...bodyProps}>{children}</p>;\n  },\n);\n\nconst Text = Object.assign(Body, {\n  H1: TextH1,\n  H2: TextH2,\n  H3: TextH3,\n  H4: TextH4,\n  H5: TextH5,\n  H6: TextH6,\n  Mono: TextMono,\n});\n\nBody.displayName = 'Text';\nTextH1.displayName = 'Text.H1';\nTextH2.displayName = 'Text.H2';\nTextH3.displayName = 'Text.H3';\nTextH4.displayName = 'Text.H4';\nTextH5.displayName = 'Text.H5';\nTextH6.displayName = 'Text.H6';\nTextMono.displayName = 'Text.Mono';\n\nexport default Text;\n"],"names":["defaultColor","TextH1","forwardRef","children","styles","scale","ref","_jsx","css","TextH2","TextH3","TextH4","TextH5","TextH6","TextMono","variant","size","truncate","classStyles","text","Body","inline","bodyProps","Text"],"mappings":"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"}

package/dist/cjs/components/sections/verify-pincode.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("../feedback/callout.js");var j=require("../feedback/loading-spinner.js");require("../feedback/tooltip.js");var m=require("@styled/tokens"),v=require("../icons/ico-checkmark-circle-fill.js");require("../inputs/phone-input.js");var C=require("../inputs/pincode-input.js");require("../inputs/text-input.js"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var k=require("../primitives/text.js"),n=require("@styled/jsx"),t=require("create-slots");const o=t.createSlot(({children:r})=>r),S=r=>{const{isPending:s,isSuccess:a,onChange:u,onComplete:c,originName:d,pinLength:l,id:q,autoFocus:g,errorMessage:i,children:h}=r,p=()=>s?e.jsx(j.LoadingSpinner,{size:36,strokeWidth:4}):a?e.jsx(v.default,{color:m.token("colors.brand.base"),width:36,height:36}):e.jsx(C.PinCodeInput,{originName:d,onChange:u,pinLength:l,onComplete:c,id:q,autoFocus:g});return t.createHost(h,x=>e.jsxs(n.VStack,{gap:3,my:3,children:[e.jsx(n.Center,{height:12,children:p()}),i&&e.jsx(k.default,{variant:"error",size:"sm",styles:{textAlign:"center"},children:i}),x.get(o)]}))},y=Object.assign(S,{RetryContent:o});exports.VerifyPincode=y;
+"use strict";var e=require("react/jsx-runtime");require("../feedback/callout.js");var j=require("../feedback/loading-spinner.js"),m=require("@styled/tokens"),v=require("../icons/ico-checkmark-circle-fill.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var C=require("../primitives/text.js");require("../primitives/portal.js"),require("react"),require("../../hooks/useToast.js"),require("../../recipes/toast.js");var n=require("@styled/jsx");require("../feedback/tooltip.js"),require("../inputs/phone-input.js");var k=require("../inputs/pincode-input.js");require("../inputs/text-input.js");var t=require("create-slots");const o=t.createSlot(({children:r})=>r),S=r=>{const{isPending:s,isSuccess:u,onChange:a,onComplete:c,originName:q,pinLength:d,id:l,autoFocus:g,errorMessage:i,children:h}=r,p=()=>s?e.jsx(j.LoadingSpinner,{size:36,strokeWidth:4}):u?e.jsx(v.default,{color:m.token("colors.brand.base"),width:36,height:36}):e.jsx(k.PinCodeInput,{originName:q,onChange:a,pinLength:d,onComplete:c,id:l,autoFocus:g});return t.createHost(h,x=>e.jsxs(n.VStack,{gap:3,my:3,children:[e.jsx(n.Center,{height:12,children:p()}),i&&e.jsx(C.default,{variant:"error",size:"sm",styles:{textAlign:"center"},children:i}),x.get(o)]}))},y=Object.assign(S,{RetryContent:o});exports.VerifyPincode=y;
 //# sourceMappingURL=verify-pincode.js.map

package/dist/cjs/components/sections/verify-pincode.js.map

@@ -1 +1 @@
-{"version":3,"file":"verify-pincode.js","sources":["../../../../src/components/sections/verify-pincode.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { IcoCheckmarkCircleFill } from '@components/icons';\nimport { PinCodeInput, PinCodeInputProps } from '@components/inputs';\nimport { Text } from '@components/primitives';\nimport { Center, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\n\nexport interface VerifyPincodeProps extends PinCodeInputProps {\n  isPending: boolean;\n  isSuccess: boolean;\n  errorMessage?: string;\n  children?: React.ReactNode;\n}\n\nconst RetryContent = createSlot(({ children }) => {\n  return children;\n});\n\nconst VerifyPincodeHost = (props: VerifyPincodeProps) => {\n  const { isPending, isSuccess, onChange, onComplete, originName, pinLength, id, autoFocus, errorMessage, children } =\n    props;\n\n  const renderPincodeOrStatus = () => {\n    if (isPending) return <LoadingSpinner size={36} strokeWidth={4} />;\n\n    if (isSuccess) return <IcoCheckmarkCircleFill color={token('colors.brand.base')} width={36} height={36} />;\n\n    return (\n      <PinCodeInput\n        originName={originName}\n        onChange={onChange}\n        pinLength={pinLength}\n        onComplete={onComplete}\n        id={id}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={autoFocus}\n      />\n    );\n  };\n\n  return createHost(children, slots => {\n    return (\n      <VStack gap={3} my={3}>\n        <Center height={12}>{renderPincodeOrStatus()}</Center>\n        {errorMessage && (\n          <Text variant=\"error\" size=\"sm\" styles={{ textAlign: 'center' }}>\n            {errorMessage}\n          </Text>\n        )}\n        {slots.get(RetryContent)}\n      </VStack>\n    );\n  });\n};\n\nexport const VerifyPincode = Object.assign(VerifyPincodeHost, { RetryContent });\n"],"names":["RetryContent","createSlot","children","VerifyPincodeHost","props","isPending","isSuccess","onChange","onComplete","originName","pinLength","id","autoFocus","errorMessage","renderPincodeOrStatus","_jsx","LoadingSpinner","IcoCheckmarkCircleFill","token","PinCodeInput","createHost","slots","_jsxs","VStack","Center","Text","VerifyPincode"],"mappings":"mqBAeA,MAAMA,EAAeC,EAAAA,WAAW,CAAC,CAAE,SAAAC,CAAU,IACpCA,CACR,EAEKC,EAAqBC,GAA6B,CACtD,KAAM,CAAE,UAAAC,EAAW,UAAAC,EAAW,SAAAC,EAAU,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,GAAAC,EAAI,UAAAC,EAAW,aAAAC,EAAc,SAAAX,CAAQ,EAC9GE,EAEIU,EAAwB,IACxBT,EAAkBU,EAAAA,IAACC,iBAAc,CAAC,KAAM,GAAI,YAAa,CAAC,CAAA,EAE1DV,EAAkBS,MAACE,EAAAA,QAAsB,CAAC,MAAOC,EAAAA,MAAM,mBAAmB,EAAG,MAAO,GAAI,OAAQ,KAGlGH,MAACI,EAAY,aAAA,CACX,WAAYV,EACZ,SAAUF,EACV,UAAWG,EACX,WAAYF,EACZ,GAAIG,EAEJ,UAAWC,CACX,CAAA,EAIN,OAAOQ,EAAAA,WAAWlB,EAAUmB,GAExBC,EAAAA,KAACC,SAAO,CAAA,IAAK,EAAG,GAAI,EAClB,SAAA,CAAAR,EAAAA,IAACS,EAAAA,OAAO,CAAA,OAAQ,GAAK,SAAAV,GAAuB,CAAA,EAC3CD,GACCE,EAAAA,IAACU,WAAK,QAAQ,QAAQ,KAAK,KAAK,OAAQ,CAAE,UAAW,QAAU,EAAA,SAC5DZ,CAAY,CAAA,EAGhBQ,EAAM,IAAIrB,CAAY,CAAC,CACjB,CAAA,CAEZ,CACH,EAEa0B,EAAgB,OAAO,OAAOvB,EAAmB,CAAE,aAAAH,CAAY,CAAE"}
+{"version":3,"file":"verify-pincode.js","sources":["../../../../src/components/sections/verify-pincode.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { IcoCheckmarkCircleFill } from '@components/icons';\nimport { PinCodeInput, PinCodeInputProps } from '@components/inputs';\nimport { Text } from '@components/primitives';\nimport { Center, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\n\nexport interface VerifyPincodeProps extends PinCodeInputProps {\n  isPending: boolean;\n  isSuccess: boolean;\n  errorMessage?: string;\n  children?: React.ReactNode;\n}\n\nconst RetryContent = createSlot(({ children }) => {\n  return children;\n});\n\nconst VerifyPincodeHost = (props: VerifyPincodeProps) => {\n  const { isPending, isSuccess, onChange, onComplete, originName, pinLength, id, autoFocus, errorMessage, children } =\n    props;\n\n  const renderPincodeOrStatus = () => {\n    if (isPending) return <LoadingSpinner size={36} strokeWidth={4} />;\n\n    if (isSuccess) return <IcoCheckmarkCircleFill color={token('colors.brand.base')} width={36} height={36} />;\n\n    return (\n      <PinCodeInput\n        originName={originName}\n        onChange={onChange}\n        pinLength={pinLength}\n        onComplete={onComplete}\n        id={id}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={autoFocus}\n      />\n    );\n  };\n\n  return createHost(children, slots => {\n    return (\n      <VStack gap={3} my={3}>\n        <Center height={12}>{renderPincodeOrStatus()}</Center>\n        {errorMessage && (\n          <Text variant=\"error\" size=\"sm\" styles={{ textAlign: 'center' }}>\n            {errorMessage}\n          </Text>\n        )}\n        {slots.get(RetryContent)}\n      </VStack>\n    );\n  });\n};\n\nexport const VerifyPincode = Object.assign(VerifyPincodeHost, { RetryContent });\n"],"names":["RetryContent","createSlot","children","VerifyPincodeHost","props","isPending","isSuccess","onChange","onComplete","originName","pinLength","id","autoFocus","errorMessage","renderPincodeOrStatus","_jsx","LoadingSpinner","IcoCheckmarkCircleFill","token","PinCodeInput","createHost","slots","_jsxs","VStack","Center","Text","VerifyPincode"],"mappings":"gyBAeA,MAAMA,EAAeC,EAAAA,WAAW,CAAC,CAAE,SAAAC,CAAU,IACpCA,CACR,EAEKC,EAAqBC,GAA6B,CACtD,KAAM,CAAE,UAAAC,EAAW,UAAAC,EAAW,SAAAC,EAAU,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,GAAAC,EAAI,UAAAC,EAAW,aAAAC,EAAc,SAAAX,CAAQ,EAC9GE,EAEIU,EAAwB,IACxBT,EAAkBU,EAAAA,IAACC,iBAAc,CAAC,KAAM,GAAI,YAAa,CAAC,CAAA,EAE1DV,EAAkBS,MAACE,EAAAA,QAAsB,CAAC,MAAOC,EAAAA,MAAM,mBAAmB,EAAG,MAAO,GAAI,OAAQ,KAGlGH,MAACI,EAAY,aAAA,CACX,WAAYV,EACZ,SAAUF,EACV,UAAWG,EACX,WAAYF,EACZ,GAAIG,EAEJ,UAAWC,CACX,CAAA,EAIN,OAAOQ,EAAAA,WAAWlB,EAAUmB,GAExBC,EAAAA,KAACC,SAAO,CAAA,IAAK,EAAG,GAAI,EAClB,SAAA,CAAAR,EAAAA,IAACS,EAAAA,OAAO,CAAA,OAAQ,GAAK,SAAAV,GAAuB,CAAA,EAC3CD,GACCE,EAAAA,IAACU,WAAK,QAAQ,QAAQ,KAAK,KAAK,OAAQ,CAAE,UAAW,QAAU,EAAA,SAC5DZ,CAAY,CAAA,EAGhBQ,EAAM,IAAIrB,CAAY,CAAC,CACjB,CAAA,CAEZ,CACH,EAEa0B,EAAgB,OAAO,OAAOvB,EAAmB,CAAE,aAAAH,CAAY,CAAE"}

package/dist/cjs/components/utils/animate.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),h=require("../../hooks/useDisplayState.js"),u=require("react");const s="cubic-bezier(0.33, 1.33, 0.23, 1)",d={type:"fade",duration:300,timingFunction:s},D=l=>{const{show:n=!0,children:o,type:i,duration:a,timingFunction:t,asChild:c}={...d,...l},{displayed:F,onShow:m,onHide:r}=h.useDisplayState({animate:!0,show:n,onHidden:()=>{},onShown:()=>{}});return F?c?e.jsx(e.Fragment,{children:u.Children.map(o,T=>u.cloneElement(T,{style:{animationFillMode:"both",...n?{animationName:`${i}In`,animationDuration:`${a}ms`,animationTimingFunction:t}:{animationName:`${i}Out`,animationDuration:`${a}ms`,animationTimingFunction:t}},onAnimationEnd:n?m:r}))}):e.jsx("div",{style:{animationFillMode:"both",...n?{animationName:`${i}In`,animationDuration:`${a}ms`,animationTimingFunction:t}:{animationName:`${i}Out`,animationDuration:`${a}ms`,animationTimingFunction:t}},onAnimationEnd:n?m:r,children:o}):null};exports.DEFAULT=d,exports.DEFAULT_TIMING_FUNCTION=s,exports.default=D;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),$=require("../../hooks/useDisplayState.js"),u=require("react");const g="cubic-bezier(0.33, 1.33, 0.23, 1)",y=d=>{const{show:n=!0,children:o,type:i="fade",duration:a=300,timingFunction:t=g,asChild:s,onHidden:l=()=>{},onShown:c=()=>{}}=d,{displayed:h,onShow:m,onHide:r}=$.useDisplayState({animate:!0,show:n,onHidden:l,onShown:c});return h?s?e.jsx(e.Fragment,{children:u.Children.map(o,F=>u.cloneElement(F,{style:{animationFillMode:"both",...n?{animationName:`${i}In`,animationDuration:`${a}ms`,animationTimingFunction:t}:{animationName:`${i}Out`,animationDuration:`${a}ms`,animationTimingFunction:t}},onAnimationEnd:n?m:r}))}):e.jsx("div",{style:{animationFillMode:"both",...n?{animationName:`${i}In`,animationDuration:`${a}ms`,animationTimingFunction:t}:{animationName:`${i}Out`,animationDuration:`${a}ms`,animationTimingFunction:t}},onAnimationEnd:n?m:r,children:o}):null};exports.default=y;
 //# sourceMappingURL=animate.js.map

package/dist/cjs/components/utils/animate.js.map

@@ -1 +1 @@
-{"version":3,"file":"animate.js","sources":["../../../../src/components/utils/animate.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { Children, cloneElement, type FC, type PropsWithChildren, type ReactElement } from 'react';\n\ntype Props = PropsWithChildren<{ show?: boolean } & AnimateProps>;\n\ntype AnimationType = 'fade' | 'slide' | 'scale';\n\nexport type AnimateProps = Partial<{\n  type: AnimationType;\n  duration: number;\n  timingFunction: string;\n  delay: number;\n  asChild?: boolean;\n}>;\n\nexport const DEFAULT_TIMING_FUNCTION = 'cubic-bezier(0.33, 1.33, 0.23, 1)';\n\nexport const DEFAULT = {\n  type: 'fade',\n  duration: 300,\n  timingFunction: DEFAULT_TIMING_FUNCTION,\n} as const;\n\nconst Animate: FC<Props> = props => {\n  const { show = true, children, type, duration, timingFunction, asChild } = { ...DEFAULT, ...props };\n  const { displayed, onShow, onHide } = useDisplayState({\n    animate: true,\n    show,\n    onHidden: () => {},\n    onShown: () => {},\n  });\n\n  if (!displayed) {\n    return null;\n  }\n\n  if (asChild) {\n    return (\n      <>\n        {Children.map(children, child => {\n          return cloneElement(child as ReactElement, {\n            style: {\n              animationFillMode: 'both',\n              ...(show\n                ? {\n                    animationName: `${type}In`,\n                    animationDuration: `${duration}ms`,\n                    animationTimingFunction: timingFunction,\n                  }\n                : {\n                    animationName: `${type}Out`,\n                    animationDuration: `${duration}ms`,\n                    animationTimingFunction: timingFunction,\n                  }),\n            },\n            onAnimationEnd: show ? onShow : onHide,\n          });\n        })}\n      </>\n    );\n  }\n\n  return (\n    <div\n      style={{\n        animationFillMode: 'both',\n        ...(show\n          ? {\n              animationName: `${type}In`,\n              animationDuration: `${duration}ms`,\n              animationTimingFunction: timingFunction,\n            }\n          : {\n              animationName: `${type}Out`,\n              animationDuration: `${duration}ms`,\n              animationTimingFunction: timingFunction,\n            }),\n      }}\n      onAnimationEnd={show ? onShow : onHide}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default Animate;\n"],"names":["DEFAULT_TIMING_FUNCTION","DEFAULT","Animate","props","show","children","type","duration","timingFunction","asChild","displayed","onShow","onHide","useDisplayState","_jsx","_Fragment","Children","child","cloneElement"],"mappings":"sKAea,MAAAA,EAA0B,oCAE1BC,EAAU,CACrB,KAAM,OACN,SAAU,IACV,eAAgBD,GAGZE,EAAqBC,GAAQ,CACjC,KAAM,CAAE,KAAAC,EAAO,GAAM,SAAAC,EAAU,KAAAC,EAAM,SAAAC,EAAU,eAAAC,EAAgB,QAAAC,CAAS,EAAG,CAAE,GAAGR,EAAS,GAAGE,CAAK,EAC3F,CAAE,UAAAO,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAAA,gBAAgB,CACpD,QAAS,GACT,KAAAT,EACA,SAAU,IAAK,CACf,EAAA,QAAS,IAAK,CAAA,CACf,CAAA,EAED,OAAKM,EAIDD,EAEAK,EAAAA,IACGC,EAAAA,SAAA,CAAA,SAAAC,WAAS,IAAIX,EAAUY,GACfC,EAAAA,aAAaD,EAAuB,CACzC,MAAO,CACL,kBAAmB,OACnB,GAAIb,EACA,CACE,cAAe,GAAGE,CAAI,KACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,CAC1B,EACD,CACE,cAAe,GAAGF,CAAI,MACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,EAEhC,EACD,eAAgBJ,EAAOO,EAASC,CACjC,CAAA,CACF,CACA,CAAA,EAKLE,EAAAA,IACE,MAAA,CAAA,MAAO,CACL,kBAAmB,OACnB,GAAIV,EACA,CACE,cAAe,GAAGE,CAAI,KACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,CAC1B,EACD,CACE,cAAe,GAAGF,CAAI,MACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,EAEhC,EACD,eAAgBJ,EAAOO,EAASC,EAAM,SAErCP,CAAQ,CAAA,EA/CJ,IAkDX"}
+{"version":3,"file":"animate.js","sources":["../../../../src/components/utils/animate.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { Children, cloneElement, type PropsWithChildren, type ReactElement } from 'react';\n\ntype AnimationType = 'fade' | 'slide' | 'scale';\n\nexport interface AnimateProps extends PropsWithChildren {\n  type?: AnimationType;\n  duration?: number;\n  timingFunction?: string;\n  delay?: number;\n  asChild?: boolean;\n  show?: boolean;\n  onHidden?: () => void;\n  onShown?: () => void;\n}\n\nconst DEFAULT_TIMING_FUNCTION = 'cubic-bezier(0.33, 1.33, 0.23, 1)';\n\nconst Animate = (props: AnimateProps) => {\n  const {\n    show = true,\n    children,\n    type = 'fade',\n    duration = 300,\n    timingFunction = DEFAULT_TIMING_FUNCTION,\n    asChild,\n    onHidden = () => {},\n    onShown = () => {},\n  } = props;\n  const { displayed, onShow, onHide } = useDisplayState({\n    animate: true,\n    show,\n    onHidden,\n    onShown,\n  });\n\n  if (!displayed) {\n    return null;\n  }\n\n  if (asChild) {\n    return (\n      <>\n        {Children.map(children, child => {\n          return cloneElement(child as ReactElement, {\n            style: {\n              animationFillMode: 'both',\n              ...(show\n                ? {\n                    animationName: `${type}In`,\n                    animationDuration: `${duration}ms`,\n                    animationTimingFunction: timingFunction,\n                  }\n                : {\n                    animationName: `${type}Out`,\n                    animationDuration: `${duration}ms`,\n                    animationTimingFunction: timingFunction,\n                  }),\n            },\n            onAnimationEnd: show ? onShow : onHide,\n          });\n        })}\n      </>\n    );\n  }\n\n  return (\n    <div\n      style={{\n        animationFillMode: 'both',\n        ...(show\n          ? {\n              animationName: `${type}In`,\n              animationDuration: `${duration}ms`,\n              animationTimingFunction: timingFunction,\n            }\n          : {\n              animationName: `${type}Out`,\n              animationDuration: `${duration}ms`,\n              animationTimingFunction: timingFunction,\n            }),\n      }}\n      onAnimationEnd={show ? onShow : onHide}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default Animate;\n"],"names":["DEFAULT_TIMING_FUNCTION","Animate","props","show","children","type","duration","timingFunction","asChild","onHidden","onShown","displayed","onShow","onHide","useDisplayState","_jsx","_Fragment","Children","child","cloneElement"],"mappings":"sKAgBA,MAAMA,EAA0B,oCAE1BC,EAAWC,GAAuB,CACtC,KAAM,CACJ,KAAAC,EAAO,GACP,SAAAC,EACA,KAAAC,EAAO,OACP,SAAAC,EAAW,IACX,eAAAC,EAAiBP,EACjB,QAAAQ,EACA,SAAAC,EAAW,OACX,QAAAC,EAAU,IAAK,CAChB,CAAA,EAAGR,EACE,CAAE,UAAAS,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,kBAAgB,CACpD,QAAS,GACT,KAAAX,EACA,SAAAM,EACA,QAAAC,CACD,CAAA,EAED,OAAKC,EAIDH,EAEAO,EAAAA,IACGC,EAAAA,SAAA,CAAA,SAAAC,WAAS,IAAIb,EAAUc,GACfC,EAAAA,aAAaD,EAAuB,CACzC,MAAO,CACL,kBAAmB,OACnB,GAAIf,EACA,CACE,cAAe,GAAGE,CAAI,KACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,CAC1B,EACD,CACE,cAAe,GAAGF,CAAI,MACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,EAEhC,EACD,eAAgBJ,EAAOS,EAASC,CACjC,CAAA,CACF,CACA,CAAA,EAKLE,EACE,IAAA,MAAA,CAAA,MAAO,CACL,kBAAmB,OACnB,GAAIZ,EACA,CACE,cAAe,GAAGE,CAAI,KACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,CAC1B,EACD,CACE,cAAe,GAAGF,CAAI,MACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,EAEhC,EACD,eAAgBJ,EAAOS,EAASC,EAAM,SAErCT,CAAQ,CAAA,EA/CJ,IAkDX"}

package/dist/cjs/hooks/useToast.js

@@ -0,0 +1,2 @@
+"use strict";var t=require("react");const e=r=>()=>{throw new Error("TOAST_PROVIDER_REQUIRED",{cause:`Before calling \`${r}\`, wrap your application with \`<ToastProvider>\`.`})},o=t.createContext({createToast:e("createToast"),removeToast:e("removeToast")});function a(){return t.useContext(o)}exports.ToastContext=o,exports.useToast=a;
+//# sourceMappingURL=useToast.js.map

package/dist/cjs/hooks/useToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.js","sources":["../../../src/hooks/useToast.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface ToastProps {\n  message: string;\n  dismissible?: boolean;\n  icon?: boolean;\n  lifespan?: number;\n  variant?: 'branded' | 'success' | 'error' | 'warning' | 'neutral';\n}\n\nexport interface ToastDefinition extends ToastProps {\n  id: number;\n}\n\nexport interface ToastContext {\n  createToast: (options: ToastProps) => number;\n  removeToast: (id: number) => void;\n}\n\nconst raiseToastError = (fn: 'createToast' | 'removeToast') => () => {\n  throw new Error('TOAST_PROVIDER_REQUIRED', {\n    cause: `Before calling \\`${fn}\\`, wrap your application with \\`<ToastProvider>\\`.`,\n  });\n};\n\n// eslint-disable-next-line @typescript-eslint/no-redeclare -- intentionally naming the variable the same as the type\nexport const ToastContext = /* @__PURE__ */ createContext<ToastContext>({\n  createToast: /* @__PURE__ */ raiseToastError('createToast'),\n  removeToast: /* @__PURE__ */ raiseToastError('removeToast'),\n});\n\nexport function useToast() {\n  return useContext(ToastContext);\n}\n"],"names":["raiseToastError","fn","ToastContext","createContext","useToast","useContext"],"mappings":"oCAmBA,MAAMA,EAAmBC,GAAsC,IAAK,CAClE,MAAM,IAAI,MAAM,0BAA2B,CACzC,MAAO,oBAAoBA,CAAE,qDAC9B,CAAA,CACH,EAGaC,EAA+BC,EAAAA,cAA4B,CACtE,YAA6BH,EAAgB,aAAa,EAC1D,YAA6BA,EAAgB,aAAa,CAC3D,CAAA,EAEe,SAAAI,GAAQ,CACtB,OAAOC,EAAAA,WAAWH,CAAY,CAChC"}