@magiclabs/ui-components 1.31.0 → 1.32.0

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

@@ -0,0 +1,2 @@
+"use strict";var i=require("react/jsx-runtime"),t=require("@styled/css"),k=require("@styled/jsx"),R=require("@styled/tokens"),s=require("react"),e=require("react-aria");const n=s.forwardRef(({children:u,className:l,borderRadius:c,disabled:r,expand:d,onHover:o,shadow:b,...p},g)=>{const f=s.useRef(null),a=g||f,{buttonProps:h}=e.useButton({...p,isDisabled:r??!1},a),{hoverProps:v}=e.useHover({isDisabled:r??!1}),{isFocusVisible:m,focusProps:y}=e.useFocusRing();return i.jsx("button",{ref:a,className:t.cx(t.css({_active:{transform:"scale(0.95)"},_disabled:{opacity:"0.8",pointerEvents:"none"},cursor:"pointer",h:"auto",outline:"none",position:"relative",transition:"all 0.1s ease",willChange:"transform, opacity",...d?{w:"full"}:{},...b?{_before:{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:"inherit",backgroundImage:"linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))",_dark:{backgroundImage:"linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"},opacity:0,transition:"opacity 0.1s ease"},_hover:{_before:{opacity:1}}}:{}}),m&&t.css({outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}),l),style:{borderRadius:c??R.token("radii.button")},...e.mergeProps(h,v,y),"aria-disabled":r,onMouseEnter:o,onTouchStart:o,children:i.jsx(k.VStack,{children:u})})});n.displayName="ButtonContainer",exports.ButtonContainer=n;
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../../src/components/containers/button.tsx"],"sourcesContent":["import { css, cx } from '@styled/css';\nimport { VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { MouseEventHandler, PropsWithChildren, TouchEventHandler, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonContainerProps extends AriaButtonProps, PropsWithChildren {\n  className?: string;\n  borderRadius?: string | number;\n  disabled?: boolean;\n  expand?: boolean;\n  onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n  shadow?: boolean;\n}\n\nexport const ButtonContainer = forwardRef<HTMLButtonElement, ButtonContainerProps>(\n  ({ children, className, borderRadius, disabled, expand, onHover, shadow, ...props }, forwardedRef) => {\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    const dimensions = expand ? { w: 'full' } : {};\n    const shadowStyles = shadow\n      ? {\n          _before: {\n            content: '\"\"',\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            borderRadius: 'inherit',\n            backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))',\n            _dark: { backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))` },\n            opacity: 0,\n            transition: 'opacity 0.1s ease',\n          },\n          _hover: {\n            _before: {\n              opacity: 1,\n            },\n          },\n        }\n      : {};\n\n    return (\n      <button\n        ref={ref}\n        className={cx(\n          css({\n            _active: { transform: 'scale(0.95)' },\n            _disabled: { opacity: '0.8', pointerEvents: 'none' },\n            cursor: 'pointer',\n            h: 'auto',\n            outline: 'none',\n            position: 'relative',\n            transition: 'all 0.1s ease',\n            willChange: 'transform, opacity',\n            ...dimensions,\n            ...shadowStyles,\n          }),\n          isFocusVisible &&\n            css({ outlineColor: 'brand.base', outlineStyle: 'solid', outlineWidth: 'thick', outlineOffset: 0.5 }),\n          className,\n        )}\n        style={{ borderRadius: borderRadius ?? token('radii.button') }}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n        aria-disabled={disabled}\n        onMouseEnter={onHover as MouseEventHandler}\n        onTouchStart={onHover as TouchEventHandler}\n      >\n        <VStack>{children}</VStack>\n      </button>\n    );\n  },\n);\n\nButtonContainer.displayName = 'ButtonContainer';\n"],"names":["ButtonContainer","forwardRef","children","className","borderRadius","disabled","expand","onHover","shadow","props","forwardedRef","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","_jsx","cx","css","token","mergeProps","VStack"],"mappings":"yKAeO,MAAMA,EAAkBC,EAAAA,WAC7B,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,aAAAC,EAAc,SAAAC,EAAU,OAAAC,EAAQ,QAAAC,EAAS,OAAAC,EAAQ,GAAGC,CAAO,EAAEC,IAAgB,CACnG,MAAMC,EAAcC,EAAAA,OAAO,IAAI,EACzBC,EAAMH,GAAgBC,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EACtB,UAAA,CAAE,GAAGN,EAAO,WAAYJ,GAAY,EAAO,EAC3CQ,CAAyC,EAErC,CAAE,WAAAG,CAAU,EAAKC,WAAS,CAAE,WAAYZ,GAAY,EAAK,CAAE,EAC3D,CAAE,eAAAa,EAAgB,WAAAC,GAAeC,EAAAA,aAAAA,EAyBvC,OACEC,MACE,SAAA,CAAA,IAAKR,EACL,UAAWS,KACTC,EAAAA,IAAI,CACF,QAAS,CAAE,UAAW,aAAe,EACrC,UAAW,CAAE,QAAS,MAAO,cAAe,MAAQ,EACpD,OAAQ,UACR,EAAG,OACH,QAAS,OACT,SAAU,WACV,WAAY,gBACZ,WAAY,qBACZ,GArCWjB,EAAS,CAAE,EAAG,MAAQ,EAAG,GAsCpC,GArCaE,EACjB,CACE,QAAS,CACP,QAAS,KACT,SAAU,WACV,IAAK,EACL,KAAM,EACN,MAAO,EACP,OAAQ,EACR,aAAc,UACd,gBAAiB,4DACjB,MAAO,CAAE,gBAAiB,uEAAyE,EACnG,QAAS,EACT,WAAY,mBACb,EACD,OAAQ,CACN,QAAS,CACP,QAAS,CACV,CACF,CACF,EACD,CAiBG,CAAA,CAAA,EACDU,GACEK,EAAAA,IAAI,CAAE,aAAc,aAAc,aAAc,QAAS,aAAc,QAAS,cAAe,EAAK,CAAA,EACtGpB,CAAS,EAEX,MAAO,CAAE,aAAcC,GAAgBoB,EAAAA,MAAM,cAAc,CAAC,EACxD,GAAAC,EAAAA,WAAWX,EAAaE,EAAYG,CAAU,EACnC,gBAAAd,EACf,aAAcE,EACd,aAAcA,EAA4B,SAE1Cc,MAACK,EAAAA,OAAQ,CAAA,SAAAxB,CAAkB,CAAA,CAAA,CAAA,CAGjC,CAAC,EAGHF,EAAgB,YAAc"}

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

@@ -1,2 +1,2 @@
-"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;
+"use strict";var e=require("react/jsx-runtime"),s=require("../containers/button.js");require("../containers/card.js");var o=require("@styled/css"),i=require("@styled/jsx"),q=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 l=require("../primitives/text.js"),d=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var c=require("../logos/logo-pay-pal-wordmark.js");require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js"),require("../feedback/callout.js");var f=require("../feedback/loading-spinner.js");require("../feedback/progress-bar.js"),require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");const u=d.forwardRef((r,t)=>{const{disabled:a,validating:n}=r;return e.jsx(s.ButtonContainer,{ref:t,className:o.css({bg:"#ffc439",outlineColor:"#ffc439",border:"1px solid transparent",px:6,py:2.5}),"aria-disabled":a,shadow:!0,...r,children:n?e.jsx(f.LoadingSpinner,{size:24,strokeWidth:2.5,inverted:!0}):e.jsxs(i.HStack,{w:"full",gap:1,justifyContent:"center",children:[e.jsx(l.default,{fontWeight:"semibold",styles:{color:q.token("colors.ink.90")},children:"Pay with"}),e.jsx(i.Box,{mt:.5,children:e.jsx(c.default,{width:60})})]})})});u.displayName="PayPalButton",exports.PayPalButton=u;
 //# 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":"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"}
+{"version":3,"file":"paypal-button.js","sources":["../../../../src/components/external/paypal-button.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { LoadingSpinner } from '@components/feedback';\nimport { LogoPayPalWordmark } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { forwardRef } from 'react';\nimport { 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, validating } = props;\n\n  return (\n    <ButtonContainer\n      ref={forwardedRef}\n      className={css({\n        bg: '#ffc439',\n        outlineColor: '#ffc439',\n        border: '1px solid transparent',\n        px: 6,\n        py: 2.5,\n      })}\n      aria-disabled={disabled}\n      shadow\n      {...props}\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    </ButtonContainer>\n  );\n});\n\nPayPalButton.displayName = 'PayPalButton';\n"],"names":["PayPalButton","forwardRef","props","forwardedRef","disabled","validating","_jsx","ButtonContainer","css","LoadingSpinner","_jsxs","HStack","Text","token","Box","LogoPayPalWordmark"],"mappings":"6jCAgBa,MAAAA,EAAeC,EAAAA,WAAiD,CAACC,EAAOC,IAAgB,CACnG,KAAM,CAAE,SAAAC,EAAU,WAAAC,CAAY,EAAGH,EAEjC,OACEI,EAAAA,IAACC,EAAAA,gBACC,CAAA,IAAKJ,EACL,UAAWK,EAAAA,IAAI,CACb,GAAI,UACJ,aAAc,UACd,OAAQ,wBACR,GAAI,EACJ,GAAI,GACL,CAAA,kBACcJ,EACf,OAAM,GAAA,GACFF,EAEH,SAAAG,EACCC,MAACG,EAAAA,eAAe,CAAA,KAAM,GAAI,YAAa,IAAK,cAE5CC,OAACC,EAAAA,QAAO,EAAE,OAAO,IAAK,EAAG,eAAe,SACtC,SAAA,CAAAL,EAAAA,IAACM,UAAK,CAAA,WAAW,WAAW,OAAQ,CAAE,MAAOC,QAAM,eAAe,CAAG,EAAA,SAAA,UAAA,CAAA,EAGrEP,EAAAA,IAACQ,EAAI,IAAA,CAAA,GAAI,GAAG,SACVR,EAACS,IAAAA,EAAAA,QAAkB,CAAC,MAAO,EAAM,CAAA,CAAA,CAAA,CAC7B,GAET,CAAA,CAGP,CAAC,EAEDf,EAAa,YAAc"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../../src/components/feedback/tooltip.tsx"],"sourcesContent":["import { Text } from '@components/primitives';\nimport { useClickAway } from '@hooks/useClickAway';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css, cx } from '@styled/css';\nimport { PropsWithChildren, ReactElement, ReactNode, cloneElement, forwardRef, useMemo, useRef, useState } from 'react';\nimport { TooltipTriggerProps, mergeProps, useTooltipTrigger } from 'react-aria';\n\nexport type TooltipProps = PropsWithChildren<\n  {\n    content: ReactNode;\n    width?: number | string;\n  } & TooltipTriggerProps\n>;\n\nconst DEFAULT_CLOSE_DELAY = 2500;\n\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, forwardedRef) => {\n  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0;\n\n  const { children, content, width = 288, closeDelay = DEFAULT_CLOSE_DELAY, defaultOpen, ...restProps } = props;\n  const [isClicked, setIsClicked] = useState(false);\n\n  const { isSelected: isOpen, setSelected: setOpen } = useToggleState({\n    isOpen: props.isOpen,\n    defaultSelected: defaultOpen,\n    onChange(open) {\n      if (!open) {\n        setIsClicked(false);\n      }\n    },\n    ...props,\n  });\n\n  const state = useMemo(\n    () => ({\n      isOpen,\n      open: () => {\n        setOpen(true);\n      },\n      close: (immediate?: boolean) => {\n        if (immediate) {\n          setOpen(false);\n          return;\n        }\n        if (!isTouchDevice) {\n          if (isClicked) {\n            setTimeout(() => {\n              setOpen(false);\n              setIsClicked(false);\n            }, closeDelay);\n          }\n          if (!isClicked) {\n            setOpen(false);\n          }\n        } else {\n          setOpen(false);\n        }\n      },\n    }),\n    [isOpen, isClicked],\n  );\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, triggerRef);\n\n  triggerProps.onClick = () => {\n    state.open();\n    setIsClicked(true);\n  };\n\n  const clickAwayRef = useClickAway<HTMLDivElement>(() => {\n    state.close(true);\n  });\n\n  return (\n    <div\n      ref={clickAwayRef}\n      className={css({ position: 'relative' })}\n      onMouseLeave={() => {\n        state.close();\n      }}\n      onFocus={() => {\n        state.open();\n      }}\n      onBlur={() => {\n        state.close();\n      }}\n    >\n      {cloneElement(children as ReactElement, {\n        ...triggerProps,\n        tabIndex: 0,\n      })}\n      <div\n        ref={forwardedRef}\n        aria-describedby=\"tooltip\"\n        role=\"tooltip\"\n        style={{ width }}\n        className={cx(\n          css({\n            display: state.isOpen ? 'block' : 'none',\n            maxW: 72,\n            width: 'max',\n            color: 'text.secondary',\n            bgColor: 'surface.primary',\n            borderColor: 'neutral.secondary',\n            position: 'absolute',\n            py: 2,\n            px: 3,\n            borderRadius: 'xl',\n            boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n            top: 0,\n            left: '50%',\n            transform: 'translateX(-50%) translateY(calc(-100% - 0.75rem))',\n            zIndex: 'max',\n          }),\n        )}\n        onMouseEnter={() => {\n          state.open();\n        }}\n        {...mergeProps(tooltipProps, restProps)}\n      >\n        <Text size=\"sm\">{content}</Text>\n        {state.isOpen && (\n          <div\n            onMouseEnter={() => {\n              state.open();\n            }}\n            style={{ width }}\n            className={css({\n              position: 'absolute',\n              h: 4,\n              bottom: 0,\n              left: '50%',\n              transform: 'translateX(-50%) translateY(0.75rem)',\n            })}\n          />\n        )}\n      </div>\n    </div>\n  );\n});\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"names":["DEFAULT_CLOSE_DELAY","Tooltip","forwardRef","props","forwardedRef","isTouchDevice","children","content","width","closeDelay","defaultOpen","restProps","isClicked","setIsClicked","useState","isOpen","setOpen","useToggleState","open","state","useMemo","immediate","triggerRef","useRef","triggerProps","tooltipProps","useTooltipTrigger","clickAwayRef","useClickAway","_jsxs","css","cloneElement","cx","mergeProps","_jsx","Text"],"mappings":"yjBAcMA,EAAsB,KAEtBC,EAAUC,EAAAA,WAAyC,CAACC,EAAOC,IAAgB,CAC/E,MAAMC,EAAgB,iBAAkB,QAAU,UAAU,eAAiB,GAAK,UAAU,eAAiB,EAEvG,CAAE,SAAAC,EAAU,QAAAC,EAAS,MAAAC,EAAQ,IAAK,WAAAC,EAAaT,EAAqB,YAAAU,EAAa,GAAGC,CAAW,EAAGR,EAClG,CAACS,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAE1C,CAAE,WAAYC,EAAQ,YAAaC,CAAO,EAAKC,EAAe,eAAA,CAClE,OAAQd,EAAM,OACd,gBAAiBO,EACjB,SAASQ,EAAI,CACNA,GACHL,EAAa,EAAK,CAEtB,EACA,GAAGV,CACJ,CAAA,EAEKgB,EAAQC,UACZ,KAAO,CACL,OAAAL,EACA,KAAM,IAAK,CACTC,EAAQ,EAAI,CACd,EACA,MAAQK,GAAuB,CAC7B,GAAIA,EAAW,CACbL,EAAQ,EAAK,EACb,MACF,CACKX,EAWHW,EAAQ,EAAK,GAVTJ,GACF,WAAW,IAAK,CACdI,EAAQ,EAAK,EACbH,EAAa,EAAK,CACpB,EAAGJ,CAAU,EAEVG,GACHI,EAAQ,EAAK,EAKnB,CACD,GACD,CAACD,EAAQH,CAAS,CAAC,EAGfU,EAAaC,EAAuB,OAAA,IAAI,EACxC,CAAE,aAAAC,EAAc,aAAAC,GAAiBC,EAAkBvB,kBAAAA,EAAOgB,EAAOG,CAAU,EAEjFE,EAAa,QAAU,IAAK,CAC1BL,EAAM,KAAA,EACNN,EAAa,EAAI,CACnB,EAEA,MAAMc,EAAeC,EAAAA,aAA6B,IAAK,CACrDT,EAAM,MAAM,EAAI,CAClB,CAAC,EAED,OACEU,cACE,IAAKF,EACL,UAAWG,EAAAA,IAAI,CAAE,SAAU,UAAY,CAAA,EACvC,aAAc,IAAK,CACjBX,EAAM,MAAA,CACR,EACA,QAAS,IAAK,CACZA,EAAM,KACR,CAAA,EACA,OAAQ,IAAK,CACXA,EAAM,MACR,CAAA,EAEC,SAAA,CAAAY,EAAAA,aAAazB,EAA0B,CACtC,GAAGkB,EACH,SAAU,EACX,EACDK,cACE,IAAKzB,EACY,mBAAA,UACjB,KAAK,UACL,MAAO,CAAE,MAAAI,CAAO,EAChB,UAAWwB,EAAAA,GACTF,MAAI,CACF,QAASX,EAAM,OAAS,QAAU,OAClC,KAAM,GACN,MAAO,MACP,MAAO,iBACP,QAAS,kBACT,YAAa,oBACb,SAAU,WACV,GAAI,EACJ,GAAI,EACJ,aAAc,KACd,UAAW,uCACX,IAAK,EACL,KAAM,MACN,UAAW,qDACX,OAAQ,KACT,CAAA,CAAC,EAEJ,aAAc,IAAK,CACjBA,EAAM,KACR,CAAA,EAAC,GACGc,aAAWR,EAAcd,CAAS,EAEtC,SAAA,CAAAuB,EAAAA,IAACC,EAAAA,QAAI,CAAC,KAAK,KAAI,SAAE5B,CAAO,CAAA,EACvBY,EAAM,QACLe,EAAAA,IACE,MAAA,CAAA,aAAc,IAAK,CACjBf,EAAM,KACR,CAAA,EACA,MAAO,CAAE,MAAAX,GACT,UAAWsB,EAAAA,IAAI,CACb,SAAU,WACV,EAAG,EACH,OAAQ,EACR,KAAM,MACN,UAAW,sCACZ,CAAA,CACD,CAAA,CACH,CACG,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAED7B,EAAQ,YAAc"}
+{"version":3,"file":"tooltip.js","sources":["../../../../src/components/feedback/tooltip.tsx"],"sourcesContent":["import { Text } from '@components/primitives';\nimport { useClickAway } from '@hooks/useClickAway';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css, cx } from '@styled/css';\nimport { PropsWithChildren, ReactElement, ReactNode, cloneElement, forwardRef, useMemo, useRef, useState } from 'react';\nimport { TooltipTriggerProps, mergeProps, useTooltipTrigger } from 'react-aria';\n\nexport type TooltipProps = PropsWithChildren<\n  {\n    content: ReactNode;\n    width?: number | string;\n  } & TooltipTriggerProps\n>;\n\nconst DEFAULT_CLOSE_DELAY = 2500;\n\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, forwardedRef) => {\n  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0;\n\n  const { children, content, width = 288, closeDelay = DEFAULT_CLOSE_DELAY, defaultOpen, ...restProps } = props;\n  const [isClicked, setIsClicked] = useState(false);\n\n  const { isSelected: isOpen, setSelected: setOpen } = useToggleState({\n    isOpen: props.isOpen,\n    defaultSelected: defaultOpen,\n    onChange(open) {\n      if (!open) {\n        setIsClicked(false);\n      }\n    },\n    ...props,\n  });\n\n  const state = useMemo(\n    () => ({\n      isOpen,\n      open: () => {\n        setOpen(true);\n      },\n      close: (immediate?: boolean) => {\n        if (immediate) {\n          setOpen(false);\n          return;\n        }\n        if (!isTouchDevice) {\n          if (isClicked) {\n            setTimeout(() => {\n              setOpen(false);\n              setIsClicked(false);\n            }, closeDelay);\n          }\n          if (!isClicked) {\n            setOpen(false);\n          }\n        } else {\n          setOpen(false);\n        }\n      },\n    }),\n    [isOpen, isClicked],\n  );\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, triggerRef);\n\n  triggerProps.onClick = () => {\n    state.open();\n    setIsClicked(true);\n  };\n\n  const clickAwayRef = useClickAway<HTMLDivElement>(() => {\n    state.close(true);\n  });\n\n  return (\n    <div\n      ref={clickAwayRef}\n      className={css({ position: 'relative' })}\n      onMouseLeave={() => {\n        state.close();\n      }}\n      onFocus={() => {\n        state.open();\n      }}\n      onBlur={() => {\n        state.close();\n      }}\n    >\n      {cloneElement(children as ReactElement, {\n        ...triggerProps,\n        tabIndex: 0,\n      })}\n      <div\n        ref={forwardedRef}\n        aria-describedby=\"tooltip\"\n        role=\"tooltip\"\n        style={{ width }}\n        className={cx(\n          css({\n            display: state.isOpen ? 'block' : 'none',\n            maxW: 72,\n            width: 'max',\n            color: 'text.secondary',\n            bgColor: 'surface.primary',\n            _dark: { bgColor: 'surface.secondary' },\n            borderColor: 'neutral.secondary',\n            position: 'absolute',\n            py: 2,\n            px: 3,\n            borderRadius: 'xl',\n            boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n            top: 0,\n            left: '50%',\n            transform: 'translateX(-50%) translateY(calc(-100% - 0.75rem))',\n            zIndex: 'max',\n          }),\n        )}\n        onMouseEnter={() => {\n          state.open();\n        }}\n        {...mergeProps(tooltipProps, restProps)}\n      >\n        <Text size=\"sm\">{content}</Text>\n        {state.isOpen && (\n          <div\n            onMouseEnter={() => {\n              state.open();\n            }}\n            style={{ width }}\n            className={css({\n              position: 'absolute',\n              h: 4,\n              bottom: 0,\n              left: '50%',\n              transform: 'translateX(-50%) translateY(0.75rem)',\n            })}\n          />\n        )}\n      </div>\n    </div>\n  );\n});\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"names":["DEFAULT_CLOSE_DELAY","Tooltip","forwardRef","props","forwardedRef","isTouchDevice","children","content","width","closeDelay","defaultOpen","restProps","isClicked","setIsClicked","useState","isOpen","setOpen","useToggleState","open","state","useMemo","immediate","triggerRef","useRef","triggerProps","tooltipProps","useTooltipTrigger","clickAwayRef","useClickAway","_jsxs","css","cloneElement","cx","mergeProps","_jsx","Text"],"mappings":"yjBAcMA,EAAsB,KAEtBC,EAAUC,EAAAA,WAAyC,CAACC,EAAOC,IAAgB,CAC/E,MAAMC,EAAgB,iBAAkB,QAAU,UAAU,eAAiB,GAAK,UAAU,eAAiB,EAEvG,CAAE,SAAAC,EAAU,QAAAC,EAAS,MAAAC,EAAQ,IAAK,WAAAC,EAAaT,EAAqB,YAAAU,EAAa,GAAGC,CAAW,EAAGR,EAClG,CAACS,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAE1C,CAAE,WAAYC,EAAQ,YAAaC,CAAO,EAAKC,EAAAA,eAAe,CAClE,OAAQd,EAAM,OACd,gBAAiBO,EACjB,SAASQ,EAAI,CACNA,GACHL,EAAa,EAAK,CAEtB,EACA,GAAGV,CACJ,CAAA,EAEKgB,EAAQC,EAAAA,QACZ,KAAO,CACL,OAAAL,EACA,KAAM,IAAK,CACTC,EAAQ,EAAI,CACd,EACA,MAAQK,GAAuB,CAC7B,GAAIA,EAAW,CACbL,EAAQ,EAAK,EACb,MACF,CACKX,EAWHW,EAAQ,EAAK,GAVTJ,GACF,WAAW,IAAK,CACdI,EAAQ,EAAK,EACbH,EAAa,EAAK,CACpB,EAAGJ,CAAU,EAEVG,GACHI,EAAQ,EAAK,EAKnB,CACD,GACD,CAACD,EAAQH,CAAS,CAAC,EAGfU,EAAaC,EAAAA,OAAuB,IAAI,EACxC,CAAE,aAAAC,EAAc,aAAAC,GAAiBC,EAAAA,kBAAkBvB,EAAOgB,EAAOG,CAAU,EAEjFE,EAAa,QAAU,IAAK,CAC1BL,EAAM,OACNN,EAAa,EAAI,CACnB,EAEA,MAAMc,EAAeC,eAA6B,IAAK,CACrDT,EAAM,MAAM,EAAI,CAClB,CAAC,EAED,OACEU,EAAAA,YACE,IAAKF,EACL,UAAWG,EAAAA,IAAI,CAAE,SAAU,UAAY,CAAA,EACvC,aAAc,IAAK,CACjBX,EAAM,MACR,CAAA,EACA,QAAS,IAAK,CACZA,EAAM,MACR,EACA,OAAQ,IAAK,CACXA,EAAM,MAAK,CACb,EAEC,SAAA,CAAAY,EAAAA,aAAazB,EAA0B,CACtC,GAAGkB,EACH,SAAU,EACX,EACDK,cACE,IAAKzB,EACY,mBAAA,UACjB,KAAK,UACL,MAAO,CAAE,MAAAI,CAAO,EAChB,UAAWwB,EAAAA,GACTF,EAAAA,IAAI,CACF,QAASX,EAAM,OAAS,QAAU,OAClC,KAAM,GACN,MAAO,MACP,MAAO,iBACP,QAAS,kBACT,MAAO,CAAE,QAAS,mBAAqB,EACvC,YAAa,oBACb,SAAU,WACV,GAAI,EACJ,GAAI,EACJ,aAAc,KACd,UAAW,uCACX,IAAK,EACL,KAAM,MACN,UAAW,qDACX,OAAQ,KACT,CAAA,CAAC,EAEJ,aAAc,IAAK,CACjBA,EAAM,KACR,CAAA,EAAC,GACGc,aAAWR,EAAcd,CAAS,EAEtC,SAAA,CAAAuB,EAAAA,IAACC,EAAAA,QAAI,CAAC,KAAK,KAAI,SAAE5B,CAAO,CAAA,EACvBY,EAAM,QACLe,MACE,MAAA,CAAA,aAAc,IAAK,CACjBf,EAAM,KAAI,CACZ,EACA,MAAO,CAAE,MAAAX,GACT,UAAWsB,EAAI,IAAA,CACb,SAAU,WACV,EAAG,EACH,OAAQ,EACR,KAAM,MACN,UAAW,sCACZ,CAAA,CACD,CAAA,CACH,CACG,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAED7B,EAAQ,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("@styled/tokens"),p=require("../icons/ico-checkmark.js"),q=require("../icons/ico-copy.js"),v=require("../icons/ico-eye-closed.js"),C=require("../icons/ico-eye-opened.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var h=require("../primitives/text.js"),u=require("@styled/css"),c=require("@styled/jsx"),r=require("react");const b=f=>{const{content:t,onCopy:a,showHideButton:o,mono:x}=f,[i,n]=r.useState(!!o),[l,d]=r.useState(!1);r.useEffect(()=>{if(l){const k=setTimeout(()=>{d(!1)},1500);return()=>clearTimeout(k)}},[l]),r.useEffect(()=>{n(!!o)},[o]);const j=r.useCallback(()=>{a&&(a(t),d(!0))},[t]);return e.jsxs(c.HStack,{w:"full",px:4,py:3,rounded:10,bg:"surface.secondary",justifyContent:"space-between",position:"relative",children:[e.jsx(c.Box,{textWrap:"nowrap",overflow:"hidden",userSelect:i?"none":"auto",filter:i?"blur(10px)":"",children:x?e.jsx(h.default.Mono,{truncate:!0,children:t}):e.jsx(h.default,{truncate:!0,children:t})}),e.jsxs(c.HStack,{gap:3,children:[i&&e.jsx("button",{className:u.css({cursor:"pointer",outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5}),onClick:()=>n(!1),"aria-label":"show",children:e.jsx(C.default,{width:22,height:22,color:s.token("colors.brand.base")})}),o&&!i&&e.jsx("button",{className:u.css({cursor:"pointer",outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5}),onClick:()=>n(!0),"aria-label":"hide",children:e.jsx(v.default,{width:22,height:22,color:s.token("colors.brand.base")})}),a&&e.jsx(e.Fragment,{children:l?e.jsx(p.default,{width:22,height:22,color:s.token("colors.brand.base")}):e.jsx("button",{className:u.css({cursor:"pointer",outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5}),onClick:j,"aria-label":"copy",children:e.jsx(q.default,{width:22,height:22,color:s.token("colors.brand.base")})})})]})]})};b.displayName="TextBox",exports.default=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),c=require("../containers/button.js");require("../containers/card.js"),require("@styled/css");var l=require("@styled/jsx"),a=require("@styled/tokens"),p=require("../icons/ico-checkmark.js"),v=require("../icons/ico-copy.js"),w=require("../icons/ico-eye-closed.js"),y=require("../icons/ico-eye-opened.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var h=require("../primitives/text.js"),r=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");const q=x=>{const{content:t,onCopy:u,showHideButton:i,mono:f}=x,[o,n]=r.useState(!!i),[s,d]=r.useState(!1);r.useEffect(()=>{if(s){const j=setTimeout(()=>{d(!1)},1500);return()=>clearTimeout(j)}},[s]),r.useEffect(()=>{n(!!i)},[i]);const b=r.useCallback(()=>{u&&(u(t),d(!0))},[t]);return e.jsxs(l.HStack,{w:"full",px:4,py:3,rounded:10,bg:"surface.secondary",justifyContent:"space-between",position:"relative",children:[e.jsx(l.Box,{textWrap:"nowrap",overflow:"hidden",userSelect:o?"none":"auto",filter:o?"blur(10px)":"",children:f?e.jsx(h.default.Mono,{truncate:!0,children:t}):e.jsx(h.default,{truncate:!0,children:t})}),e.jsxs(l.HStack,{gap:3,children:[o&&e.jsx(c.ButtonContainer,{onPress:()=>n(!1),"aria-label":"show",children:e.jsx(y.default,{width:22,height:22,color:a.token("colors.brand.base")})}),i&&!o&&e.jsx(c.ButtonContainer,{onPress:()=>n(!0),"aria-label":"hide",children:e.jsx(w.default,{width:22,height:22,color:a.token("colors.brand.base")})}),u&&e.jsx(e.Fragment,{children:s?e.jsx(p.default,{width:22,height:22,color:a.token("colors.brand.base")}):e.jsx(c.ButtonContainer,{onPress:b,"aria-label":"copy",children:e.jsx(v.default,{width:22,height:22,color:a.token("colors.brand.base")})})})]})]})};q.displayName="TextBox",exports.default=q;
 //# sourceMappingURL=text-box.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-box.js","sources":["../../../../src/components/info/text-box.tsx"],"sourcesContent":["import { IcoCheckmark, IcoCopy, IcoEyeClosed, IcoEyeOpened } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useCallback, useEffect, useState } from 'react';\n\nexport interface TextBoxProps {\n  content: string;\n  onCopy?: (content: string) => void;\n  showHideButton?: boolean;\n  mono?: boolean;\n}\n\nconst TextBox = (props: TextBoxProps) => {\n  const { content, onCopy, showHideButton, mono } = props;\n  const [isHidden, setIsHidden] = useState(Boolean(showHideButton));\n  const [isCopied, setIsCopied] = useState(false);\n\n  useEffect(() => {\n    if (isCopied) {\n      const timeoutId = setTimeout(() => {\n        setIsCopied(false);\n      }, 1500);\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [isCopied]);\n\n  useEffect(() => {\n    if (showHideButton) {\n      setIsHidden(true);\n    } else {\n      setIsHidden(false);\n    }\n  }, [showHideButton]);\n\n  const handleOnCopy = useCallback(() => {\n    if (!onCopy) return;\n    onCopy(content);\n    setIsCopied(true);\n  }, [content]);\n\n  return (\n    <HStack\n      w=\"full\"\n      px={4}\n      py={3}\n      rounded={10}\n      bg=\"surface.secondary\"\n      justifyContent=\"space-between\"\n      position=\"relative\"\n    >\n      <Box\n        textWrap=\"nowrap\"\n        overflow=\"hidden\"\n        userSelect={isHidden ? 'none' : 'auto'}\n        filter={isHidden ? 'blur(10px)' : ''}\n      >\n        {mono ? <Text.Mono truncate>{content}</Text.Mono> : <Text truncate>{content}</Text>}\n      </Box>\n\n      <HStack gap={3}>\n        {isHidden && (\n          <button\n            className={css({\n              cursor: 'pointer',\n              outlineColor: 'brand.base',\n              outlineWidth: 'thick',\n              outlineOffset: 0.5,\n            })}\n            onClick={() => setIsHidden(false)}\n            aria-label=\"show\"\n          >\n            <IcoEyeOpened width={22} height={22} color={token('colors.brand.base')} />\n          </button>\n        )}\n        {showHideButton && !isHidden && (\n          <button\n            className={css({\n              cursor: 'pointer',\n              outlineColor: 'brand.base',\n              outlineWidth: 'thick',\n              outlineOffset: 0.5,\n            })}\n            onClick={() => setIsHidden(true)}\n            aria-label=\"hide\"\n          >\n            <IcoEyeClosed width={22} height={22} color={token('colors.brand.base')} />\n          </button>\n        )}\n        {onCopy && (\n          <>\n            {isCopied ? (\n              <IcoCheckmark width={22} height={22} color={token('colors.brand.base')} />\n            ) : (\n              <button\n                className={css({\n                  cursor: 'pointer',\n                  outlineColor: 'brand.base',\n                  outlineWidth: 'thick',\n                  outlineOffset: 0.5,\n                })}\n                onClick={handleOnCopy}\n                aria-label=\"copy\"\n              >\n                <IcoCopy width={22} height={22} color={token('colors.brand.base')} />\n              </button>\n            )}\n          </>\n        )}\n      </HStack>\n    </HStack>\n  );\n};\n\nTextBox.displayName = 'TextBox';\n\nexport default TextBox;\n"],"names":["TextBox","props","content","onCopy","showHideButton","mono","isHidden","setIsHidden","useState","isCopied","setIsCopied","useEffect","timeoutId","handleOnCopy","useCallback","_jsxs","HStack","_jsx","Box","Text","css","IcoEyeOpened","token","IcoEyeClosed","_Fragment","IcoCheckmark","IcoCopy"],"mappings":"2pBAcMA,EAAWC,GAAuB,CACtC,KAAM,CAAE,QAAAC,EAAS,OAAAC,EAAQ,eAAAC,EAAgB,KAAAC,CAAI,EAAKJ,EAC5C,CAACK,EAAUC,CAAW,EAAIC,EAAAA,SAAS,CAAA,CAAQJ,CAAe,EAC1D,CAACK,EAAUC,CAAW,EAAIF,WAAS,EAAK,EAE9CG,EAAU,UAAA,IAAK,CACb,GAAIF,EAAU,CACZ,MAAMG,EAAY,WAAW,IAAK,CAChCF,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaE,CAAS,CACrC,CACF,EAAG,CAACH,CAAQ,CAAC,EAEbE,EAAAA,UAAU,IAAK,CAEXJ,EADE,CAAAH,CAAAA,CACc,CAIpB,EAAG,CAACA,CAAc,CAAC,EAEnB,MAAMS,EAAeC,EAAAA,YAAY,IAAK,CAC/BX,IACLA,EAAOD,CAAO,EACdQ,EAAY,EAAI,EAClB,EAAG,CAACR,CAAO,CAAC,EAEZ,OACEa,EAAAA,KAACC,SAAM,CACL,EAAE,OACF,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,GAAG,oBACH,eAAe,gBACf,SAAS,WAAU,SAAA,CAEnBC,EAAAA,IAACC,MAAG,CACF,SAAS,SACT,SAAS,SACT,WAAYZ,EAAW,OAAS,OAChC,OAAQA,EAAW,aAAe,YAEjCD,EAAOY,EAAAA,IAACE,UAAK,KAAI,CAAC,SAAQ,GAAA,SAAEjB,CAAO,CAAA,EAAgBe,EAAAA,IAACE,UAAK,CAAA,qBAAUjB,CAAO,CAAA,CACvE,CAAA,EAENa,EAAAA,KAACC,UAAO,IAAK,EAAC,SAAA,CACXV,GACCW,EAAAA,IACE,SAAA,CAAA,UAAWG,MAAI,CACb,OAAQ,UACR,aAAc,aACd,aAAc,QACd,cAAe,GAChB,EACD,QAAS,IAAMb,EAAY,EAAK,eACrB,OAAM,SAEjBU,EAACI,IAAAA,EAAAA,QAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOC,EAAAA,MAAM,mBAAmB,CAAC,CAAA,IAGzElB,GAAkB,CAACE,GAClBW,gBACE,UAAWG,EAAAA,IAAI,CACb,OAAQ,UACR,aAAc,aACd,aAAc,QACd,cAAe,EAChB,CAAA,EACD,QAAS,IAAMb,EAAY,EAAI,EAAC,aACrB,OAAM,SAEjBU,EAAAA,IAACM,EAAAA,QAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOD,EAAAA,MAAM,mBAAmB,CAAK,CAAA,CAAA,CAAA,EAG7EnB,GACCc,EACGO,IAAAA,EAAAA,SAAA,CAAA,SAAAf,EACCQ,EAAAA,IAACQ,EAAAA,QAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOH,EAAM,MAAA,mBAAmB,CAAK,CAAA,EAE1EL,EAAAA,IAAA,SAAA,CACE,UAAWG,EAAI,IAAA,CACb,OAAQ,UACR,aAAc,aACd,aAAc,QACd,cAAe,EAChB,CAAA,EACD,QAASP,eACE,OAAM,SAEjBI,EAAAA,IAACS,UAAQ,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOJ,EAAAA,MAAM,mBAAmB,CAAC,CAAA,CAC1D,CAAA,CAEV,CAAA,CACJ,CACM,CAAA,CAAA,CAAA,CAAA,CAGf,EAEAtB,EAAQ,YAAc"}
+{"version":3,"file":"text-box.js","sources":["../../../../src/components/info/text-box.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { IcoCheckmark, IcoCopy, IcoEyeClosed, IcoEyeOpened } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { Box, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useCallback, useEffect, useState } from 'react';\n\nexport interface TextBoxProps {\n  content: string;\n  onCopy?: (content: string) => void;\n  showHideButton?: boolean;\n  mono?: boolean;\n}\n\nconst TextBox = (props: TextBoxProps) => {\n  const { content, onCopy, showHideButton, mono } = props;\n  const [isHidden, setIsHidden] = useState(Boolean(showHideButton));\n  const [isCopied, setIsCopied] = useState(false);\n\n  useEffect(() => {\n    if (isCopied) {\n      const timeoutId = setTimeout(() => {\n        setIsCopied(false);\n      }, 1500);\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [isCopied]);\n\n  useEffect(() => {\n    if (showHideButton) {\n      setIsHidden(true);\n    } else {\n      setIsHidden(false);\n    }\n  }, [showHideButton]);\n\n  const handleOnCopy = useCallback(() => {\n    if (!onCopy) return;\n    onCopy(content);\n    setIsCopied(true);\n  }, [content]);\n\n  return (\n    <HStack\n      w=\"full\"\n      px={4}\n      py={3}\n      rounded={10}\n      bg=\"surface.secondary\"\n      justifyContent=\"space-between\"\n      position=\"relative\"\n    >\n      <Box\n        textWrap=\"nowrap\"\n        overflow=\"hidden\"\n        userSelect={isHidden ? 'none' : 'auto'}\n        filter={isHidden ? 'blur(10px)' : ''}\n      >\n        {mono ? <Text.Mono truncate>{content}</Text.Mono> : <Text truncate>{content}</Text>}\n      </Box>\n\n      <HStack gap={3}>\n        {isHidden && (\n          <ButtonContainer onPress={() => setIsHidden(false)} aria-label=\"show\">\n            <IcoEyeOpened width={22} height={22} color={token('colors.brand.base')} />\n          </ButtonContainer>\n        )}\n        {showHideButton && !isHidden && (\n          <ButtonContainer onPress={() => setIsHidden(true)} aria-label=\"hide\">\n            <IcoEyeClosed width={22} height={22} color={token('colors.brand.base')} />\n          </ButtonContainer>\n        )}\n        {onCopy && (\n          <>\n            {isCopied ? (\n              <IcoCheckmark width={22} height={22} color={token('colors.brand.base')} />\n            ) : (\n              <ButtonContainer onPress={handleOnCopy} aria-label=\"copy\">\n                <IcoCopy width={22} height={22} color={token('colors.brand.base')} />\n              </ButtonContainer>\n            )}\n          </>\n        )}\n      </HStack>\n    </HStack>\n  );\n};\n\nTextBox.displayName = 'TextBox';\n\nexport default TextBox;\n"],"names":["TextBox","props","content","onCopy","showHideButton","mono","isHidden","setIsHidden","useState","isCopied","setIsCopied","useEffect","timeoutId","handleOnCopy","useCallback","_jsxs","HStack","_jsx","Box","Text","ButtonContainer","IcoEyeOpened","token","IcoEyeClosed","_Fragment","IcoCheckmark","IcoCopy"],"mappings":"q9BAcMA,MAAAA,EAAWC,GAAuB,CACtC,KAAM,CAAE,QAAAC,EAAS,OAAAC,EAAQ,eAAAC,EAAgB,KAAAC,CAAI,EAAKJ,EAC5C,CAACK,EAAUC,CAAW,EAAIC,EAAS,SAAA,CAAA,CAAQJ,CAAe,EAC1D,CAACK,EAAUC,CAAW,EAAIF,WAAS,EAAK,EAE9CG,EAAAA,UAAU,IAAK,CACb,GAAIF,EAAU,CACZ,MAAMG,EAAY,WAAW,IAAK,CAChCF,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaE,CAAS,CACrC,CACF,EAAG,CAACH,CAAQ,CAAC,EAEbE,EAAU,UAAA,IAAK,CAEXJ,EADE,EAAAH,CACc,CAIpB,EAAG,CAACA,CAAc,CAAC,EAEnB,MAAMS,EAAeC,EAAY,YAAA,IAAK,CAC/BX,IACLA,EAAOD,CAAO,EACdQ,EAAY,EAAI,EAClB,EAAG,CAACR,CAAO,CAAC,EAEZ,OACEa,EAAAA,KAACC,EACC,OAAA,CAAA,EAAE,OACF,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,GAAG,oBACH,eAAe,gBACf,SAAS,WAAU,SAAA,CAEnBC,EAACC,IAAAA,MACC,CAAA,SAAS,SACT,SAAS,SACT,WAAYZ,EAAW,OAAS,OAChC,OAAQA,EAAW,aAAe,GAAE,SAEnCD,EAAOY,EAAAA,IAACE,UAAK,KAAK,CAAA,SAAU,GAAA,SAAAjB,CAAoB,CAAA,EAAGe,MAACE,EAAK,QAAA,CAAA,SAAU,GAAA,SAAAjB,CAAe,CAAA,CAAA,CAAA,EAGrFa,EAACC,KAAAA,SAAM,CAAC,IAAK,EAAC,SAAA,CACXV,GACCW,EAAAA,IAACG,EAAe,gBAAA,CAAC,QAAS,IAAMb,EAAY,EAAK,EAAC,aAAa,OAAM,SACnEU,EAAAA,IAACI,EAAAA,QAAa,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOC,QAAM,mBAAmB,CAAK,CAAA,CAAA,CAAA,EAG7ElB,GAAkB,CAACE,GAClBW,MAACG,EAAAA,gBAAgB,CAAA,QAAS,IAAMb,EAAY,EAAI,EAAC,aAAa,OAAM,SAClEU,EAAAA,IAACM,EAAAA,QAAa,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOD,EAAAA,MAAM,mBAAmB,CAAC,CAAA,CACtD,CAAA,EAEnBnB,GACCc,EAAAA,IACGO,WAAA,CAAA,SAAAf,EACCQ,EAAAA,IAACQ,EAAY,QAAA,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOH,EAAAA,MAAM,mBAAmB,CAAK,CAAA,EAE1EL,EAAAA,IAACG,EAAAA,gBAAgB,CAAA,QAASP,EAAyB,aAAA,OACjD,SAAAI,EAAAA,IAACS,EAAAA,QAAO,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOJ,EAAAA,MAAM,mBAAmB,CAAK,CAAA,CAAA,CAAA,CAExE,CAAA,CAEJ,CAAA,CAAA,CACM,CACF,CAAA,CAEb,EAEAtB,EAAQ,YAAc"}

package/dist/cjs/components/info/wallet-address.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var l=require("react/jsx-runtime"),c=require("@styled/css"),t=require("react"),s=require("react-aria");const d=t.forwardRef((n,f)=>{const{address:r,onCopy:o}=n,[e,i]=t.useState(!1),u=`${r.slice(0,6)}...${r?.slice(-4)}`,m=t.useRef(null),a=f||m,p=t.useCallback(()=>{o&&o(r),i(!0)},[r]),{buttonProps:b}=s.useButton({...n,onPress:p},a),{isFocusVisible:h,focusProps:x}=s.useFocusRing();return t.useEffect(()=>{if(e){const v=setTimeout(()=>{i(!1)},1500);return()=>clearTimeout(v)}},[e]),o?l.jsx("button",{ref:a,...s.mergeProps(b,x),className:c.css({fontSize:"md",color:e?"positive.darker":"text.tertiary",fontWeight:e?"medium":"normal",rounded:"button",outlineColor:"brand.base",outlineStyle:h?"solid":"none",outlineWidth:"thick",outlineOffset:1,cursor:"pointer",fontVariant:"no-contextual"}),children:e?"Copied!":u}):l.jsx("span",{className:c.css({fontSize:"md",color:"text.tertiary",fontWeight:"normal",fontVariant:"no-contextual"}),children:u})});d.displayName="WalletAddress",exports.default=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("react/jsx-runtime"),f=require("../containers/button.js");require("../containers/card.js");var a=require("@styled/css");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");var t=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");const n=t.forwardRef((c,q)=>{const{address:r,onCopy:i}=c,[e,u]=t.useState(!1),o=`${r.slice(0,6)}...${r?.slice(-4)}`,l=t.useCallback(()=>{i&&i(r),u(!0)},[r]);return t.useEffect(()=>{if(e){const d=setTimeout(()=>{u(!1)},1500);return()=>clearTimeout(d)}},[e]),i?s.jsx(f.ButtonContainer,{className:a.css({fontSize:"md",color:e?"positive.darker":"text.tertiary",fontWeight:e?"medium":"normal",rounded:"button",fontVariant:"no-contextual"}),onPress:l,ref:q,children:e?"Copied!":o}):s.jsx("span",{className:a.css({fontSize:"md",color:"text.tertiary",fontWeight:"normal",fontVariant:"no-contextual"}),children:o})});n.displayName="WalletAddress",exports.default=n;
 //# sourceMappingURL=wallet-address.js.map

package/dist/cjs/components/info/wallet-address.js.map

@@ -1 +1 @@
-{"version":3,"file":"wallet-address.js","sources":["../../../../src/components/info/wallet-address.tsx"],"sourcesContent":["import { css } from '@styled/css';\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface WalletAddressProps extends AriaButtonProps {\n  address: string;\n  onCopy?: (address: string) => void;\n}\n\nconst WalletAddress = forwardRef<HTMLButtonElement, WalletAddressProps>((props, forwardedRef) => {\n  const { address, onCopy } = props;\n  const [isCopied, setIsCopied] = useState(false);\n  const truncatedAddress = `${address.slice(0, 6)}...${address?.slice(-4)}`;\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const handleOnCopy = useCallback(() => {\n    if (onCopy) {\n      onCopy(address);\n    }\n    setIsCopied(true);\n  }, [address]);\n\n  const { buttonProps } = useButton({ ...props, onPress: handleOnCopy }, ref as React.RefObject<HTMLButtonElement>);\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  useEffect(() => {\n    if (isCopied) {\n      const timeoutId = setTimeout(() => {\n        setIsCopied(false);\n      }, 1500);\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [isCopied]);\n\n  if (!onCopy) {\n    return (\n      <span\n        className={css({\n          fontSize: 'md',\n          color: 'text.tertiary',\n          fontWeight: 'normal',\n          fontVariant: 'no-contextual',\n        })}\n      >\n        {truncatedAddress}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      ref={ref}\n      {...mergeProps(buttonProps, focusProps)}\n      className={css({\n        fontSize: 'md',\n        color: isCopied ? 'positive.darker' : 'text.tertiary',\n        fontWeight: isCopied ? 'medium' : 'normal',\n        rounded: 'button',\n        outlineColor: 'brand.base',\n        outlineStyle: isFocusVisible ? 'solid' : 'none',\n        outlineWidth: 'thick',\n        outlineOffset: 1,\n        cursor: 'pointer',\n        fontVariant: 'no-contextual',\n      })}\n    >\n      {isCopied ? 'Copied!' : truncatedAddress}\n    </button>\n  );\n});\n\nWalletAddress.displayName = 'WalletAddress';\n\nexport default WalletAddress;\n"],"names":["WalletAddress","forwardRef","props","forwardedRef","address","onCopy","isCopied","setIsCopied","useState","truncatedAddress","internalRef","useRef","ref","handleOnCopy","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","useEffect","timeoutId","_jsx","mergeProps","css"],"mappings":"iLASMA,EAAgBC,EAAAA,WAAkD,CAACC,EAAOC,IAAgB,CAC9F,KAAM,CAAE,QAAAC,EAAS,OAAAC,CAAQ,EAAGH,EACtB,CAACI,EAAUC,CAAW,EAAIC,EAAAA,SAAS,EAAK,EACxCC,EAAmB,GAAGL,EAAQ,MAAM,EAAG,CAAC,CAAC,MAAMA,GAAS,MAAM,EAAE,CAAC,GAEjEM,EAAcC,EAAAA,OAAO,IAAI,EACzBC,EAAMT,GAAgBO,EAEtBG,EAAeC,cAAY,IAAK,CAChCT,GACFA,EAAOD,CAAO,EAEhBG,EAAY,EAAI,CAClB,EAAG,CAACH,CAAO,CAAC,EAEN,CAAE,YAAAW,CAAW,EAAKC,EAAAA,UAAU,CAAE,GAAGd,EAAO,QAASW,GAAgBD,CAAyC,EAC1G,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,iBAYvC,OAVAC,YAAU,IAAK,CACb,GAAId,EAAU,CACZ,MAAMe,EAAY,WAAW,IAAK,CAChCd,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAac,CAAS,CACrC,CACF,EAAG,CAACf,CAAQ,CAAC,EAERD,EAgBHiB,MACE,SAAA,CAAA,IAAKV,KACDW,aAAWR,EAAaG,CAAU,EACtC,UAAWM,MAAI,CACb,SAAU,KACV,MAAOlB,EAAW,kBAAoB,gBACtC,WAAYA,EAAW,SAAW,SAClC,QAAS,SACT,aAAc,aACd,aAAcW,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,EACf,OAAQ,UACR,YAAa,eACd,CAAA,EAEA,SAAAX,EAAW,UAAYG,CACjB,CAAA,EA/BPa,MAAA,OAAA,CACE,UAAWE,EAAI,IAAA,CACb,SAAU,KACV,MAAO,gBACP,WAAY,SACZ,YAAa,eACd,CAAA,EAEA,SAAAf,CACI,CAAA,CAwBb,CAAC,EAEDT,EAAc,YAAc"}
+{"version":3,"file":"wallet-address.js","sources":["../../../../src/components/info/wallet-address.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { css } from '@styled/css';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface WalletAddressProps extends AriaButtonProps {\n  address: string;\n  onCopy?: (address: string) => void;\n}\n\nconst WalletAddress = forwardRef<HTMLButtonElement, WalletAddressProps>((props, forwardedRef) => {\n  const { address, onCopy } = props;\n  const [isCopied, setIsCopied] = useState(false);\n  const truncatedAddress = `${address.slice(0, 6)}...${address?.slice(-4)}`;\n\n  const handleOnCopy = useCallback(() => {\n    if (onCopy) {\n      onCopy(address);\n    }\n    setIsCopied(true);\n  }, [address]);\n\n  useEffect(() => {\n    if (isCopied) {\n      const timeoutId = setTimeout(() => {\n        setIsCopied(false);\n      }, 1500);\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [isCopied]);\n\n  if (!onCopy) {\n    return (\n      <span\n        className={css({\n          fontSize: 'md',\n          color: 'text.tertiary',\n          fontWeight: 'normal',\n          fontVariant: 'no-contextual',\n        })}\n      >\n        {truncatedAddress}\n      </span>\n    );\n  }\n\n  return (\n    <ButtonContainer\n      className={css({\n        fontSize: 'md',\n        color: isCopied ? 'positive.darker' : 'text.tertiary',\n        fontWeight: isCopied ? 'medium' : 'normal',\n        rounded: 'button',\n        fontVariant: 'no-contextual',\n      })}\n      onPress={handleOnCopy}\n      ref={forwardedRef}\n    >\n      {isCopied ? 'Copied!' : truncatedAddress}\n    </ButtonContainer>\n  );\n});\n\nWalletAddress.displayName = 'WalletAddress';\n\nexport default WalletAddress;\n"],"names":["WalletAddress","forwardRef","props","forwardedRef","address","onCopy","isCopied","setIsCopied","useState","truncatedAddress","handleOnCopy","useCallback","useEffect","timeoutId","_jsx","ButtonContainer","css"],"mappings":"wzBAUMA,MAAAA,EAAgBC,EAAAA,WAAkD,CAACC,EAAOC,IAAgB,CAC9F,KAAM,CAAE,QAAAC,EAAS,OAAAC,CAAQ,EAAGH,EACtB,CAACI,EAAUC,CAAW,EAAIC,WAAS,EAAK,EACxCC,EAAmB,GAAGL,EAAQ,MAAM,EAAG,CAAC,CAAC,MAAMA,GAAS,MAAM,EAAE,CAAC,GAEjEM,EAAeC,cAAY,IAAK,CAChCN,GACFA,EAAOD,CAAO,EAEhBG,EAAY,EAAI,CAClB,EAAG,CAACH,CAAO,CAAC,EAYZ,OAVAQ,YAAU,IAAK,CACb,GAAIN,EAAU,CACZ,MAAMO,EAAY,WAAW,IAAK,CAChCN,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaM,CAAS,CACrC,CACF,EAAG,CAACP,CAAQ,CAAC,EAERD,EAgBHS,EAACC,IAAAA,EAAAA,iBACC,UAAWC,MAAI,CACb,SAAU,KACV,MAAOV,EAAW,kBAAoB,gBACtC,WAAYA,EAAW,SAAW,SAClC,QAAS,SACT,YAAa,gBACd,EACD,QAASI,EACT,IAAKP,EAEJ,SAAAG,EAAW,UAAYG,CAAgB,CAAA,EAzBxCK,EAAAA,IAAA,OAAA,CACE,UAAWE,EAAAA,IAAI,CACb,SAAU,KACV,MAAO,gBACP,WAAY,SACZ,YAAa,eACd,CAAA,EAEA,SAAAP,CACI,CAAA,CAmBb,CAAC,EAEDT,EAAc,YAAc"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-button.js","sources":["../../../../src/components/list-items/navigation-button.tsx"],"sourcesContent":["import { IcoExternalLink } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack } from '@styled/jsx';\nimport { flex } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, RefObject, cloneElement, forwardRef, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface NavigationButtonProps extends AriaButtonProps {\n  primaryLabel: string;\n  secondaryLabel?: string;\n  isExternalLink?: boolean;\n  disabled?: boolean;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst NavigationButtonBase = forwardRef<HTMLButtonElement, NavigationButtonProps>((props, forwardedRef) => {\n  const { primaryLabel, secondaryLabel, isExternalLink, disabled } = props;\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton({ ...props, isDisabled: disabled ?? false }, ref as RefObject<HTMLButtonElement>);\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n\n    return (\n      <button\n        {...mergeProps(buttonProps, focusProps)}\n        ref={ref}\n        className={flex({\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          w: 'full',\n          p: 4,\n          bg: 'neutral.quaternary',\n          transition: 'background-color 0.2s',\n          _hover: { bg: 'neutral.secondary' },\n          rounded: 'lg',\n          cursor: 'pointer',\n          outlineColor: 'brand.base',\n          outlineStyle: isFocusVisible ? 'solid' : 'none',\n          outlineWidth: 'thick',\n          outlineOffset: 0.5,\n          _disabled: { opacity: '0.3', pointerEvents: 'none' },\n        })}\n      >\n        <HStack>\n          {leadingIcon && {\n            ...leadingIcon,\n            props: {\n              ...leadingIcon.props,\n              className: !leadingIcon.props.color ? css({ color: 'brand.base' }) : undefined,\n              height: 24,\n            },\n          }}\n          <Text fontWeight=\"medium\">{primaryLabel}</Text>\n          {isExternalLink && <IcoExternalLink width={14} height={14} color={token('colors.neutral.primary')} />}\n        </HStack>\n        <HStack>\n          {secondaryLabel && (\n            <Text size=\"sm\" fontColor=\"text.tertiary\">\n              {secondaryLabel}\n            </Text>\n          )}\n          {trailingIcon && {\n            ...trailingIcon,\n            props: {\n              ...trailingIcon.props,\n              className: !trailingIcon.props.color ? css({ color: 'neutral.primary' }) : undefined,\n              width: 16,\n              height: 16,\n            },\n          }}\n        </HStack>\n      </button>\n    );\n  });\n});\n\nNavigationButtonBase.displayName = 'NavigationButton';\n\nconst NavigationButton = Object.assign(NavigationButtonBase, { LeadingIcon, TrailingIcon });\n\nexport default NavigationButton;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TrailingIcon","NavigationButtonBase","forwardRef","forwardedRef","primaryLabel","secondaryLabel","isExternalLink","disabled","internalRef","useRef","ref","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","_jsxs","mergeProps","flex","HStack","css","Text","IcoExternalLink","token","NavigationButton"],"mappings":"unBAiBA,MAAMA,EAAcC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,EAAAA,IAACC,SAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAaD,aAAAA,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAeR,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,EAAAA,IAACC,EAAAA,OAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAAA,aAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKO,EAAuBC,EAAAA,WAAqD,CAACR,EAAOS,IAAgB,CACxG,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,EAAgB,SAAAC,CAAQ,EAAKb,EAE7Dc,EAAcC,EAAAA,OAAO,IAAI,EACzBC,EAAMP,GAAgBK,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAAA,UAAU,CAAE,GAAGlB,EAAO,WAAYa,GAAY,EAAO,EAAEG,CAAmC,EAC5G,CAAE,eAAAG,EAAgB,WAAAC,GAAeC,EAAAA,aAAAA,EAEvC,OAAOC,aAAWtB,EAAM,SAAUuB,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAI1B,CAAW,EACnC4B,EAAeF,EAAM,IAAIjB,CAAY,EAE3C,OACEoB,OACM,SAAA,CAAA,GAAAC,aAAWV,EAAaG,CAAU,EACtC,IAAKJ,EACL,UAAWY,OAAK,CACd,eAAgB,gBAChB,WAAY,SACZ,EAAG,OACH,EAAG,EACH,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,OAAQ,UACR,aAAc,aACd,aAAcT,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,GACf,UAAW,CAAE,QAAS,MAAO,cAAe,MAAQ,CACrD,CAAA,EAED,SAAA,CAAAO,OAACG,EAAM,OAAA,CAAA,SAAA,CACJL,GAAe,CACd,GAAGA,EACH,MAAO,CACL,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuC,OAA/BM,EAAAA,IAAI,CAAE,MAAO,aAAc,EACjE,OAAQ,EACT,GAEH7B,EAAAA,IAAC8B,EAAAA,QAAI,CAAC,WAAW,SAAU,SAAArB,CAAoB,CAAA,EAC9CE,GAAkBX,EAAC+B,IAAAA,EAAAA,QAAe,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOC,EAAM,MAAA,wBAAwB,CAAC,CAAA,CAAI,CAC9F,CAAA,EACTP,OAACG,EAAAA,kBACElB,GACCV,EAAAA,IAAC8B,EAAAA,QAAI,CAAC,KAAK,KAAK,UAAU,gBACvB,SAAApB,CACI,CAAA,EAERc,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAA4C,OAApCK,EAAAA,IAAI,CAAE,MAAO,kBAAmB,EACvE,MAAO,GACP,OAAQ,EACT,EACF,CACM,CAAA,CAAA,CAAA,CAAA,CAGf,CAAC,CACH,CAAC,EAEDvB,EAAqB,YAAc,mBAE7B2B,MAAAA,EAAmB,OAAO,OAAO3B,EAAsB,CAAE,YAAAV,EAAa,aAAAS,CAAY,CAAE"}
+{"version":3,"file":"navigation-button.js","sources":["../../../../src/components/list-items/navigation-button.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { IcoExternalLink } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, forwardRef } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface NavigationButtonProps extends AriaButtonProps {\n  primaryLabel: string;\n  secondaryLabel?: string;\n  isExternalLink?: boolean;\n  disabled?: boolean;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst NavigationButtonBase = forwardRef<HTMLButtonElement, NavigationButtonProps>((props, forwardedRef) => {\n  const { primaryLabel, secondaryLabel, isExternalLink } = props;\n\n  return createHost(props.children, slots => {\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n\n    return (\n      <ButtonContainer\n        ref={forwardedRef}\n        className={css({\n          p: 4,\n          bg: 'neutral.quaternary',\n          _hover: { bg: 'neutral.secondary' },\n        })}\n        borderRadius=\"0.5rem\"\n        expand\n        {...props}\n      >\n        <HStack justify=\"space-between\" w=\"full\">\n          <HStack>\n            {leadingIcon && {\n              ...leadingIcon,\n              props: {\n                ...leadingIcon.props,\n                className: !leadingIcon.props.color ? css({ color: 'brand.base' }) : undefined,\n                height: 24,\n              },\n            }}\n            <Text fontWeight=\"medium\">{primaryLabel}</Text>\n            {isExternalLink && <IcoExternalLink width={14} height={14} color={token('colors.neutral.primary')} />}\n          </HStack>\n          <HStack>\n            {secondaryLabel && (\n              <Text size=\"sm\" fontColor=\"text.tertiary\">\n                {secondaryLabel}\n              </Text>\n            )}\n            {trailingIcon && {\n              ...trailingIcon,\n              props: {\n                ...trailingIcon.props,\n                className: !trailingIcon.props.color ? css({ color: 'neutral.primary' }) : undefined,\n                width: 16,\n                height: 16,\n              },\n            }}\n          </HStack>\n        </HStack>\n      </ButtonContainer>\n    );\n  });\n});\n\nNavigationButtonBase.displayName = 'NavigationButton';\n\nconst NavigationButton = Object.assign(NavigationButtonBase, { LeadingIcon, TrailingIcon });\n\nexport default NavigationButton;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TrailingIcon","NavigationButtonBase","forwardRef","forwardedRef","primaryLabel","secondaryLabel","isExternalLink","createHost","slots","leadingIcon","trailingIcon","ButtonContainer","css","_jsxs","HStack","Text","IcoExternalLink","token","NavigationButton"],"mappings":"u4BAiBA,MAAMA,EAAcC,EAAW,WAAA,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,EAAAA,IAACC,SAAM,CAAA,SACJC,EAAS,SAAA,IAAIJ,EAAUK,GACfC,eAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAeR,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,MAACC,EAAAA,OAAM,CAAA,SACJC,EAAS,SAAA,IAAIJ,EAAUK,GACfC,EAAAA,aAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKO,EAAuBC,aAAqD,CAACR,EAAOS,IAAgB,CACxG,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,CAAc,EAAKZ,EAEzD,OAAOa,EAAAA,WAAWb,EAAM,SAAUc,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAIjB,CAAW,EACnCmB,EAAeF,EAAM,IAAIR,CAAY,EAE3C,OACEL,EAAAA,IAACgB,EAAAA,gBACC,CAAA,IAAKR,EACL,UAAWS,MAAI,CACb,EAAG,EACH,GAAI,qBACJ,OAAQ,CAAE,GAAI,mBAAqB,EACpC,EACD,aAAa,SACb,OACI,GAAA,GAAAlB,EAEJ,SAAAmB,EAACC,KAAAA,SAAM,CAAC,QAAQ,gBAAgB,EAAE,iBAChCD,EAACC,KAAAA,SACE,CAAA,SAAA,CAAAL,GAAe,CACd,GAAGA,EACH,MAAO,CACL,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuC,OAA/BG,MAAI,CAAE,MAAO,aAAc,EACjE,OAAQ,EACT,GAEHjB,EAAAA,IAACoB,EAAAA,QAAI,CAAC,WAAW,SAAU,SAAAX,CAAoB,CAAA,EAC9CE,GAAkBX,EAAAA,IAACqB,UAAe,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOC,QAAM,wBAAwB,CAAC,CAAA,CAAI,CAC9F,CAAA,EACTJ,EAACC,KAAAA,oBACET,GACCV,EAAAA,IAACoB,UAAI,CAAC,KAAK,KAAK,UAAU,gBACvB,SAAAV,CACI,CAAA,EAERK,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAA4C,OAApCE,EAAAA,IAAI,CAAE,MAAO,kBAAmB,EACvE,MAAO,GACP,OAAQ,EACT,EACF,CACM,CAAA,CAAA,CAAA,CAAA,CAEK,CAAA,CAEtB,CAAC,CACH,CAAC,EAEDX,EAAqB,YAAc,mBAEnC,MAAMiB,EAAmB,OAAO,OAAOjB,EAAsB,CAAE,YAAAV,EAAa,aAAAS,CAAY,CAAE"}

package/dist/cjs/components/list-items/nft-tile.js

@@ -1,2 +1,2 @@
-"use strict";var s=require("react/jsx-runtime"),l=require("@styled/css"),j=require("@styled/jsx"),u=require("react"),t=require("react-aria");const n=({src:e,alt:r})=>s.jsx(j.Box,{rounded:"2xl",overflow:"hidden",children:s.jsx("img",{src:e,alt:r,className:l.css({objectFit:"cover"})})}),v=e=>{const{src:r,onPress:o,alt:c}=e,i=u.useRef(null),a=u.useCallback(()=>{o?.()},[o]),{buttonProps:x}=t.useButton({...e,onPress:a},i),{isFocusVisible:d,focusProps:b}=t.useFocusRing();return o?s.jsx("button",{...t.mergeProps(x,b),ref:i,className:l.css({rounded:"2xl",outlineColor:"brand.base",outlineStyle:d?"solid":"none",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer",_hover:{boxShadow:"0 6px 8px 2px rgba(0, 0, 0, .18)"}}),children:s.jsx(n,{src:r,alt:c})}):s.jsx(n,{src:r,alt:c})};exports.NFTTile=v;
+"use strict";var r=require("react/jsx-runtime"),c=require("../containers/button.js");require("../containers/card.js");var a=require("@styled/css"),o=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");var l=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");const q=({src:e,alt:i})=>r.jsx(o.Box,{rounded:"2xl",overflow:"hidden",children:r.jsx("img",{src:e,alt:i,className:a.css({objectFit:"cover"})})}),n=e=>{const{src:i,onPress:s,alt:u}=e,t=l.useCallback(()=>{s?.()},[s]);return s?r.jsx(c.ButtonContainer,{className:a.css({_hover:{boxShadow:"0 6px 8px 2px rgba(0, 0, 0, .18)"}}),borderRadius:"1rem",onPress:t,...e,children:r.jsx(q,{src:i,alt:u})}):r.jsx(q,{src:i,alt:u})};exports.NFTTile=n;
 //# sourceMappingURL=nft-tile.js.map

package/dist/cjs/components/list-items/nft-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"nft-tile.js","sources":["../../../../src/components/list-items/nft-tile.tsx"],"sourcesContent":["import { css } from '@styled/css';\nimport { Box } from '@styled/jsx';\nimport { useCallback, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface NFTTileProps extends AriaButtonProps {\n  src: string;\n  onPress?: () => void;\n  alt: string;\n}\n\ninterface ImageContainerProps {\n  src: string;\n  alt: string;\n}\n\nconst ImageContainer = ({ src, alt }: ImageContainerProps) => {\n  return (\n    <Box rounded=\"2xl\" overflow=\"hidden\">\n      <img src={src} alt={alt} className={css({ objectFit: 'cover' })} />\n    </Box>\n  );\n};\n\nexport const NFTTile = (props: NFTTileProps) => {\n  const { src, onPress, alt } = props;\n\n  const ref = useRef(null);\n\n  const handlePress = useCallback(() => {\n    onPress?.();\n  }, [onPress]);\n\n  const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  if (onPress)\n    return (\n      <button\n        {...mergeProps(buttonProps, focusProps)}\n        ref={ref}\n        className={css({\n          rounded: '2xl',\n          outlineColor: 'brand.base',\n          outlineStyle: isFocusVisible ? 'solid' : 'none',\n          outlineWidth: 'thick',\n          outlineOffset: 0.5,\n          cursor: 'pointer',\n          _hover: {\n            boxShadow: '0 6px 8px 2px rgba(0, 0, 0, .18)',\n          },\n        })}\n      >\n        <ImageContainer src={src} alt={alt} />\n      </button>\n    );\n\n  return <ImageContainer src={src} alt={alt} />;\n};\n"],"names":["ImageContainer","src","alt","_jsx","Box","css","NFTTile","props","onPress","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","mergeProps"],"mappings":"6IAgBA,MAAMA,EAAiB,CAAC,CAAE,IAAAC,EAAK,IAAAC,CAA0B,IAErDC,MAACC,EAAG,IAAA,CAAC,QAAQ,MAAM,SAAS,SAAQ,SAClCD,MAAK,MAAA,CAAA,IAAKF,EAAK,IAAKC,EAAK,UAAWG,EAAAA,IAAI,CAAE,UAAW,OAAS,CAAA,CAAK,CAAA,CAAA,CAAA,EAK5DC,EAAWC,GAAuB,CAC7C,KAAM,CAAE,IAAAN,EAAK,QAAAO,EAAS,IAAAN,CAAG,EAAKK,EAExBE,EAAMC,EAAO,OAAA,IAAI,EAEjBC,EAAcC,EAAAA,YAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEN,CAAE,YAAAK,CAAW,EAAKC,EAAAA,UAAU,CAAE,GAAGP,EAAO,QAASI,GAAeF,CAAG,EACnE,CAAE,eAAAM,EAAgB,WAAAC,GAAeC,EAAAA,aAAAA,EAEvC,OAAIT,EAEAL,EACM,IAAA,SAAA,CAAA,GAAAe,aAAWL,EAAaG,CAAU,EACtC,IAAKP,EACL,UAAWJ,EAAAA,IAAI,CACb,QAAS,MACT,aAAc,aACd,aAAcU,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,GACf,OAAQ,UACR,OAAQ,CACN,UAAW,kCACZ,CACF,CAAA,EAED,SAAAZ,EAAAA,IAACH,EAAc,CAAC,IAAKC,EAAK,IAAKC,CAAO,CAAA,CAAA,CAAA,EAIrCC,MAACH,EAAc,CAAC,IAAKC,EAAK,IAAKC,CAAG,CAAA,CAC3C"}
+{"version":3,"file":"nft-tile.js","sources":["../../../../src/components/list-items/nft-tile.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { css } from '@styled/css';\nimport { Box } from '@styled/jsx';\nimport { useCallback } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface NFTTileProps extends AriaButtonProps {\n  src: string;\n  onPress?: () => void;\n  alt: string;\n}\n\ninterface ImageContainerProps {\n  src: string;\n  alt: string;\n}\n\nconst ImageContainer = ({ src, alt }: ImageContainerProps) => {\n  return (\n    <Box rounded=\"2xl\" overflow=\"hidden\">\n      <img src={src} alt={alt} className={css({ objectFit: 'cover' })} />\n    </Box>\n  );\n};\n\nexport const NFTTile = (props: NFTTileProps) => {\n  const { src, onPress, alt } = props;\n\n  const handlePress = useCallback(() => {\n    onPress?.();\n  }, [onPress]);\n\n  if (onPress)\n    return (\n      <ButtonContainer\n        className={css({\n          _hover: {\n            boxShadow: '0 6px 8px 2px rgba(0, 0, 0, .18)',\n          },\n        })}\n        borderRadius=\"1rem\"\n        onPress={handlePress}\n        {...props}\n      >\n        <ImageContainer src={src} alt={alt} />\n      </ButtonContainer>\n    );\n\n  return <ImageContainer src={src} alt={alt} />;\n};\n"],"names":["ImageContainer","src","alt","_jsx","Box","css","NFTTile","props","onPress","handlePress","useCallback","ButtonContainer"],"mappings":"mwBAiBA,MAAMA,EAAiB,CAAC,CAAE,IAAAC,EAAK,IAAAC,CAA0B,IAErDC,EAAAA,IAACC,MAAG,CAAC,QAAQ,MAAM,SAAS,SAAQ,SAClCD,EAAK,IAAA,MAAA,CAAA,IAAKF,EAAK,IAAKC,EAAK,UAAWG,EAAAA,IAAI,CAAE,UAAW,OAAS,CAAA,CAAK,CAAA,CAAA,CAAA,EAK5DC,EAAWC,GAAuB,CAC7C,KAAM,CAAE,IAAAN,EAAK,QAAAO,EAAS,IAAAN,CAAG,EAAKK,EAExBE,EAAcC,EAAAA,YAAY,IAAK,CACnCF,IAAAA,CACF,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAIA,EAEAL,MAACQ,EAAAA,iBACC,UAAWN,EAAAA,IAAI,CACb,OAAQ,CACN,UAAW,kCACZ,EACF,EACD,aAAa,OACb,QAASI,EACL,GAAAF,EAEJ,SAAAJ,EAAAA,IAACH,EAAe,CAAA,IAAKC,EAAK,IAAKC,CAAG,CAAA,CAClB,CAAA,EAGfC,EAAAA,IAACH,EAAc,CAAC,IAAKC,EAAK,IAAKC,CAAG,CAAA,CAC3C"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, useCallback, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n  name: string;\n  fiatBalanceWithSymbol: string;\n  tokenBalanceWithSymbol: string;\n  logoUrl?: string;\n  onPress?: () => void;\n  tokenBalanceFirst?: boolean;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n  tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({\n  name,\n  fiatBalanceWithSymbol,\n  tokenBalanceWithSymbol,\n  tokenIcon,\n  logoUrl,\n  tokenBalanceFirst,\n}: ListContentProps) => {\n  return (\n    <HStack w=\"full\" justify=\"space-between\">\n      <HStack gap={4}>\n        {tokenIcon ? (\n          {\n            ...tokenIcon,\n            props: {\n              ...tokenIcon.props,\n              width: 40,\n              height: 40,\n            },\n          }\n        ) : logoUrl ? (\n          <img width={40} height={40} src={logoUrl} alt={`${name} logo`} />\n        ) : (\n          <IconGenericToken width={40} height={40} />\n        )}\n        <Text fontWeight=\"medium\" styles={{ textTransform: 'capitalize' }}>\n          {name}\n        </Text>\n      </HStack>\n      <VStack gap={0} alignItems=\"flex-end\">\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem' }}>\n          {tokenBalanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n        </Text>\n        <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem' }}>\n          {tokenBalanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n        </Text>\n      </VStack>\n    </HStack>\n  );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n  const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, logoUrl, onPress, tokenBalanceFirst } = props;\n\n  const ref = useRef(null);\n\n  const handlePress = useCallback(() => {\n    onPress?.();\n  }, [onPress]);\n\n  const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const tokenIcon = slots.get(TokenIcon);\n\n    if (onPress)\n      return (\n        <button\n          ref={ref}\n          {...mergeProps(buttonProps, focusProps)}\n          className={css({\n            w: 'full',\n            px: 4,\n            py: 2,\n            minH: 16,\n            bg: 'neutral.quaternary',\n            _dark: { bg: 'surface.tertiary' },\n            transition: 'background-color 0.1s',\n            _hover: { bg: 'neutral.secondary' },\n            rounded: 'lg',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 1,\n            cursor: 'pointer',\n          })}\n        >\n          <ListContent\n            name={name}\n            fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n            tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n            tokenIcon={tokenIcon}\n            logoUrl={logoUrl}\n            tokenBalanceFirst={tokenBalanceFirst}\n          />\n        </button>\n      );\n\n    return (\n      <ListContent\n        name={name}\n        fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n        tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n        tokenIcon={tokenIcon}\n        logoUrl={logoUrl}\n        tokenBalanceFirst={tokenBalanceFirst}\n      />\n    );\n  });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","tokenBalanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","mergeProps","css","TokenListItem"],"mappings":"iiBAiBA,MAAMA,EAAYC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAAAA,IAACC,EAAAA,OAAM,CAAA,SACJC,WAAS,IAAIJ,EAAUK,GACfC,EAAAA,aAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CACnB,KAAAC,EACA,sBAAAC,EACA,uBAAAC,EACA,UAAAC,EACA,QAAAC,EACA,kBAAAC,CAAiB,IAGfC,EAAAA,KAACC,EAAAA,OAAM,CAAC,EAAE,OAAO,QAAQ,0BACvBD,OAACC,EAAO,OAAA,CAAA,IAAK,YACVJ,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,EAAAA,IAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAO,CAAA,EAE7DN,EAAAA,IAACc,UAAiB,CAAA,MAAO,GAAI,OAAQ,EAAM,CAAA,EAE7Cd,EAAAA,IAACe,UAAK,CAAA,WAAW,SAAS,OAAQ,CAAE,cAAe,YAAY,EAC5D,SAAAT,CACI,CAAA,CAAA,CAAA,CAAA,EAETM,EAACI,KAAAA,EAAAA,OAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAhB,EAACe,IAAAA,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,QAAQ,EAC3C,SAAAJ,EAAoBH,EAAyBD,CAAqB,CAAA,EAErEP,EAAAA,IAACe,EAAAA,QAAI,CAAC,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,QAAQ,EACtE,SAAAJ,EAAoBJ,EAAwBC,CAAsB,CAAA,CAC9D,CACA,CAAA,CAAA,CAAA,CAAA,EAKTS,EAAqBlB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAQ,EAAS,kBAAAP,CAAmB,EAAGZ,EAE/FoB,EAAMC,EAAAA,OAAO,IAAI,EAEjBC,EAAcC,EAAAA,YAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEN,CAAE,YAAAK,CAAW,EAAKC,EAAAA,UAAU,CAAE,GAAGzB,EAAO,QAASsB,GAAeF,CAAG,EACnE,CAAE,eAAAM,EAAgB,WAAAC,GAAeC,EAAAA,eAEvC,OAAOC,EAAAA,WAAW7B,EAAM,SAAU8B,GAAQ,CACxC,MAAMpB,EAAYoB,EAAM,IAAIjC,CAAS,EAErC,OAAIsB,EAEAlB,EAAAA,IACE,SAAA,CAAA,IAAKmB,KACDW,EAAAA,WAAWP,EAAaG,CAAU,EACtC,UAAWK,EAAI,IAAA,CACb,EAAG,OACH,GAAI,EACJ,GAAI,EACJ,KAAM,GACN,GAAI,qBACJ,MAAO,CAAE,GAAI,kBAAoB,EACjC,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,aAAc,aACd,aAAcN,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,EACf,OAAQ,SACT,CAAA,EAED,SAAAzB,MAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,CACnB,CAAA,CAAA,CAAA,EAKNX,EAAAA,IAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,CAAiB,CAAA,CAG1C,CAAC,CACH,EAEaqB,EAAgB,OAAO,OAAOf,EAAmB,CAAE,UAAArB,CAAS,CAAE"}
+{"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, useCallback, useRef } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n  name: string;\n  fiatBalanceWithSymbol: string;\n  tokenBalanceWithSymbol: string;\n  logoUrl?: string;\n  onPress?: () => void;\n  tokenBalanceFirst?: boolean;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n  tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({\n  name,\n  fiatBalanceWithSymbol,\n  tokenBalanceWithSymbol,\n  tokenIcon,\n  logoUrl,\n  tokenBalanceFirst,\n}: ListContentProps) => {\n  return (\n    <HStack w=\"full\" justify=\"space-between\">\n      <HStack gap={4}>\n        {tokenIcon ? (\n          {\n            ...tokenIcon,\n            props: {\n              ...tokenIcon.props,\n              width: 40,\n              height: 40,\n            },\n          }\n        ) : logoUrl ? (\n          <img width={40} height={40} src={logoUrl} alt={`${name} logo`} />\n        ) : (\n          <IconGenericToken width={40} height={40} />\n        )}\n        <Text fontWeight=\"medium\" styles={{ textTransform: 'capitalize' }}>\n          {name}\n        </Text>\n      </HStack>\n      <VStack gap={0} alignItems=\"flex-end\">\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem' }}>\n          {tokenBalanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n        </Text>\n        <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem' }}>\n          {tokenBalanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n        </Text>\n      </VStack>\n    </HStack>\n  );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n  const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, logoUrl, onPress, tokenBalanceFirst } = props;\n\n  const ref = useRef(null);\n\n  const handlePress = useCallback(() => {\n    onPress?.();\n  }, [onPress]);\n\n  return createHost(props.children, slots => {\n    const tokenIcon = slots.get(TokenIcon);\n\n    if (onPress)\n      return (\n        <ButtonContainer\n          ref={ref}\n          className={css({\n            _dark: { bg: 'surface.tertiary' },\n            _hover: { bg: 'neutral.secondary' },\n            bg: 'neutral.quaternary',\n            px: 4,\n            py: 2,\n            minH: 16,\n          })}\n          borderRadius=\"0.5rem\"\n          expand\n          onPress={handlePress}\n        >\n          <ListContent\n            name={name}\n            fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n            tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n            tokenIcon={tokenIcon}\n            logoUrl={logoUrl}\n            tokenBalanceFirst={tokenBalanceFirst}\n          />\n        </ButtonContainer>\n      );\n\n    return (\n      <ListContent\n        name={name}\n        fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n        tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n        tokenIcon={tokenIcon}\n        logoUrl={logoUrl}\n        tokenBalanceFirst={tokenBalanceFirst}\n      />\n    );\n  });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","tokenBalanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"m1BAkBA,MAAMA,EAAYC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAAAA,IAACC,EAAAA,OAAM,CAAA,SACJC,EAAS,SAAA,IAAIJ,EAAUK,GACfC,eAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CACnB,KAAAC,EACA,sBAAAC,EACA,uBAAAC,EACA,UAAAC,EACA,QAAAC,EACA,kBAAAC,CAAiB,IAGfC,EAAAA,KAACC,EAAM,OAAA,CAAC,EAAE,OAAO,QAAQ,0BACvBD,EAACC,KAAAA,EAAAA,OAAO,CAAA,IAAK,YACVJ,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,EAAAA,IAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAO,CAAA,EAE7DN,EAACc,IAAAA,UAAiB,CAAA,MAAO,GAAI,OAAQ,EAAM,CAAA,EAE7Cd,EAAAA,IAACe,UAAK,CAAA,WAAW,SAAS,OAAQ,CAAE,cAAe,YAAY,EAC5D,SAAAT,CACI,CAAA,CAAA,CAAA,CAAA,EAETM,EAAAA,KAACI,EAAAA,OAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAhB,EAAAA,IAACe,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,QAAQ,EAC3C,SAAAJ,EAAoBH,EAAyBD,CAAqB,CAAA,EAErEP,EAACe,IAAAA,EAAAA,QAAI,CAAC,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,QAAQ,EACtE,SAAAJ,EAAoBJ,EAAwBC,CAAsB,CAAA,CAC9D,CACA,CAAA,CAAA,CAAA,CAAA,EAKTS,EAAqBlB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAQ,EAAS,kBAAAP,CAAmB,EAAGZ,EAE/FoB,EAAMC,EAAAA,OAAO,IAAI,EAEjBC,EAAcC,EAAAA,YAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAOK,EAAAA,WAAWxB,EAAM,SAAUyB,GAAQ,CACxC,MAAMf,EAAYe,EAAM,IAAI5B,CAAS,EAErC,OAAIsB,EAEAlB,MAACyB,EACC,gBAAA,CAAA,IAAKN,EACL,UAAWO,EAAAA,IAAI,CACb,MAAO,CAAE,GAAI,kBAAoB,EACjC,OAAQ,CAAE,GAAI,mBAAqB,EACnC,GAAI,qBACJ,GAAI,EACJ,GAAI,EACJ,KAAM,EACP,CAAA,EACD,aAAa,SACb,UACA,QAASL,EAAW,SAEpBrB,EAAAA,IAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,CACnB,CAAA,CAAA,CAAA,EAKNX,EAAAA,IAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,CAAiB,CAAA,CAG1C,CAAC,CACH,EAEagB,EAAgB,OAAO,OAAOV,EAAmB,CAAE,UAAArB,CAAS,CAAE"}

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

@@ -1,2 +1,2 @@
-"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;
+"use strict";var e=require("react/jsx-runtime"),S=require("../containers/button.js");require("../containers/card.js");var H=require("@styled/css"),t=require("@styled/jsx"),r=require("@styled/tokens"),R=require("../icons/ico-arrow-down.js"),W=require("../icons/ico-arrow-up.js"),F=require("../icons/ico-lightning-fill.js"),z=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"),a=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js"),require("../feedback/callout.js"),require("../feedback/progress-bar.js");var h=require("../feedback/skeleton.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var k=require("create-slots");const A={send:{title:"Send",primaryTextColor:r.token("colors.text.primary"),secondaryTextColor:r.token("colors.text.secondary"),icon:W.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:R.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:F.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:z.default,iconColor:r.token("colors.warning.base"),skeletonWidth:"89px"}},q=k.createSlot(({children:n,...i})=>e.jsx(t.Center,{children:a.Children.map(n,s=>a.cloneElement(s,i))})),L=n=>{const{variant:i,primaryText:s,secondaryText:c,children:y,onPress:u,loading:d,showTitle:g=!0}=n,{title:C,primaryTextColor:x,secondaryTextColor:v,icon:w,iconColor:j,skeletonWidth:p}=A[i],m=i==="send"||i==="networkFee",T=a.useRef(null),f=a.useCallback(()=>{u?.()},[u]);return k.createHost(y,b=>{const o=b.get(q);return e.jsxs(t.HStack,{w:"full",justify:"space-between",children:[e.jsxs(t.HStack,{gap:2,children:[e.jsx(w,{width:16,height:16,color:j}),g&&e.jsx(l.default,{size:"sm",fontWeight:"medium",children:C})]}),e.jsxs(t.HStack,{gap:4,children:[c&&e.jsx(l.default,{styles:{color:v},children:c}),m?e.jsx(S.ButtonContainer,{ref:T,className:H.css({px:4,py:2.5,bg:"surface.secondary"}),borderRadius:"0.75rem",onPress:f,...n,children:e.jsxs(t.HStack,{gap:3,children:[d?e.jsx(h.Skeleton,{width:p}):e.jsx(l.default,{styles:{color:x},children:s}),o&&{...o,props:{...o.props,width:32,height:32}}]})}):e.jsxs(t.HStack,{gap:3,children:[d?e.jsx(h.Skeleton,{width:p}):e.jsx(l.default,{styles:{color:x},children:s}),o&&{...o,props:{...o.props,width:32,height:32}}]})]})]})})},N=Object.assign(L,{TokenIcon:q});exports.TransactionRow=N;
 //# 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 { ButtonContainer } from '@components/containers';\nimport { Skeleton } from '@components/feedback';\nimport { IcoArrowDown, IcoArrowUp, IcoLightningFill, IcoLockUnlockedFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, ReactNode, useCallback, useRef } from 'react';\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  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            <ButtonContainer\n              ref={ref}\n              className={css({\n                px: 4,\n                py: 2.5,\n                bg: 'surface.secondary',\n              })}\n              borderRadius=\"0.75rem\"\n              onPress={handlePress}\n              {...props}\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            </ButtonContainer>\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","createHost","slots","tokenIcon","_jsxs","HStack","Text","ButtonContainer","css","Skeleton","TransactionRow"],"mappings":"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"}

package/dist/cjs/components/sections/wallet-actions.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),h=require("../primitives/button.js");require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var x=require("../primitives/text.js"),a=require("@styled/css"),s=require("@styled/jsx"),n=require("create-slots/list"),u=require("react"),c=require("react-aria");const d=n.createSlot(({actionBox:o,children:i,label:l,onPress:r})=>{if(o){const t=u.useRef(null),{isFocusVisible:j,focusProps:q}=c.useFocusRing(),{buttonProps:p}=c.useButton({onPress:r},t);return e.jsx(s.Center,{h:"76px",maxW:"115px",w:"full",children:e.jsx("button",{ref:t,className:a.cx(a.css({_active:{transform:"scale(0.95)"},_hover:{bgColor:"neutral.secondary"},bgColor:"neutral.tertiary",borderRadius:"0.75rem",cursor:"pointer",outline:"none",transition:"all 0.1s ease",h:"full",w:"full"}),j&&a.css({outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5})),...c.mergeProps(p,q),children:e.jsxs(s.VStack,{gap:2,children:[u.cloneElement(u.Children.only(i),{height:20,width:20}),e.jsx(x.default,{size:"sm",styles:{fontWeight:500},children:l})]})})})}return e.jsxs(s.VStack,{gap:1,minW:20,children:[e.jsx(h.default,{variant:"neutral",size:"sm",onPress:r,"aria-label":"Buy",children:e.jsx(h.default.LeadingIcon,{children:i})}),e.jsx(x.default,{size:"sm",styles:{fontWeight:500},children:l})]})}),f=({actionBox:o,children:i})=>e.jsx(s.Box,{w:"full",children:n.createHost(i,l=>e.jsx(s.HStack,{w:"full",justifyContent:"space-around",px:10,children:l.map(r=>{if(n.isSlot(r,d)){const t=n.getSlotProps(r);return e.jsx(d,{actionBox:o,...t},t.label)}})}))});f.Action=d,exports.WalletActions=f;
+"use strict";var e=require("react/jsx-runtime"),h=require("../containers/button.js");require("../containers/card.js");var j=require("@styled/css"),i=require("@styled/jsx");require("@styled/tokens");var u=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 o=require("../primitives/text.js"),c=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");var n=require("create-slots/list");const l=n.createSlot(({actionBox:a,children:t,label:s,onPress:r})=>a?e.jsx(i.Center,{h:"76px",maxW:"115px",w:"full",children:e.jsx(h.ButtonContainer,{className:j.css({_hover:{bgColor:"neutral.secondary"},bgColor:"neutral.tertiary",h:"100%"}),borderRadius:"0.75rem",expand:!0,onPress:r,children:e.jsxs(i.VStack,{gap:2,children:[c.cloneElement(c.Children.only(t),{height:20,width:20}),e.jsx(o.default,{size:"sm",styles:{fontWeight:500},children:s})]})})}):e.jsxs(i.VStack,{gap:1,minW:20,children:[e.jsx(u.default,{variant:"neutral",size:"sm",onPress:r,"aria-label":"Buy",children:e.jsx(u.default.LeadingIcon,{children:t})}),e.jsx(o.default,{size:"sm",styles:{fontWeight:500},children:s})]})),d=({actionBox:a,children:t})=>e.jsx(i.Box,{w:"full",children:n.createHost(t,s=>e.jsx(i.HStack,{w:"full",justifyContent:"space-around",px:10,children:s.map(r=>{if(n.isSlot(r,l)){const{key:q,...x}=n.getSlotProps(r);return e.jsx(l,{actionBox:a,...x},q)}})}))});d.Action=l,exports.WalletActions=d;
 //# sourceMappingURL=wallet-actions.js.map