@magiclabs/ui-components 1.18.3 → 1.18.5

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var h=require("../icons/ico-caret-down.js"),l=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"),i=require("@styled/jsx"),t=require("react");const q=({isOpen:r=!1,title:c,onToggle:s,children:d})=>{const[x,a]=t.useState(r),[b,u]=t.useState(r),o=t.useRef(null);t.useEffect(()=>{let n;return r?(a(!0),n=setTimeout(()=>u(!0),10)):u(!1),()=>clearTimeout(n)},[r]),t.useEffect(()=>{const n=m=>{o.current&&!o.current.contains(m.target)&&s(!1)};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[s]);const f=()=>{r||a(!1)},p=t.useCallback(()=>{s(!1)},[s]);return e.jsxs(e.Fragment,{children:[e.jsx(i.Box,{position:"absolute",display:r?"block":"none",h:"full",bottom:0,left:0,right:0,bg:"text.primary/20",backdropFilter:"blur(3px)"}),x&&e.jsxs(i.Box,{ref:o,position:"absolute",transform:b?"translateY(0)":"translateY(100%)",transition:"transform 0.3s",bottom:0,left:0,right:0,bg:"surface.primary",rounded:"xl",boxShadow:"0px -12px 56px 0px rgba(119, 118, 122, 0.15)",onTransitionEnd:f,children:[e.jsxs(i.HStack,{justifyContent:"space-between",p:6,pb:5,children:[e.jsx(j.default,{styles:{fontWeight:"bold"},children:c}),e.jsx(l.default,{size:"sm",variant:"neutral",onPress:p,children:e.jsx(l.default.LeadingIcon,{children:e.jsx(h.default,{})})})]}),e.jsx(i.Box,{px:6,pb:8,children:d})]})]})};exports.Drawer=q;
+"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var h=require("../icons/ico-caret-down.js"),l=require("../primitives/button.js");require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var q=require("../primitives/text.js"),i=require("@styled/jsx"),t=require("react");const j=({isOpen:r=!1,title:c,onToggle:s,children:d})=>{const[x,a]=t.useState(r),[b,u]=t.useState(r),o=t.useRef(null);t.useEffect(()=>{let n;return r?(a(!0),n=setTimeout(()=>u(!0),10)):u(!1),()=>clearTimeout(n)},[r]),t.useEffect(()=>{const n=m=>{o.current&&!o.current.contains(m.target)&&s(!1)};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[s]);const f=()=>{r||a(!1)},p=t.useCallback(()=>{s(!1)},[s]);return e.jsxs(e.Fragment,{children:[e.jsx(i.Box,{position:"absolute",display:r?"block":"none",h:"full",bottom:0,left:0,right:0,bg:"text.primary/20",backdropFilter:"blur(3px)"}),x&&e.jsxs(i.Box,{ref:o,position:"absolute",transform:b?"translateY(0)":"translateY(100%)",transition:"transform 0.3s",bottom:0,left:0,right:0,bg:"surface.primary",rounded:"xl",boxShadow:"0px -12px 56px 0px rgba(119, 118, 122, 0.15)",onTransitionEnd:f,children:[e.jsxs(i.HStack,{justifyContent:"space-between",p:6,pb:5,children:[e.jsx(q.default,{styles:{fontWeight:"bold"},children:c}),e.jsx(l.default,{size:"sm",variant:"neutral",onPress:p,children:e.jsx(l.default.LeadingIcon,{children:e.jsx(h.default,{})})})]}),e.jsx(i.Box,{px:6,pb:8,children:d})]})]})};exports.Drawer=j;
 //# sourceMappingURL=drawer.js.map

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 { 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"}
+{"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":"wdAWa,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"),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;
+"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/dropdown-selector.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":"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"}
+{"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":"yxBAgBO,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/toast-provider.js

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

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

@@ -1 +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  icon?: boolean;\n  lifespan?: number;\n  position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';\n}\n\nexport const Toast = (props: ToastProps | InternalToast) => {\n  const { dismissible, lifespan, message = '', variant = 'branded' } = props;\n  const toastClasses = classes({ variant });\n  const dismissId = (props as InternalToast).id;\n  const removeToast = (props as InternalToast).removeToast;\n  const [show, setShow] = useState(true);\n\n  if (lifespan) {\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.surface.primary') }}>{message}</Text>\n        {dismissible && (\n          <button className={toastClasses.dismiss} onClick={() => setShow(false)} aria-label=\"dismiss toast\">\n            <IcoDismiss className={toastClasses.icon} />\n          </button>\n        )}\n      </HStack>\n    </Animate>\n  );\n};\n\nexport const ToastProvider = ({\n  icon: defaultIcon = false,\n  lifespan: defaultLifespan = 0,\n  position = 'top-right',\n  children,\n}: 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 { icon = options.icon || defaultIcon, lifespan = options.lifespan || defaultLifespan, ...props } = options;\n    const id = ++toastID;\n\n    toastsRef.current.push({ icon, lifespan, 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","dismissible","lifespan","message","variant","toastClasses","classes","dismissId","removeToast","show","setShow","useState","_jsx","Animate","_jsxs","HStack","StatusIcon","Text","token","IcoDismiss","ToastProvider","defaultIcon","defaultLifespan","position","children","toastsRef","useRef","forceUpdate","useReducer","x","useCallback","id","toast","createToast","options","icon","toastCtx","useMemo","activeToasts","providerClasses","ToastContext","Portal","VStack"],"mappings":"glBAWA,IAAIA,EAAU,EAaD,MAAAC,EAASC,GAAqC,CACzD,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,QAAAC,EAAU,GAAI,QAAAC,EAAU,SAAW,EAAGJ,EAC/DK,EAAeC,EAAAA,MAAQ,CAAE,QAAAF,CAAO,CAAE,EAClCG,EAAaP,EAAwB,GACrCQ,EAAeR,EAAwB,YACvC,CAACS,EAAMC,CAAO,EAAIC,WAAS,EAAI,EAErC,OAAIT,GACF,WAAW,IAAK,CACdQ,EAAQ,EAAK,CACf,EAAGR,CAAQ,EAIXU,EAAAA,IAACC,UAAO,CAAA,YACK,CAAC,OAAO,EAAE,SAAST,GAAW,EAAE,EAAI,YAAc,SAC7D,KAAMK,EACN,KAAK,QACL,SAAU,IAAK,CACTF,GACFC,EAAYD,CAAS,CAEzB,WAEAO,OAACC,EAAAA,OAAO,CAAA,UAAWV,EAAa,MAAK,SAAA,CAClCL,EAAM,MAAQY,EAAAA,IAACI,cAAW,UAAWX,EAAa,KAAM,QAASD,IAClEQ,MAACK,EAAI,QAAA,CAAC,OAAQ,CAAE,MAAOC,QAAM,wBAAwB,CAAG,EAAA,SAAGf,CAAe,CAAA,EACzEF,GACCW,EAAAA,IAAQ,SAAA,CAAA,UAAWP,EAAa,QAAS,QAAS,IAAMK,EAAQ,EAAK,EAAc,aAAA,yBACjFE,MAACO,EAAAA,SAAW,UAAWd,EAAa,IAAQ,CAAA,CAAA,CAAA,CAE/C,CACM,CAAA,CAAA,CAAA,CAGf,EAEae,EAAgB,CAAC,CAC5B,KAAMC,EAAc,GACpB,SAAUC,EAAkB,EAC5B,SAAAC,EAAW,YACX,SAAAC,CACmB,IAAI,CACvB,MAAMC,EAAYC,EAAAA,OAA0B,CAAA,CAAE,EACxCC,EAAcC,EAAAA,WAAYC,GAAcA,EAAI,EAAG,CAAC,EAAE,CAAC,EAEnDrB,EAA2CsB,EAAAA,YAAaC,GAAc,CAC1EN,EAAU,QAAUA,EAAU,QAAQ,OAAOO,GAASA,EAAM,KAAOD,CAAE,EACrEJ,GACF,EAAG,CAAA,CAAE,EAECM,EAA2CH,EAAYI,YAAAA,GAAU,CACrE,KAAM,CAAE,KAAAC,EAAOD,EAAQ,MAAQb,EAAa,SAAAnB,EAAWgC,EAAQ,UAAYZ,EAAiB,GAAGtB,CAAK,EAAKkC,EACnGH,EAAK,EAAEjC,EAEb,OAAA2B,EAAU,QAAQ,KAAK,CAAE,KAAAU,EAAM,SAAAjC,EAAU,GAAA6B,EAAI,GAAG/B,CAAK,CAAE,EACvD2B,IAEOI,CACT,EAAG,CAAA,CAAE,EAECK,EAAWC,EAAQ,QAAA,KAAO,CAAE,YAAAJ,EAAa,YAAAzB,CAAW,GAAK,CAACyB,EAAazB,CAAW,CAAC,EAEnF8B,GADSf,GAAU,WAAW,KAAK,EAAI,CAAC,GAAGE,EAAU,OAAO,EAAI,CAAC,GAAGA,EAAU,OAAO,EAAE,QAAA,GACjE,IAAIO,GACvBpB,EAAAA,IAACb,EAAyB,CAAA,GAAAiC,EAAO,YAAaxB,CAAlC,EAAAwB,EAAM,EAAE,CAC5B,EAEKO,EAAkBjC,EAAQ,MAAA,CAAE,SAAAiB,CAAQ,CAAE,EAE5C,OACET,EAAAA,KAAC0B,eAAa,UAAS,MAAOJ,EAAQ,SAAA,CACnCZ,EACDZ,EAAAA,IAAC6B,EAAAA,QAAM,CAAA,SACL7B,aAAK,UAAW2B,EAAgB,OAC9B,SAAA3B,EAAC8B,IAAAA,EAAAA,OAAM,CAAC,UAAWH,EAAgB,mBAAYD,CAAY,CAAA,GAEtD,CAAA,CAAA,CAAA,CAAA,CAGf"}
+{"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  icon?: boolean;\n  lifespan?: number;\n  position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';\n}\n\nexport const Toast = (props: ToastProps | InternalToast) => {\n  const { dismissible, lifespan, message = '', variant = 'branded' } = props;\n  const toastClasses = classes({ variant });\n  const dismissId = (props as InternalToast).id;\n  const removeToast = (props as InternalToast).removeToast;\n  const [show, setShow] = useState(true);\n\n  if (lifespan) {\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.surface.primary') }}>{message}</Text>\n        {dismissible && (\n          <button className={toastClasses.dismiss} onClick={() => setShow(false)} aria-label=\"dismiss toast\">\n            <IcoDismiss className={toastClasses.icon} />\n          </button>\n        )}\n      </HStack>\n    </Animate>\n  );\n};\n\nexport const ToastProvider = ({\n  icon: defaultIcon = false,\n  lifespan: defaultLifespan = 0,\n  position = 'top-right',\n  children,\n}: 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 { icon = options.icon || defaultIcon, lifespan = options.lifespan || defaultLifespan, ...props } = options;\n    const id = ++toastID;\n\n    toastsRef.current.push({ icon, lifespan, 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","dismissible","lifespan","message","variant","toastClasses","classes","dismissId","removeToast","show","setShow","useState","_jsx","Animate","_jsxs","HStack","StatusIcon","Text","token","IcoDismiss","ToastProvider","defaultIcon","defaultLifespan","position","children","toastsRef","useRef","forceUpdate","useReducer","x","useCallback","id","toast","createToast","options","icon","toastCtx","useMemo","activeToasts","providerClasses","ToastContext","Portal","VStack"],"mappings":"8nBAWA,IAAIA,EAAU,EAaD,MAAAC,EAASC,GAAqC,CACzD,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,QAAAC,EAAU,GAAI,QAAAC,EAAU,SAAW,EAAGJ,EAC/DK,EAAeC,EAAAA,MAAQ,CAAE,QAAAF,CAAO,CAAE,EAClCG,EAAaP,EAAwB,GACrCQ,EAAeR,EAAwB,YACvC,CAACS,EAAMC,CAAO,EAAIC,WAAS,EAAI,EAErC,OAAIT,GACF,WAAW,IAAK,CACdQ,EAAQ,EAAK,CACf,EAAGR,CAAQ,EAIXU,EAAAA,IAACC,UAAO,CAAA,YACK,CAAC,OAAO,EAAE,SAAST,GAAW,EAAE,EAAI,YAAc,SAC7D,KAAMK,EACN,KAAK,QACL,SAAU,IAAK,CACTF,GACFC,EAAYD,CAAS,CAEzB,WAEAO,OAACC,EAAAA,OAAO,CAAA,UAAWV,EAAa,MAAK,SAAA,CAClCL,EAAM,MAAQY,EAAAA,IAACI,cAAW,UAAWX,EAAa,KAAM,QAASD,IAClEQ,MAACK,EAAI,QAAA,CAAC,OAAQ,CAAE,MAAOC,QAAM,wBAAwB,CAAG,EAAA,SAAGf,CAAe,CAAA,EACzEF,GACCW,EAAAA,IAAQ,SAAA,CAAA,UAAWP,EAAa,QAAS,QAAS,IAAMK,EAAQ,EAAK,EAAc,aAAA,yBACjFE,MAACO,EAAAA,SAAW,UAAWd,EAAa,IAAQ,CAAA,CAAA,CAAA,CAE/C,CACM,CAAA,CAAA,CAAA,CAGf,EAEae,EAAgB,CAAC,CAC5B,KAAMC,EAAc,GACpB,SAAUC,EAAkB,EAC5B,SAAAC,EAAW,YACX,SAAAC,CACmB,IAAI,CACvB,MAAMC,EAAYC,EAAAA,OAA0B,CAAA,CAAE,EACxCC,EAAcC,EAAAA,WAAYC,GAAcA,EAAI,EAAG,CAAC,EAAE,CAAC,EAEnDrB,EAA2CsB,EAAAA,YAAaC,GAAc,CAC1EN,EAAU,QAAUA,EAAU,QAAQ,OAAOO,GAASA,EAAM,KAAOD,CAAE,EACrEJ,GACF,EAAG,CAAA,CAAE,EAECM,EAA2CH,EAAYI,YAAAA,GAAU,CACrE,KAAM,CAAE,KAAAC,EAAOD,EAAQ,MAAQb,EAAa,SAAAnB,EAAWgC,EAAQ,UAAYZ,EAAiB,GAAGtB,CAAK,EAAKkC,EACnGH,EAAK,EAAEjC,EAEb,OAAA2B,EAAU,QAAQ,KAAK,CAAE,KAAAU,EAAM,SAAAjC,EAAU,GAAA6B,EAAI,GAAG/B,CAAK,CAAE,EACvD2B,IAEOI,CACT,EAAG,CAAA,CAAE,EAECK,EAAWC,EAAQ,QAAA,KAAO,CAAE,YAAAJ,EAAa,YAAAzB,CAAW,GAAK,CAACyB,EAAazB,CAAW,CAAC,EAEnF8B,GADSf,GAAU,WAAW,KAAK,EAAI,CAAC,GAAGE,EAAU,OAAO,EAAI,CAAC,GAAGA,EAAU,OAAO,EAAE,QAAA,GACjE,IAAIO,GACvBpB,EAAAA,IAACb,EAAyB,CAAA,GAAAiC,EAAO,YAAaxB,CAAlC,EAAAwB,EAAM,EAAE,CAC5B,EAEKO,EAAkBjC,EAAQ,MAAA,CAAE,SAAAiB,CAAQ,CAAE,EAE5C,OACET,EAAAA,KAAC0B,eAAa,UAAS,MAAOJ,EAAQ,SAAA,CACnCZ,EACDZ,EAAAA,IAAC6B,EAAAA,QAAM,CAAA,SACL7B,aAAK,UAAW2B,EAAgB,OAC9B,SAAA3B,EAAC8B,IAAAA,EAAAA,OAAM,CAAC,UAAWH,EAAgB,mBAAYD,CAAY,CAAA,GAEtD,CAAA,CAAA,CAAA,CAAA,CAGf"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime");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 w=require("../primitives/text.js"),O=require("../../hooks/useClickAway.js"),S=require("../../hooks/useToggleState.js"),a=require("@styled/css"),o=require("react"),p=require("react-aria");const j=2500,d=o.forwardRef((s,x)=>{const m="ontouchstart"in window||navigator.maxTouchPoints>0||navigator.maxTouchPoints>0,{children:f,content:v,closeDelay:g=j,defaultOpen:b,...q}=s,[i,n]=o.useState(!1),{isSelected:u,setSelected:r}=S.useToggleState({isOpen:s.isOpen,defaultSelected:b,onChange(l){l||n(!1)},...s}),e=o.useMemo(()=>({isOpen:u,open:()=>{r(!0)},close:l=>{if(l){r(!1);return}m?r(!1):(i&&setTimeout(()=>{r(!1),n(!1)},g),i||r(!1))}}),[u,i]),y=o.useRef(null),{triggerProps:c,tooltipProps:h}=p.useTooltipTrigger(s,e,y);c.onClick=()=>{e.open(),n(!0)};const T=O.useClickAway(()=>{e.close(!0)});return t.jsxs("div",{ref:T,className:a.css({position:"relative"}),onMouseLeave:()=>{e.close()},onFocus:()=>{e.open()},onBlur:()=>{e.close()},children:[o.cloneElement(f,{...c,tabIndex:0}),t.jsxs("div",{ref:x,"aria-describedby":"tooltip",role:"tooltip",className:a.cx(a.css({display:e.isOpen?"block":"none",maxW:72,w:"max",color:"text.secondary",bgColor:"surface.primary",borderColor:"neutral.secondary",position:"absolute",py:2,px:3,borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",top:0,left:"50%",transform:"translateX(-50%) translateY(calc(-100% - 0.75rem))"})),onMouseEnter:()=>{e.open()},...p.mergeProps(h,q),children:[t.jsx(w.default,{size:"sm",children:v}),e.isOpen&&t.jsx("div",{onMouseEnter:()=>{e.open()},className:a.css({position:"absolute",w:72,h:4,bottom:0,left:"50%",transform:"translateX(-50%) translateY(0.75rem)"})})]})]})});d.displayName="Tooltip",exports.default=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var w=require("../primitives/text.js"),O=require("../../hooks/useClickAway.js"),S=require("../../hooks/useToggleState.js"),a=require("@styled/css"),o=require("react"),p=require("react-aria");const j=2500,d=o.forwardRef((s,x)=>{const m="ontouchstart"in window||navigator.maxTouchPoints>0||navigator.maxTouchPoints>0,{children:f,content:v,closeDelay:g=j,defaultOpen:b,...q}=s,[i,n]=o.useState(!1),{isSelected:u,setSelected:r}=S.useToggleState({isOpen:s.isOpen,defaultSelected:b,onChange(l){l||n(!1)},...s}),e=o.useMemo(()=>({isOpen:u,open:()=>{r(!0)},close:l=>{if(l){r(!1);return}m?r(!1):(i&&setTimeout(()=>{r(!1),n(!1)},g),i||r(!1))}}),[u,i]),y=o.useRef(null),{triggerProps:c,tooltipProps:h}=p.useTooltipTrigger(s,e,y);c.onClick=()=>{e.open(),n(!0)};const T=O.useClickAway(()=>{e.close(!0)});return t.jsxs("div",{ref:T,className:a.css({position:"relative"}),onMouseLeave:()=>{e.close()},onFocus:()=>{e.open()},onBlur:()=>{e.close()},children:[o.cloneElement(f,{...c,tabIndex:0}),t.jsxs("div",{ref:x,"aria-describedby":"tooltip",role:"tooltip",className:a.cx(a.css({display:e.isOpen?"block":"none",maxW:72,w:"max",color:"text.secondary",bgColor:"surface.primary",borderColor:"neutral.secondary",position:"absolute",py:2,px:3,borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",top:0,left:"50%",transform:"translateX(-50%) translateY(calc(-100% - 0.75rem))"})),onMouseEnter:()=>{e.open()},...p.mergeProps(h,q),children:[t.jsx(w.default,{size:"sm",children:v}),e.isOpen&&t.jsx("div",{onMouseEnter:()=>{e.open()},className:a.css({position:"absolute",w:72,h:4,bottom:0,left:"50%",transform:"translateX(-50%) translateY(0.75rem)"})})]})]})});d.displayName="Tooltip",exports.default=d;
 //# sourceMappingURL=tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../../src/components/feedback/tooltip.tsx"],"sourcesContent":["import { Text } from '@components/primitives';\nimport { useClickAway } from '@hooks/useClickAway';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css, cx } from '@styled/css';\nimport { PropsWithChildren, ReactElement, ReactNode, cloneElement, forwardRef, useMemo, useRef, useState } from 'react';\nimport { TooltipTriggerProps, mergeProps, useTooltipTrigger } from 'react-aria';\n\nexport type TooltipProps = PropsWithChildren<\n  {\n    content: ReactNode;\n  } & TooltipTriggerProps\n>;\n\nconst DEFAULT_CLOSE_DELAY = 2500;\n\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, forwardedRef) => {\n  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0;\n\n  const { children, content, closeDelay = DEFAULT_CLOSE_DELAY, defaultOpen, ...restProps } = props;\n  const [isClicked, setIsClicked] = useState(false);\n\n  const { isSelected: isOpen, setSelected: setOpen } = useToggleState({\n    isOpen: props.isOpen,\n    defaultSelected: defaultOpen,\n    onChange(open) {\n      if (!open) {\n        setIsClicked(false);\n      }\n    },\n    ...props,\n  });\n\n  const state = useMemo(\n    () => ({\n      isOpen,\n      open: () => {\n        setOpen(true);\n      },\n      close: (immediate?: boolean) => {\n        if (immediate) {\n          setOpen(false);\n          return;\n        }\n        if (!isTouchDevice) {\n          if (isClicked) {\n            setTimeout(() => {\n              setOpen(false);\n              setIsClicked(false);\n            }, closeDelay);\n          }\n          if (!isClicked) {\n            setOpen(false);\n          }\n        } else {\n          setOpen(false);\n        }\n      },\n    }),\n    [isOpen, isClicked],\n  );\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, triggerRef);\n\n  triggerProps.onClick = () => {\n    state.open();\n    setIsClicked(true);\n  };\n\n  const clickAwayRef = useClickAway<HTMLDivElement>(() => {\n    state.close(true);\n  });\n\n  return (\n    <div\n      // tabIndex={0}\n      ref={clickAwayRef}\n      className={css({ position: 'relative' })}\n      onMouseLeave={() => {\n        state.close();\n      }}\n      onFocus={() => {\n        state.open();\n      }}\n      onBlur={() => {\n        state.close();\n      }}\n    >\n      {cloneElement(children as ReactElement, {\n        ...triggerProps,\n        tabIndex: 0,\n      })}\n      <div\n        ref={forwardedRef}\n        aria-describedby=\"tooltip\"\n        role=\"tooltip\"\n        className={cx(\n          css({\n            display: state.isOpen ? 'block' : 'none',\n            maxW: 72,\n            w: 'max',\n            color: 'text.secondary',\n            bgColor: 'surface.primary',\n            borderColor: 'neutral.secondary',\n            position: 'absolute',\n            py: 2,\n            px: 3,\n            borderRadius: 'xl',\n            boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n            top: 0,\n            left: '50%',\n            transform: 'translateX(-50%) translateY(calc(-100% - 0.75rem))',\n          }),\n        )}\n        onMouseEnter={() => {\n          state.open();\n        }}\n        {...mergeProps(tooltipProps, restProps)}\n      >\n        <Text size=\"sm\">{content}</Text>\n        {state.isOpen && (\n          <div\n            onMouseEnter={() => {\n              state.open();\n            }}\n            className={css({\n              position: 'absolute',\n              w: 72,\n              h: 4,\n              bottom: 0,\n              left: '50%',\n              transform: 'translateX(-50%) translateY(0.75rem)',\n            })}\n          />\n        )}\n      </div>\n    </div>\n  );\n});\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"names":["DEFAULT_CLOSE_DELAY","Tooltip","forwardRef","props","forwardedRef","isTouchDevice","children","content","closeDelay","defaultOpen","restProps","isClicked","setIsClicked","useState","isOpen","setOpen","useToggleState","open","state","useMemo","immediate","triggerRef","useRef","triggerProps","tooltipProps","useTooltipTrigger","clickAwayRef","useClickAway","_jsxs","css","cloneElement","cx","mergeProps","_jsx","Text"],"mappings":"qgBAaA,MAAMA,EAAsB,KAEtBC,EAAUC,EAAyC,WAAA,CAACC,EAAOC,IAAgB,CAC/E,MAAMC,EAAgB,iBAAkB,QAAU,UAAU,eAAiB,GAAK,UAAU,eAAiB,EAEvG,CAAE,SAAAC,EAAU,QAAAC,EAAS,WAAAC,EAAaR,EAAqB,YAAAS,EAAa,GAAGC,CAAW,EAAGP,EACrF,CAACQ,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAE1C,CAAE,WAAYC,EAAQ,YAAaC,CAAO,EAAKC,EAAAA,eAAe,CAClE,OAAQb,EAAM,OACd,gBAAiBM,EACjB,SAASQ,EAAI,CACNA,GACHL,EAAa,EAAK,CAEtB,EACA,GAAGT,CACJ,CAAA,EAEKe,EAAQC,EAAAA,QACZ,KAAO,CACL,OAAAL,EACA,KAAM,IAAK,CACTC,EAAQ,EAAI,CACd,EACA,MAAQK,GAAuB,CAC7B,GAAIA,EAAW,CACbL,EAAQ,EAAK,EACb,MACF,CACKV,EAWHU,EAAQ,EAAK,GAVTJ,GACF,WAAW,IAAK,CACdI,EAAQ,EAAK,EACbH,EAAa,EAAK,CACpB,EAAGJ,CAAU,EAEVG,GACHI,EAAQ,EAAK,EAKnB,CACD,GACD,CAACD,EAAQH,CAAS,CAAC,EAGfU,EAAaC,EAAuB,OAAA,IAAI,EACxC,CAAE,aAAAC,EAAc,aAAAC,GAAiBC,EAAAA,kBAAkBtB,EAAOe,EAAOG,CAAU,EAEjFE,EAAa,QAAU,IAAK,CAC1BL,EAAM,OACNN,EAAa,EAAI,CACnB,EAEA,MAAMc,EAAeC,EAAAA,aAA6B,IAAK,CACrDT,EAAM,MAAM,EAAI,CAClB,CAAC,EAED,OACEU,EAAAA,KAAA,MAAA,CAEE,IAAKF,EACL,UAAWG,EAAAA,IAAI,CAAE,SAAU,UAAY,CAAA,EACvC,aAAc,IAAK,CACjBX,EAAM,MACR,CAAA,EACA,QAAS,IAAK,CACZA,EAAM,KACR,CAAA,EACA,OAAQ,IAAK,CACXA,EAAM,MACR,CAAA,EAEC,SAAA,CAAAY,EAAaxB,aAAAA,EAA0B,CACtC,GAAGiB,EACH,SAAU,CACX,CAAA,EACDK,EAAAA,KACE,MAAA,CAAA,IAAKxB,qBACY,UACjB,KAAK,UACL,UAAW2B,KACTF,EAAI,IAAA,CACF,QAASX,EAAM,OAAS,QAAU,OAClC,KAAM,GACN,EAAG,MACH,MAAO,iBACP,QAAS,kBACT,YAAa,oBACb,SAAU,WACV,GAAI,EACJ,GAAI,EACJ,aAAc,KACd,UAAW,uCACX,IAAK,EACL,KAAM,MACN,UAAW,oDACZ,CAAA,CAAC,EAEJ,aAAc,IAAK,CACjBA,EAAM,KACR,CAAA,EAAC,GACGc,aAAWR,EAAcd,CAAS,EAEtC,SAAA,CAAAuB,EAACC,IAAAA,EAAAA,QAAI,CAAC,KAAK,KAAI,SAAE3B,CAAO,CAAA,EACvBW,EAAM,QACLe,EACE,IAAA,MAAA,CAAA,aAAc,IAAK,CACjBf,EAAM,KACR,CAAA,EACA,UAAWW,EAAAA,IAAI,CACb,SAAU,WACV,EAAG,GACH,EAAG,EACH,OAAQ,EACR,KAAM,MACN,UAAW,sCACZ,CAAA,CACD,CAAA,CACH,CACG,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAED5B,EAAQ,YAAc"}
+{"version":3,"file":"tooltip.js","sources":["../../../../src/components/feedback/tooltip.tsx"],"sourcesContent":["import { Text } from '@components/primitives';\nimport { useClickAway } from '@hooks/useClickAway';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css, cx } from '@styled/css';\nimport { PropsWithChildren, ReactElement, ReactNode, cloneElement, forwardRef, useMemo, useRef, useState } from 'react';\nimport { TooltipTriggerProps, mergeProps, useTooltipTrigger } from 'react-aria';\n\nexport type TooltipProps = PropsWithChildren<\n  {\n    content: ReactNode;\n  } & TooltipTriggerProps\n>;\n\nconst DEFAULT_CLOSE_DELAY = 2500;\n\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, forwardedRef) => {\n  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0;\n\n  const { children, content, closeDelay = DEFAULT_CLOSE_DELAY, defaultOpen, ...restProps } = props;\n  const [isClicked, setIsClicked] = useState(false);\n\n  const { isSelected: isOpen, setSelected: setOpen } = useToggleState({\n    isOpen: props.isOpen,\n    defaultSelected: defaultOpen,\n    onChange(open) {\n      if (!open) {\n        setIsClicked(false);\n      }\n    },\n    ...props,\n  });\n\n  const state = useMemo(\n    () => ({\n      isOpen,\n      open: () => {\n        setOpen(true);\n      },\n      close: (immediate?: boolean) => {\n        if (immediate) {\n          setOpen(false);\n          return;\n        }\n        if (!isTouchDevice) {\n          if (isClicked) {\n            setTimeout(() => {\n              setOpen(false);\n              setIsClicked(false);\n            }, closeDelay);\n          }\n          if (!isClicked) {\n            setOpen(false);\n          }\n        } else {\n          setOpen(false);\n        }\n      },\n    }),\n    [isOpen, isClicked],\n  );\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, triggerRef);\n\n  triggerProps.onClick = () => {\n    state.open();\n    setIsClicked(true);\n  };\n\n  const clickAwayRef = useClickAway<HTMLDivElement>(() => {\n    state.close(true);\n  });\n\n  return (\n    <div\n      // tabIndex={0}\n      ref={clickAwayRef}\n      className={css({ position: 'relative' })}\n      onMouseLeave={() => {\n        state.close();\n      }}\n      onFocus={() => {\n        state.open();\n      }}\n      onBlur={() => {\n        state.close();\n      }}\n    >\n      {cloneElement(children as ReactElement, {\n        ...triggerProps,\n        tabIndex: 0,\n      })}\n      <div\n        ref={forwardedRef}\n        aria-describedby=\"tooltip\"\n        role=\"tooltip\"\n        className={cx(\n          css({\n            display: state.isOpen ? 'block' : 'none',\n            maxW: 72,\n            w: 'max',\n            color: 'text.secondary',\n            bgColor: 'surface.primary',\n            borderColor: 'neutral.secondary',\n            position: 'absolute',\n            py: 2,\n            px: 3,\n            borderRadius: 'xl',\n            boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n            top: 0,\n            left: '50%',\n            transform: 'translateX(-50%) translateY(calc(-100% - 0.75rem))',\n          }),\n        )}\n        onMouseEnter={() => {\n          state.open();\n        }}\n        {...mergeProps(tooltipProps, restProps)}\n      >\n        <Text size=\"sm\">{content}</Text>\n        {state.isOpen && (\n          <div\n            onMouseEnter={() => {\n              state.open();\n            }}\n            className={css({\n              position: 'absolute',\n              w: 72,\n              h: 4,\n              bottom: 0,\n              left: '50%',\n              transform: 'translateX(-50%) translateY(0.75rem)',\n            })}\n          />\n        )}\n      </div>\n    </div>\n  );\n});\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"names":["DEFAULT_CLOSE_DELAY","Tooltip","forwardRef","props","forwardedRef","isTouchDevice","children","content","closeDelay","defaultOpen","restProps","isClicked","setIsClicked","useState","isOpen","setOpen","useToggleState","open","state","useMemo","immediate","triggerRef","useRef","triggerProps","tooltipProps","useTooltipTrigger","clickAwayRef","useClickAway","_jsxs","css","cloneElement","cx","mergeProps","_jsx","Text"],"mappings":"mjBAaA,MAAMA,EAAsB,KAEtBC,EAAUC,EAAyC,WAAA,CAACC,EAAOC,IAAgB,CAC/E,MAAMC,EAAgB,iBAAkB,QAAU,UAAU,eAAiB,GAAK,UAAU,eAAiB,EAEvG,CAAE,SAAAC,EAAU,QAAAC,EAAS,WAAAC,EAAaR,EAAqB,YAAAS,EAAa,GAAGC,CAAW,EAAGP,EACrF,CAACQ,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAE1C,CAAE,WAAYC,EAAQ,YAAaC,CAAO,EAAKC,EAAAA,eAAe,CAClE,OAAQb,EAAM,OACd,gBAAiBM,EACjB,SAASQ,EAAI,CACNA,GACHL,EAAa,EAAK,CAEtB,EACA,GAAGT,CACJ,CAAA,EAEKe,EAAQC,EAAAA,QACZ,KAAO,CACL,OAAAL,EACA,KAAM,IAAK,CACTC,EAAQ,EAAI,CACd,EACA,MAAQK,GAAuB,CAC7B,GAAIA,EAAW,CACbL,EAAQ,EAAK,EACb,MACF,CACKV,EAWHU,EAAQ,EAAK,GAVTJ,GACF,WAAW,IAAK,CACdI,EAAQ,EAAK,EACbH,EAAa,EAAK,CACpB,EAAGJ,CAAU,EAEVG,GACHI,EAAQ,EAAK,EAKnB,CACD,GACD,CAACD,EAAQH,CAAS,CAAC,EAGfU,EAAaC,EAAuB,OAAA,IAAI,EACxC,CAAE,aAAAC,EAAc,aAAAC,GAAiBC,EAAAA,kBAAkBtB,EAAOe,EAAOG,CAAU,EAEjFE,EAAa,QAAU,IAAK,CAC1BL,EAAM,OACNN,EAAa,EAAI,CACnB,EAEA,MAAMc,EAAeC,EAAAA,aAA6B,IAAK,CACrDT,EAAM,MAAM,EAAI,CAClB,CAAC,EAED,OACEU,EAAAA,KAAA,MAAA,CAEE,IAAKF,EACL,UAAWG,EAAAA,IAAI,CAAE,SAAU,UAAY,CAAA,EACvC,aAAc,IAAK,CACjBX,EAAM,MACR,CAAA,EACA,QAAS,IAAK,CACZA,EAAM,KACR,CAAA,EACA,OAAQ,IAAK,CACXA,EAAM,MACR,CAAA,EAEC,SAAA,CAAAY,EAAaxB,aAAAA,EAA0B,CACtC,GAAGiB,EACH,SAAU,CACX,CAAA,EACDK,EAAAA,KACE,MAAA,CAAA,IAAKxB,qBACY,UACjB,KAAK,UACL,UAAW2B,KACTF,EAAI,IAAA,CACF,QAASX,EAAM,OAAS,QAAU,OAClC,KAAM,GACN,EAAG,MACH,MAAO,iBACP,QAAS,kBACT,YAAa,oBACb,SAAU,WACV,GAAI,EACJ,GAAI,EACJ,aAAc,KACd,UAAW,uCACX,IAAK,EACL,KAAM,MACN,UAAW,oDACZ,CAAA,CAAC,EAEJ,aAAc,IAAK,CACjBA,EAAM,KACR,CAAA,EAAC,GACGc,aAAWR,EAAcd,CAAS,EAEtC,SAAA,CAAAuB,EAACC,IAAAA,EAAAA,QAAI,CAAC,KAAK,KAAI,SAAE3B,CAAO,CAAA,EACvBW,EAAM,QACLe,EACE,IAAA,MAAA,CAAA,aAAc,IAAK,CACjBf,EAAM,KACR,CAAA,EACA,UAAWW,EAAAA,IAAI,CACb,SAAU,WACV,EAAG,GACH,EAAG,EACH,OAAQ,EACR,KAAM,MACN,UAAW,sCACZ,CAAA,CACD,CAAA,CACH,CACG,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAED5B,EAAQ,YAAc"}

package/dist/cjs/components/info/security-otp.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("./copy-button.js");require("./email-wbr.js"),require("./text-box.js"),require("./wallet-address.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 a=require("../primitives/text.js"),r=require("@styled/jsx");const i=({otp:t,color:u,onCopy:o})=>e.jsxs(r.HStack,{bg:"neutral.quaternary",p:3,rounded:"lg",minWidth:"15rem",justifyContent:"space-around",alignItems:"center",width:"full",children:[e.jsx(r.HStack,{width:"40%",justifyContent:"space-around",children:e.jsx(a.default.Mono,{styles:{fontSize:"24px",lineHeight:"27px"},children:t})}),e.jsx(r.Box,{borderLeft:"thin solid",borderColor:"neutral.tertiary",height:8}),e.jsx(r.HStack,{width:"40%",justifyContent:"space-around",children:e.jsx(n.default,{value:t,showText:!0,color:u,onCopy:o})})]});i.displayName="SecurityOtp",exports.default=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("./copy-button.js");require("./email-wbr.js"),require("./text-box.js"),require("./wallet-address.js"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var a=require("../primitives/text.js"),r=require("@styled/jsx");const i=({otp:t,color:u,onCopy:o})=>e.jsxs(r.HStack,{bg:"neutral.quaternary",p:3,rounded:"lg",minWidth:"15rem",justifyContent:"space-around",alignItems:"center",width:"full",children:[e.jsx(r.HStack,{width:"40%",justifyContent:"space-around",children:e.jsx(a.default.Mono,{styles:{fontSize:"24px",lineHeight:"27px"},children:t})}),e.jsx(r.Box,{borderLeft:"thin solid",borderColor:"neutral.tertiary",height:8}),e.jsx(r.HStack,{width:"40%",justifyContent:"space-around",children:e.jsx(n.default,{value:t,showText:!0,color:u,onCopy:o})})]});i.displayName="SecurityOtp",exports.default=i;
 //# sourceMappingURL=security-otp.js.map

package/dist/cjs/components/info/security-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"security-otp.js","sources":["../../../../src/components/info/security-otp.tsx"],"sourcesContent":["import { CopyButton } from '@components/info';\nimport { Text } from '@components/primitives';\nimport { Box, HStack } from '@styled/jsx';\n\nexport interface SecurityOtpProps {\n  otp: string | number;\n  color: string;\n  onCopy: (value: string) => void;\n}\n\nconst SecurityOtp = ({ otp, color, onCopy }: SecurityOtpProps) => {\n  return (\n    <HStack\n      bg=\"neutral.quaternary\"\n      p={3}\n      rounded=\"lg\"\n      minWidth=\"15rem\"\n      justifyContent=\"space-around\"\n      alignItems=\"center\"\n      width=\"full\"\n    >\n      <HStack width=\"40%\" justifyContent=\"space-around\">\n        <Text.Mono styles={{ fontSize: '24px', lineHeight: '27px' }}>{otp}</Text.Mono>\n      </HStack>\n      <Box borderLeft=\"thin solid\" borderColor=\"neutral.tertiary\" height={8} />\n      <HStack width=\"40%\" justifyContent=\"space-around\">\n        <CopyButton value={otp as string} showText={true} color={color} onCopy={onCopy} />\n      </HStack>\n    </HStack>\n  );\n};\n\nSecurityOtp.displayName = 'SecurityOtp';\n\nexport default SecurityOtp;\n"],"names":["SecurityOtp","otp","color","onCopy","_jsxs","HStack","_jsx","Text","Box","CopyButton"],"mappings":"sfAUMA,MAAAA,EAAc,CAAC,CAAE,IAAAC,EAAK,MAAAC,EAAO,OAAAC,CAA0B,IAEzDC,EAAAA,KAACC,EAAAA,OACC,CAAA,GAAG,qBACH,EAAG,EACH,QAAQ,KACR,SAAS,QACT,eAAe,eACf,WAAW,SACX,MAAM,OAAM,SAAA,CAEZC,EAAAA,IAACD,EAAAA,QAAO,MAAM,MAAM,eAAe,eACjC,SAAAC,EAAAA,IAACC,EAAAA,QAAK,KAAI,CAAC,OAAQ,CAAE,SAAU,OAAQ,WAAY,MAAM,EAAK,SAAAN,CAAgB,CAAA,CAAA,CAAA,EAEhFK,EAACE,IAAAA,MAAI,CAAA,WAAW,aAAa,YAAY,mBAAmB,OAAQ,CAAC,CAAA,EACrEF,EAAAA,IAACD,SAAM,CAAC,MAAM,MAAM,eAAe,eACjC,SAAAC,EAACG,IAAAA,EAAAA,QAAU,CAAC,MAAOR,EAAe,SAAU,GAAM,MAAOC,EAAO,OAAQC,CAAU,CAAA,CAAA,CAAA,CAC3E,CACF,CAAA,EAIbH,EAAY,YAAc"}
+{"version":3,"file":"security-otp.js","sources":["../../../../src/components/info/security-otp.tsx"],"sourcesContent":["import { CopyButton } from '@components/info';\nimport { Text } from '@components/primitives';\nimport { Box, HStack } from '@styled/jsx';\n\nexport interface SecurityOtpProps {\n  otp: string | number;\n  color: string;\n  onCopy: (value: string) => void;\n}\n\nconst SecurityOtp = ({ otp, color, onCopy }: SecurityOtpProps) => {\n  return (\n    <HStack\n      bg=\"neutral.quaternary\"\n      p={3}\n      rounded=\"lg\"\n      minWidth=\"15rem\"\n      justifyContent=\"space-around\"\n      alignItems=\"center\"\n      width=\"full\"\n    >\n      <HStack width=\"40%\" justifyContent=\"space-around\">\n        <Text.Mono styles={{ fontSize: '24px', lineHeight: '27px' }}>{otp}</Text.Mono>\n      </HStack>\n      <Box borderLeft=\"thin solid\" borderColor=\"neutral.tertiary\" height={8} />\n      <HStack width=\"40%\" justifyContent=\"space-around\">\n        <CopyButton value={otp as string} showText={true} color={color} onCopy={onCopy} />\n      </HStack>\n    </HStack>\n  );\n};\n\nSecurityOtp.displayName = 'SecurityOtp';\n\nexport default SecurityOtp;\n"],"names":["SecurityOtp","otp","color","onCopy","_jsxs","HStack","_jsx","Text","Box","CopyButton"],"mappings":"oiBAUMA,MAAAA,EAAc,CAAC,CAAE,IAAAC,EAAK,MAAAC,EAAO,OAAAC,CAA0B,IAEzDC,EAAAA,KAACC,EAAAA,OACC,CAAA,GAAG,qBACH,EAAG,EACH,QAAQ,KACR,SAAS,QACT,eAAe,eACf,WAAW,SACX,MAAM,OAAM,SAAA,CAEZC,EAAAA,IAACD,EAAAA,QAAO,MAAM,MAAM,eAAe,eACjC,SAAAC,EAAAA,IAACC,EAAAA,QAAK,KAAI,CAAC,OAAQ,CAAE,SAAU,OAAQ,WAAY,MAAM,EAAK,SAAAN,CAAgB,CAAA,CAAA,CAAA,EAEhFK,EAACE,IAAAA,MAAI,CAAA,WAAW,aAAa,YAAY,mBAAmB,OAAQ,CAAC,CAAA,EACrEF,EAAAA,IAACD,SAAM,CAAC,MAAM,MAAM,eAAe,eACjC,SAAAC,EAACG,IAAAA,EAAAA,QAAU,CAAC,MAAOR,EAAe,SAAU,GAAM,MAAOC,EAAO,OAAQC,CAAU,CAAA,CAAA,CAAA,CAC3E,CACF,CAAA,EAIbH,EAAY,YAAc"}

package/dist/cjs/components/info/text-box.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@styled/tokens"),p=require("../icons/ico-checkmark.js"),j=require("../icons/ico-copy.js"),k=require("../icons/ico-eye-closed.js"),q=require("../icons/ico-eye-opened.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 v=require("../primitives/text.js"),u=require("@styled/css"),c=require("@styled/jsx"),w=require("@styled/patterns"),t=require("react");const h=b=>{const{content:i,onCopy:s,showHideButton:o}=b,[l,a]=t.useState(!!o),[n,d]=t.useState(!1);t.useEffect(()=>{if(n){const x=setTimeout(()=>{d(!1)},1500);return()=>clearTimeout(x)}},[n]),t.useEffect(()=>{a(!!o)},[o]);const f=t.useCallback(()=>{s&&(s(i),d(!0))},[i]);return e.jsxs(c.HStack,{w:"full",px:4,py:3,rounded:10,bg:"surface.secondary",justifyContent:"space-between",position:"relative",children:[e.jsx(c.Box,{textWrap:"nowrap",overflow:"hidden",filter:l?"blur(10px)":"",children:e.jsx("p",{className:u.css({overflow:"hidden",textOverflow:"ellipsis",color:"text.primary"}),children:i})}),l&&e.jsxs("button",{className:w.center({position:"absolute",width:"full",height:"full",left:0,gap:2,cursor:"pointer",rounded:10,outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5}),onClick:()=>a(!1),"aria-label":"show",children:[e.jsx(v.default,{size:"sm",styles:{fontWeight:600,color:r.token("colors.brand.base")},children:"Show"}),e.jsx(q.default,{width:20,height:20,color:r.token("colors.brand.base")})]}),e.jsxs(c.HStack,{children:[o&&!l&&e.jsx("button",{className:u.css({cursor:"pointer",outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5}),onClick:()=>a(!0),"aria-label":"hide",children:e.jsx(k.default,{width:20,height:20,color:r.token("colors.brand.base")})}),s&&e.jsx(e.Fragment,{children:n?e.jsx(p.default,{width:20,height:20,color:r.token("colors.brand.base")}):e.jsx("button",{className:u.css({cursor:"pointer",outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5,zIndex:10}),onClick:f,"aria-label":"copy",children:e.jsx(j.default,{width:20,height:20,color:r.token("colors.brand.base")})})})]})]})};h.displayName="TextBox",exports.default=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@styled/tokens"),p=require("../icons/ico-checkmark.js"),q=require("../icons/ico-copy.js"),j=require("../icons/ico-eye-closed.js"),k=require("../icons/ico-eye-opened.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var v=require("../primitives/text.js"),u=require("@styled/css"),c=require("@styled/jsx"),w=require("@styled/patterns"),t=require("react");const h=b=>{const{content:i,onCopy:s,showHideButton:o}=b,[l,a]=t.useState(!!o),[n,d]=t.useState(!1);t.useEffect(()=>{if(n){const x=setTimeout(()=>{d(!1)},1500);return()=>clearTimeout(x)}},[n]),t.useEffect(()=>{a(!!o)},[o]);const f=t.useCallback(()=>{s&&(s(i),d(!0))},[i]);return e.jsxs(c.HStack,{w:"full",px:4,py:3,rounded:10,bg:"surface.secondary",justifyContent:"space-between",position:"relative",children:[e.jsx(c.Box,{textWrap:"nowrap",overflow:"hidden",filter:l?"blur(10px)":"",children:e.jsx("p",{className:u.css({overflow:"hidden",textOverflow:"ellipsis",color:"text.primary"}),children:i})}),l&&e.jsxs("button",{className:w.center({position:"absolute",width:"full",height:"full",left:0,gap:2,cursor:"pointer",rounded:10,outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5}),onClick:()=>a(!1),"aria-label":"show",children:[e.jsx(v.default,{size:"sm",styles:{fontWeight:600,color:r.token("colors.brand.base")},children:"Show"}),e.jsx(k.default,{width:20,height:20,color:r.token("colors.brand.base")})]}),e.jsxs(c.HStack,{children:[o&&!l&&e.jsx("button",{className:u.css({cursor:"pointer",outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5}),onClick:()=>a(!0),"aria-label":"hide",children:e.jsx(j.default,{width:20,height:20,color:r.token("colors.brand.base")})}),s&&e.jsx(e.Fragment,{children:n?e.jsx(p.default,{width:20,height:20,color:r.token("colors.brand.base")}):e.jsx("button",{className:u.css({cursor:"pointer",outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5,zIndex:10}),onClick:f,"aria-label":"copy",children:e.jsx(q.default,{width:20,height:20,color:r.token("colors.brand.base")})})})]})]})};h.displayName="TextBox",exports.default=h;
 //# sourceMappingURL=text-box.js.map

package/dist/cjs/components/info/text-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-box.js","sources":["../../../../src/components/info/text-box.tsx"],"sourcesContent":["import { IcoCheckmark, IcoCopy, IcoEyeClosed, IcoEyeOpened } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack } from '@styled/jsx';\nimport { center } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { useCallback, useEffect, useState } from 'react';\n\nexport interface TextBoxProps {\n  content: string;\n  onCopy?: (content: string) => void;\n  showHideButton?: boolean;\n}\n\nconst TextBox = (props: TextBoxProps) => {\n  const { content, onCopy, showHideButton } = props;\n  const [isHidden, setIsHidden] = useState(Boolean(showHideButton));\n  const [isCopied, setIsCopied] = useState(false);\n\n  useEffect(() => {\n    if (isCopied) {\n      const timeoutId = setTimeout(() => {\n        setIsCopied(false);\n      }, 1500);\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [isCopied]);\n\n  useEffect(() => {\n    if (showHideButton) {\n      setIsHidden(true);\n    } else {\n      setIsHidden(false);\n    }\n  }, [showHideButton]);\n\n  const handleOnCopy = useCallback(() => {\n    if (!onCopy) return;\n    onCopy(content);\n    setIsCopied(true);\n  }, [content]);\n\n  return (\n    <HStack\n      w=\"full\"\n      px={4}\n      py={3}\n      rounded={10}\n      bg=\"surface.secondary\"\n      justifyContent=\"space-between\"\n      position=\"relative\"\n    >\n      <Box textWrap=\"nowrap\" overflow=\"hidden\" filter={isHidden ? 'blur(10px)' : ''}>\n        <p className={css({ overflow: 'hidden', textOverflow: 'ellipsis', color: 'text.primary' })}>{content}</p>\n      </Box>\n\n      {isHidden && (\n        <button\n          className={center({\n            position: 'absolute',\n            width: 'full',\n            height: 'full',\n            left: 0,\n            gap: 2,\n            cursor: 'pointer',\n            rounded: 10,\n            outlineColor: 'brand.base',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n          })}\n          onClick={() => setIsHidden(false)}\n          aria-label=\"show\"\n        >\n          <Text size=\"sm\" styles={{ fontWeight: 600, color: token('colors.brand.base') }}>\n            Show\n          </Text>\n          <IcoEyeOpened width={20} height={20} color={token('colors.brand.base')} />\n        </button>\n      )}\n\n      <HStack>\n        {showHideButton && !isHidden && (\n          <button\n            className={css({\n              cursor: 'pointer',\n              outlineColor: 'brand.base',\n              outlineWidth: 'thick',\n              outlineOffset: 0.5,\n            })}\n            onClick={() => setIsHidden(true)}\n            aria-label=\"hide\"\n          >\n            <IcoEyeClosed width={20} height={20} color={token('colors.brand.base')} />\n          </button>\n        )}\n        {onCopy && (\n          <>\n            {isCopied ? (\n              <IcoCheckmark width={20} height={20} color={token('colors.brand.base')} />\n            ) : (\n              <button\n                className={css({\n                  cursor: 'pointer',\n                  outlineColor: 'brand.base',\n                  outlineWidth: 'thick',\n                  outlineOffset: 0.5,\n                  zIndex: 10,\n                })}\n                onClick={handleOnCopy}\n                aria-label=\"copy\"\n              >\n                <IcoCopy width={20} height={20} color={token('colors.brand.base')} />\n              </button>\n            )}\n          </>\n        )}\n      </HStack>\n    </HStack>\n  );\n};\n\nTextBox.displayName = 'TextBox';\n\nexport default TextBox;\n"],"names":["TextBox","props","content","onCopy","showHideButton","isHidden","setIsHidden","useState","isCopied","setIsCopied","useEffect","timeoutId","handleOnCopy","useCallback","_jsxs","HStack","_jsx","Box","css","center","Text","token","IcoEyeOpened","IcoEyeClosed","_Fragment","IcoCheckmark","IcoCopy"],"mappings":"2oBAcMA,EAAWC,GAAuB,CACtC,KAAM,CAAE,QAAAC,EAAS,OAAAC,EAAQ,eAAAC,CAAc,EAAKH,EACtC,CAACI,EAAUC,CAAW,EAAIC,WAAS,CAAQH,CAAAA,CAAe,EAC1D,CAACI,EAAUC,CAAW,EAAIF,EAAAA,SAAS,EAAK,EAE9CG,EAAAA,UAAU,IAAK,CACb,GAAIF,EAAU,CACZ,MAAMG,EAAY,WAAW,IAAK,CAChCF,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaE,CAAS,CACrC,CACF,EAAG,CAACH,CAAQ,CAAC,EAEbE,EAAU,UAAA,IAAK,CAEXJ,EADE,CAAA,CAAAF,CACc,CAIpB,EAAG,CAACA,CAAc,CAAC,EAEnB,MAAMQ,EAAeC,EAAAA,YAAY,IAAK,CAC/BV,IACLA,EAAOD,CAAO,EACdO,EAAY,EAAI,EAClB,EAAG,CAACP,CAAO,CAAC,EAEZ,OACEY,EAACC,KAAAA,EAAAA,QACC,EAAE,OACF,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,GAAG,oBACH,eAAe,gBACf,SAAS,qBAETC,MAACC,OAAI,SAAS,SAAS,SAAS,SAAS,OAAQZ,EAAW,aAAe,GACzE,SAAAW,MAAA,IAAA,CAAG,UAAWE,EAAAA,IAAI,CAAE,SAAU,SAAU,aAAc,WAAY,MAAO,cAAc,CAAE,EAAI,SAAAhB,GACzF,CAAA,EAELG,GACCS,iBACE,UAAWK,EAAAA,OAAO,CAChB,SAAU,WACV,MAAO,OACP,OAAQ,OACR,KAAM,EACN,IAAK,EACL,OAAQ,UACR,QAAS,GACT,aAAc,aACd,aAAc,QACd,cAAe,EAChB,CAAA,EACD,QAAS,IAAMb,EAAY,EAAK,EAAC,aACtB,OAAM,SAAA,CAEjBU,EAAAA,IAACI,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,IAAK,MAAOC,EAAM,MAAA,mBAAmB,CAAG,EAAA,SAAA,MAAA,CAAA,EAG9EL,EAAAA,IAACM,EAAAA,QAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOD,EAAAA,MAAM,mBAAmB,CAAK,CAAA,CAAA,CAAA,CAAA,EAI9EP,EAAAA,KAACC,EAAAA,kBACEX,GAAkB,CAACC,GAClBW,EAAAA,IAAA,SAAA,CACE,UAAWE,MAAI,CACb,OAAQ,UACR,aAAc,aACd,aAAc,QACd,cAAe,EAChB,CAAA,EACD,QAAS,IAAMZ,EAAY,EAAI,EAAC,aACrB,OAAM,SAEjBU,EAAAA,IAACO,EAAAA,QAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOF,QAAM,mBAAmB,CAAK,CAAA,CAAA,CAAA,EAG7ElB,GACCa,EAAAA,IACGQ,WAAA,CAAA,SAAAhB,EACCQ,EAACS,IAAAA,EAAAA,QAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOJ,QAAM,mBAAmB,CAAK,CAAA,EAE1EL,EAAAA,IAAA,SAAA,CACE,UAAWE,MAAI,CACb,OAAQ,UACR,aAAc,aACd,aAAc,QACd,cAAe,GACf,OAAQ,EACT,CAAA,EACD,QAASN,eACE,OAAM,SAEjBI,EAAAA,IAACU,EAAAA,QAAQ,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOL,EAAAA,MAAM,mBAAmB,CAAC,CAAA,CAC1D,CAAA,CAEV,CAAA,CACJ,CACM,CAAA,CAAA,CAAA,CAAA,CAGf,EAEArB,EAAQ,YAAc"}
+{"version":3,"file":"text-box.js","sources":["../../../../src/components/info/text-box.tsx"],"sourcesContent":["import { IcoCheckmark, IcoCopy, IcoEyeClosed, IcoEyeOpened } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack } from '@styled/jsx';\nimport { center } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { useCallback, useEffect, useState } from 'react';\n\nexport interface TextBoxProps {\n  content: string;\n  onCopy?: (content: string) => void;\n  showHideButton?: boolean;\n}\n\nconst TextBox = (props: TextBoxProps) => {\n  const { content, onCopy, showHideButton } = props;\n  const [isHidden, setIsHidden] = useState(Boolean(showHideButton));\n  const [isCopied, setIsCopied] = useState(false);\n\n  useEffect(() => {\n    if (isCopied) {\n      const timeoutId = setTimeout(() => {\n        setIsCopied(false);\n      }, 1500);\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [isCopied]);\n\n  useEffect(() => {\n    if (showHideButton) {\n      setIsHidden(true);\n    } else {\n      setIsHidden(false);\n    }\n  }, [showHideButton]);\n\n  const handleOnCopy = useCallback(() => {\n    if (!onCopy) return;\n    onCopy(content);\n    setIsCopied(true);\n  }, [content]);\n\n  return (\n    <HStack\n      w=\"full\"\n      px={4}\n      py={3}\n      rounded={10}\n      bg=\"surface.secondary\"\n      justifyContent=\"space-between\"\n      position=\"relative\"\n    >\n      <Box textWrap=\"nowrap\" overflow=\"hidden\" filter={isHidden ? 'blur(10px)' : ''}>\n        <p className={css({ overflow: 'hidden', textOverflow: 'ellipsis', color: 'text.primary' })}>{content}</p>\n      </Box>\n\n      {isHidden && (\n        <button\n          className={center({\n            position: 'absolute',\n            width: 'full',\n            height: 'full',\n            left: 0,\n            gap: 2,\n            cursor: 'pointer',\n            rounded: 10,\n            outlineColor: 'brand.base',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n          })}\n          onClick={() => setIsHidden(false)}\n          aria-label=\"show\"\n        >\n          <Text size=\"sm\" styles={{ fontWeight: 600, color: token('colors.brand.base') }}>\n            Show\n          </Text>\n          <IcoEyeOpened width={20} height={20} color={token('colors.brand.base')} />\n        </button>\n      )}\n\n      <HStack>\n        {showHideButton && !isHidden && (\n          <button\n            className={css({\n              cursor: 'pointer',\n              outlineColor: 'brand.base',\n              outlineWidth: 'thick',\n              outlineOffset: 0.5,\n            })}\n            onClick={() => setIsHidden(true)}\n            aria-label=\"hide\"\n          >\n            <IcoEyeClosed width={20} height={20} color={token('colors.brand.base')} />\n          </button>\n        )}\n        {onCopy && (\n          <>\n            {isCopied ? (\n              <IcoCheckmark width={20} height={20} color={token('colors.brand.base')} />\n            ) : (\n              <button\n                className={css({\n                  cursor: 'pointer',\n                  outlineColor: 'brand.base',\n                  outlineWidth: 'thick',\n                  outlineOffset: 0.5,\n                  zIndex: 10,\n                })}\n                onClick={handleOnCopy}\n                aria-label=\"copy\"\n              >\n                <IcoCopy width={20} height={20} color={token('colors.brand.base')} />\n              </button>\n            )}\n          </>\n        )}\n      </HStack>\n    </HStack>\n  );\n};\n\nTextBox.displayName = 'TextBox';\n\nexport default TextBox;\n"],"names":["TextBox","props","content","onCopy","showHideButton","isHidden","setIsHidden","useState","isCopied","setIsCopied","useEffect","timeoutId","handleOnCopy","useCallback","_jsxs","HStack","_jsx","Box","css","center","Text","token","IcoEyeOpened","IcoEyeClosed","_Fragment","IcoCheckmark","IcoCopy"],"mappings":"yrBAcMA,EAAWC,GAAuB,CACtC,KAAM,CAAE,QAAAC,EAAS,OAAAC,EAAQ,eAAAC,CAAc,EAAKH,EACtC,CAACI,EAAUC,CAAW,EAAIC,WAAS,CAAQH,CAAAA,CAAe,EAC1D,CAACI,EAAUC,CAAW,EAAIF,EAAAA,SAAS,EAAK,EAE9CG,EAAAA,UAAU,IAAK,CACb,GAAIF,EAAU,CACZ,MAAMG,EAAY,WAAW,IAAK,CAChCF,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaE,CAAS,CACrC,CACF,EAAG,CAACH,CAAQ,CAAC,EAEbE,EAAU,UAAA,IAAK,CAEXJ,EADE,CAAA,CAAAF,CACc,CAIpB,EAAG,CAACA,CAAc,CAAC,EAEnB,MAAMQ,EAAeC,EAAAA,YAAY,IAAK,CAC/BV,IACLA,EAAOD,CAAO,EACdO,EAAY,EAAI,EAClB,EAAG,CAACP,CAAO,CAAC,EAEZ,OACEY,EAACC,KAAAA,EAAAA,QACC,EAAE,OACF,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,GAAG,oBACH,eAAe,gBACf,SAAS,qBAETC,MAACC,OAAI,SAAS,SAAS,SAAS,SAAS,OAAQZ,EAAW,aAAe,GACzE,SAAAW,MAAA,IAAA,CAAG,UAAWE,EAAAA,IAAI,CAAE,SAAU,SAAU,aAAc,WAAY,MAAO,cAAc,CAAE,EAAI,SAAAhB,GACzF,CAAA,EAELG,GACCS,iBACE,UAAWK,EAAAA,OAAO,CAChB,SAAU,WACV,MAAO,OACP,OAAQ,OACR,KAAM,EACN,IAAK,EACL,OAAQ,UACR,QAAS,GACT,aAAc,aACd,aAAc,QACd,cAAe,EAChB,CAAA,EACD,QAAS,IAAMb,EAAY,EAAK,EAAC,aACtB,OAAM,SAAA,CAEjBU,EAAAA,IAACI,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,IAAK,MAAOC,EAAM,MAAA,mBAAmB,CAAG,EAAA,SAAA,MAAA,CAAA,EAG9EL,EAAAA,IAACM,EAAAA,QAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOD,EAAAA,MAAM,mBAAmB,CAAK,CAAA,CAAA,CAAA,CAAA,EAI9EP,EAAAA,KAACC,EAAAA,kBACEX,GAAkB,CAACC,GAClBW,EAAAA,IAAA,SAAA,CACE,UAAWE,MAAI,CACb,OAAQ,UACR,aAAc,aACd,aAAc,QACd,cAAe,EAChB,CAAA,EACD,QAAS,IAAMZ,EAAY,EAAI,EAAC,aACrB,OAAM,SAEjBU,EAAAA,IAACO,EAAAA,QAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOF,QAAM,mBAAmB,CAAK,CAAA,CAAA,CAAA,EAG7ElB,GACCa,EAAAA,IACGQ,WAAA,CAAA,SAAAhB,EACCQ,EAACS,IAAAA,EAAAA,QAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOJ,QAAM,mBAAmB,CAAK,CAAA,EAE1EL,EAAAA,IAAA,SAAA,CACE,UAAWE,MAAI,CACb,OAAQ,UACR,aAAc,aACd,aAAc,QACd,cAAe,GACf,OAAQ,EACT,CAAA,EACD,QAASN,eACE,OAAM,SAEjBI,EAAAA,IAACU,EAAAA,QAAQ,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOL,EAAAA,MAAM,mBAAmB,CAAC,CAAA,CAC1D,CAAA,CAEV,CAAA,CACJ,CACM,CAAA,CAAA,CAAA,CAAA,CAGf,EAEArB,EAAQ,YAAc"}

package/dist/cjs/components/inputs/phone-input.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("react/jsx-runtime"),y=require("@styled/tokens"),J=require("../icons/ico-caret-down.js"),Q=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"),j=require("@styled/css"),u=require("@styled/jsx"),n=require("react"),d=require("react-aria"),h=require("react-international-phone");const E=({iso2:f})=>o.jsx(u.Flex,{width:"1.125rem",height:"1.125rem",borderRadius:"full",borderWidth:"thin",borderColor:"neutral.primary",overflow:"hidden",align:"center",children:o.jsx(h.FlagImage,{src:`https://flagcdn.com/${f}.svg`,iso2:f,size:16,className:j.css({objectFit:"cover"})})}),V=f=>{const{onChange:_,autoFocus:M=!0,errorMessage:q}=f,[A,H]=n.useState(""),[L,k]=n.useState(!1),[l,p]=n.useState(!1),[a,b]=n.useState(0),[w,S]=n.useState(""),N=n.useRef(null),z=n.useRef(null),m=n.useRef(null),v=n.useRef([]),P=n.useRef(void 0),{country:s,setCountry:R,inputRef:g,handlePhoneValueChange:B,inputValue:O}=h.usePhoneInput({defaultCountry:"us",value:A,onChange:e=>{H(e.phone),_(e.phone)}}),i=n.useMemo(()=>{const e=h.defaultCountries.filter(([,t])=>t!==s.iso2),r=h.defaultCountries.find(([,t])=>t===s.iso2);return r?[r,...e]:[...h.defaultCountries]},[s.iso2]),I=n.useMemo(()=>i.filter(([,e])=>e!==s.iso2),[s.iso2]),W=n.useCallback(e=>{var r;R(e),p(!1),(r=g.current)===null||r===void 0||r.focus()},[R]),K=n.useCallback(()=>{p(!l),l||(b(0),setTimeout(()=>{var e;return(e=m.current)===null||e===void 0?void 0:e.focus()}))},[l]),{buttonProps:T}=d.useButton({onPress:K},N),{focusProps:F,isFocusVisible:D}=d.useFocusRing(),{keyboardProps:U}=d.useKeyboard({onKeyDown:e=>{var r;if(l)switch(e.key){case"ArrowDown":e.preventDefault(),b(t=>(t+1)%i.length);break;case"ArrowUp":e.preventDefault(),b(t=>(t-1+i.length)%i.length);break;case"Enter":if(e.preventDefault(),a>=0){const[,t]=i[a];W(t)}break;case"Escape":p(!1),(r=g.current)===null||r===void 0||r.focus();break;default:(e.key===" "||e.key.match(/[\w]/i))&&(e.preventDefault(),clearTimeout(P.current),S(t=>t+e.key),P.current=window.setTimeout(()=>{S("")},1e3));break}}});n.useEffect(()=>{var e;M&&((e=g.current)===null||e===void 0||e.focus());const r=t=>{m.current&&!m.current.contains(t.target)&&(p(!1),k(!1))};return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[]),n.useEffect(()=>{var e;if(w!==""){const r=I.findIndex(([t])=>t.toLowerCase().startsWith(w.toLowerCase()));if(r!==-1){const t=i.findIndex(([x])=>x===I[r][0]);b(t),(e=v.current[t])===null||e===void 0||e.scrollIntoView({behavior:"smooth",block:"nearest"})}}},[w,i,s.iso2]),n.useEffect(()=>{var e;a>=0&&v.current[a]&&((e=v.current[a])===null||e===void 0||e.scrollIntoView({behavior:"smooth",block:"nearest"}))},[a]);const Y=()=>{k(!0)},$=()=>{k(!1)};return o.jsxs(u.VStack,{gap:2,children:[o.jsxs(u.Flex,{...d.mergeProps(U,F),ref:z,height:"fit-content",width:"full",alignItems:"center",justify:"center",borderWidth:"thin",borderColor:"neutral.secondary",borderRadius:"input",transition:"all linear 120ms",outlineColor:"brand.base",outlineStyle:L&&!D?"solid":"none",outlineWidth:"thick",outlineOffset:.5,onFocus:Y,onBlur:$,position:"relative",_hover:{borderColor:"neutral.primary"},children:[o.jsx("button",{...d.mergeProps(T,F),className:j.css({display:"flex",justifyContent:"center",alignItems:"center",borderStartRadius:"input",h:12,w:20,px:3,outlineColor:"brand.base",outlineStyle:D?"solid":"none",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer",transition:"all linear 120ms",_hover:{bg:"surface.tertiary"}}),children:o.jsxs(u.HStack,{gap:2,children:[o.jsx(E,{iso2:s.iso2}),o.jsx(J.default,{width:14,height:14,transform:l?"rotate(180)":""})]})}),l&&o.jsx(u.Box,{ref:m,tabIndex:-1,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",top:55,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",maxHeight:"17.5rem",overflowY:"auto",outline:"none",children:i.map(([e,r,t],x)=>{const c=s.iso2===r;return o.jsxs(u.HStack,{cursor:"pointer",bg:c?"brand.base":a===x?"brand.lightest":"",_hover:c?{}:{bg:"brand.lightest"},ref:G=>v.current[x]=G,gap:2,p:4,onClick:()=>W(r),justify:"space-between",children:[o.jsxs(u.HStack,{gap:4,children:[c?o.jsx(Q.default,{width:18,height:18,color:y.token("colors.surface.primary")}):o.jsx(E,{iso2:r}),o.jsx(C.default,{styles:{color:c?y.token("colors.surface.primary"):""},children:e})]}),o.jsxs(C.default,{styles:{color:c?y.token("colors.surface.primary"):y.token("colors.text.tertiary")},children:["+",t]})]},r)})}),o.jsx("input",{type:"tel",inputMode:"tel",onChange:B,value:O,ref:g,className:j.css({transition:"all linear 120ms",width:"full",boxSizing:"border-box",borderLeftWidth:"thin",borderColor:"neutral.secondary",rounded:0,margin:0,minWidth:10,fontWeight:"medium",backgroundColor:"transparent",color:"text.primary",height:12,fontSize:"md",py:3,px:4,textAlign:"left",outline:"none",_placeholder:{color:"text.tertiary"}})})]}),q&&o.jsx(C.default,{variant:"error",size:"sm",styles:{fontWeight:"400"},children:q})]})};V.displayName="PhoneInput",exports.default=V;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("react/jsx-runtime"),y=require("@styled/tokens"),J=require("../icons/ico-caret-down.js"),Q=require("../icons/ico-checkmark-circle-fill.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var C=require("../primitives/text.js"),j=require("@styled/css"),u=require("@styled/jsx"),n=require("react"),d=require("react-aria"),h=require("react-international-phone");const E=({iso2:f})=>o.jsx(u.Flex,{width:"1.125rem",height:"1.125rem",borderRadius:"full",borderWidth:"thin",borderColor:"neutral.primary",overflow:"hidden",align:"center",children:o.jsx(h.FlagImage,{src:`https://flagcdn.com/${f}.svg`,iso2:f,size:16,className:j.css({objectFit:"cover"})})}),V=f=>{const{onChange:_,autoFocus:M=!0,errorMessage:q}=f,[A,H]=n.useState(""),[L,k]=n.useState(!1),[l,p]=n.useState(!1),[a,b]=n.useState(0),[w,S]=n.useState(""),N=n.useRef(null),z=n.useRef(null),m=n.useRef(null),v=n.useRef([]),P=n.useRef(void 0),{country:s,setCountry:R,inputRef:g,handlePhoneValueChange:B,inputValue:O}=h.usePhoneInput({defaultCountry:"us",value:A,onChange:e=>{H(e.phone),_(e.phone)}}),i=n.useMemo(()=>{const e=h.defaultCountries.filter(([,t])=>t!==s.iso2),r=h.defaultCountries.find(([,t])=>t===s.iso2);return r?[r,...e]:[...h.defaultCountries]},[s.iso2]),I=n.useMemo(()=>i.filter(([,e])=>e!==s.iso2),[s.iso2]),W=n.useCallback(e=>{var r;R(e),p(!1),(r=g.current)===null||r===void 0||r.focus()},[R]),K=n.useCallback(()=>{p(!l),l||(b(0),setTimeout(()=>{var e;return(e=m.current)===null||e===void 0?void 0:e.focus()}))},[l]),{buttonProps:T}=d.useButton({onPress:K},N),{focusProps:F,isFocusVisible:D}=d.useFocusRing(),{keyboardProps:U}=d.useKeyboard({onKeyDown:e=>{var r;if(l)switch(e.key){case"ArrowDown":e.preventDefault(),b(t=>(t+1)%i.length);break;case"ArrowUp":e.preventDefault(),b(t=>(t-1+i.length)%i.length);break;case"Enter":if(e.preventDefault(),a>=0){const[,t]=i[a];W(t)}break;case"Escape":p(!1),(r=g.current)===null||r===void 0||r.focus();break;default:(e.key===" "||e.key.match(/[\w]/i))&&(e.preventDefault(),clearTimeout(P.current),S(t=>t+e.key),P.current=window.setTimeout(()=>{S("")},1e3));break}}});n.useEffect(()=>{var e;M&&((e=g.current)===null||e===void 0||e.focus());const r=t=>{m.current&&!m.current.contains(t.target)&&(p(!1),k(!1))};return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[]),n.useEffect(()=>{var e;if(w!==""){const r=I.findIndex(([t])=>t.toLowerCase().startsWith(w.toLowerCase()));if(r!==-1){const t=i.findIndex(([x])=>x===I[r][0]);b(t),(e=v.current[t])===null||e===void 0||e.scrollIntoView({behavior:"smooth",block:"nearest"})}}},[w,i,s.iso2]),n.useEffect(()=>{var e;a>=0&&v.current[a]&&((e=v.current[a])===null||e===void 0||e.scrollIntoView({behavior:"smooth",block:"nearest"}))},[a]);const Y=()=>{k(!0)},$=()=>{k(!1)};return o.jsxs(u.VStack,{gap:2,children:[o.jsxs(u.Flex,{...d.mergeProps(U,F),ref:z,height:"fit-content",width:"full",alignItems:"center",justify:"center",borderWidth:"thin",borderColor:"neutral.secondary",borderRadius:"input",transition:"all linear 120ms",outlineColor:"brand.base",outlineStyle:L&&!D?"solid":"none",outlineWidth:"thick",outlineOffset:.5,onFocus:Y,onBlur:$,position:"relative",_hover:{borderColor:"neutral.primary"},children:[o.jsx("button",{...d.mergeProps(T,F),className:j.css({display:"flex",justifyContent:"center",alignItems:"center",borderStartRadius:"input",h:12,w:20,px:3,outlineColor:"brand.base",outlineStyle:D?"solid":"none",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer",transition:"all linear 120ms",_hover:{bg:"surface.tertiary"}}),children:o.jsxs(u.HStack,{gap:2,children:[o.jsx(E,{iso2:s.iso2}),o.jsx(J.default,{width:14,height:14,transform:l?"rotate(180)":""})]})}),l&&o.jsx(u.Box,{ref:m,tabIndex:-1,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",top:55,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",maxHeight:"17.5rem",overflowY:"auto",outline:"none",children:i.map(([e,r,t],x)=>{const c=s.iso2===r;return o.jsxs(u.HStack,{cursor:"pointer",bg:c?"brand.base":a===x?"brand.lightest":"",_hover:c?{}:{bg:"brand.lightest"},ref:G=>v.current[x]=G,gap:2,p:4,onClick:()=>W(r),justify:"space-between",children:[o.jsxs(u.HStack,{gap:4,children:[c?o.jsx(Q.default,{width:18,height:18,color:y.token("colors.surface.primary")}):o.jsx(E,{iso2:r}),o.jsx(C.default,{styles:{color:c?y.token("colors.surface.primary"):""},children:e})]}),o.jsxs(C.default,{styles:{color:c?y.token("colors.surface.primary"):y.token("colors.text.tertiary")},children:["+",t]})]},r)})}),o.jsx("input",{type:"tel",inputMode:"tel",onChange:B,value:O,ref:g,className:j.css({transition:"all linear 120ms",width:"full",boxSizing:"border-box",borderLeftWidth:"thin",borderColor:"neutral.secondary",rounded:0,margin:0,minWidth:10,fontWeight:"medium",backgroundColor:"transparent",color:"text.primary",height:12,fontSize:"md",py:3,px:4,textAlign:"left",outline:"none",_placeholder:{color:"text.tertiary"}})})]}),q&&o.jsx(C.default,{variant:"error",size:"sm",styles:{fontWeight:"400"},children:q})]})};V.displayName="PhoneInput",exports.default=V;
 //# sourceMappingURL=phone-input.js.map

package/dist/cjs/components/inputs/phone-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-input.js","sources":["../../../../src/components/inputs/phone-input.tsx"],"sourcesContent":["import { IcoCaretDown, IcoCheckmarkCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\nimport { FlagImage, defaultCountries, usePhoneInput, type CountryIso2 } from 'react-international-phone';\n\nexport interface PhoneInputProps {\n  onChange: (phone: string) => void;\n  autoFocus?: boolean;\n  errorMessage?: string;\n}\n\nconst FlagContainer = ({ iso2 }: { iso2: CountryIso2 }) => {\n  return (\n    <Flex\n      width=\"1.125rem\"\n      height=\"1.125rem\"\n      borderRadius=\"full\"\n      borderWidth=\"thin\"\n      borderColor=\"neutral.primary\"\n      overflow=\"hidden\"\n      align=\"center\"\n    >\n      <FlagImage\n        src={`https://flagcdn.com/${iso2}.svg`}\n        iso2={iso2}\n        size={16}\n        className={css({ objectFit: 'cover' })}\n      />\n    </Flex>\n  );\n};\n\nconst PhoneInput = (props: PhoneInputProps) => {\n  const { onChange, autoFocus = true, errorMessage } = props;\n  const [value, setValue] = useState('');\n  const [isFocused, setIsFocused] = useState(false);\n  const [showDropdown, setShowDropdown] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState(0);\n  const [searchString, setSearchString] = useState('');\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const typeAheadTimeout = useRef<number | undefined>(undefined);\n\n  const { country, setCountry, inputRef, handlePhoneValueChange, inputValue } = usePhoneInput({\n    defaultCountry: 'us',\n    value,\n    onChange: data => {\n      setValue(data.phone);\n      onChange(data.phone);\n    },\n  });\n\n  const sortedCountries = useMemo(() => {\n    const otherCountries = defaultCountries.filter(([, iso2]) => iso2 !== country.iso2);\n    const selectedCountry = defaultCountries.find(([, iso2]) => iso2 === country.iso2);\n    return selectedCountry ? [selectedCountry, ...otherCountries] : [...defaultCountries];\n  }, [country.iso2]);\n\n  const filteredCountries = useMemo(() => {\n    return sortedCountries.filter(([, iso2]) => iso2 !== country.iso2);\n  }, [country.iso2]);\n\n  const handleSelect = useCallback(\n    (iso2: CountryIso2) => {\n      setCountry(iso2);\n      setShowDropdown(false);\n      inputRef.current?.focus();\n    },\n    [setCountry],\n  );\n\n  const toggleDropdown = useCallback(() => {\n    setShowDropdown(!showDropdown);\n    if (!showDropdown) {\n      setFocusedIndex(0);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [showDropdown]);\n\n  const { buttonProps } = useButton(\n    {\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible: isButtonFocused } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: e => {\n      if (!showDropdown) return;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          setFocusedIndex(prev => (prev + 1) % sortedCountries.length);\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          setFocusedIndex(prev => (prev - 1 + sortedCountries.length) % sortedCountries.length);\n          break;\n        case 'Enter':\n          e.preventDefault();\n          if (focusedIndex >= 0) {\n            const [, iso2] = sortedCountries[focusedIndex];\n            handleSelect(iso2);\n          }\n          break;\n        case 'Escape':\n          setShowDropdown(false);\n          inputRef.current?.focus();\n          break;\n        default:\n          if (e.key === ' ' || e.key.match(/[\\w]/i)) {\n            e.preventDefault();\n            clearTimeout(typeAheadTimeout.current);\n            setSearchString(s => s + e.key);\n            typeAheadTimeout.current = window.setTimeout(() => {\n              setSearchString('');\n            }, 1000);\n          }\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    // Focus the input when the component mounts if autoFocus is true\n    if (autoFocus) {\n      inputRef.current?.focus();\n    }\n\n    // Closes the dropdown when clicking outside of it\n    const handleClick = (event: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setShowDropdown(false);\n        setIsFocused(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  useEffect(() => {\n    // Implements type-ahead search functionality\n    if (searchString !== '') {\n      const matchIndex = filteredCountries.findIndex(([name]) =>\n        name.toLowerCase().startsWith(searchString.toLowerCase()),\n      );\n      if (matchIndex !== -1) {\n        const actualIndex = sortedCountries.findIndex(([name]) => name === filteredCountries[matchIndex][0]);\n        setFocusedIndex(actualIndex);\n        itemRefs.current[actualIndex]?.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n        });\n      }\n    }\n  }, [searchString, sortedCountries, country.iso2]);\n\n  useEffect(() => {\n    // Scrolls the focused item into view\n    if (focusedIndex >= 0 && itemRefs.current[focusedIndex]) {\n      itemRefs.current[focusedIndex]?.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n    }\n  }, [focusedIndex]);\n\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n  };\n\n  return (\n    <VStack gap={2}>\n      <Flex\n        {...mergeProps(keyboardProps, focusProps)}\n        ref={containerRef}\n        height=\"fit-content\"\n        width=\"full\"\n        alignItems=\"center\"\n        justify=\"center\"\n        borderWidth=\"thin\"\n        borderColor=\"neutral.secondary\"\n        borderRadius=\"input\"\n        transition=\"all linear 120ms\"\n        outlineColor=\"brand.base\"\n        outlineStyle={isFocused && !isButtonFocused ? 'solid' : 'none'}\n        outlineWidth=\"thick\"\n        outlineOffset={0.5}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        position=\"relative\"\n        _hover={{ borderColor: 'neutral.primary' }}\n      >\n        <button\n          {...mergeProps(buttonProps, focusProps)}\n          className={css({\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n            borderStartRadius: 'input',\n            h: 12,\n            w: 20,\n            px: 3,\n            outlineColor: 'brand.base',\n            outlineStyle: isButtonFocused ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            cursor: 'pointer',\n            transition: 'all linear 120ms',\n            _hover: {\n              bg: 'surface.tertiary',\n            },\n          })}\n        >\n          <HStack gap={2}>\n            <FlagContainer iso2={country.iso2} />\n            <IcoCaretDown width={14} height={14} transform={showDropdown ? 'rotate(180)' : ''} />\n          </HStack>\n        </button>\n\n        {showDropdown && (\n          <Box\n            ref={dropdownRef}\n            tabIndex={-1}\n            bg=\"surface.primary\"\n            position=\"absolute\"\n            w=\"full\"\n            rounded=\"input\"\n            top={55}\n            boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n            maxHeight=\"17.5rem\"\n            overflowY=\"auto\"\n            outline=\"none\"\n          >\n            {sortedCountries.map(([name, iso2, countryCode], index) => {\n              const isSelectedCountry = country.iso2 === iso2;\n              const isFocusedCountry = focusedIndex === index;\n\n              return (\n                <HStack\n                  cursor=\"pointer\"\n                  bg={isSelectedCountry ? 'brand.base' : isFocusedCountry ? 'brand.lightest' : ''}\n                  _hover={!isSelectedCountry ? { bg: 'brand.lightest' } : {}}\n                  key={iso2}\n                  ref={el => (itemRefs.current[index] = el)}\n                  gap={2}\n                  p={4}\n                  onClick={() => handleSelect(iso2)}\n                  justify=\"space-between\"\n                >\n                  <HStack gap={4}>\n                    {isSelectedCountry ? (\n                      <IcoCheckmarkCircleFill width={18} height={18} color={token('colors.surface.primary')} />\n                    ) : (\n                      <FlagContainer iso2={iso2} />\n                    )}\n                    <Text styles={{ color: isSelectedCountry ? token('colors.surface.primary') : '' }}>{name}</Text>\n                  </HStack>\n                  <Text\n                    styles={{\n                      color: isSelectedCountry ? token('colors.surface.primary') : token('colors.text.tertiary'),\n                    }}\n                  >\n                    +{countryCode}\n                  </Text>\n                </HStack>\n              );\n            })}\n          </Box>\n        )}\n        <input\n          type=\"tel\"\n          inputMode=\"tel\"\n          onChange={handlePhoneValueChange}\n          value={inputValue}\n          ref={inputRef}\n          className={css({\n            transition: 'all linear 120ms',\n            width: 'full',\n            boxSizing: 'border-box',\n            borderLeftWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 0,\n            margin: 0,\n            minWidth: 10,\n            fontWeight: 'medium',\n            backgroundColor: 'transparent',\n            color: 'text.primary',\n            height: 12,\n            fontSize: 'md',\n            py: 3,\n            px: 4,\n            textAlign: 'left',\n            outline: 'none',\n            _placeholder: {\n              color: 'text.tertiary',\n            },\n          })}\n        />\n      </Flex>\n      {errorMessage && (\n        <Text variant=\"error\" size=\"sm\" styles={{ fontWeight: '400' }}>\n          {errorMessage}\n        </Text>\n      )}\n    </VStack>\n  );\n};\n\nPhoneInput.displayName = 'PhoneInput';\nexport default PhoneInput;\n"],"names":["FlagContainer","iso2","_jsx","Flex","FlagImage","css","PhoneInput","props","onChange","autoFocus","errorMessage","value","setValue","useState","isFocused","setIsFocused","showDropdown","setShowDropdown","focusedIndex","setFocusedIndex","searchString","setSearchString","buttonRef","useRef","containerRef","dropdownRef","itemRefs","typeAheadTimeout","country","setCountry","inputRef","handlePhoneValueChange","inputValue","usePhoneInput","data","sortedCountries","useMemo","otherCountries","defaultCountries","selectedCountry","filteredCountries","handleSelect","useCallback","_a","toggleDropdown","buttonProps","useButton","focusProps","isButtonFocused","useFocusRing","keyboardProps","useKeyboard","prev","s","useEffect","handleClick","event","matchIndex","name","actualIndex","handleFocus","handleBlur","_jsxs","VStack","mergeProps","HStack","IcoCaretDown","Box","countryCode","index","isSelectedCountry","el","IcoCheckmarkCircleFill","token","Text"],"mappings":"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"}
+{"version":3,"file":"phone-input.js","sources":["../../../../src/components/inputs/phone-input.tsx"],"sourcesContent":["import { IcoCaretDown, IcoCheckmarkCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\nimport { FlagImage, defaultCountries, usePhoneInput, type CountryIso2 } from 'react-international-phone';\n\nexport interface PhoneInputProps {\n  onChange: (phone: string) => void;\n  autoFocus?: boolean;\n  errorMessage?: string;\n}\n\nconst FlagContainer = ({ iso2 }: { iso2: CountryIso2 }) => {\n  return (\n    <Flex\n      width=\"1.125rem\"\n      height=\"1.125rem\"\n      borderRadius=\"full\"\n      borderWidth=\"thin\"\n      borderColor=\"neutral.primary\"\n      overflow=\"hidden\"\n      align=\"center\"\n    >\n      <FlagImage\n        src={`https://flagcdn.com/${iso2}.svg`}\n        iso2={iso2}\n        size={16}\n        className={css({ objectFit: 'cover' })}\n      />\n    </Flex>\n  );\n};\n\nconst PhoneInput = (props: PhoneInputProps) => {\n  const { onChange, autoFocus = true, errorMessage } = props;\n  const [value, setValue] = useState('');\n  const [isFocused, setIsFocused] = useState(false);\n  const [showDropdown, setShowDropdown] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState(0);\n  const [searchString, setSearchString] = useState('');\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const typeAheadTimeout = useRef<number | undefined>(undefined);\n\n  const { country, setCountry, inputRef, handlePhoneValueChange, inputValue } = usePhoneInput({\n    defaultCountry: 'us',\n    value,\n    onChange: data => {\n      setValue(data.phone);\n      onChange(data.phone);\n    },\n  });\n\n  const sortedCountries = useMemo(() => {\n    const otherCountries = defaultCountries.filter(([, iso2]) => iso2 !== country.iso2);\n    const selectedCountry = defaultCountries.find(([, iso2]) => iso2 === country.iso2);\n    return selectedCountry ? [selectedCountry, ...otherCountries] : [...defaultCountries];\n  }, [country.iso2]);\n\n  const filteredCountries = useMemo(() => {\n    return sortedCountries.filter(([, iso2]) => iso2 !== country.iso2);\n  }, [country.iso2]);\n\n  const handleSelect = useCallback(\n    (iso2: CountryIso2) => {\n      setCountry(iso2);\n      setShowDropdown(false);\n      inputRef.current?.focus();\n    },\n    [setCountry],\n  );\n\n  const toggleDropdown = useCallback(() => {\n    setShowDropdown(!showDropdown);\n    if (!showDropdown) {\n      setFocusedIndex(0);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [showDropdown]);\n\n  const { buttonProps } = useButton(\n    {\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible: isButtonFocused } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: e => {\n      if (!showDropdown) return;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          setFocusedIndex(prev => (prev + 1) % sortedCountries.length);\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          setFocusedIndex(prev => (prev - 1 + sortedCountries.length) % sortedCountries.length);\n          break;\n        case 'Enter':\n          e.preventDefault();\n          if (focusedIndex >= 0) {\n            const [, iso2] = sortedCountries[focusedIndex];\n            handleSelect(iso2);\n          }\n          break;\n        case 'Escape':\n          setShowDropdown(false);\n          inputRef.current?.focus();\n          break;\n        default:\n          if (e.key === ' ' || e.key.match(/[\\w]/i)) {\n            e.preventDefault();\n            clearTimeout(typeAheadTimeout.current);\n            setSearchString(s => s + e.key);\n            typeAheadTimeout.current = window.setTimeout(() => {\n              setSearchString('');\n            }, 1000);\n          }\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    // Focus the input when the component mounts if autoFocus is true\n    if (autoFocus) {\n      inputRef.current?.focus();\n    }\n\n    // Closes the dropdown when clicking outside of it\n    const handleClick = (event: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setShowDropdown(false);\n        setIsFocused(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  useEffect(() => {\n    // Implements type-ahead search functionality\n    if (searchString !== '') {\n      const matchIndex = filteredCountries.findIndex(([name]) =>\n        name.toLowerCase().startsWith(searchString.toLowerCase()),\n      );\n      if (matchIndex !== -1) {\n        const actualIndex = sortedCountries.findIndex(([name]) => name === filteredCountries[matchIndex][0]);\n        setFocusedIndex(actualIndex);\n        itemRefs.current[actualIndex]?.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n        });\n      }\n    }\n  }, [searchString, sortedCountries, country.iso2]);\n\n  useEffect(() => {\n    // Scrolls the focused item into view\n    if (focusedIndex >= 0 && itemRefs.current[focusedIndex]) {\n      itemRefs.current[focusedIndex]?.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n    }\n  }, [focusedIndex]);\n\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n  };\n\n  return (\n    <VStack gap={2}>\n      <Flex\n        {...mergeProps(keyboardProps, focusProps)}\n        ref={containerRef}\n        height=\"fit-content\"\n        width=\"full\"\n        alignItems=\"center\"\n        justify=\"center\"\n        borderWidth=\"thin\"\n        borderColor=\"neutral.secondary\"\n        borderRadius=\"input\"\n        transition=\"all linear 120ms\"\n        outlineColor=\"brand.base\"\n        outlineStyle={isFocused && !isButtonFocused ? 'solid' : 'none'}\n        outlineWidth=\"thick\"\n        outlineOffset={0.5}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        position=\"relative\"\n        _hover={{ borderColor: 'neutral.primary' }}\n      >\n        <button\n          {...mergeProps(buttonProps, focusProps)}\n          className={css({\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n            borderStartRadius: 'input',\n            h: 12,\n            w: 20,\n            px: 3,\n            outlineColor: 'brand.base',\n            outlineStyle: isButtonFocused ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            cursor: 'pointer',\n            transition: 'all linear 120ms',\n            _hover: {\n              bg: 'surface.tertiary',\n            },\n          })}\n        >\n          <HStack gap={2}>\n            <FlagContainer iso2={country.iso2} />\n            <IcoCaretDown width={14} height={14} transform={showDropdown ? 'rotate(180)' : ''} />\n          </HStack>\n        </button>\n\n        {showDropdown && (\n          <Box\n            ref={dropdownRef}\n            tabIndex={-1}\n            bg=\"surface.primary\"\n            position=\"absolute\"\n            w=\"full\"\n            rounded=\"input\"\n            top={55}\n            boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n            maxHeight=\"17.5rem\"\n            overflowY=\"auto\"\n            outline=\"none\"\n          >\n            {sortedCountries.map(([name, iso2, countryCode], index) => {\n              const isSelectedCountry = country.iso2 === iso2;\n              const isFocusedCountry = focusedIndex === index;\n\n              return (\n                <HStack\n                  cursor=\"pointer\"\n                  bg={isSelectedCountry ? 'brand.base' : isFocusedCountry ? 'brand.lightest' : ''}\n                  _hover={!isSelectedCountry ? { bg: 'brand.lightest' } : {}}\n                  key={iso2}\n                  ref={el => (itemRefs.current[index] = el)}\n                  gap={2}\n                  p={4}\n                  onClick={() => handleSelect(iso2)}\n                  justify=\"space-between\"\n                >\n                  <HStack gap={4}>\n                    {isSelectedCountry ? (\n                      <IcoCheckmarkCircleFill width={18} height={18} color={token('colors.surface.primary')} />\n                    ) : (\n                      <FlagContainer iso2={iso2} />\n                    )}\n                    <Text styles={{ color: isSelectedCountry ? token('colors.surface.primary') : '' }}>{name}</Text>\n                  </HStack>\n                  <Text\n                    styles={{\n                      color: isSelectedCountry ? token('colors.surface.primary') : token('colors.text.tertiary'),\n                    }}\n                  >\n                    +{countryCode}\n                  </Text>\n                </HStack>\n              );\n            })}\n          </Box>\n        )}\n        <input\n          type=\"tel\"\n          inputMode=\"tel\"\n          onChange={handlePhoneValueChange}\n          value={inputValue}\n          ref={inputRef}\n          className={css({\n            transition: 'all linear 120ms',\n            width: 'full',\n            boxSizing: 'border-box',\n            borderLeftWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 0,\n            margin: 0,\n            minWidth: 10,\n            fontWeight: 'medium',\n            backgroundColor: 'transparent',\n            color: 'text.primary',\n            height: 12,\n            fontSize: 'md',\n            py: 3,\n            px: 4,\n            textAlign: 'left',\n            outline: 'none',\n            _placeholder: {\n              color: 'text.tertiary',\n            },\n          })}\n        />\n      </Flex>\n      {errorMessage && (\n        <Text variant=\"error\" size=\"sm\" styles={{ fontWeight: '400' }}>\n          {errorMessage}\n        </Text>\n      )}\n    </VStack>\n  );\n};\n\nPhoneInput.displayName = 'PhoneInput';\nexport default PhoneInput;\n"],"names":["FlagContainer","iso2","_jsx","Flex","FlagImage","css","PhoneInput","props","onChange","autoFocus","errorMessage","value","setValue","useState","isFocused","setIsFocused","showDropdown","setShowDropdown","focusedIndex","setFocusedIndex","searchString","setSearchString","buttonRef","useRef","containerRef","dropdownRef","itemRefs","typeAheadTimeout","country","setCountry","inputRef","handlePhoneValueChange","inputValue","usePhoneInput","data","sortedCountries","useMemo","otherCountries","defaultCountries","selectedCountry","filteredCountries","handleSelect","useCallback","_a","toggleDropdown","buttonProps","useButton","focusProps","isButtonFocused","useFocusRing","keyboardProps","useKeyboard","prev","s","useEffect","handleClick","event","matchIndex","name","actualIndex","handleFocus","handleBlur","_jsxs","VStack","mergeProps","HStack","IcoCaretDown","Box","countryCode","index","isSelectedCountry","el","IcoCheckmarkCircleFill","token","Text"],"mappings":"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"}

package/dist/cjs/components/inputs/text-input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("react"),o=require("react-aria"),T=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 x=require("../primitives/text.js"),k=require("../../recipes/text-input.js"),R=require("@styled/css"),h=require("@styled/jsx"),v=require("@styled/tokens"),c=require("create-slots");const z=c.createSlot(({children:s,...l})=>e.jsx(h.Flex,{alignItems:"center",justifyContent:"center",children:a.Children.map(s,r=>{var t;return a.cloneElement(r,{...l,color:(t=r.props.color)!==null&&t!==void 0?t:v.token("colors.neutral.primary")})})})),E=c.createSlot(({children:s,...l})=>e.jsx(h.Flex,{alignItems:"center",justifyContent:"center",children:a.Children.map(s,r=>{var t;return a.isValidElement(r)?a.cloneElement(r,{...l,color:(t=r.props.color)!==null&&t!==void 0?t:v.token("colors.brand.base")}):null})})),w=c.createSlot(T.default),D=c.createSlot(x.default),H=c.createSlot(x.default),A=a.forwardRef((s,l)=>{const{label:r,disabled:t,size:u="md",alignText:f="left",attr:g,description:d,autoFocus:j,className:b="",errorMessage:m}=s,i=u==="sm"?16:20,V=a.useRef(null),P=l||V,{labelProps:B,inputProps:O,descriptionProps:W,errorMessageProps:G,isInvalid:N,validationErrors:y}=o.useTextField({...s,isDisabled:t??!1,isInvalid:!!m},P),{focusProps:J}=o.useFocusRing({autoFocus:j??!1}),{hoverProps:K}=o.useHover({isDisabled:t??!1});return c.createHost(s.children,p=>{const q=p.get(z),I=p.get(E),F=p.getProps(w),C=p.getProps(D),S=p.getProps(H),n=k.textInput({size:u,alignText:f,disabled:t,isError:N});return e.jsxs(h.VStack,{className:R.cx(n.container,b),children:[r&&e.jsx("label",{className:n.label,...B,children:r}),e.jsxs(h.HStack,{className:n.inputContainer,children:[q&&{...q,props:{...q.props,className:n.typeIcon,width:i,height:i}},C&&e.jsx(x.default,{...C,styles:{color:v.token("colors.text.tertiary")}}),e.jsx("input",{ref:P,className:n.input,...o.mergeProps(O,J,K),...g}),S&&e.jsx(x.default,{...S,styles:{color:v.token("colors.text.tertiary")}}),I&&{...I,props:{...I.props,className:n.actionIcon,width:i,height:i}},F&&e.jsx(h.Flex,{alignItems:"center",justifyContent:"center",className:n.actionButton,children:e.jsx(T.default,{...F,variant:"text",size:u})})]}),d&&e.jsx("div",{className:n.description,...W,children:d}),N&&e.jsx(x.default,{variant:"error",...G,size:"sm",styles:{fontWeight:"400"},children:y.length>0?y.join(" "):m})]})})}),M=a.forwardRef((s,l)=>{const{disabled:r,autoFocus:t,className:u="",attr:f}=s,g=a.useRef(null),d=l||g,{inputProps:j}=o.useTextField({...s,isDisabled:r??!1},d),{focusProps:b}=o.useFocusRing({autoFocus:t??!1}),{hoverProps:m}=o.useHover({isDisabled:r??!1}),i=k.textInput({char:!0,disabled:r});return e.jsx("div",{className:R.cx(i.container,i.inputContainer,u),children:e.jsx("input",{ref:d,className:i.input,...o.mergeProps(j,b,m),size:1,...f})})}),L=Object.assign(A,{TypeIcon:z,ActionIcon:E,ActionButton:w,Char:M,Prefix:D,Suffix:H});A.displayName="TextInput",M.displayName="TextInputChar",exports.TextInput=L;
+"use strict";var e=require("react/jsx-runtime"),a=require("react"),o=require("react-aria"),T=require("../primitives/button.js");require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var x=require("../primitives/text.js"),k=require("../../recipes/text-input.js"),R=require("@styled/css"),h=require("@styled/jsx"),v=require("@styled/tokens"),c=require("create-slots");const z=c.createSlot(({children:s,...l})=>e.jsx(h.Flex,{alignItems:"center",justifyContent:"center",children:a.Children.map(s,r=>{var t;return a.cloneElement(r,{...l,color:(t=r.props.color)!==null&&t!==void 0?t:v.token("colors.neutral.primary")})})})),E=c.createSlot(({children:s,...l})=>e.jsx(h.Flex,{alignItems:"center",justifyContent:"center",children:a.Children.map(s,r=>{var t;return a.isValidElement(r)?a.cloneElement(r,{...l,color:(t=r.props.color)!==null&&t!==void 0?t:v.token("colors.brand.base")}):null})})),w=c.createSlot(T.default),D=c.createSlot(x.default),H=c.createSlot(x.default),A=a.forwardRef((s,l)=>{const{label:r,disabled:t,size:u="md",alignText:f="left",attr:g,description:d,autoFocus:j,className:b="",errorMessage:m}=s,i=u==="sm"?16:20,V=a.useRef(null),P=l||V,{labelProps:B,inputProps:O,descriptionProps:W,errorMessageProps:G,isInvalid:N,validationErrors:y}=o.useTextField({...s,isDisabled:t??!1,isInvalid:!!m},P),{focusProps:J}=o.useFocusRing({autoFocus:j??!1}),{hoverProps:K}=o.useHover({isDisabled:t??!1});return c.createHost(s.children,p=>{const q=p.get(z),I=p.get(E),F=p.getProps(w),C=p.getProps(D),S=p.getProps(H),n=k.textInput({size:u,alignText:f,disabled:t,isError:N});return e.jsxs(h.VStack,{className:R.cx(n.container,b),children:[r&&e.jsx("label",{className:n.label,...B,children:r}),e.jsxs(h.HStack,{className:n.inputContainer,children:[q&&{...q,props:{...q.props,className:n.typeIcon,width:i,height:i}},C&&e.jsx(x.default,{...C,styles:{color:v.token("colors.text.tertiary")}}),e.jsx("input",{ref:P,className:n.input,...o.mergeProps(O,J,K),...g}),S&&e.jsx(x.default,{...S,styles:{color:v.token("colors.text.tertiary")}}),I&&{...I,props:{...I.props,className:n.actionIcon,width:i,height:i}},F&&e.jsx(h.Flex,{alignItems:"center",justifyContent:"center",className:n.actionButton,children:e.jsx(T.default,{...F,variant:"text",size:u})})]}),d&&e.jsx("div",{className:n.description,...W,children:d}),N&&e.jsx(x.default,{variant:"error",...G,size:"sm",styles:{fontWeight:"400"},children:y.length>0?y.join(" "):m})]})})}),M=a.forwardRef((s,l)=>{const{disabled:r,autoFocus:t,className:u="",attr:f}=s,g=a.useRef(null),d=l||g,{inputProps:j}=o.useTextField({...s,isDisabled:r??!1},d),{focusProps:b}=o.useFocusRing({autoFocus:t??!1}),{hoverProps:m}=o.useHover({isDisabled:r??!1}),i=k.textInput({char:!0,disabled:r});return e.jsx("div",{className:R.cx(i.container,i.inputContainer,u),children:e.jsx("input",{ref:d,className:i.input,...o.mergeProps(j,b,m),size:1,...f})})}),L=Object.assign(A,{TypeIcon:z,ActionIcon:E,ActionButton:w,Char:M,Prefix:D,Suffix:H});A.displayName="TextInput",M.displayName="TextInputChar",exports.TextInput=L;
 //# sourceMappingURL=text-input.js.map

package/dist/cjs/components/inputs/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sources":["../../../../src/components/inputs/text-input.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  isValidElement,\n  ReactNode,\n  RefObject,\n  useRef,\n} from 'react';\nimport type { AriaTextFieldProps } from 'react-aria';\nimport { mergeProps, useFocusRing, useHover, useTextField } from 'react-aria';\n\nimport { Button, Text } from '@components/primitives';\nimport { textInput } from '@recipes/text-input';\nimport { cx } from '@styled/css';\nimport { Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nimport { createHost, createSlot } from 'create-slots';\n\nexport type TextInputProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n  errorMessage?: string;\n  children?: ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n  alignText?: 'left' | 'center' | 'right';\n};\n\nexport type CharProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n};\n\nexport type ActionIconProps = HTMLAttributes<HTMLElement> & {\n  onClick: () => void;\n};\n\nconst TypeIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, { ...props, color: child.props.color ?? token('colors.neutral.primary') });\n      })}\n    </Flex>\n  );\n});\n\nconst ActionIcon = createSlot(({ children, ...props }: ActionIconProps) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        if (isValidElement<ActionIconProps>(child)) {\n          return cloneElement(child, { ...props, color: child.props.color ?? token('colors.brand.base') });\n        }\n        return null;\n      })}\n    </Flex>\n  );\n});\n\nconst ActionButton = createSlot(Button);\nconst Prefix = createSlot(Text);\nconst Suffix = createSlot(Text);\n\nconst Component = forwardRef<HTMLInputElement, TextInputProps>((props, forwardedRef) => {\n  const {\n    label,\n    disabled,\n    size = 'md',\n    alignText = 'left',\n    attr,\n    description,\n    autoFocus,\n    className = '',\n    errorMessage,\n  } = props;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { labelProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors } = useTextField(\n    { ...props, isDisabled: disabled ?? false, isInvalid: !!errorMessage },\n    ref as RefObject<HTMLInputElement>,\n  );\n\n  const { focusProps } = useFocusRing({\n    autoFocus: autoFocus ?? false,\n  });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  return createHost(props.children, slots => {\n    const typeIcon = slots.get(TypeIcon);\n    const actionIcon = slots.get(ActionIcon);\n    const actionButtonProps = slots.getProps(ActionButton);\n    const prefixProps = slots.getProps(Prefix);\n    const suffixProps = slots.getProps(Suffix);\n\n    const classes = textInput({\n      size,\n      alignText,\n      disabled,\n      isError: isInvalid,\n    });\n\n    return (\n      <VStack className={cx(classes.container, className)}>\n        {label && (\n          <label className={classes.label} {...labelProps}>\n            {label}\n          </label>\n        )}\n        <HStack className={classes.inputContainer}>\n          {typeIcon && {\n            ...typeIcon,\n            props: { ...typeIcon.props, className: classes.typeIcon, width: iconSize, height: iconSize },\n          }}\n          {prefixProps && <Text {...prefixProps} styles={{ color: token('colors.text.tertiary') }} />}\n          <input ref={ref} className={classes.input} {...mergeProps(inputProps, focusProps, hoverProps)} {...attr} />\n          {suffixProps && <Text {...suffixProps} styles={{ color: token('colors.text.tertiary') }} />}\n          {actionIcon && {\n            ...actionIcon,\n            props: { ...actionIcon.props, className: classes.actionIcon, width: iconSize, height: iconSize },\n          }}\n          {actionButtonProps && (\n            <Flex alignItems=\"center\" justifyContent=\"center\" className={classes.actionButton}>\n              <Button {...actionButtonProps} variant=\"text\" size={size} />\n            </Flex>\n          )}\n        </HStack>\n        {description && (\n          <div className={classes.description} {...descriptionProps}>\n            {description}\n          </div>\n        )}\n        {isInvalid && (\n          <Text variant=\"error\" {...errorMessageProps} size={'sm'} styles={{ fontWeight: '400' }}>\n            {validationErrors.length > 0 ? validationErrors.join(' ') : errorMessage}\n          </Text>\n        )}\n      </VStack>\n    );\n  });\n});\n\nconst Char = forwardRef<HTMLInputElement, CharProps>((props, forwardedRef) => {\n  const { disabled, autoFocus, className = '', attr } = props;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { inputProps } = useTextField({ ...props, isDisabled: disabled ?? false }, ref as RefObject<HTMLInputElement>);\n\n  const { focusProps } = useFocusRing({ autoFocus: autoFocus ?? false });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  const classes = textInput({ char: true, disabled });\n\n  return (\n    <div className={cx(classes.container, classes.inputContainer, className)}>\n      <input\n        ref={ref}\n        className={classes.input}\n        {...mergeProps(inputProps, focusProps, hoverProps)}\n        size={1}\n        {...attr}\n      />\n    </div>\n  );\n});\n\nexport const TextInput = Object.assign(Component, {\n  TypeIcon,\n  ActionIcon,\n  ActionButton,\n  Char,\n  Prefix,\n  Suffix,\n});\n\nComponent.displayName = 'TextInput';\nChar.displayName = 'TextInputChar';\n"],"names":["TypeIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","_a","token","ActionIcon","isValidElement","ActionButton","Button","Prefix","Text","Suffix","Component","forwardRef","forwardedRef","label","disabled","size","alignText","attr","description","autoFocus","className","errorMessage","iconSize","internalRef","useRef","ref","labelProps","inputProps","descriptionProps","errorMessageProps","isInvalid","validationErrors","useTextField","focusProps","useFocusRing","hoverProps","useHover","createHost","slots","typeIcon","actionIcon","actionButtonProps","prefixProps","suffixProps","classes","textInput","_jsxs","VStack","cx","HStack","mergeProps","Char","TextInput"],"mappings":"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"}
+{"version":3,"file":"text-input.js","sources":["../../../../src/components/inputs/text-input.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  isValidElement,\n  ReactNode,\n  RefObject,\n  useRef,\n} from 'react';\nimport type { AriaTextFieldProps } from 'react-aria';\nimport { mergeProps, useFocusRing, useHover, useTextField } from 'react-aria';\n\nimport { Button, Text } from '@components/primitives';\nimport { textInput } from '@recipes/text-input';\nimport { cx } from '@styled/css';\nimport { Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nimport { createHost, createSlot } from 'create-slots';\n\nexport type TextInputProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n  errorMessage?: string;\n  children?: ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n  alignText?: 'left' | 'center' | 'right';\n};\n\nexport type CharProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n};\n\nexport type ActionIconProps = HTMLAttributes<HTMLElement> & {\n  onClick: () => void;\n};\n\nconst TypeIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, { ...props, color: child.props.color ?? token('colors.neutral.primary') });\n      })}\n    </Flex>\n  );\n});\n\nconst ActionIcon = createSlot(({ children, ...props }: ActionIconProps) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        if (isValidElement<ActionIconProps>(child)) {\n          return cloneElement(child, { ...props, color: child.props.color ?? token('colors.brand.base') });\n        }\n        return null;\n      })}\n    </Flex>\n  );\n});\n\nconst ActionButton = createSlot(Button);\nconst Prefix = createSlot(Text);\nconst Suffix = createSlot(Text);\n\nconst Component = forwardRef<HTMLInputElement, TextInputProps>((props, forwardedRef) => {\n  const {\n    label,\n    disabled,\n    size = 'md',\n    alignText = 'left',\n    attr,\n    description,\n    autoFocus,\n    className = '',\n    errorMessage,\n  } = props;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { labelProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors } = useTextField(\n    { ...props, isDisabled: disabled ?? false, isInvalid: !!errorMessage },\n    ref as RefObject<HTMLInputElement>,\n  );\n\n  const { focusProps } = useFocusRing({\n    autoFocus: autoFocus ?? false,\n  });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  return createHost(props.children, slots => {\n    const typeIcon = slots.get(TypeIcon);\n    const actionIcon = slots.get(ActionIcon);\n    const actionButtonProps = slots.getProps(ActionButton);\n    const prefixProps = slots.getProps(Prefix);\n    const suffixProps = slots.getProps(Suffix);\n\n    const classes = textInput({\n      size,\n      alignText,\n      disabled,\n      isError: isInvalid,\n    });\n\n    return (\n      <VStack className={cx(classes.container, className)}>\n        {label && (\n          <label className={classes.label} {...labelProps}>\n            {label}\n          </label>\n        )}\n        <HStack className={classes.inputContainer}>\n          {typeIcon && {\n            ...typeIcon,\n            props: { ...typeIcon.props, className: classes.typeIcon, width: iconSize, height: iconSize },\n          }}\n          {prefixProps && <Text {...prefixProps} styles={{ color: token('colors.text.tertiary') }} />}\n          <input ref={ref} className={classes.input} {...mergeProps(inputProps, focusProps, hoverProps)} {...attr} />\n          {suffixProps && <Text {...suffixProps} styles={{ color: token('colors.text.tertiary') }} />}\n          {actionIcon && {\n            ...actionIcon,\n            props: { ...actionIcon.props, className: classes.actionIcon, width: iconSize, height: iconSize },\n          }}\n          {actionButtonProps && (\n            <Flex alignItems=\"center\" justifyContent=\"center\" className={classes.actionButton}>\n              <Button {...actionButtonProps} variant=\"text\" size={size} />\n            </Flex>\n          )}\n        </HStack>\n        {description && (\n          <div className={classes.description} {...descriptionProps}>\n            {description}\n          </div>\n        )}\n        {isInvalid && (\n          <Text variant=\"error\" {...errorMessageProps} size={'sm'} styles={{ fontWeight: '400' }}>\n            {validationErrors.length > 0 ? validationErrors.join(' ') : errorMessage}\n          </Text>\n        )}\n      </VStack>\n    );\n  });\n});\n\nconst Char = forwardRef<HTMLInputElement, CharProps>((props, forwardedRef) => {\n  const { disabled, autoFocus, className = '', attr } = props;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { inputProps } = useTextField({ ...props, isDisabled: disabled ?? false }, ref as RefObject<HTMLInputElement>);\n\n  const { focusProps } = useFocusRing({ autoFocus: autoFocus ?? false });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  const classes = textInput({ char: true, disabled });\n\n  return (\n    <div className={cx(classes.container, classes.inputContainer, className)}>\n      <input\n        ref={ref}\n        className={classes.input}\n        {...mergeProps(inputProps, focusProps, hoverProps)}\n        size={1}\n        {...attr}\n      />\n    </div>\n  );\n});\n\nexport const TextInput = Object.assign(Component, {\n  TypeIcon,\n  ActionIcon,\n  ActionButton,\n  Char,\n  Prefix,\n  Suffix,\n});\n\nComponent.displayName = 'TextInput';\nChar.displayName = 'TextInputChar';\n"],"names":["TypeIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","_a","token","ActionIcon","isValidElement","ActionButton","Button","Prefix","Text","Suffix","Component","forwardRef","forwardedRef","label","disabled","size","alignText","attr","description","autoFocus","className","errorMessage","iconSize","internalRef","useRef","ref","labelProps","inputProps","descriptionProps","errorMessageProps","isInvalid","validationErrors","useTextField","focusProps","useFocusRing","hoverProps","useHover","createHost","slots","typeIcon","actionIcon","actionButtonProps","prefixProps","suffixProps","classes","textInput","_jsxs","VStack","cx","HStack","mergeProps","Char","TextInput"],"mappings":"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"}

package/dist/cjs/components/list-items/navigation-button.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),h=require("@styled/tokens"),C=require("../icons/ico-external-link.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 b=require("../primitives/text.js"),g=require("@styled/css"),a=require("@styled/jsx"),N=require("@styled/patterns"),l=require("create-slots"),t=require("react"),c=require("react-aria");const q=l.createSlot(({children:r,...s})=>e.jsx(a.Center,{children:t.Children.map(r,i=>t.cloneElement(i,s))})),v=l.createSlot(({children:r,...s})=>e.jsx(a.Center,{children:t.Children.map(r,i=>t.cloneElement(i,s))})),f=t.forwardRef((r,s)=>{const{primaryLabel:i,secondaryLabel:u,isExternalLink:x,disabled:m}=r,j=t.useRef(null),d=s||j,{buttonProps:y}=c.useButton({...r,isDisabled:m??!1},d),{isFocusVisible:k,focusProps:w}=c.useFocusRing();return l.createHost(r.children,p=>{const n=p.get(q),o=p.get(v);return e.jsxs("button",{...c.mergeProps(y,w),ref:d,className:N.flex({justifyContent:"space-between",alignItems:"center",w:"full",p:4,bg:"neutral.quaternary",transition:"background-color 0.2s",_hover:{bg:"neutral.secondary"},rounded:"lg",cursor:"pointer",outlineColor:"brand.base",outlineStyle:k?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_disabled:{opacity:"0.3",pointerEvents:"none"}}),children:[e.jsxs(a.HStack,{children:[n&&{...n,props:{...n.props,className:n.props.color?void 0:g.css({color:"brand.base"}),height:24}},e.jsx(b.default,{styles:{fontWeight:500},children:i}),x&&e.jsx(C.default,{width:14,height:14,color:h.token("colors.neutral.primary")})]}),e.jsxs(a.HStack,{children:[u&&e.jsx(b.default,{size:"sm",styles:{color:h.token("colors.text.tertiary")},children:u}),o&&{...o,props:{...o.props,className:o.props.color?void 0:g.css({color:"neutral.primary"}),width:16,height:16}}]})]})})});f.displayName="NavigationButton";const S=Object.assign(f,{LeadingIcon:q,TrailingIcon:v});exports.default=S;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),h=require("@styled/tokens"),C=require("../icons/ico-external-link.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var b=require("../primitives/text.js"),q=require("@styled/css"),a=require("@styled/jsx"),N=require("@styled/patterns"),l=require("create-slots"),t=require("react"),c=require("react-aria");const g=l.createSlot(({children:r,...s})=>e.jsx(a.Center,{children:t.Children.map(r,i=>t.cloneElement(i,s))})),v=l.createSlot(({children:r,...s})=>e.jsx(a.Center,{children:t.Children.map(r,i=>t.cloneElement(i,s))})),f=t.forwardRef((r,s)=>{const{primaryLabel:i,secondaryLabel:u,isExternalLink:x,disabled:m}=r,j=t.useRef(null),d=s||j,{buttonProps:y}=c.useButton({...r,isDisabled:m??!1},d),{isFocusVisible:k,focusProps:w}=c.useFocusRing();return l.createHost(r.children,p=>{const n=p.get(g),o=p.get(v);return e.jsxs("button",{...c.mergeProps(y,w),ref:d,className:N.flex({justifyContent:"space-between",alignItems:"center",w:"full",p:4,bg:"neutral.quaternary",transition:"background-color 0.2s",_hover:{bg:"neutral.secondary"},rounded:"lg",cursor:"pointer",outlineColor:"brand.base",outlineStyle:k?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_disabled:{opacity:"0.3",pointerEvents:"none"}}),children:[e.jsxs(a.HStack,{children:[n&&{...n,props:{...n.props,className:n.props.color?void 0:q.css({color:"brand.base"}),height:24}},e.jsx(b.default,{styles:{fontWeight:500},children:i}),x&&e.jsx(C.default,{width:14,height:14,color:h.token("colors.neutral.primary")})]}),e.jsxs(a.HStack,{children:[u&&e.jsx(b.default,{size:"sm",styles:{color:h.token("colors.text.tertiary")},children:u}),o&&{...o,props:{...o.props,className:o.props.color?void 0:q.css({color:"neutral.primary"}),width:16,height:16}}]})]})})});f.displayName="NavigationButton";const S=Object.assign(f,{LeadingIcon:g,TrailingIcon:v});exports.default=S;
 //# sourceMappingURL=navigation-button.js.map

package/dist/cjs/components/list-items/navigation-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-button.js","sources":["../../../../src/components/list-items/navigation-button.tsx"],"sourcesContent":["import { IcoExternalLink } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack } from '@styled/jsx';\nimport { flex } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, RefObject, cloneElement, forwardRef, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface NavigationButtonProps extends AriaButtonProps {\n  primaryLabel: string;\n  secondaryLabel?: string;\n  isExternalLink?: boolean;\n  disabled?: boolean;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst NavigationButtonBase = forwardRef<HTMLButtonElement, NavigationButtonProps>((props, forwardedRef) => {\n  const { primaryLabel, secondaryLabel, isExternalLink, disabled } = props;\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton({ ...props, isDisabled: disabled ?? false }, ref as RefObject<HTMLButtonElement>);\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\n    return (\n      <button\n        {...mergeProps(buttonProps, focusProps)}\n        ref={ref}\n        className={flex({\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          w: 'full',\n          p: 4,\n          bg: 'neutral.quaternary',\n          transition: 'background-color 0.2s',\n          _hover: { bg: 'neutral.secondary' },\n          rounded: 'lg',\n          cursor: 'pointer',\n          outlineColor: 'brand.base',\n          outlineStyle: isFocusVisible ? 'solid' : 'none',\n          outlineWidth: 'thick',\n          outlineOffset: 0.5,\n          _disabled: { opacity: '0.3', pointerEvents: 'none' },\n        })}\n      >\n        <HStack>\n          {leadingIcon && {\n            ...leadingIcon,\n            props: {\n              ...leadingIcon.props,\n              className: !leadingIcon.props.color ? css({ color: 'brand.base' }) : undefined,\n              height: 24,\n            },\n          }}\n          <Text styles={{ fontWeight: 500 }}>{primaryLabel}</Text>\n          {isExternalLink && <IcoExternalLink width={14} height={14} color={token('colors.neutral.primary')} />}\n        </HStack>\n        <HStack>\n          {secondaryLabel && (\n            <Text size=\"sm\" styles={{ color: token('colors.text.tertiary') }}>\n              {secondaryLabel}\n            </Text>\n          )}\n          {trailingIcon && {\n            ...trailingIcon,\n            props: {\n              ...trailingIcon.props,\n              className: !trailingIcon.props.color ? css({ color: 'neutral.primary' }) : undefined,\n              width: 16,\n              height: 16,\n            },\n          }}\n        </HStack>\n      </button>\n    );\n  });\n});\n\nNavigationButtonBase.displayName = 'NavigationButton';\n\nconst NavigationButton = Object.assign(NavigationButtonBase, { LeadingIcon, TrailingIcon });\n\nexport default NavigationButton;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TrailingIcon","NavigationButtonBase","forwardRef","forwardedRef","primaryLabel","secondaryLabel","isExternalLink","disabled","internalRef","useRef","ref","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","_jsxs","mergeProps","flex","HStack","css","Text","IcoExternalLink","token","NavigationButton"],"mappings":"ykBAiBA,MAAMA,EAAcC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,EAAAA,IAACC,EAAAA,OAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,eAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAeR,aAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,MAACC,EAAM,OAAA,CAAA,SACJC,EAAS,SAAA,IAAIJ,EAAUK,GACfC,EAAAA,aAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKO,EAAuBC,EAAAA,WAAqD,CAACR,EAAOS,IAAgB,CACxG,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,EAAgB,SAAAC,CAAQ,EAAKb,EAE7Dc,EAAcC,EAAO,OAAA,IAAI,EACzBC,EAAMP,GAAgBK,EAEtB,CAAE,YAAAG,CAAa,EAAGC,YAAU,CAAE,GAAGlB,EAAO,WAAYa,GAAY,EAAO,EAAEG,CAAmC,EAC5G,CAAE,eAAAG,EAAgB,WAAAC,GAAeC,EAAAA,aAAAA,EAEvC,OAAOC,EAAAA,WAAWtB,EAAM,SAAUuB,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAI1B,CAAW,EACnC4B,EAAeF,EAAM,IAAIjB,CAAY,EAE3C,OACEoB,EAAAA,KACM,SAAA,CAAA,GAAAC,aAAWV,EAAaG,CAAU,EACtC,IAAKJ,EACL,UAAWY,EAAAA,KAAK,CACd,eAAgB,gBAChB,WAAY,SACZ,EAAG,OACH,EAAG,EACH,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,OAAQ,UACR,aAAc,aACd,aAAcT,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,GACf,UAAW,CAAE,QAAS,MAAO,cAAe,MAAQ,CACrD,CAAA,EAED,SAAA,CAAAO,EAAAA,KAACG,EAAAA,OAAM,CAAA,SAAA,CACJL,GAAe,CACd,GAAGA,EACH,MAAO,CACL,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuC,OAA/BM,EAAAA,IAAI,CAAE,MAAO,aAAc,EACjE,OAAQ,EACT,CACF,EACD7B,EAAAA,IAAC8B,UAAK,CAAA,OAAQ,CAAE,WAAY,GAAG,EAAK,SAAArB,IACnCE,GAAkBX,EAAAA,IAAC+B,EAAAA,QAAe,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOC,QAAM,wBAAwB,CAAC,CAAA,CAAI,CAC9F,CAAA,EACTP,EAAAA,KAACG,EAAAA,OACE,CAAA,SAAA,CAAAlB,GACCV,EAAAA,IAAC8B,EAAAA,QAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,MAAOE,QAAM,sBAAsB,CAAG,EAAA,SAC7DtB,CAAc,CAAA,EAGlBc,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAA4C,OAApCK,EAAAA,IAAI,CAAE,MAAO,kBAAmB,EACvE,MAAO,GACP,OAAQ,EACT,EACF,CACM,CAAA,CAAA,CAAA,CAAA,CAGf,CAAC,CACH,CAAC,EAEDvB,EAAqB,YAAc,mBAE7B2B,MAAAA,EAAmB,OAAO,OAAO3B,EAAsB,CAAE,YAAAV,EAAa,aAAAS,CAAY,CAAE"}
+{"version":3,"file":"navigation-button.js","sources":["../../../../src/components/list-items/navigation-button.tsx"],"sourcesContent":["import { IcoExternalLink } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack } from '@styled/jsx';\nimport { flex } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, RefObject, cloneElement, forwardRef, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface NavigationButtonProps extends AriaButtonProps {\n  primaryLabel: string;\n  secondaryLabel?: string;\n  isExternalLink?: boolean;\n  disabled?: boolean;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst NavigationButtonBase = forwardRef<HTMLButtonElement, NavigationButtonProps>((props, forwardedRef) => {\n  const { primaryLabel, secondaryLabel, isExternalLink, disabled } = props;\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton({ ...props, isDisabled: disabled ?? false }, ref as RefObject<HTMLButtonElement>);\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\n    return (\n      <button\n        {...mergeProps(buttonProps, focusProps)}\n        ref={ref}\n        className={flex({\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          w: 'full',\n          p: 4,\n          bg: 'neutral.quaternary',\n          transition: 'background-color 0.2s',\n          _hover: { bg: 'neutral.secondary' },\n          rounded: 'lg',\n          cursor: 'pointer',\n          outlineColor: 'brand.base',\n          outlineStyle: isFocusVisible ? 'solid' : 'none',\n          outlineWidth: 'thick',\n          outlineOffset: 0.5,\n          _disabled: { opacity: '0.3', pointerEvents: 'none' },\n        })}\n      >\n        <HStack>\n          {leadingIcon && {\n            ...leadingIcon,\n            props: {\n              ...leadingIcon.props,\n              className: !leadingIcon.props.color ? css({ color: 'brand.base' }) : undefined,\n              height: 24,\n            },\n          }}\n          <Text styles={{ fontWeight: 500 }}>{primaryLabel}</Text>\n          {isExternalLink && <IcoExternalLink width={14} height={14} color={token('colors.neutral.primary')} />}\n        </HStack>\n        <HStack>\n          {secondaryLabel && (\n            <Text size=\"sm\" styles={{ color: token('colors.text.tertiary') }}>\n              {secondaryLabel}\n            </Text>\n          )}\n          {trailingIcon && {\n            ...trailingIcon,\n            props: {\n              ...trailingIcon.props,\n              className: !trailingIcon.props.color ? css({ color: 'neutral.primary' }) : undefined,\n              width: 16,\n              height: 16,\n            },\n          }}\n        </HStack>\n      </button>\n    );\n  });\n});\n\nNavigationButtonBase.displayName = 'NavigationButton';\n\nconst NavigationButton = Object.assign(NavigationButtonBase, { LeadingIcon, TrailingIcon });\n\nexport default NavigationButton;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TrailingIcon","NavigationButtonBase","forwardRef","forwardedRef","primaryLabel","secondaryLabel","isExternalLink","disabled","internalRef","useRef","ref","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","_jsxs","mergeProps","flex","HStack","css","Text","IcoExternalLink","token","NavigationButton"],"mappings":"unBAiBA,MAAMA,EAAcC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,EAAAA,IAACC,EAAAA,OAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,eAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAeR,aAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,MAACC,EAAM,OAAA,CAAA,SACJC,EAAS,SAAA,IAAIJ,EAAUK,GACfC,EAAAA,aAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKO,EAAuBC,EAAAA,WAAqD,CAACR,EAAOS,IAAgB,CACxG,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,EAAgB,SAAAC,CAAQ,EAAKb,EAE7Dc,EAAcC,EAAO,OAAA,IAAI,EACzBC,EAAMP,GAAgBK,EAEtB,CAAE,YAAAG,CAAa,EAAGC,YAAU,CAAE,GAAGlB,EAAO,WAAYa,GAAY,EAAO,EAAEG,CAAmC,EAC5G,CAAE,eAAAG,EAAgB,WAAAC,GAAeC,EAAAA,aAAAA,EAEvC,OAAOC,EAAAA,WAAWtB,EAAM,SAAUuB,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAI1B,CAAW,EACnC4B,EAAeF,EAAM,IAAIjB,CAAY,EAE3C,OACEoB,EAAAA,KACM,SAAA,CAAA,GAAAC,aAAWV,EAAaG,CAAU,EACtC,IAAKJ,EACL,UAAWY,EAAAA,KAAK,CACd,eAAgB,gBAChB,WAAY,SACZ,EAAG,OACH,EAAG,EACH,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,OAAQ,UACR,aAAc,aACd,aAAcT,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,GACf,UAAW,CAAE,QAAS,MAAO,cAAe,MAAQ,CACrD,CAAA,EAED,SAAA,CAAAO,EAAAA,KAACG,EAAAA,OAAM,CAAA,SAAA,CACJL,GAAe,CACd,GAAGA,EACH,MAAO,CACL,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuC,OAA/BM,EAAAA,IAAI,CAAE,MAAO,aAAc,EACjE,OAAQ,EACT,CACF,EACD7B,EAAAA,IAAC8B,UAAK,CAAA,OAAQ,CAAE,WAAY,GAAG,EAAK,SAAArB,IACnCE,GAAkBX,EAAAA,IAAC+B,EAAAA,QAAe,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOC,QAAM,wBAAwB,CAAC,CAAA,CAAI,CAC9F,CAAA,EACTP,EAAAA,KAACG,EAAAA,OACE,CAAA,SAAA,CAAAlB,GACCV,EAAAA,IAAC8B,EAAAA,QAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,MAAOE,QAAM,sBAAsB,CAAG,EAAA,SAC7DtB,CAAc,CAAA,EAGlBc,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAA4C,OAApCK,EAAAA,IAAI,CAAE,MAAO,kBAAmB,EACvE,MAAO,GACP,OAAQ,EACT,EACF,CACM,CAAA,CAAA,CAAA,CAAA,CAGf,CAAC,CACH,CAAC,EAEDvB,EAAqB,YAAc,mBAE7B2B,MAAAA,EAAmB,OAAO,OAAO3B,EAAsB,CAAE,YAAAV,EAAa,aAAAS,CAAY,CAAE"}

package/dist/cjs/components/list-items/token-list-item.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),y=require("../logos/icon-generic-token.js"),p=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 c=require("../primitives/text.js"),S=require("@styled/css"),s=require("@styled/jsx"),m=require("create-slots"),l=require("react"),u=require("react-aria");const g=m.createSlot(({children:r,...t})=>e.jsx(s.Center,{children:l.Children.map(r,n=>l.cloneElement(n,t))})),f=({name:r,fiatBalanceWithSymbol:t,tokenBalanceWithSymbol:n,tokenIcon:o,logoUrl:i})=>e.jsxs(s.HStack,{w:"full",justify:"space-between",children:[e.jsxs(s.HStack,{gap:2,children:[o?{...o,props:{...o.props,width:30,height:30}}:i?e.jsx("img",{width:30,height:30,src:i,alt:`${r} logo`}):e.jsx(y.default,{width:30,height:30}),e.jsx(c.default,{styles:{fontWeight:"500",textTransform:"capitalize"},children:r})]}),e.jsxs(s.VStack,{gap:0,alignItems:"flex-end",children:[e.jsx(c.default,{size:"sm",styles:{lineHeight:"1.5rem",fontWeight:"500"},children:t}),e.jsx(c.default,{size:"sm",styles:{lineHeight:"1.5rem",color:p.token("colors.text.secondary")},children:n})]})]}),W=r=>{const{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:o,logoUrl:i,onPress:a}=r,h=l.useRef(null),b=l.useCallback(()=>{a?.()},[a]),{buttonProps:k}=u.useButton({...r,onPress:b},h),{isFocusVisible:x,focusProps:j}=u.useFocusRing();return m.createHost(r.children,q=>{const d=q.get(g);return a?e.jsx("button",{ref:h,...u.mergeProps(k,j),className:S.css({w:"full",p:4,minH:20,bg:"neutral.quaternary",transition:"background-color 0.2s",_hover:{bg:"neutral.secondary"},rounded:"lg",outlineColor:"brand.base",outlineStyle:x?"solid":"none",outlineWidth:"thick",outlineOffset:1,cursor:"pointer"}),children:e.jsx(f,{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:o,tokenIcon:d,logoUrl:i})}):e.jsx(f,{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:o,tokenIcon:d,logoUrl:i})})},v=Object.assign(W,{TokenIcon:g});exports.TokenListItem=v;
+"use strict";var e=require("react/jsx-runtime"),y=require("../logos/icon-generic-token.js"),p=require("@styled/tokens");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var c=require("../primitives/text.js"),S=require("@styled/css"),s=require("@styled/jsx"),m=require("create-slots"),l=require("react"),u=require("react-aria");const g=m.createSlot(({children:r,...t})=>e.jsx(s.Center,{children:l.Children.map(r,n=>l.cloneElement(n,t))})),f=({name:r,fiatBalanceWithSymbol:t,tokenBalanceWithSymbol:n,tokenIcon:o,logoUrl:i})=>e.jsxs(s.HStack,{w:"full",justify:"space-between",children:[e.jsxs(s.HStack,{gap:2,children:[o?{...o,props:{...o.props,width:30,height:30}}:i?e.jsx("img",{width:30,height:30,src:i,alt:`${r} logo`}):e.jsx(y.default,{width:30,height:30}),e.jsx(c.default,{styles:{fontWeight:"500",textTransform:"capitalize"},children:r})]}),e.jsxs(s.VStack,{gap:0,alignItems:"flex-end",children:[e.jsx(c.default,{size:"sm",styles:{lineHeight:"1.5rem",fontWeight:"500"},children:t}),e.jsx(c.default,{size:"sm",styles:{lineHeight:"1.5rem",color:p.token("colors.text.secondary")},children:n})]})]}),W=r=>{const{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:o,logoUrl:i,onPress:a}=r,h=l.useRef(null),b=l.useCallback(()=>{a?.()},[a]),{buttonProps:k}=u.useButton({...r,onPress:b},h),{isFocusVisible:x,focusProps:q}=u.useFocusRing();return m.createHost(r.children,j=>{const d=j.get(g);return a?e.jsx("button",{ref:h,...u.mergeProps(k,q),className:S.css({w:"full",p:4,minH:20,bg:"neutral.quaternary",transition:"background-color 0.2s",_hover:{bg:"neutral.secondary"},rounded:"lg",outlineColor:"brand.base",outlineStyle:x?"solid":"none",outlineWidth:"thick",outlineOffset:1,cursor:"pointer"}),children:e.jsx(f,{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:o,tokenIcon:d,logoUrl:i})}):e.jsx(f,{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:o,tokenIcon:d,logoUrl:i})})},v=Object.assign(W,{TokenIcon:g});exports.TokenListItem=v;
 //# sourceMappingURL=token-list-item.js.map

package/dist/cjs/components/list-items/token-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, useCallback, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n  name: string;\n  fiatBalanceWithSymbol: string;\n  tokenBalanceWithSymbol: string;\n  logoUrl?: string;\n  onPress?: () => void;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n  tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({ name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, tokenIcon, logoUrl }: ListContentProps) => {\n  return (\n    <HStack w=\"full\" justify=\"space-between\">\n      <HStack gap={2}>\n        {tokenIcon ? (\n          {\n            ...tokenIcon,\n            props: {\n              ...tokenIcon.props,\n              width: 30,\n              height: 30,\n            },\n          }\n        ) : logoUrl ? (\n          <img width={30} height={30} src={logoUrl} alt={`${name} logo`} />\n        ) : (\n          <IconGenericToken width={30} height={30} />\n        )}\n        <Text styles={{ fontWeight: '500', textTransform: 'capitalize' }}>{name}</Text>\n      </HStack>\n      <VStack gap={0} alignItems=\"flex-end\">\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem', fontWeight: '500' }}>\n          {fiatBalanceWithSymbol}\n        </Text>\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem', color: token('colors.text.secondary') }}>\n          {tokenBalanceWithSymbol}\n        </Text>\n      </VStack>\n    </HStack>\n  );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n  const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, logoUrl, onPress } = props;\n\n  const ref = useRef(null);\n\n  const handlePress = useCallback(() => {\n    onPress?.();\n  }, [onPress]);\n\n  const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const tokenIcon = slots.get(TokenIcon);\n\n    if (onPress)\n      return (\n        <button\n          ref={ref}\n          {...mergeProps(buttonProps, focusProps)}\n          className={css({\n            w: 'full',\n            p: 4,\n            minH: 20,\n            bg: 'neutral.quaternary',\n            transition: 'background-color 0.2s',\n            _hover: { bg: 'neutral.secondary' },\n            rounded: 'lg',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 1,\n            cursor: 'pointer',\n          })}\n        >\n          <ListContent\n            name={name}\n            fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n            tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n            tokenIcon={tokenIcon}\n            logoUrl={logoUrl}\n          />\n        </button>\n      );\n\n    return (\n      <ListContent\n        name={name}\n        fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n        tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n        tokenIcon={tokenIcon}\n        logoUrl={logoUrl}\n      />\n    );\n  });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","_jsxs","HStack","IconGenericToken","Text","VStack","token","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","mergeProps","css","TokenListItem"],"mappings":"qfAiBA,MAAMA,EAAYC,aAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAAAA,IAACC,SAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAaD,aAAAA,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CAAE,KAAAC,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,UAAAC,EAAW,QAAAC,CAAO,IAE1FC,EAAAA,KAACC,EAAAA,OAAM,CAAC,EAAE,OAAO,QAAQ,0BACvBD,EAAAA,KAACC,EAAAA,OAAO,CAAA,IAAK,YACVH,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,EAAAA,IAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAW,CAAA,EAEjEN,MAACa,EAAiB,QAAA,CAAA,MAAO,GAAI,OAAQ,EAAM,CAAA,EAE7Cb,MAACc,EAAI,QAAA,CAAC,OAAQ,CAAE,WAAY,MAAO,cAAe,YAAc,EAAA,SAAGR,CAAI,CAAA,CAAQ,CACxE,CAAA,EACTK,EAAAA,KAACI,SAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAf,EAAAA,IAACc,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,WAAY,KAAO,EAAA,SAChEP,CAAqB,CAAA,EAExBP,EAAAA,IAACc,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,MAAOE,EAAAA,MAAM,uBAAuB,CAAC,EAClF,SAAAR,CACI,CAAA,CAAA,CAAA,CAAA,CACA,CACF,CAAA,EAIPS,EAAqBlB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAQ,CAAS,EAAGnB,EAE5EoB,EAAMC,SAAO,IAAI,EAEjBC,EAAcC,EAAAA,YAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEN,CAAE,YAAAK,CAAW,EAAKC,YAAU,CAAE,GAAGzB,EAAO,QAASsB,GAAeF,CAAG,EACnE,CAAE,eAAAM,EAAgB,WAAAC,GAAeC,EAAAA,aAEvC,EAAA,OAAOC,EAAAA,WAAW7B,EAAM,SAAU8B,GAAQ,CACxC,MAAMpB,EAAYoB,EAAM,IAAIjC,CAAS,EAErC,OAAIsB,EAEAlB,EAAAA,IACE,SAAA,CAAA,IAAKmB,KACDW,EAAAA,WAAWP,EAAaG,CAAU,EACtC,UAAWK,MAAI,CACb,EAAG,OACH,EAAG,EACH,KAAM,GACN,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,aAAc,aACd,aAAcN,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,EACf,OAAQ,UACT,EAAC,SAEFzB,MAACK,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,CAAO,CAAA,CAEX,CAAA,EAIXV,EAAAA,IAACK,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,CACT,CAAA,CAEN,CAAC,CACH,EAEasB,EAAgB,OAAO,OAAOf,EAAmB,CAAE,UAAArB,CAAS,CAAE"}
+{"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, useCallback, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n  name: string;\n  fiatBalanceWithSymbol: string;\n  tokenBalanceWithSymbol: string;\n  logoUrl?: string;\n  onPress?: () => void;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n  tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({ name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, tokenIcon, logoUrl }: ListContentProps) => {\n  return (\n    <HStack w=\"full\" justify=\"space-between\">\n      <HStack gap={2}>\n        {tokenIcon ? (\n          {\n            ...tokenIcon,\n            props: {\n              ...tokenIcon.props,\n              width: 30,\n              height: 30,\n            },\n          }\n        ) : logoUrl ? (\n          <img width={30} height={30} src={logoUrl} alt={`${name} logo`} />\n        ) : (\n          <IconGenericToken width={30} height={30} />\n        )}\n        <Text styles={{ fontWeight: '500', textTransform: 'capitalize' }}>{name}</Text>\n      </HStack>\n      <VStack gap={0} alignItems=\"flex-end\">\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem', fontWeight: '500' }}>\n          {fiatBalanceWithSymbol}\n        </Text>\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem', color: token('colors.text.secondary') }}>\n          {tokenBalanceWithSymbol}\n        </Text>\n      </VStack>\n    </HStack>\n  );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n  const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, logoUrl, onPress } = props;\n\n  const ref = useRef(null);\n\n  const handlePress = useCallback(() => {\n    onPress?.();\n  }, [onPress]);\n\n  const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const tokenIcon = slots.get(TokenIcon);\n\n    if (onPress)\n      return (\n        <button\n          ref={ref}\n          {...mergeProps(buttonProps, focusProps)}\n          className={css({\n            w: 'full',\n            p: 4,\n            minH: 20,\n            bg: 'neutral.quaternary',\n            transition: 'background-color 0.2s',\n            _hover: { bg: 'neutral.secondary' },\n            rounded: 'lg',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 1,\n            cursor: 'pointer',\n          })}\n        >\n          <ListContent\n            name={name}\n            fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n            tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n            tokenIcon={tokenIcon}\n            logoUrl={logoUrl}\n          />\n        </button>\n      );\n\n    return (\n      <ListContent\n        name={name}\n        fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n        tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n        tokenIcon={tokenIcon}\n        logoUrl={logoUrl}\n      />\n    );\n  });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","_jsxs","HStack","IconGenericToken","Text","VStack","token","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","mergeProps","css","TokenListItem"],"mappings":"miBAiBA,MAAMA,EAAYC,aAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAAAA,IAACC,SAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAaD,aAAAA,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CAAE,KAAAC,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,UAAAC,EAAW,QAAAC,CAAO,IAE1FC,EAAAA,KAACC,EAAAA,OAAM,CAAC,EAAE,OAAO,QAAQ,0BACvBD,EAAAA,KAACC,EAAAA,OAAO,CAAA,IAAK,YACVH,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,EAAAA,IAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAW,CAAA,EAEjEN,MAACa,EAAiB,QAAA,CAAA,MAAO,GAAI,OAAQ,EAAM,CAAA,EAE7Cb,MAACc,EAAI,QAAA,CAAC,OAAQ,CAAE,WAAY,MAAO,cAAe,YAAc,EAAA,SAAGR,CAAI,CAAA,CAAQ,CACxE,CAAA,EACTK,EAAAA,KAACI,SAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAf,EAAAA,IAACc,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,WAAY,KAAO,EAAA,SAChEP,CAAqB,CAAA,EAExBP,EAAAA,IAACc,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,MAAOE,EAAAA,MAAM,uBAAuB,CAAC,EAClF,SAAAR,CACI,CAAA,CAAA,CAAA,CAAA,CACA,CACF,CAAA,EAIPS,EAAqBlB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAQ,CAAS,EAAGnB,EAE5EoB,EAAMC,SAAO,IAAI,EAEjBC,EAAcC,EAAAA,YAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEN,CAAE,YAAAK,CAAW,EAAKC,YAAU,CAAE,GAAGzB,EAAO,QAASsB,GAAeF,CAAG,EACnE,CAAE,eAAAM,EAAgB,WAAAC,GAAeC,EAAAA,aAEvC,EAAA,OAAOC,EAAAA,WAAW7B,EAAM,SAAU8B,GAAQ,CACxC,MAAMpB,EAAYoB,EAAM,IAAIjC,CAAS,EAErC,OAAIsB,EAEAlB,EAAAA,IACE,SAAA,CAAA,IAAKmB,KACDW,EAAAA,WAAWP,EAAaG,CAAU,EACtC,UAAWK,MAAI,CACb,EAAG,OACH,EAAG,EACH,KAAM,GACN,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,aAAc,aACd,aAAcN,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,EACf,OAAQ,UACT,EAAC,SAEFzB,MAACK,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,CAAO,CAAA,CAEX,CAAA,EAIXV,EAAAA,IAACK,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,CACT,CAAA,CAEN,CAAC,CACH,EAEasB,EAAgB,OAAO,OAAOf,EAAmB,CAAE,UAAArB,CAAS,CAAE"}