@magiclabs/ui-components 1.28.2 → 1.29.0

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("../feedback/callout.js");var v=require("../feedback/loading-spinner.js");require("../feedback/progress-bar.js");var s=require("@styled/jsx");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"),require("../primitives/text.js"),require("../primitives/portal.js");var j=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var m=require("../../recipes/card.js"),d=require("@styled/css");const t=j.forwardRef(({children:i,className:a,id:u,asButton:r,stack:l,onClick:o,validating:n,...x},c)=>{const q=m.card({asButton:r,validating:n,...x});return l||r?e.jsx(s.Flex,{id:u,className:d.cx(q,a),flexDirection:"column",role:r?"button":"none",onClick:r?o:void 0,ref:c,children:n?e.jsx(v.LoadingSpinner,{neutral:!0}):i}):e.jsx(s.Box,{id:u,className:d.cx(q,a),ref:c,children:i})});t.displayName="Card",exports.Card=t;
+"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var v=require("react"),s=require("@styled/jsx"),d=require("@styled/css");require("../feedback/callout.js");var j=require("../feedback/loading-spinner.js");require("../feedback/progress-bar.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"),require("../primitives/text.js"),require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var m=require("../../recipes/card.js");const t=v.forwardRef(({children:i,className:a,id:u,asButton:r,stack:l,onClick:o,validating:n,...x},c)=>{const q=m.card({asButton:r,validating:n,...x});return l||r?e.jsx(s.Flex,{id:u,className:d.cx(q,a),flexDirection:"column",role:r?"button":"none",onClick:r?o:void 0,ref:c,children:n?e.jsx(j.LoadingSpinner,{neutral:!0}):i}):e.jsx(s.Box,{id:u,className:d.cx(q,a),ref:c,children:i})});t.displayName="Card",exports.Card=t;
 //# sourceMappingURL=card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../src/components/containers/card.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { card } from '@recipes/card';\nimport { cx } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { ComponentProps, forwardRef } from 'react';\n\nexport interface CardProps extends ComponentProps<'div'> {\n  className?: string;\n  id?: string;\n  alt?: boolean;\n  asButton?: boolean;\n  alignment?: 'center' | 'left' | 'right';\n  expand?: boolean;\n  gapType?: 'none' | 'sm' | 'md' | 'lg';\n  heavyShadow?: boolean;\n  paddingType?: 'none' | 'sm' | 'md' | 'lg';\n  stack?: boolean;\n  widthMax?: boolean;\n  disabled?: boolean;\n  validating?: boolean;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  ({ children, className, id, asButton, stack, onClick, validating, ...props }, ref) => {\n    const classStyles = card({ asButton, validating, ...props });\n\n    return stack || asButton ? (\n      <Flex\n        id={id}\n        className={cx(classStyles, className)}\n        flexDirection=\"column\"\n        role={asButton ? 'button' : 'none'}\n        onClick={asButton ? onClick : undefined}\n        ref={ref}\n      >\n        {validating ? <LoadingSpinner neutral /> : children}\n      </Flex>\n    ) : (\n      <Box id={id} className={cx(classStyles, className)} ref={ref}>\n        {children}\n      </Box>\n    );\n  },\n);\n\nCard.displayName = 'Card';\n"],"names":["Card","forwardRef","children","className","id","asButton","stack","onClick","validating","props","ref","classStyles","card","_jsx","Flex","cx","LoadingSpinner","Box"],"mappings":"+uBAsBO,MAAMA,EAAOC,EAAAA,WAClB,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAAC,EAAI,SAAAC,EAAU,MAAAC,EAAO,QAAAC,EAAS,WAAAC,EAAY,GAAGC,CAAO,EAAEC,IAAO,CACnF,MAAMC,EAAcC,EAAAA,KAAK,CAAE,SAAAP,EAAU,WAAAG,EAAY,GAAGC,CAAK,CAAE,EAE3D,OAAOH,GAASD,EACdQ,EAAAA,IAACC,EAAI,KAAA,CACH,GAAIV,EACJ,UAAWW,EAAAA,GAAGJ,EAAaR,CAAS,EACpC,cAAc,SACd,KAAME,EAAW,SAAW,OAC5B,QAASA,EAAWE,EAAU,OAC9B,IAAKG,WAEJF,EAAaK,MAACG,EAAAA,eAAe,CAAA,aAAad,CAAQ,CAAA,EAGrDW,MAACI,EAAAA,KAAI,GAAIb,EAAI,UAAWW,KAAGJ,EAAaR,CAAS,EAAG,IAAKO,EACtD,SAAAR,CACG,CAAA,CAEV,CAAC,EAGHF,EAAK,YAAc"}
+{"version":3,"file":"card.js","sources":["../../../../src/components/containers/card.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { card } from '@recipes/card';\nimport { cx } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { ComponentProps, forwardRef } from 'react';\n\nexport interface CardProps extends ComponentProps<'div'> {\n  className?: string;\n  id?: string;\n  alt?: boolean;\n  asButton?: boolean;\n  alignment?: 'center' | 'left' | 'right';\n  expand?: boolean;\n  gapType?: 'none' | 'sm' | 'md' | 'lg';\n  heavyShadow?: boolean;\n  paddingType?: 'none' | 'sm' | 'md' | 'lg';\n  stack?: boolean;\n  widthMax?: boolean;\n  disabled?: boolean;\n  validating?: boolean;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  ({ children, className, id, asButton, stack, onClick, validating, ...props }, ref) => {\n    const classStyles = card({ asButton, validating, ...props });\n\n    return stack || asButton ? (\n      <Flex\n        id={id}\n        className={cx(classStyles, className)}\n        flexDirection=\"column\"\n        role={asButton ? 'button' : 'none'}\n        onClick={asButton ? onClick : undefined}\n        ref={ref}\n      >\n        {validating ? <LoadingSpinner neutral /> : children}\n      </Flex>\n    ) : (\n      <Box id={id} className={cx(classStyles, className)} ref={ref}>\n        {children}\n      </Box>\n    );\n  },\n);\n\nCard.displayName = 'Card';\n"],"names":["Card","forwardRef","children","className","id","asButton","stack","onClick","validating","props","ref","classStyles","card","_jsx","Flex","cx","LoadingSpinner","Box"],"mappings":"2uBAsBO,MAAMA,EAAOC,EAAAA,WAClB,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAAC,EAAI,SAAAC,EAAU,MAAAC,EAAO,QAAAC,EAAS,WAAAC,EAAY,GAAGC,CAAO,EAAEC,IAAO,CACnF,MAAMC,EAAcC,EAAAA,KAAK,CAAE,SAAAP,EAAU,WAAAG,EAAY,GAAGC,CAAK,CAAE,EAE3D,OAAOH,GAASD,EACdQ,EAAAA,IAACC,EAAI,KAAA,CACH,GAAIV,EACJ,UAAWW,EAAAA,GAAGJ,EAAaR,CAAS,EACpC,cAAc,SACd,KAAME,EAAW,SAAW,OAC5B,QAASA,EAAWE,EAAU,OAC9B,IAAKG,WAEJF,EAAaK,MAACG,EAAAA,eAAe,CAAA,aAAad,CAAQ,CAAA,EAGrDW,MAACI,EAAAA,KAAI,GAAIb,EAAI,UAAWW,KAAGJ,EAAaR,CAAS,EAAG,IAAKO,EACtD,SAAAR,CACG,CAAA,CAEV,CAAC,EAGHF,EAAK,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("../feedback/callout.js");var b=require("../feedback/loading-spinner.js");require("../feedback/progress-bar.js");var n=require("@styled/jsx"),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 g=require("../primitives/text.js");require("../primitives/portal.js");var s=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var h=require("../logos/logo-pay-pal-wordmark.js"),m=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=m.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!important",outlineColor:"#ffc439!important",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(g.default,{fontWeight:"semibold",styles:{color:p.token("colors.ink.90")},children:"Pay with"}),e.jsx(n.Box,{mt:.5,children:e.jsx(h.default,{width:60})})]})})});l.displayName="PayPalButton",exports.PayPalButton=l;
+"use strict";var e=require("react/jsx-runtime"),b=require("@styled/tokens"),n=require("react"),s=require("@styled/jsx"),o=require("@styled/css");require("../feedback/callout.js");var p=require("../feedback/loading-spinner.js");require("../feedback/progress-bar.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 g=require("../primitives/text.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var h=require("../logos/logo-pay-pal-wordmark.js"),m=require("../../recipes/button.js"),r=require("react-aria");const l=n.forwardRef((i,d)=>{const{disabled:t,expand:c,validating:u}=i,q=m.button({expand:c,validating:u}),f=n.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!important",outlineColor:"#ffc439!important",outlineWidth:"thick",outlineOffset:.5,outlineStyle:x?"solid":"none"})),ref:a,...r.mergeProps(v,P),"aria-disabled":t,children:u?e.jsx(p.LoadingSpinner,{size:24,strokeWidth:2.5,inverted:!0}):e.jsxs(s.HStack,{w:"full",gap:1,justifyContent:"center",children:[e.jsx(g.default,{fontWeight:"semibold",styles:{color:b.token("colors.ink.90")},children:"Pay with"}),e.jsx(s.Box,{mt:.5,children:e.jsx(h.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!important',\n          outlineColor: '#ffc439!important',\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 fontWeight=\"semibold\" styles={{ color: token('colors.ink.90') }}>\n            Pay with\n          </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":"g0BAgBO,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,oBACJ,aAAc,oBACd,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,WAAW,WAAW,OAAQ,CAAE,MAAOC,EAAAA,MAAM,eAAe,GAE3D,SAAA,UAAA,CAAA,EACPR,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!important',\n          outlineColor: '#ffc439!important',\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 fontWeight=\"semibold\" styles={{ color: token('colors.ink.90') }}>\n            Pay with\n          </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":"wzBAgBO,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,oBACJ,aAAc,oBACd,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,WAAW,WAAW,OAAQ,CAAE,MAAOC,EAAAA,MAAM,eAAe,GAE3D,SAAA,UAAA,CAAA,EACPR,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/animated-checkmark.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("react/jsx-runtime"),l=require("@styled/tokens"),m=require("../icons/ico-checkmark.js"),h=require("../../hooks/useDisplayState.js"),k=require("@styled/jsx");const d={lg:{circleSize:14,checkmarkSize:30},sm:{circleSize:5,checkmarkSize:12}},u=({size:n="lg",isVisible:e=!0,onShown:a=()=>{},onHidden:o=()=>{}})=>{const{circleSize:s,checkmarkSize:i}=d[n],{onHide:t,onShow:c}=h.useDisplayState({animate:!0,show:e,onHidden:o,onShown:a});return r.jsx(k.Circle,{size:s,bg:"positive.lightest",animation:e?"popIn 150ms":"popOut 150ms",animationFillMode:"forwards",onAnimationEnd:e?c:t,children:r.jsx(m.default,{width:i,height:i,color:l.token("colors.positive.base")})})};exports.AnimatedCheckmark=u;
+//# sourceMappingURL=animated-checkmark.js.map

package/dist/cjs/components/feedback/animated-checkmark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-checkmark.js","sources":["../../../../src/components/feedback/animated-checkmark.tsx"],"sourcesContent":["import { IcoCheckmark } from '@components/icons';\nimport { useDisplayState } from '@hooks/useDisplayState';\nimport { Circle } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nexport interface AnimatedCheckmarkProps {\n  size?: 'lg' | 'sm';\n  isVisible?: boolean;\n  onShown?: () => void;\n  onHidden?: () => void;\n}\n\nconst checkmarkSpecs = {\n  lg: {\n    circleSize: 14,\n    checkmarkSize: 30,\n  },\n  sm: {\n    circleSize: 5,\n    checkmarkSize: 12,\n  },\n};\n\nexport const AnimatedCheckmark = ({\n  size = 'lg',\n  isVisible = true,\n  onShown = () => {},\n  onHidden = () => {},\n}: AnimatedCheckmarkProps) => {\n  const { circleSize, checkmarkSize } = checkmarkSpecs[size];\n  const { onHide, onShow } = useDisplayState({\n    animate: true,\n    show: isVisible,\n    onHidden,\n    onShown,\n  });\n\n  return (\n    <Circle\n      size={circleSize}\n      bg=\"positive.lightest\"\n      animation={isVisible ? 'popIn 150ms' : 'popOut 150ms'}\n      animationFillMode=\"forwards\"\n      onAnimationEnd={isVisible ? onShow : onHide}\n    >\n      <IcoCheckmark width={checkmarkSize} height={checkmarkSize} color={token('colors.positive.base')} />\n    </Circle>\n  );\n};\n"],"names":["checkmarkSpecs","AnimatedCheckmark","size","isVisible","onShown","onHidden","circleSize","checkmarkSize","onHide","onShow","useDisplayState","_jsx","Circle","IcoCheckmark","token"],"mappings":"wLAYA,MAAMA,EAAiB,CACrB,GAAI,CACF,WAAY,GACZ,cAAe,EAChB,EACD,GAAI,CACF,WAAY,EACZ,cAAe,EAChB,GAGUC,EAAoB,CAAC,CAChC,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,QAAAC,EAAU,IAAO,CAAA,EACjB,SAAAC,EAAW,IAAK,CAAA,CAAG,IACQ,CAC3B,KAAM,CAAE,WAAAC,EAAY,cAAAC,CAAa,EAAKP,EAAeE,CAAI,EACnD,CAAE,OAAAM,EAAQ,OAAAC,CAAQ,EAAGC,EAAAA,gBAAgB,CACzC,QAAS,GACT,KAAMP,EACN,SAAAE,EACA,QAAAD,CACD,CAAA,EAED,OACEO,EAAAA,IAACC,SAAM,CACL,KAAMN,EACN,GAAG,oBACH,UAAWH,EAAY,cAAgB,eACvC,kBAAkB,WAClB,eAAgBA,EAAYM,EAASD,EAAM,SAE3CG,EAACE,IAAAA,EAAAA,QAAa,CAAA,MAAON,EAAe,OAAQA,EAAe,MAAOO,QAAM,sBAAsB,CAAC,CAAA,CACxF,CAAA,CAEb"}

package/dist/cjs/components/feedback/animated-spinner.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),u=require("../../hooks/useDisplayState.js"),t=require("@styled/css"),p=require("@styled/jsx");const h={lg:{size:56,radius:28,strokeWidth:5,animation:"animateSpinnerLarge"},sm:{size:20,radius:10,strokeWidth:3,animation:"animateSpinnerSmall"}},w=({size:r="lg",isVisible:n=!0,onShown:a=()=>{},onHidden:o=()=>{}})=>{const{size:i,radius:m,strokeWidth:s,animation:d}=h[r],{onHide:l,onShow:c}=u.useDisplayState({animate:!0,show:n,onHidden:o,onShown:a});return e.jsx(p.Center,{inline:!0,animation:n?"popIn 150ms":"popOut 150ms",animationFillMode:"forwards",onAnimationEnd:n?c:l,children:e.jsx("svg",{width:i,height:i,viewBox:`0 0 ${i} ${i}`,fill:"none",stroke:"none",xmlns:"http://www.w3.org/2000/svg",className:t.css({animation:"spin 1.5s linear infinite"}),children:e.jsx("circle",{className:t.css({stroke:"text.primary",transformOrigin:"center center"}),style:{animation:`${d} 2s ease-in-out infinite`},cx:"50%",cy:"50%",r:m-s/2,strokeLinecap:"round",strokeWidth:s})})})};exports.AnimatedSpinner=w;
+//# sourceMappingURL=animated-spinner.js.map

package/dist/cjs/components/feedback/animated-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-spinner.js","sources":["../../../../src/components/feedback/animated-spinner.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { css } from '@styled/css';\nimport { Center } from '@styled/jsx';\n\nexport interface AnimatedSpinnerProps {\n  size?: 'lg' | 'sm';\n  isVisible?: boolean;\n  onShown?: () => void;\n  onHidden?: () => void;\n}\n\nconst spinnerSpecs = {\n  lg: {\n    size: 56,\n    radius: 28,\n    strokeWidth: 5,\n    animation: 'animateSpinnerLarge',\n  },\n  sm: {\n    size: 20,\n    radius: 10,\n    strokeWidth: 3,\n    animation: 'animateSpinnerSmall',\n  },\n};\n\nexport const AnimatedSpinner = ({\n  size = 'lg',\n  isVisible = true,\n  onShown = () => {},\n  onHidden = () => {},\n}: AnimatedSpinnerProps) => {\n  const { size: spinnerSize, radius, strokeWidth, animation } = spinnerSpecs[size];\n  const { onHide, onShow } = useDisplayState({\n    animate: true,\n    show: isVisible,\n    onHidden,\n    onShown,\n  });\n\n  return (\n    <Center\n      inline\n      animation={isVisible ? 'popIn 150ms' : 'popOut 150ms'}\n      animationFillMode=\"forwards\"\n      onAnimationEnd={isVisible ? onShow : onHide}\n    >\n      <svg\n        width={spinnerSize}\n        height={spinnerSize}\n        viewBox={`0 0 ${spinnerSize} ${spinnerSize}`}\n        fill=\"none\"\n        stroke=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={css({ animation: 'spin 1.5s linear infinite' })}\n      >\n        <circle\n          className={css({\n            stroke: 'text.primary',\n            transformOrigin: 'center center',\n          })}\n          style={{ animation: `${animation} 2s ease-in-out infinite` }}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={radius - strokeWidth / 2}\n          strokeLinecap=\"round\"\n          strokeWidth={strokeWidth}\n        />\n      </svg>\n    </Center>\n  );\n};\n"],"names":["spinnerSpecs","AnimatedSpinner","size","isVisible","onShown","onHidden","spinnerSize","radius","strokeWidth","animation","onHide","onShow","useDisplayState","_jsx","Center","css"],"mappings":"8IAWA,MAAMA,EAAe,CACnB,GAAI,CACF,KAAM,GACN,OAAQ,GACR,YAAa,EACb,UAAW,qBACZ,EACD,GAAI,CACF,KAAM,GACN,OAAQ,GACR,YAAa,EACb,UAAW,qBACZ,GAGUC,EAAkB,CAAC,CAC9B,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,QAAAC,EAAU,IAAO,CAAA,EACjB,SAAAC,EAAW,IAAK,CAAG,CAAA,IACM,CACzB,KAAM,CAAE,KAAMC,EAAa,OAAAC,EAAQ,YAAAC,EAAa,UAAAC,GAAcT,EAAaE,CAAI,EACzE,CAAE,OAAAQ,EAAQ,OAAAC,CAAQ,EAAGC,EAAAA,gBAAgB,CACzC,QAAS,GACT,KAAMT,EACN,SAAAE,EACA,QAAAD,CACD,CAAA,EAED,OACES,EAAAA,IAACC,EAAAA,OACC,CAAA,UACA,UAAWX,EAAY,cAAgB,eACvC,kBAAkB,WAClB,eAAgBA,EAAYQ,EAASD,WAErCG,EACE,IAAA,MAAA,CAAA,MAAOP,EACP,OAAQA,EACR,QAAS,OAAOA,CAAW,IAAIA,CAAW,GAC1C,KAAK,OACL,OAAO,OACP,MAAM,6BACN,UAAWS,MAAI,CAAE,UAAW,4BAA6B,EAAC,SAE1DF,EAAAA,cACE,UAAWE,EAAI,IAAA,CACb,OAAQ,eACR,gBAAiB,eAClB,CAAA,EACD,MAAO,CAAE,UAAW,GAAGN,CAAS,0BAA0B,EAC1D,GAAG,MACH,GAAG,MACH,EAAGF,EAASC,EAAc,EAC1B,cAAc,QACd,YAAaA,GAEX,CAAA,CAAA,CAAA,CAGZ"}

package/dist/cjs/components/layouts/passport-page.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("../containers/card.js");var w=require("@styled/css"),t=require("@styled/jsx"),S=require("../containers/drawer.js"),A=require("react");require("../utils/client-asset-logo.js");var C=require("@styled/tokens");require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var I=require("../icons/ico-caret-left.js"),b=require("../icons/ico-magic.js"),L=require("../icons/ico-question-circle-fill.js");require("../containers/header.js");var y=require("../containers/menu.js"),N=require("../containers/modal.js");require("../containers/overlay.js"),require("../info/copy-button.js"),require("../info/email-wbr.js"),require("../info/security-otp.js"),require("../info/text-box.js");var T=require("../info/wallet-address.js"),s=require("../primitives/button.js"),f=require("../primitives/popover.js"),p=require("../primitives/text.js"),a=require("create-slots");const P=a.createSlot(({children:r})=>A.Children.map(r,i=>e.jsx(s.default,{expand:!0,...i.props}))),k=a.createSlot(s.default),B=a.createSlot(s.default),M=a.createSlot(({children:r})=>e.jsxs(f.Popover,{textStyle:"subtle",variant:"text",children:[e.jsx(f.Popover.TrailingIcon,{children:e.jsx(L.default,{})}),e.jsx(f.Popover.Content,{children:r})]})),z=a.createSlot(({children:r})=>e.jsx(t.VStack,{w:"full",justify:"center",children:r})),D=a.createSlot(y.Menu),F=a.createSlot(S.Drawer),H=a.createSlot(({children:r})=>e.jsx(t.Center,{pt:3,w:"full",children:r})),V=a.createSlot(({children:r,domain:i,name:o,logoUrl:n})=>e.jsxs(t.HStack,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[n?e.jsx("img",{src:n,alt:o,width:24,height:24}):e.jsx(b.default,{color:C.token("colors.brand.base"),height:24,width:24}),e.jsx(p.default,{size:"sm",fontWeight:"semibold",children:o}),i&&e.jsx(p.default,{size:"sm",fontColor:"text.tertiary",children:i}),r]})),G=({actionDirection:r="row",address:i,branding:o,children:n,title:v,onBack:c,onCancel:d,...W})=>a.createHost(n,l=>{const u=l.getProps(k),x=l.getProps(B),h=l.getProps(D),g=l.getProps(F),m=l.get(P),q=l.get(M),j=r==="row";return e.jsxs(N.Modal,{...W,fullscreen:!0,paddingType:"none",gap:0,children:[e.jsxs(t.VStack,{gap:0,width:"full",children:[e.jsxs(t.HStack,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[c&&e.jsx(s.default,{onPress:c,size:"md",textStyle:"neutral",variant:"text",children:e.jsx(s.default.LeadingIcon,{children:e.jsx(I.default,{})})}),d&&e.jsx(s.default,{onPress:d,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(c||d)&&e.jsx("div",{className:w.css({w:6})}),o&&e.jsx(b.default,{color:C.token(o==="light"?"colors.text.primary":"colors.neutral.primary")}),v&&e.jsx(p.default,{size:"sm",fontColor:"text.secondary",children:v}),i||q||h?e.jsxs(t.HStack,{children:[i&&e.jsx(T.default,{address:i}),q,h&&e.jsx(y.Menu,{...h})]}):e.jsx("div",{className:w.css({w:6})})]}),l.get(V)]}),e.jsxs(t.VStack,{h:"full",w:"full",justify:"space-between",p:6,children:[l.get(z),e.jsxs(t.VStack,{w:"full",gap:3,children:[(u||x)&&e.jsxs(t.Flex,{direction:j?"row":"column-reverse",gap:j?4:3,width:"full",children:[u&&e.jsx(s.default,{expand:!0,label:"Cancel",variant:"neutral",...u}),x&&e.jsx(s.default,{expand:!0,label:"Confirm",variant:"inverse",...x})]}),m&&e.jsx(t.Flex,{direction:r,gap:j?4:3,width:"full",children:m}),l.get(H)]})]}),g&&e.jsx(S.Drawer,{...g})]})}),O=Object.assign(G,{Actions:P,Cancel:k,Confirm:B,Content:z,Menu:D,Drawer:F,Footer:H,Header:V,Info:M});exports.PassportPage=O;
+"use strict";var e=require("react/jsx-runtime");require("../containers/card.js");var m=require("@styled/css"),i=require("@styled/jsx"),q=require("../containers/drawer.js"),W=require("react");require("../utils/client-asset-logo.js");var w=require("@styled/tokens");require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var A=require("../icons/ico-caret-left.js"),S=require("../icons/ico-magic.js"),I=require("../icons/ico-question-circle-fill.js");require("../containers/header.js");var C=require("../containers/menu.js"),L=require("../containers/modal.js");require("../containers/overlay.js"),require("../info/copy-button.js"),require("../info/email-wbr.js"),require("../info/security-otp.js"),require("../info/text-box.js");var N=require("../info/wallet-address.js"),s=require("../primitives/button.js"),j=require("../primitives/popover.js"),f=require("../primitives/text.js"),l=require("create-slots");const b=l.createSlot(({children:r})=>W.Children.map(r,t=>e.jsx(s.default,{expand:!0,...t.props}))),P=l.createSlot(s.default),y=l.createSlot(s.default),k=l.createSlot(({children:r})=>e.jsxs(j.Popover,{textStyle:"subtle",variant:"text",children:[e.jsx(j.Popover.TrailingIcon,{children:e.jsx(I.default,{})}),e.jsx(j.Popover.Content,{children:r})]})),z=l.createSlot(({branding:r,title:t})=>t?e.jsx(f.default,{size:"sm",fontColor:"text.secondary",children:t}):e.jsx(S.default,{color:w.token(r==="light"?"colors.text.primary":"colors.neutral.primary")})),B=l.createSlot(({children:r})=>e.jsx(i.VStack,{w:"full",justify:"center",children:r})),H=l.createSlot(C.Menu),M=l.createSlot(q.Drawer),D=l.createSlot(({children:r})=>e.jsx(i.Center,{pt:3,w:"full",children:r})),F=l.createSlot(({children:r,domain:t,name:o,logoUrl:n})=>e.jsxs(i.HStack,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[n?e.jsx("img",{src:n,alt:o,width:24,height:24}):e.jsx(S.default,{color:w.token("colors.brand.base"),height:24,width:24}),e.jsx(f.default,{size:"sm",fontWeight:"semibold",children:o}),t&&e.jsx(f.default,{size:"sm",fontColor:"text.tertiary",children:t}),r]})),G=({actionDirection:r="row",address:t,children:o,onBack:n,onCancel:d,...T})=>l.createHost(o,a=>{const c=a.getProps(P),u=a.getProps(y),p=a.getProps(M),x=a.getProps(H),g=a.get(b),v=a.get(k),V=a.get(z),h=r==="row";return e.jsxs(L.Modal,{...T,fullscreen:!0,paddingType:"none",gap:0,children:[e.jsxs(i.VStack,{gap:0,width:"full",children:[e.jsxs(i.HStack,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[n&&e.jsx(s.default,{onPress:n,size:"md",textStyle:"neutral",variant:"text",children:e.jsx(s.default.LeadingIcon,{children:e.jsx(A.default,{})})}),d&&e.jsx(s.default,{onPress:d,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(n||d)&&e.jsx("div",{className:m.css({w:6})}),V,t||v||x?e.jsxs(i.HStack,{children:[t&&e.jsx(N.default,{address:t}),v,x&&e.jsx(C.Menu,{...x})]}):e.jsx("div",{className:m.css({w:6})})]}),a.get(F)]}),e.jsxs(i.VStack,{h:"full",w:"full",justify:"space-between",p:6,children:[a.get(B),e.jsxs(i.VStack,{w:"full",gap:3,children:[(c||u)&&e.jsxs(i.Flex,{direction:h?"row":"column-reverse",gap:h?4:3,width:"full",children:[c&&e.jsx(s.default,{expand:!0,label:"Cancel",variant:"neutral",...c}),u&&e.jsx(s.default,{expand:!0,label:"Confirm",variant:"inverse",...u})]}),g&&e.jsx(i.Flex,{direction:r,gap:h?4:3,width:"full",children:g}),a.get(D)]})]}),p&&e.jsx(q.Drawer,{...p})]})}),O=Object.assign(G,{Actions:b,Cancel:P,Confirm:y,Content:B,Menu:H,Drawer:M,Footer:D,Header:F,Info:k,Title:z});exports.PassportPage=O;
 //# sourceMappingURL=passport-page.js.map

package/dist/cjs/components/layouts/passport-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"passport-page.js","sources":["../../../../src/components/layouts/passport-page.tsx"],"sourcesContent":["import { Menu } from '@components/containers';\nimport { Drawer } from '@components/containers/drawer';\nimport { Modal } from '@components/containers/modal';\nimport { IcoCaretLeft, IcoMagic, IcoQuestionCircleFill } from '@components/icons';\nimport { WalletAddress } from '@components/info';\nimport Button from '@components/primitives/button';\nimport Popover from '@components/primitives/popover';\nimport Text from '@components/primitives/text';\nimport { css } from '@styled/css';\nimport { Center, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, PropsWithChildren } from 'react';\n\ninterface HeaderProps extends PropsWithChildren {\n  name: string;\n  domain?: string;\n  logoUrl?: string;\n}\n\nexport interface PassportPageProps extends PropsWithChildren {\n  address?: string;\n  animate?: boolean;\n  branding?: 'light' | 'dark';\n  actionDirection?: 'column' | 'row';\n  title?: string;\n  isOpen?: boolean;\n  onAnimated?: () => void;\n  onBack?: () => void;\n  onClosed?: () => void;\n  onCancel?: () => void;\n}\n\nconst Actions = createSlot(({ children }) => Children.map(children, child => <Button expand {...child.props} />));\nconst Cancel = createSlot(Button);\nconst Confirm = createSlot(Button);\nconst Info = createSlot(({ children }) => (\n  <Popover textStyle=\"subtle\" variant=\"text\">\n    <Popover.TrailingIcon>\n      <IcoQuestionCircleFill />\n    </Popover.TrailingIcon>\n    <Popover.Content>{children}</Popover.Content>\n  </Popover>\n));\n\nconst PageContent = createSlot(({ children }) => (\n  <VStack w=\"full\" justify=\"center\">\n    {children}\n  </VStack>\n));\nconst PageMenu = createSlot(Menu);\nconst PageDrawer = createSlot(Drawer);\nconst PageFooter = createSlot(({ children }) => (\n  <Center pt={3} w=\"full\">\n    {children}\n  </Center>\n));\nconst PageHeader = createSlot(({ children, domain, name, logoUrl }: HeaderProps) => (\n  <HStack borderBottomColor=\"neutral.primary\" borderBottomWidth=\"1px\" p={3} width=\"full\">\n    {logoUrl ? (\n      <img src={logoUrl} alt={name} width={24} height={24} />\n    ) : (\n      <IcoMagic color={token('colors.brand.base')} height={24} width={24} />\n    )}\n    <Text size=\"sm\" fontWeight=\"semibold\">\n      {name}\n    </Text>\n    {domain && (\n      <Text size=\"sm\" fontColor=\"text.tertiary\">\n        {domain}\n      </Text>\n    )}\n    {children}\n  </HStack>\n));\n\nconst PassportPageHost = ({\n  actionDirection = 'row',\n  address,\n  branding,\n  children,\n  title,\n  onBack,\n  onCancel,\n  ...props\n}: PassportPageProps) => {\n  return createHost(children, slots => {\n    const cancelProps = slots.getProps(Cancel);\n    const confirmProps = slots.getProps(Confirm);\n    const menuProps = slots.getProps(PageMenu);\n    const drawerProps = slots.getProps(PageDrawer);\n\n    const actions = slots.get(Actions);\n    const info = slots.get(Info);\n\n    const isRowDirection = actionDirection === 'row';\n\n    return (\n      <Modal {...props} fullscreen paddingType=\"none\" gap={0}>\n        <VStack gap={0} width=\"full\">\n          <HStack\n            borderBottomColor=\"neutral.primary\"\n            borderBottomWidth=\"1px\"\n            justifyContent=\"space-between\"\n            p={3}\n            width=\"full\"\n          >\n            {onBack && (\n              <Button onPress={onBack} size=\"md\" textStyle=\"neutral\" variant=\"text\">\n                <Button.LeadingIcon>\n                  <IcoCaretLeft />\n                </Button.LeadingIcon>\n              </Button>\n            )}\n            {onCancel && <Button onPress={onCancel} label=\"Cancel\" size=\"sm\" textStyle=\"neutral\" variant=\"text\" />}\n            {!(onBack || onCancel) && <div className={css({ w: 6 })} />}\n            {branding && (\n              <IcoMagic color={token(branding === 'light' ? 'colors.text.primary' : 'colors.neutral.primary')} />\n            )}\n            {title && (\n              <Text size=\"sm\" fontColor=\"text.secondary\">\n                {title}\n              </Text>\n            )}\n            {address || info || menuProps ? (\n              <HStack>\n                {address && <WalletAddress address={address} />}\n                {info}\n                {menuProps && <Menu {...menuProps} />}\n              </HStack>\n            ) : (\n              <div className={css({ w: 6 })} />\n            )}\n          </HStack>\n          {slots.get(PageHeader)}\n        </VStack>\n        <VStack h=\"full\" w=\"full\" justify=\"space-between\" p={6}>\n          {slots.get(PageContent)}\n          <VStack w=\"full\" gap={3}>\n            {(cancelProps || confirmProps) && (\n              <Flex direction={isRowDirection ? 'row' : 'column-reverse'} gap={isRowDirection ? 4 : 3} width=\"full\">\n                {cancelProps && <Button expand label=\"Cancel\" variant=\"neutral\" {...cancelProps} />}\n                {confirmProps && <Button expand label=\"Confirm\" variant=\"inverse\" {...confirmProps} />}\n              </Flex>\n            )}\n            {actions && (\n              <Flex direction={actionDirection} gap={isRowDirection ? 4 : 3} width=\"full\">\n                {actions}\n              </Flex>\n            )}\n            {slots.get(PageFooter)}\n          </VStack>\n        </VStack>\n        {drawerProps && <Drawer {...drawerProps} />}\n      </Modal>\n    );\n  });\n};\n\nexport const PassportPage = Object.assign(PassportPageHost, {\n  Actions,\n  Cancel,\n  Confirm,\n  Content: PageContent,\n  Menu: PageMenu,\n  Drawer: PageDrawer,\n  Footer: PageFooter,\n  Header: PageHeader,\n  Info,\n});\n"],"names":["Actions","createSlot","children","Children","child","_jsx","Button","Cancel","Confirm","Info","_jsxs","Popover","IcoQuestionCircleFill","PageContent","VStack","PageMenu","Menu","PageDrawer","Drawer","PageFooter","Center","PageHeader","domain","name","logoUrl","HStack","IcoMagic","token","Text","PassportPageHost","actionDirection","address","branding","title","onBack","onCancel","props","createHost","slots","cancelProps","confirmProps","menuProps","drawerProps","actions","info","isRowDirection","Modal","IcoCaretLeft","css","WalletAddress","Flex","PassportPage"],"mappings":"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"}
+{"version":3,"file":"passport-page.js","sources":["../../../../src/components/layouts/passport-page.tsx"],"sourcesContent":["import { Menu } from '@components/containers';\nimport { Drawer } from '@components/containers/drawer';\nimport { Modal } from '@components/containers/modal';\nimport { IcoCaretLeft, IcoMagic, IcoQuestionCircleFill } from '@components/icons';\nimport { WalletAddress } from '@components/info';\nimport Button from '@components/primitives/button';\nimport Popover from '@components/primitives/popover';\nimport Text from '@components/primitives/text';\nimport { css } from '@styled/css';\nimport { Center, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, PropsWithChildren } from 'react';\n\nexport interface HeaderProps extends PropsWithChildren {\n  name: string;\n  domain?: string;\n  logoUrl?: string;\n}\n\nexport interface TitleProps {\n  branding?: 'light' | 'dark';\n  title?: string;\n}\n\nexport interface PassportPageProps extends PropsWithChildren {\n  address?: string;\n  animate?: boolean;\n  actionDirection?: 'column' | 'row';\n  isOpen?: boolean;\n  onAnimated?: () => void;\n  onBack?: () => void;\n  onClosed?: () => void;\n  onCancel?: () => void;\n}\n\nconst Actions = createSlot(({ children }) => Children.map(children, child => <Button expand {...child.props} />));\nconst Cancel = createSlot(Button);\nconst Confirm = createSlot(Button);\nconst Info = createSlot(({ children }) => (\n  <Popover textStyle=\"subtle\" variant=\"text\">\n    <Popover.TrailingIcon>\n      <IcoQuestionCircleFill />\n    </Popover.TrailingIcon>\n    <Popover.Content>{children}</Popover.Content>\n  </Popover>\n));\nconst Title = createSlot(({ branding, title }: TitleProps) => {\n  return title ? (\n    <Text size=\"sm\" fontColor=\"text.secondary\">\n      {title}\n    </Text>\n  ) : (\n    <IcoMagic color={token(branding === 'light' ? 'colors.text.primary' : 'colors.neutral.primary')} />\n  );\n});\n\nconst PageContent = createSlot(({ children }) => (\n  <VStack w=\"full\" justify=\"center\">\n    {children}\n  </VStack>\n));\nconst PageMenu = createSlot(Menu);\nconst PageDrawer = createSlot(Drawer);\nconst PageFooter = createSlot(({ children }) => (\n  <Center pt={3} w=\"full\">\n    {children}\n  </Center>\n));\nconst PageHeader = createSlot(({ children, domain, name, logoUrl }: HeaderProps) => (\n  <HStack borderBottomColor=\"neutral.primary\" borderBottomWidth=\"1px\" p={3} width=\"full\">\n    {logoUrl ? (\n      <img src={logoUrl} alt={name} width={24} height={24} />\n    ) : (\n      <IcoMagic color={token('colors.brand.base')} height={24} width={24} />\n    )}\n    <Text size=\"sm\" fontWeight=\"semibold\">\n      {name}\n    </Text>\n    {domain && (\n      <Text size=\"sm\" fontColor=\"text.tertiary\">\n        {domain}\n      </Text>\n    )}\n    {children}\n  </HStack>\n));\n\nconst PassportPageHost = ({\n  actionDirection = 'row',\n  address,\n  children,\n  onBack,\n  onCancel,\n  ...props\n}: PassportPageProps) => {\n  return createHost(children, slots => {\n    const cancelProps = slots.getProps(Cancel);\n    const confirmProps = slots.getProps(Confirm);\n    const drawerProps = slots.getProps(PageDrawer);\n    const menuProps = slots.getProps(PageMenu);\n\n    const actions = slots.get(Actions);\n    const info = slots.get(Info);\n    const title = slots.get(Title);\n\n    const isRowDirection = actionDirection === 'row';\n\n    return (\n      <Modal {...props} fullscreen paddingType=\"none\" gap={0}>\n        <VStack gap={0} width=\"full\">\n          <HStack\n            borderBottomColor=\"neutral.primary\"\n            borderBottomWidth=\"1px\"\n            justifyContent=\"space-between\"\n            p={3}\n            width=\"full\"\n          >\n            {onBack && (\n              <Button onPress={onBack} size=\"md\" textStyle=\"neutral\" variant=\"text\">\n                <Button.LeadingIcon>\n                  <IcoCaretLeft />\n                </Button.LeadingIcon>\n              </Button>\n            )}\n            {onCancel && <Button onPress={onCancel} label=\"Cancel\" size=\"sm\" textStyle=\"neutral\" variant=\"text\" />}\n            {!(onBack || onCancel) && <div className={css({ w: 6 })} />}\n            {title}\n            {address || info || menuProps ? (\n              <HStack>\n                {address && <WalletAddress address={address} />}\n                {info}\n                {menuProps && <Menu {...menuProps} />}\n              </HStack>\n            ) : (\n              <div className={css({ w: 6 })} />\n            )}\n          </HStack>\n          {slots.get(PageHeader)}\n        </VStack>\n        <VStack h=\"full\" w=\"full\" justify=\"space-between\" p={6}>\n          {slots.get(PageContent)}\n          <VStack w=\"full\" gap={3}>\n            {(cancelProps || confirmProps) && (\n              <Flex direction={isRowDirection ? 'row' : 'column-reverse'} gap={isRowDirection ? 4 : 3} width=\"full\">\n                {cancelProps && <Button expand label=\"Cancel\" variant=\"neutral\" {...cancelProps} />}\n                {confirmProps && <Button expand label=\"Confirm\" variant=\"inverse\" {...confirmProps} />}\n              </Flex>\n            )}\n            {actions && (\n              <Flex direction={actionDirection} gap={isRowDirection ? 4 : 3} width=\"full\">\n                {actions}\n              </Flex>\n            )}\n            {slots.get(PageFooter)}\n          </VStack>\n        </VStack>\n        {drawerProps && <Drawer {...drawerProps} />}\n      </Modal>\n    );\n  });\n};\n\nexport const PassportPage = Object.assign(PassportPageHost, {\n  Actions,\n  Cancel,\n  Confirm,\n  Content: PageContent,\n  Menu: PageMenu,\n  Drawer: PageDrawer,\n  Footer: PageFooter,\n  Header: PageHeader,\n  Info,\n  Title,\n});\n"],"names":["Actions","createSlot","children","Children","child","_jsx","Button","Cancel","Confirm","Info","_jsxs","Popover","IcoQuestionCircleFill","Title","branding","title","Text","IcoMagic","token","PageContent","VStack","PageMenu","Menu","PageDrawer","Drawer","PageFooter","Center","PageHeader","domain","name","logoUrl","HStack","PassportPageHost","actionDirection","address","onBack","onCancel","props","createHost","slots","cancelProps","confirmProps","drawerProps","menuProps","actions","info","isRowDirection","Modal","IcoCaretLeft","css","WalletAddress","Flex","PassportPage"],"mappings":"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"}

package/dist/cjs/components/list-items/transaction-row.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("../feedback/callout.js"),require("@styled/css");var i=require("@styled/jsx");require("../feedback/progress-bar.js");var q=require("../feedback/skeleton.js"),r=require("@styled/tokens"),H=require("../icons/ico-arrow-down.js"),P=require("../icons/ico-arrow-up.js"),A=require("../icons/ico-lightning-fill.js"),I=require("../icons/ico-lock-unlocked-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 l=require("../primitives/text.js");require("../primitives/portal.js");var a=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var L=require("@styled/patterns"),g=require("create-slots"),c=require("react-aria");const N={send:{title:"Send",primaryTextColor:r.token("colors.text.primary"),secondaryTextColor:r.token("colors.text.secondary"),icon:P.default,iconColor:r.token("colors.negative.darker"),skeletonWidth:"89px"},receive:{title:"Receive",primaryTextColor:r.token("colors.positive.base"),secondaryTextColor:`${r.token("colors.positive.lighter")}`,icon:H.default,iconColor:r.token("colors.positive.base"),skeletonWidth:"89px"},networkFee:{title:"Network Fee",primaryTextColor:r.token("colors.text.primary"),secondaryTextColor:r.token("colors.text.secondary"),icon:A.default,iconColor:r.token("colors.brand.base"),skeletonWidth:"54px"},spendingCap:{title:"Spending Cap",primaryTextColor:r.token("colors.warning.base"),secondaryTextColor:r.token("colors.warning.base"),icon:I.default,iconColor:r.token("colors.warning.base"),skeletonWidth:"89px"}},y=g.createSlot(({children:n,...t})=>e.jsx(i.Center,{children:a.Children.map(n,s=>a.cloneElement(s,t))})),O=n=>{const{variant:t,primaryText:s,secondaryText:u,children:C,onPress:d,loading:p,showTitle:v=!0}=n,{title:w,primaryTextColor:x,secondaryTextColor:f,icon:b,iconColor:j,skeletonWidth:h}=N[t],m=t==="send"||t==="networkFee",k=a.useRef(null),T=a.useCallback(()=>{d?.()},[d]),{buttonProps:S}=c.useButton({...n,onPress:T},k),{isFocusVisible:F,focusProps:W}=c.useFocusRing();return g.createHost(C,R=>{const o=R.get(y);return e.jsxs(i.HStack,{w:"full",justify:"space-between",children:[e.jsxs(i.HStack,{gap:2,children:[e.jsx(b,{width:16,height:16,color:j}),v&&e.jsx(l.default,{size:"sm",fontWeight:"medium",children:w})]}),e.jsxs(i.HStack,{gap:4,children:[u&&e.jsx(l.default,{styles:{color:f},children:u}),m?e.jsxs("button",{...c.mergeProps(S,W),ref:k,className:L.hstack({px:4,py:2.5,gap:3,rounded:"xl",bg:"surface.secondary",outlineColor:"brand.base",outlineStyle:F?"solid":"none",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer"}),children:[p?e.jsx(q.Skeleton,{width:h}):e.jsx(l.default,{styles:{color:x},children:s}),o&&{...o,props:{...o.props,width:32,height:32}}]}):e.jsxs(i.HStack,{gap:3,children:[p?e.jsx(q.Skeleton,{width:h}):e.jsx(l.default,{styles:{color:x},children:s}),o&&{...o,props:{...o.props,width:32,height:32}}]})]})]})})},U=Object.assign(O,{TokenIcon:y});exports.TransactionRow=U;
+"use strict";var e=require("react/jsx-runtime"),r=require("@styled/tokens"),H=require("../icons/ico-arrow-down.js"),P=require("../icons/ico-arrow-up.js"),A=require("../icons/ico-lightning-fill.js"),I=require("../icons/ico-lock-unlocked-fill.js"),l=require("react"),i=require("@styled/jsx");require("@styled/css"),require("../feedback/callout.js"),require("../feedback/progress-bar.js");var q=require("../feedback/skeleton.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");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var L=require("@styled/patterns"),g=require("create-slots"),c=require("react-aria");const N={send:{title:"Send",primaryTextColor:r.token("colors.text.primary"),secondaryTextColor:r.token("colors.text.secondary"),icon:P.default,iconColor:r.token("colors.negative.darker"),skeletonWidth:"89px"},receive:{title:"Receive",primaryTextColor:r.token("colors.positive.base"),secondaryTextColor:`${r.token("colors.positive.lighter")}`,icon:H.default,iconColor:r.token("colors.positive.base"),skeletonWidth:"89px"},networkFee:{title:"Network Fee",primaryTextColor:r.token("colors.text.primary"),secondaryTextColor:r.token("colors.text.secondary"),icon:A.default,iconColor:r.token("colors.brand.base"),skeletonWidth:"54px"},spendingCap:{title:"Spending Cap",primaryTextColor:r.token("colors.warning.base"),secondaryTextColor:r.token("colors.warning.base"),icon:I.default,iconColor:r.token("colors.warning.base"),skeletonWidth:"89px"}},y=g.createSlot(({children:n,...t})=>e.jsx(i.Center,{children:l.Children.map(n,s=>l.cloneElement(s,t))})),O=n=>{const{variant:t,primaryText:s,secondaryText:u,children:C,onPress:d,loading:p,showTitle:v=!0}=n,{title:w,primaryTextColor:x,secondaryTextColor:f,icon:b,iconColor:j,skeletonWidth:h}=N[t],m=t==="send"||t==="networkFee",k=l.useRef(null),T=l.useCallback(()=>{d?.()},[d]),{buttonProps:S}=c.useButton({...n,onPress:T},k),{isFocusVisible:F,focusProps:W}=c.useFocusRing();return g.createHost(C,R=>{const o=R.get(y);return e.jsxs(i.HStack,{w:"full",justify:"space-between",children:[e.jsxs(i.HStack,{gap:2,children:[e.jsx(b,{width:16,height:16,color:j}),v&&e.jsx(a.default,{size:"sm",fontWeight:"medium",children:w})]}),e.jsxs(i.HStack,{gap:4,children:[u&&e.jsx(a.default,{styles:{color:f},children:u}),m?e.jsxs("button",{...c.mergeProps(S,W),ref:k,className:L.hstack({px:4,py:2.5,gap:3,rounded:"xl",bg:"surface.secondary",outlineColor:"brand.base",outlineStyle:F?"solid":"none",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer"}),children:[p?e.jsx(q.Skeleton,{width:h}):e.jsx(a.default,{styles:{color:x},children:s}),o&&{...o,props:{...o.props,width:32,height:32}}]}):e.jsxs(i.HStack,{gap:3,children:[p?e.jsx(q.Skeleton,{width:h}):e.jsx(a.default,{styles:{color:x},children:s}),o&&{...o,props:{...o.props,width:32,height:32}}]})]})]})})},U=Object.assign(O,{TokenIcon:y});exports.TransactionRow=U;
 //# sourceMappingURL=transaction-row.js.map

package/dist/cjs/components/list-items/transaction-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"transaction-row.js","sources":["../../../../src/components/list-items/transaction-row.tsx"],"sourcesContent":["import { Skeleton } from '@components/feedback';\nimport { IcoArrowDown, IcoArrowUp, IcoLightningFill, IcoLockUnlockedFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { Center, HStack } from '@styled/jsx';\nimport { hstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, ReactNode, useCallback, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TransactionRowProps {\n  variant: 'send' | 'receive' | 'networkFee' | 'spendingCap';\n  primaryText: string;\n  secondaryText?: string;\n  showTitle?: boolean;\n  children: ReactNode;\n  onPress?: () => void;\n  loading?: boolean;\n}\n\nconst variants = {\n  send: {\n    title: 'Send',\n    primaryTextColor: token('colors.text.primary'),\n    secondaryTextColor: token('colors.text.secondary'),\n    icon: IcoArrowUp,\n    iconColor: token('colors.negative.darker'),\n    skeletonWidth: '89px',\n  },\n  receive: {\n    title: 'Receive',\n    primaryTextColor: token('colors.positive.base'),\n    secondaryTextColor: `${token('colors.positive.lighter')}`,\n    icon: IcoArrowDown,\n    iconColor: token('colors.positive.base'),\n    skeletonWidth: '89px',\n  },\n  networkFee: {\n    title: 'Network Fee',\n    primaryTextColor: token('colors.text.primary'),\n    secondaryTextColor: token('colors.text.secondary'),\n    icon: IcoLightningFill,\n    iconColor: token('colors.brand.base'),\n    skeletonWidth: '54px',\n  },\n  spendingCap: {\n    title: 'Spending Cap',\n    primaryTextColor: token('colors.warning.base'),\n    secondaryTextColor: token('colors.warning.base'),\n    icon: IcoLockUnlockedFill,\n    iconColor: token('colors.warning.base'),\n    skeletonWidth: '89px',\n  },\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\nconst TransactionRowBase = (props: TransactionRowProps) => {\n  const { variant, primaryText, secondaryText, children, onPress, loading, showTitle = true } = props;\n  const { title, primaryTextColor, secondaryTextColor, icon: Icon, iconColor, skeletonWidth } = variants[variant];\n  const isEditable = variant === 'send' || variant === 'networkFee';\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(children, slots => {\n    const tokenIcon = slots.get(TokenIcon);\n    return (\n      <HStack w=\"full\" justify=\"space-between\">\n        <HStack gap={2}>\n          <Icon width={16} height={16} color={iconColor} />\n          {showTitle && (\n            <Text size=\"sm\" fontWeight=\"medium\">\n              {title}\n            </Text>\n          )}\n        </HStack>\n\n        <HStack gap={4}>\n          {secondaryText && <Text styles={{ color: secondaryTextColor }}>{secondaryText}</Text>}\n          {isEditable ? (\n            <button\n              {...mergeProps(buttonProps, focusProps)}\n              ref={ref}\n              className={hstack({\n                px: 4,\n                py: 2.5,\n                gap: 3,\n                rounded: 'xl',\n                bg: 'surface.secondary',\n                outlineColor: 'brand.base',\n                outlineStyle: isFocusVisible ? 'solid' : 'none',\n                outlineWidth: 'thick',\n                outlineOffset: 0.5,\n                cursor: 'pointer',\n              })}\n            >\n              {loading ? (\n                <Skeleton width={skeletonWidth} />\n              ) : (\n                <Text styles={{ color: primaryTextColor }}>{primaryText}</Text>\n              )}\n              {tokenIcon && {\n                ...tokenIcon,\n                props: {\n                  ...tokenIcon.props,\n                  width: 32,\n                  height: 32,\n                },\n              }}\n            </button>\n          ) : (\n            <HStack gap={3}>\n              {loading ? (\n                <Skeleton width={skeletonWidth} />\n              ) : (\n                <Text styles={{ color: primaryTextColor }}>{primaryText}</Text>\n              )}\n              {tokenIcon && {\n                ...tokenIcon,\n                props: {\n                  ...tokenIcon.props,\n                  width: 32,\n                  height: 32,\n                },\n              }}\n            </HStack>\n          )}\n        </HStack>\n      </HStack>\n    );\n  });\n};\n\nexport const TransactionRow = Object.assign(TransactionRowBase, { TokenIcon });\n"],"names":["variants","token","IcoArrowUp","IcoArrowDown","IcoLightningFill","IcoLockUnlockedFill","TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TransactionRowBase","variant","primaryText","secondaryText","onPress","loading","showTitle","title","primaryTextColor","secondaryTextColor","Icon","iconColor","skeletonWidth","isEditable","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","tokenIcon","_jsxs","HStack","Text","mergeProps","hstack","Skeleton","TransactionRow"],"mappings":"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"}
+{"version":3,"file":"transaction-row.js","sources":["../../../../src/components/list-items/transaction-row.tsx"],"sourcesContent":["import { Skeleton } from '@components/feedback';\nimport { IcoArrowDown, IcoArrowUp, IcoLightningFill, IcoLockUnlockedFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { Center, HStack } from '@styled/jsx';\nimport { hstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, ReactNode, useCallback, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TransactionRowProps {\n  variant: 'send' | 'receive' | 'networkFee' | 'spendingCap';\n  primaryText: string;\n  secondaryText?: string;\n  showTitle?: boolean;\n  children: ReactNode;\n  onPress?: () => void;\n  loading?: boolean;\n}\n\nconst variants = {\n  send: {\n    title: 'Send',\n    primaryTextColor: token('colors.text.primary'),\n    secondaryTextColor: token('colors.text.secondary'),\n    icon: IcoArrowUp,\n    iconColor: token('colors.negative.darker'),\n    skeletonWidth: '89px',\n  },\n  receive: {\n    title: 'Receive',\n    primaryTextColor: token('colors.positive.base'),\n    secondaryTextColor: `${token('colors.positive.lighter')}`,\n    icon: IcoArrowDown,\n    iconColor: token('colors.positive.base'),\n    skeletonWidth: '89px',\n  },\n  networkFee: {\n    title: 'Network Fee',\n    primaryTextColor: token('colors.text.primary'),\n    secondaryTextColor: token('colors.text.secondary'),\n    icon: IcoLightningFill,\n    iconColor: token('colors.brand.base'),\n    skeletonWidth: '54px',\n  },\n  spendingCap: {\n    title: 'Spending Cap',\n    primaryTextColor: token('colors.warning.base'),\n    secondaryTextColor: token('colors.warning.base'),\n    icon: IcoLockUnlockedFill,\n    iconColor: token('colors.warning.base'),\n    skeletonWidth: '89px',\n  },\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\nconst TransactionRowBase = (props: TransactionRowProps) => {\n  const { variant, primaryText, secondaryText, children, onPress, loading, showTitle = true } = props;\n  const { title, primaryTextColor, secondaryTextColor, icon: Icon, iconColor, skeletonWidth } = variants[variant];\n  const isEditable = variant === 'send' || variant === 'networkFee';\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(children, slots => {\n    const tokenIcon = slots.get(TokenIcon);\n    return (\n      <HStack w=\"full\" justify=\"space-between\">\n        <HStack gap={2}>\n          <Icon width={16} height={16} color={iconColor} />\n          {showTitle && (\n            <Text size=\"sm\" fontWeight=\"medium\">\n              {title}\n            </Text>\n          )}\n        </HStack>\n\n        <HStack gap={4}>\n          {secondaryText && <Text styles={{ color: secondaryTextColor }}>{secondaryText}</Text>}\n          {isEditable ? (\n            <button\n              {...mergeProps(buttonProps, focusProps)}\n              ref={ref}\n              className={hstack({\n                px: 4,\n                py: 2.5,\n                gap: 3,\n                rounded: 'xl',\n                bg: 'surface.secondary',\n                outlineColor: 'brand.base',\n                outlineStyle: isFocusVisible ? 'solid' : 'none',\n                outlineWidth: 'thick',\n                outlineOffset: 0.5,\n                cursor: 'pointer',\n              })}\n            >\n              {loading ? (\n                <Skeleton width={skeletonWidth} />\n              ) : (\n                <Text styles={{ color: primaryTextColor }}>{primaryText}</Text>\n              )}\n              {tokenIcon && {\n                ...tokenIcon,\n                props: {\n                  ...tokenIcon.props,\n                  width: 32,\n                  height: 32,\n                },\n              }}\n            </button>\n          ) : (\n            <HStack gap={3}>\n              {loading ? (\n                <Skeleton width={skeletonWidth} />\n              ) : (\n                <Text styles={{ color: primaryTextColor }}>{primaryText}</Text>\n              )}\n              {tokenIcon && {\n                ...tokenIcon,\n                props: {\n                  ...tokenIcon.props,\n                  width: 32,\n                  height: 32,\n                },\n              }}\n            </HStack>\n          )}\n        </HStack>\n      </HStack>\n    );\n  });\n};\n\nexport const TransactionRow = Object.assign(TransactionRowBase, { TokenIcon });\n"],"names":["variants","token","IcoArrowUp","IcoArrowDown","IcoLightningFill","IcoLockUnlockedFill","TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TransactionRowBase","variant","primaryText","secondaryText","onPress","loading","showTitle","title","primaryTextColor","secondaryTextColor","Icon","iconColor","skeletonWidth","isEditable","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","tokenIcon","_jsxs","HStack","Text","mergeProps","hstack","Skeleton","TransactionRow"],"mappings":"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"}

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

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

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

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

package/dist/cjs/components/primitives/dropdown-selector.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("react/jsx-runtime");require("../feedback/callout.js");var E=require("@styled/css"),m=require("@styled/jsx");require("../feedback/progress-bar.js");var C=require("@styled/tokens"),L=require("../icons/ico-caret-down.js"),V=require("../icons/ico-caret-up.js"),M=require("../icons/ico-checkmark.js"),T=require("../icons/ico-question-circle-fill.js");require("./button.js"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js");var j=require("./text.js");require("./portal.js");var r=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var U=require("../feedback/tooltip.js"),w=require("react-aria");const z={sm:{caret:16,check:14,height:"2.625rem",top:48,width:"0.75rem",mult:2.25},md:{caret:17,check:15,height:"2.8125rem",top:52,width:"0.85rem",mult:2.25},lg:{caret:18,check:16,height:"3rem",top:55,width:"1rem",mult:2.5}},A=r.createContext({selectedOption:null,setSelectedOption:()=>{}}),P=({value:o,label:a,size:d="lg",isFocused:y})=>{const{selectedOption:h,setSelectedOption:p}=r.useContext(A),s=h?.value===o,n=z[d],k=r.useCallback(()=>{p({value:o,label:a})},[p,o,a]);return t.jsxs(m.HStack,{py:1.5,gap:2,bg:s?"brand.base":y?"brand.lightest":"",_hover:s?{}:{bg:"brand.lightest"},onClick:k,style:{paddingLeft:n.width,paddingRight:n.width},children:[t.jsx(m.Box,{style:{minWidth:n.width},children:s&&t.jsx(M.default,{width:n.check,height:n.check,color:C.token("colors.text.quaternary")})}),t.jsx(j.default,{size:d,fontWeight:"medium",fontColor:s?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:a})]})},R=({children:o,onSelect:a,label:d,placeholder:y="Select one",selectedValue:h,size:p="lg",tooltipContent:s,disabled:n,viewMax:k=5,...W})=>{const[f,v]=r.useState(!1),[l,b]=r.useState(null),x=r.useRef(null),q=r.useRef(null),u=z[p],F=k*u.mult+1,H=r.useCallback(()=>{v(e=>!e),f||(b(null),setTimeout(()=>{var e;return(e=q.current)===null||e===void 0?void 0:e.focus()}))},[f]),N=r.useCallback(e=>{a(e.value),v(!1)},[a]),S=r.useMemo(()=>{const e=r.Children.toArray(o).find(i=>i.props.value===h);return e?e.props.label:y},[h,o]),{buttonProps:B}=w.useButton({...W,isDisabled:n,onPress:H},x),{focusProps:_,isFocusVisible:I}=w.useFocusRing(),{keyboardProps:K}=w.useKeyboard({onKeyDown:e=>{var i,c;if(!f)return;let g=l;const D=r.Children.toArray(o);switch(e.key){case"ArrowUp":e.preventDefault(),l===null?b(r.Children.count(o)-1):(g=l>0?l-1:r.Children.count(o)-1,b(g));break;case"ArrowDown":e.preventDefault(),l===null?b(0):(g=l<r.Children.count(o)-1?l+1:0,b(g));break;case"Enter":if(e.preventDefault(),(i=x.current)===null||i===void 0||i.focus(),l===null)return;if(l>=0&&l<D.length){const O=D[l];O&&a(O.props.value)}break;case"Escape":v(!1),(c=x.current)===null||c===void 0||c.focus();break}}});return r.useEffect(()=>{const e=i=>{var c;!((c=q.current)===null||c===void 0)&&c.contains(i.target)||v(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(A.Provider,{value:{selectedOption:{value:h??"",label:S},setSelectedOption:N},children:t.jsxs(m.VStack,{gap:2,w:"full",alignItems:"flex-start",children:[(d||s)&&t.jsxs(m.HStack,{gap:2,pointerEvents:n?"none":"auto",opacity:n?.3:"",transition:"all linear 120ms",children:[d&&t.jsx(j.default,{size:"sm",fontWeight:"medium",children:d}),s&&t.jsx(U.default,{content:s,children:t.jsx(T.default,{className:E.css({w:4,h:4,color:"neutral.primary"})})})]}),t.jsxs("button",{className:E.css({w:"full",h:"fit-content",bg:"surface.primary",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:I?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:x,...w.mergeProps(B,_,K),children:[t.jsxs(m.HStack,{w:"full",p:4,justifyContent:"space-between",style:{height:u.height},children:[t.jsx(j.default,{truncate:!0,size:p,fontColor:h?"text.primary":"text.tertiary",children:S}),f?t.jsx(V.default,{width:u.caret,height:u.caret,color:C.token("colors.brand.base")}):t.jsx(L.default,{width:u.caret,height:u.caret,color:C.token("colors.brand.base")})]}),f&&t.jsx(m.Box,{ref:q,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${F}rem`,top:u.top},overflowY:"auto",outline:"none",zIndex:"max",children:r.Children.map(o,(e,i)=>r.cloneElement(e,{isFocused:i===l,size:p}))})]})]})})};P.displayName="DropdownOption",R.displayName="DropdownSelector",exports.DropdownOption=P,exports.DropdownSelector=R;
+"use strict";var t=require("react/jsx-runtime"),C=require("@styled/tokens"),L=require("../icons/ico-caret-down.js"),V=require("../icons/ico-caret-up.js"),M=require("../icons/ico-checkmark.js"),T=require("../icons/ico-question-circle-fill.js"),r=require("react"),m=require("@styled/jsx"),E=require("@styled/css");require("../feedback/callout.js"),require("../feedback/progress-bar.js"),require("./button.js"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js");var j=require("./text.js");require("./portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js");var U=require("../feedback/tooltip.js"),w=require("react-aria");const z={sm:{caret:16,check:14,height:"2.625rem",top:48,width:"0.75rem",mult:2.25},md:{caret:17,check:15,height:"2.8125rem",top:52,width:"0.85rem",mult:2.25},lg:{caret:18,check:16,height:"3rem",top:55,width:"1rem",mult:2.5}},A=r.createContext({selectedOption:null,setSelectedOption:()=>{}}),P=({value:o,label:a,size:d="lg",isFocused:y})=>{const{selectedOption:h,setSelectedOption:p}=r.useContext(A),s=h?.value===o,n=z[d],k=r.useCallback(()=>{p({value:o,label:a})},[p,o,a]);return t.jsxs(m.HStack,{py:1.5,gap:2,bg:s?"brand.base":y?"brand.lightest":"",_hover:s?{}:{bg:"brand.lightest"},onClick:k,style:{paddingLeft:n.width,paddingRight:n.width},children:[t.jsx(m.Box,{style:{minWidth:n.width},children:s&&t.jsx(M.default,{width:n.check,height:n.check,color:C.token("colors.text.quaternary")})}),t.jsx(j.default,{size:d,fontWeight:"medium",fontColor:s?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:a})]})},R=({children:o,onSelect:a,label:d,placeholder:y="Select one",selectedValue:h,size:p="lg",tooltipContent:s,disabled:n,viewMax:k=5,...W})=>{const[f,v]=r.useState(!1),[l,b]=r.useState(null),x=r.useRef(null),q=r.useRef(null),u=z[p],F=k*u.mult+1,H=r.useCallback(()=>{v(e=>!e),f||(b(null),setTimeout(()=>{var e;return(e=q.current)===null||e===void 0?void 0:e.focus()}))},[f]),N=r.useCallback(e=>{a(e.value),v(!1)},[a]),S=r.useMemo(()=>{const e=r.Children.toArray(o).find(i=>i.props.value===h);return e?e.props.label:y},[h,o]),{buttonProps:B}=w.useButton({...W,isDisabled:n,onPress:H},x),{focusProps:_,isFocusVisible:I}=w.useFocusRing(),{keyboardProps:K}=w.useKeyboard({onKeyDown:e=>{var i,c;if(!f)return;let g=l;const D=r.Children.toArray(o);switch(e.key){case"ArrowUp":e.preventDefault(),l===null?b(r.Children.count(o)-1):(g=l>0?l-1:r.Children.count(o)-1,b(g));break;case"ArrowDown":e.preventDefault(),l===null?b(0):(g=l<r.Children.count(o)-1?l+1:0,b(g));break;case"Enter":if(e.preventDefault(),(i=x.current)===null||i===void 0||i.focus(),l===null)return;if(l>=0&&l<D.length){const O=D[l];O&&a(O.props.value)}break;case"Escape":v(!1),(c=x.current)===null||c===void 0||c.focus();break}}});return r.useEffect(()=>{const e=i=>{var c;!((c=q.current)===null||c===void 0)&&c.contains(i.target)||v(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(A.Provider,{value:{selectedOption:{value:h??"",label:S},setSelectedOption:N},children:t.jsxs(m.VStack,{gap:2,w:"full",alignItems:"flex-start",children:[(d||s)&&t.jsxs(m.HStack,{gap:2,pointerEvents:n?"none":"auto",opacity:n?.3:"",transition:"all linear 120ms",children:[d&&t.jsx(j.default,{size:"sm",fontWeight:"medium",children:d}),s&&t.jsx(U.default,{content:s,children:t.jsx(T.default,{className:E.css({w:4,h:4,color:"neutral.primary"})})})]}),t.jsxs("button",{className:E.css({w:"full",h:"fit-content",bg:"surface.primary",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:I?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:x,...w.mergeProps(B,_,K),children:[t.jsxs(m.HStack,{w:"full",p:4,justifyContent:"space-between",style:{height:u.height},children:[t.jsx(j.default,{truncate:!0,size:p,fontColor:h?"text.primary":"text.tertiary",children:S}),f?t.jsx(V.default,{width:u.caret,height:u.caret,color:C.token("colors.brand.base")}):t.jsx(L.default,{width:u.caret,height:u.caret,color:C.token("colors.brand.base")})]}),f&&t.jsx(m.Box,{ref:q,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${F}rem`,top:u.top},overflowY:"auto",outline:"none",zIndex:"max",children:r.Children.map(o,(e,i)=>r.cloneElement(e,{isFocused:i===l,size:p}))})]})]})})};P.displayName="DropdownOption",R.displayName="DropdownSelector",exports.DropdownOption=P,exports.DropdownSelector=R;
 //# sourceMappingURL=dropdown-selector.js.map

package/dist/cjs/components/primitives/dropdown-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n  children: ReactNode;\n  onSelect: (value: string) => void;\n  label?: string;\n  placeholder?: string;\n  selectedValue?: string;\n  size?: 'sm' | 'md' | 'lg';\n  tooltipContent?: string;\n  disabled?: boolean;\n  viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n  value: string;\n  label: string;\n  isFocused?: boolean;\n  size?: DropdownSelectorProps['size'];\n}\n\ninterface OptionData {\n  value: string;\n  label: string;\n}\n\nexport interface DropdownContextType {\n  selectedOption: OptionData | null;\n  setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n  sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n  md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n  lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n  selectedOption: null,\n  setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused }: DropdownOptionProps) => {\n  const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n  const isSelected = selectedOption?.value === value;\n  const sizeProps = SIZES[size];\n\n  const handleSelectOption = useCallback(() => {\n    setSelectedOption({ value, label });\n  }, [setSelectedOption, value, label]);\n\n  return (\n    <HStack\n      py={1.5}\n      gap={2}\n      bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n      _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n      onClick={handleSelectOption}\n      style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n    >\n      <Box style={{ minWidth: sizeProps.width }}>\n        {isSelected && (\n          <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n        )}\n      </Box>\n      <Text\n        size={size}\n        fontWeight=\"medium\"\n        fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n        styles={{ textAlign: 'left' }}\n      >\n        {label}\n      </Text>\n    </HStack>\n  );\n};\n\nexport const DropdownSelector = ({\n  children,\n  onSelect,\n  label,\n  placeholder = 'Select one',\n  selectedValue,\n  size = 'lg',\n  tooltipContent,\n  disabled,\n  viewMax = 5,\n  ...props\n}: DropdownSelectorProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const sizeProps = SIZES[size];\n  const maxHeight = viewMax * sizeProps.mult + 1;\n\n  const toggleDropdown = useCallback(() => {\n    setIsOpen(prev => !prev);\n    if (!isOpen) {\n      setFocusedIndex(null);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (option: OptionData) => {\n      onSelect(option.value);\n      setIsOpen(false);\n    },\n    [onSelect],\n  );\n\n  const selectedLabel = useMemo(() => {\n    const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n    const matchedChild = childElements.find(child => child.props.value === selectedValue);\n    return matchedChild ? matchedChild.props.label : placeholder;\n  }, [selectedValue, children]);\n\n  const { buttonProps } = useButton(\n    {\n      ...props,\n      isDisabled: disabled,\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: event => {\n      if (!isOpen) return;\n\n      let newFocusedIndex = focusedIndex;\n      const childArray = Children.toArray(children);\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(Children.count(children) - 1);\n          } else {\n            newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(0);\n          } else {\n            newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'Enter':\n          event.preventDefault();\n          buttonRef.current?.focus();\n          if (focusedIndex === null) return;\n          if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n            const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n            if (selectedChild) {\n              onSelect(selectedChild.props.value);\n            }\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          buttonRef.current?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (!dropdownRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  return (\n    <DropdownContext.Provider\n      value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n    >\n      <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n        {(label || tooltipContent) && (\n          <HStack\n            gap={2}\n            pointerEvents={disabled ? 'none' : 'auto'}\n            opacity={disabled ? 0.3 : ''}\n            transition={'all linear 120ms'}\n          >\n            {label && (\n              <Text size=\"sm\" fontWeight=\"medium\">\n                {label}\n              </Text>\n            )}\n\n            {tooltipContent && (\n              <Tooltip content={tooltipContent}>\n                <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n              </Tooltip>\n            )}\n          </HStack>\n        )}\n\n        <button\n          className={css({\n            w: 'full',\n            h: 'fit-content',\n            bg: 'surface.primary',\n            borderWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 'xl',\n            transition: 'all linear 120ms',\n            position: 'relative',\n            cursor: 'pointer',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            _hover: { borderColor: 'neutral.primary' },\n            _disabled: { opacity: 0.3, pointerEvents: 'none' },\n          })}\n          ref={buttonRef}\n          {...mergeProps(buttonProps, focusProps, keyboardProps)}\n        >\n          <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n            <Text truncate size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n              {selectedLabel}\n            </Text>\n            {isOpen ? (\n              <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            ) : (\n              <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            )}\n          </HStack>\n\n          {isOpen && (\n            <Box\n              ref={dropdownRef}\n              tabIndex={-1}\n              py={2}\n              bg=\"surface.primary\"\n              position=\"absolute\"\n              w=\"full\"\n              rounded=\"input\"\n              boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n              style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n              overflowY=\"auto\"\n              outline=\"none\"\n              zIndex=\"max\"\n            >\n              {Children.map(children, (child, index) =>\n                cloneElement(child as ReactElement<DropdownOptionProps>, {\n                  isFocused: index === focusedIndex,\n                  size,\n                }),\n              )}\n            </Box>\n          )}\n        </button>\n      </VStack>\n    </DropdownContext.Provider>\n  );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}
+{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n  children: ReactNode;\n  onSelect: (value: string) => void;\n  label?: string;\n  placeholder?: string;\n  selectedValue?: string;\n  size?: 'sm' | 'md' | 'lg';\n  tooltipContent?: string;\n  disabled?: boolean;\n  viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n  value: string;\n  label: string;\n  isFocused?: boolean;\n  size?: DropdownSelectorProps['size'];\n}\n\ninterface OptionData {\n  value: string;\n  label: string;\n}\n\nexport interface DropdownContextType {\n  selectedOption: OptionData | null;\n  setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n  sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n  md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n  lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n  selectedOption: null,\n  setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused }: DropdownOptionProps) => {\n  const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n  const isSelected = selectedOption?.value === value;\n  const sizeProps = SIZES[size];\n\n  const handleSelectOption = useCallback(() => {\n    setSelectedOption({ value, label });\n  }, [setSelectedOption, value, label]);\n\n  return (\n    <HStack\n      py={1.5}\n      gap={2}\n      bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n      _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n      onClick={handleSelectOption}\n      style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n    >\n      <Box style={{ minWidth: sizeProps.width }}>\n        {isSelected && (\n          <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n        )}\n      </Box>\n      <Text\n        size={size}\n        fontWeight=\"medium\"\n        fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n        styles={{ textAlign: 'left' }}\n      >\n        {label}\n      </Text>\n    </HStack>\n  );\n};\n\nexport const DropdownSelector = ({\n  children,\n  onSelect,\n  label,\n  placeholder = 'Select one',\n  selectedValue,\n  size = 'lg',\n  tooltipContent,\n  disabled,\n  viewMax = 5,\n  ...props\n}: DropdownSelectorProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const sizeProps = SIZES[size];\n  const maxHeight = viewMax * sizeProps.mult + 1;\n\n  const toggleDropdown = useCallback(() => {\n    setIsOpen(prev => !prev);\n    if (!isOpen) {\n      setFocusedIndex(null);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (option: OptionData) => {\n      onSelect(option.value);\n      setIsOpen(false);\n    },\n    [onSelect],\n  );\n\n  const selectedLabel = useMemo(() => {\n    const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n    const matchedChild = childElements.find(child => child.props.value === selectedValue);\n    return matchedChild ? matchedChild.props.label : placeholder;\n  }, [selectedValue, children]);\n\n  const { buttonProps } = useButton(\n    {\n      ...props,\n      isDisabled: disabled,\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: event => {\n      if (!isOpen) return;\n\n      let newFocusedIndex = focusedIndex;\n      const childArray = Children.toArray(children);\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(Children.count(children) - 1);\n          } else {\n            newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(0);\n          } else {\n            newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'Enter':\n          event.preventDefault();\n          buttonRef.current?.focus();\n          if (focusedIndex === null) return;\n          if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n            const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n            if (selectedChild) {\n              onSelect(selectedChild.props.value);\n            }\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          buttonRef.current?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (!dropdownRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  return (\n    <DropdownContext.Provider\n      value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n    >\n      <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n        {(label || tooltipContent) && (\n          <HStack\n            gap={2}\n            pointerEvents={disabled ? 'none' : 'auto'}\n            opacity={disabled ? 0.3 : ''}\n            transition={'all linear 120ms'}\n          >\n            {label && (\n              <Text size=\"sm\" fontWeight=\"medium\">\n                {label}\n              </Text>\n            )}\n\n            {tooltipContent && (\n              <Tooltip content={tooltipContent}>\n                <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n              </Tooltip>\n            )}\n          </HStack>\n        )}\n\n        <button\n          className={css({\n            w: 'full',\n            h: 'fit-content',\n            bg: 'surface.primary',\n            borderWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 'xl',\n            transition: 'all linear 120ms',\n            position: 'relative',\n            cursor: 'pointer',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            _hover: { borderColor: 'neutral.primary' },\n            _disabled: { opacity: 0.3, pointerEvents: 'none' },\n          })}\n          ref={buttonRef}\n          {...mergeProps(buttonProps, focusProps, keyboardProps)}\n        >\n          <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n            <Text truncate size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n              {selectedLabel}\n            </Text>\n            {isOpen ? (\n              <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            ) : (\n              <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            )}\n          </HStack>\n\n          {isOpen && (\n            <Box\n              ref={dropdownRef}\n              tabIndex={-1}\n              py={2}\n              bg=\"surface.primary\"\n              position=\"absolute\"\n              w=\"full\"\n              rounded=\"input\"\n              boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n              style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n              overflowY=\"auto\"\n              outline=\"none\"\n              zIndex=\"max\"\n            >\n              {Children.map(children, (child, index) =>\n                cloneElement(child as ReactElement<DropdownOptionProps>, {\n                  isFocused: index === focusedIndex,\n                  size,\n                }),\n              )}\n            </Box>\n          )}\n        </button>\n      </VStack>\n    </DropdownContext.Provider>\n  );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}

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

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

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

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