@magiclabs/ui-components 1.36.1 → 1.36.3

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"),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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),m=require("../containers/button.js");require("../containers/card.js");var o=require("@styled/css"),t=require("@styled/jsx"),g=require("@styled/tokens"),v=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"),s=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 q=c.createSlot(({children:r,...i})=>e.jsx(t.Center,{children:s.Children.map(r,a=>s.cloneElement(a,i))})),p=c.createSlot(({children:r,...i})=>e.jsx(t.Center,{children:s.Children.map(r,a=>s.cloneElement(a,i))})),x=s.forwardRef((r,i)=>{const{primaryLabel:a,secondaryLabel:u,isExternalLink:j}=r;return c.createHost(r.children,d=>{const n=d.get(q),l=d.get(p);return e.jsx(m.ButtonContainer,{ref:i,className:o.css({p:4,bg:"neutral.quaternary",_hover:{bg:"neutral.secondary"}}),borderRadius:"0.5rem",expand:!0,...r,children:e.jsxs(t.HStack,{justify:"space-between",w:"full",children:[e.jsxs(t.HStack,{children:[n&&{...n,props:{...n.props,className:n.props.color?void 0:o.css({color:"brand.base"}),height:24}},e.jsxs(t.VStack,{gap:0,alignItems:"start",children:[e.jsxs(t.HStack,{children:[e.jsx(h.default,{fontWeight:"medium",children:a}),j&&e.jsx(v.default,{width:14,height:14,color:g.token("colors.neutral.primary")})]}),u&&e.jsx(h.default,{size:"sm",fontColor:"text.tertiary",children:u})]})]}),e.jsx(t.HStack,{children:l&&{...l,props:{...l.props,className:l.props.color?void 0:o.css({color:"neutral.primary"}),width:16,height:16}}})]})})})});x.displayName="NavigationButton";const b=Object.assign(x,{LeadingIcon:q,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 { 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"}
+{"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, VStack } 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            <VStack gap={0} alignItems=\"start\">\n              <HStack>\n                <Text fontWeight=\"medium\">{primaryLabel}</Text>\n                {isExternalLink && <IcoExternalLink width={14} height={14} color={token('colors.neutral.primary')} />}\n              </HStack>\n              {secondaryLabel && (\n                <Text size=\"sm\" fontColor=\"text.tertiary\">\n                  {secondaryLabel}\n                </Text>\n              )}\n            </VStack>\n          </HStack>\n          <HStack>\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","VStack","Text","IcoExternalLink","token","NavigationButton"],"mappings":"u4BAiBA,MAAMA,EAAcC,EAAW,WAAA,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,MAACC,EAAAA,OAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAAA,aAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAeR,EAAW,WAAA,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,MAACC,EAAAA,OAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAaD,aAAAA,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKO,EAAuBC,EAAAA,WAAqD,CAACR,EAAOS,IAAgB,CACxG,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,CAAc,EAAKZ,EAEzD,OAAOa,aAAWb,EAAM,SAAUc,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAIjB,CAAW,EACnCmB,EAAeF,EAAM,IAAIR,CAAY,EAE3C,OACEL,MAACgB,EAAAA,gBACC,CAAA,IAAKR,EACL,UAAWS,EAAAA,IAAI,CACb,EAAG,EACH,GAAI,qBACJ,OAAQ,CAAE,GAAI,mBAAqB,EACpC,EACD,aAAa,SACb,OACI,GAAA,GAAAlB,EAEJ,SAAAmB,EAAAA,KAACC,SAAM,CAAC,QAAQ,gBAAgB,EAAE,iBAChCD,EAACC,KAAAA,EAAAA,OACE,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,CACF,EACDC,EAACE,KAAAA,EAAAA,OAAO,CAAA,IAAK,EAAG,WAAW,QAAO,SAAA,CAChCF,OAACC,oBACCnB,MAACqB,EAAAA,QAAK,CAAA,WAAW,SAAU,SAAAZ,IAC1BE,GAAkBX,MAACsB,EAAgB,QAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOC,EAAM,MAAA,wBAAwB,CAAC,CAAA,CAAI,CAC9F,CAAA,EACRb,GACCV,EAACqB,IAAAA,EAAAA,QAAK,CAAA,KAAK,KAAK,UAAU,yBACvBX,CAAc,CAAA,CAElB,CAAA,CAAA,CACM,IAEXV,MAACmB,EAAM,OAAA,CAAA,SACJJ,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAA4C,OAApCE,EAAAA,IAAI,CAAE,MAAO,kBAAmB,EACvE,MAAO,GACP,OAAQ,EACT,EAEI,CAAA,CAAA,CAAA,CAAA,CAEK,CAAA,CAEtB,CAAC,CACH,CAAC,EAEDX,EAAqB,YAAc,mBAEnC,MAAMkB,EAAmB,OAAO,OAAOlB,EAAsB,CAAE,YAAAV,EAAa,aAAAS,CAAY,CAAE"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),f=require("../containers/button.js");require("../containers/card.js");var y=require("@styled/css"),c=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 d=require("../primitives/text.js"),u=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var j=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 g=m.createSlot(({children:t,...r})=>e.jsx(c.Center,{children:u.Children.map(t,i=>u.cloneElement(i,r))})),q=({name:t,fiatBalanceWithSymbol:r,tokenBalanceWithSymbol:i,tokenIcon:n,logoUrl:l,tokenBalanceFirst:s,disabled:o=!1})=>{const a=s||!r;return e.jsxs(c.HStack,{w:"full",justify:"space-between",opacity:o?"0.5":"1",children:[e.jsxs(c.HStack,{gap:4,children:[n?{...n,props:{...n.props,width:40,height:40}}:l?e.jsx("img",{width:40,height:40,src:l,alt:`${t} logo`}):e.jsx(j.default,{width:40,height:40}),e.jsx(d.default,{fontWeight:"medium",styles:{textTransform:"capitalize"},children:t})]}),e.jsxs(c.VStack,{gap:0,alignItems:"flex-end",children:[e.jsx(d.default,{size:"sm",styles:{lineHeight:"1.5rem",textAlign:"right"},children:a?i:r}),e.jsx(d.default,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem",textAlign:"right"},children:a?r:i})]})]})},p=t=>{const{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,logoUrl:l,onPress:s,tokenBalanceFirst:o,disabled:a}=t,x=u.useRef(null),b=u.useCallback(()=>{s?.()},[s]);return m.createHost(t.children,k=>{const h=k.get(g);return s?e.jsx(f.ButtonContainer,{ref:x,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:a?void 0:b,disabled:a,children:e.jsx(q,{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:h,logoUrl:l,tokenBalanceFirst:o,disabled:a})}):e.jsx(q,{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:h,logoUrl:l,tokenBalanceFirst:o,disabled:a})})},B=Object.assign(p,{TokenIcon:g});exports.TokenListItem=B;
+"use strict";var e=require("react/jsx-runtime"),f=require("../containers/button.js");require("../containers/card.js");var p=require("@styled/css"),u=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 h=require("../primitives/text.js"),d=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var S=require("../logos/icon-generic-token.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 g=require("../feedback/skeleton.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var q=require("create-slots");const x=q.createSlot(({children:t,...r})=>e.jsx(u.Center,{children:d.Children.map(t,i=>d.cloneElement(i,r))})),k=({name:t,fiatBalanceWithSymbol:r,tokenBalanceWithSymbol:i,tokenIcon:n,logoUrl:s,tokenBalanceFirst:l,disabled:c=!1,isLoading:a=!1})=>{const o=l||!r;return e.jsxs(u.HStack,{w:"full",justify:"space-between",opacity:c?"0.5":"1",children:[e.jsxs(u.HStack,{gap:4,children:[n?{...n,props:{...n.props,width:40,height:40}}:s?e.jsx("img",{width:40,height:40,src:s,alt:`${t} logo`}):e.jsx(S.default,{width:40,height:40}),e.jsx(h.default,{fontWeight:"medium",styles:{textTransform:"capitalize"},children:t})]}),e.jsx(u.VStack,{gap:0,alignItems:"flex-end",children:a?e.jsxs(e.Fragment,{children:[e.jsx(g.Skeleton,{height:"1rem",width:"6rem"}),i&&r&&e.jsx("div",{style:{marginTop:"4px"},children:e.jsx(g.Skeleton,{height:"1rem",width:"4rem"})})]}):e.jsxs(e.Fragment,{children:[e.jsx(h.default,{size:"sm",styles:{lineHeight:"1.5rem",textAlign:"right"},children:o?i:r}),e.jsx(h.default,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem",textAlign:"right"},children:o?r:i})]})})]})},v=t=>{const{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,logoUrl:s,onPress:l,tokenBalanceFirst:c,disabled:a,isLoading:o}=t,b=d.useRef(null),j=d.useCallback(()=>{l?.()},[l]);return q.createHost(t.children,y=>{const m=y.get(x);return l?e.jsx(f.ButtonContainer,{ref:b,className:p.css({_dark:{bg:"surface.tertiary"},_hover:{bg:"neutral.secondary"},bg:"neutral.quaternary",px:4,py:2,minH:16}),borderRadius:"0.5rem",expand:!0,onPress:a?void 0:j,disabled:a,children:e.jsx(k,{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:m,logoUrl:s,tokenBalanceFirst:c,disabled:a,isLoading:o})}):e.jsx(k,{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:m,logoUrl:s,tokenBalanceFirst:c,disabled:a,isLoading:o})})},B=Object.assign(v,{TokenIcon:x});exports.TokenListItem=B;
 //# 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 { 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, FC, PropsWithChildren, 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  disabled?: 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  disabled = false,\n}: ListContentProps) => {\n  const balanceFirst = tokenBalanceFirst || !fiatBalanceWithSymbol;\n  return (\n    <HStack w=\"full\" justify=\"space-between\" opacity={disabled ? '0.5' : '1'}>\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', textAlign: 'right' }}>\n          {balanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n        </Text>\n        <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n          {balanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n        </Text>\n      </VStack>\n    </HStack>\n  );\n};\n\nconst TokenListItemBase: FC<PropsWithChildren<TokenListItemProps>> = props => {\n  const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, logoUrl, onPress, tokenBalanceFirst, disabled } = 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={disabled ? undefined : handlePress}\n          disabled={disabled}\n        >\n          <ListContent\n            name={name}\n            fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n            tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n            tokenIcon={tokenIcon}\n            logoUrl={logoUrl}\n            tokenBalanceFirst={tokenBalanceFirst}\n            disabled={disabled}\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        disabled={disabled}\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","disabled","balanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"m1BAmBA,MAAMA,EAAYC,EAAW,WAAA,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,EACA,SAAAC,EAAW,EACM,IAAI,CACrB,MAAMC,EAAeF,GAAqB,CAACJ,EAC3C,OACEO,EAACC,KAAAA,EAAAA,OAAM,CAAC,EAAE,OAAO,QAAQ,gBAAgB,QAASH,EAAW,MAAQ,IAAG,SAAA,CACtEE,EAAAA,KAACC,EAAAA,OAAM,CAAC,IAAK,EACV,SAAA,CAAAN,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,EAAAA,IAAA,MAAA,CAAK,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAO,CAAA,EAE7DN,MAACgB,EAAiB,QAAA,CAAA,MAAO,GAAI,OAAQ,EAAE,CAAA,EAEzChB,MAACiB,UAAK,CAAA,WAAW,SAAS,OAAQ,CAAE,cAAe,cAChD,SAAAX,CACI,CAAA,CAAA,CAAA,CAAA,EAETQ,EAAAA,KAACI,SAAM,CAAC,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAlB,EAAAA,IAACiB,EAAAA,QAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,UAAW,OAAS,EAAA,SACjEJ,EAAeL,EAAyBD,IAE3CP,EAAAA,IAACiB,EAAAA,QAAI,CAAC,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,SAAU,UAAW,OAAS,EAAA,SAC5FJ,EAAeN,EAAwBC,CAAsB,CAAA,CACzD,CACA,CAAA,CAAA,CAAA,CAAA,CAGf,EAEMW,EAA+DpB,GAAQ,CAC3E,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAU,EAAS,kBAAAT,EAAmB,SAAAC,CAAU,EAAGb,EAEzGsB,EAAMC,EAAAA,OAAO,IAAI,EAEjBC,EAAcC,EAAY,YAAA,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAOK,EAAAA,WAAW1B,EAAM,SAAU2B,GAAQ,CACxC,MAAMjB,EAAYiB,EAAM,IAAI9B,CAAS,EAErC,OAAIwB,EAEApB,EAAAA,IAAC2B,kBACC,CAAA,IAAKN,EACL,UAAWO,MAAI,CACb,MAAO,CAAE,GAAI,kBAAoB,EACjC,OAAQ,CAAE,GAAI,mBAAqB,EACnC,GAAI,qBACJ,GAAI,EACJ,GAAI,EACJ,KAAM,GACP,EACD,aAAa,SACb,OAAM,GACN,QAAShB,EAAW,OAAYW,EAChC,SAAUX,EAEV,SAAAZ,MAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,CAAQ,CAAA,CAEJ,CAAA,EAIpBZ,EAACK,IAAAA,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,CAAQ,CAAA,CAGxB,CAAC,CACH,EAEaiB,EAAgB,OAAO,OAAOV,EAAmB,CAAE,UAAAvB,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 { Skeleton } from '@components/feedback';\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, FC, PropsWithChildren, 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  disabled?: boolean;\n  isLoading?: 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  disabled = false,\n  isLoading = false,\n}: ListContentProps) => {\n  const balanceFirst = tokenBalanceFirst || !fiatBalanceWithSymbol;\n  return (\n    <HStack w=\"full\" justify=\"space-between\" opacity={disabled ? '0.5' : '1'}>\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        {isLoading ? (\n          <>\n            <Skeleton height={'1rem'} width={'6rem'} />\n            {tokenBalanceWithSymbol && fiatBalanceWithSymbol && (\n              <div style={{ marginTop: '4px' }}>\n                <Skeleton height={'1rem'} width={'4rem'} />\n              </div>\n            )}\n          </>\n        ) : (\n          <>\n            <Text size=\"sm\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n              {balanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n            </Text>\n            <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n              {balanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n            </Text>\n          </>\n        )}\n      </VStack>\n    </HStack>\n  );\n};\n\nconst TokenListItemBase: FC<PropsWithChildren<TokenListItemProps>> = props => {\n  const {\n    name,\n    fiatBalanceWithSymbol,\n    tokenBalanceWithSymbol,\n    logoUrl,\n    onPress,\n    tokenBalanceFirst,\n    disabled,\n    isLoading,\n  } = 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={disabled ? undefined : handlePress}\n          disabled={disabled}\n        >\n          <ListContent\n            name={name}\n            fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n            tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n            tokenIcon={tokenIcon}\n            logoUrl={logoUrl}\n            tokenBalanceFirst={tokenBalanceFirst}\n            disabled={disabled}\n            isLoading={isLoading}\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        disabled={disabled}\n        isLoading={isLoading}\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","disabled","isLoading","balanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","_Fragment","Skeleton","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"+kCAqBA,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,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,EACK,IAAI,CACrB,MAAMC,EAAeH,GAAqB,CAACJ,EAC3C,OACEQ,OAACC,SAAM,CAAC,EAAE,OAAO,QAAQ,gBAAgB,QAASJ,EAAW,MAAQ,IAAG,SAAA,CACtEG,EAAAA,KAACC,EAAAA,OAAM,CAAC,IAAK,EACV,SAAA,CAAAP,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,GAEDC,EACFV,EAAAA,IAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAW,CAAA,EAEjEN,EAAAA,IAACiB,EAAAA,SAAiB,MAAO,GAAI,OAAQ,EAAE,CAAA,EAEzCjB,EAAAA,IAACkB,EAAAA,SAAK,WAAW,SAAS,OAAQ,CAAE,cAAe,YAAY,WAC5DZ,CAAI,CAAA,CACA,IAETN,EAACmB,IAAAA,SAAO,CAAA,IAAK,EAAG,WAAW,WAAU,SAClCN,EACCE,OAAAK,EAAAA,SAAA,CAAA,SAAA,CACEpB,EAAAA,IAACqB,WAAQ,CAAC,OAAQ,OAAQ,MAAO,MAAU,CAAA,EAC1Cb,GAA0BD,GACzBP,EAAAA,IAAK,MAAA,CAAA,MAAO,CAAE,UAAW,KAAK,WAC5BA,EAAAA,IAACqB,EAAAA,UAAS,OAAQ,OAAQ,MAAO,MAAM,CAAA,CACnC,CAAA,CACP,CACA,CAAA,EAEHN,EAAAA,KACEK,EAAAA,SAAA,CAAA,SAAA,CAAApB,MAACkB,EAAAA,QAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,UAAW,OAAO,EAC/D,SAAAJ,EAAeN,EAAyBD,CAAqB,CAAA,EAEhEP,MAACkB,EAAAA,SAAK,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,SAAU,UAAW,SACnF,SAAAJ,EAAeP,EAAwBC,CAAsB,CAAA,CACzD,GAEV,CAAA,CACM,CACF,CAAA,CAEb,EAEMc,EAA+DvB,GAAQ,CAC3E,KAAM,CACJ,KAAAO,EACA,sBAAAC,EACA,uBAAAC,EACA,QAAAE,EACA,QAAAa,EACA,kBAAAZ,EACA,SAAAC,EACA,UAAAC,CACD,EAAGd,EAEEyB,EAAMC,EAAAA,OAAO,IAAI,EAEjBC,EAAcC,cAAY,IAAK,CACnCJ,KACF,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAOK,EAAAA,WAAW7B,EAAM,SAAU8B,GAAQ,CACxC,MAAMpB,EAAYoB,EAAM,IAAIjC,CAAS,EAErC,OAAI2B,EAEAvB,MAAC8B,kBACC,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,OACA,GAAA,QAASnB,EAAW,OAAYc,EAChC,SAAUd,EAEV,SAAAZ,EAAAA,IAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,EACV,UAAWC,CAAS,CAAA,CAEN,CAAA,EAIpBb,EAAAA,IAACK,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,EACV,UAAWC,CAAS,CAAA,CAG1B,CAAC,CACH,EAEamB,EAAgB,OAAO,OAAOV,EAAmB,CAAE,UAAA1B,CAAS,CAAE"}

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

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as m}from"react/jsx-runtime";import{ButtonContainer as w}from"../containers/button.js";import"../containers/card.js";import{css as p}from"@styled/css";import{Center as c,HStack as a}from"@styled/jsx";import{token as L}from"@styled/tokens";import N from"../icons/ico-external-link.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import d from"../primitives/text.js";import{Children as h,cloneElement as f,forwardRef as j}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";import{createSlot as u,createHost as v}from"create-slots";const g=u(({children:r,...t})=>o(c,{children:h.map(r,e=>f(e,t))})),b=u(({children:r,...t})=>o(c,{children:h.map(r,e=>f(e,t))})),y=j((r,t)=>{const{primaryLabel:e,secondaryLabel:l,isExternalLink:x}=r;return v(r.children,s=>{const i=s.get(g),n=s.get(b);return o(w,{ref:t,className:p({p:4,bg:"neutral.quaternary",_hover:{bg:"neutral.secondary"}}),borderRadius:"0.5rem",expand:!0,...r,children:m(a,{justify:"space-between",w:"full",children:[m(a,{children:[i&&{...i,props:{...i.props,className:i.props.color?void 0:p({color:"brand.base"}),height:24}},o(d,{fontWeight:"medium",children:e}),x&&o(N,{width:14,height:14,color:L("colors.neutral.primary")})]}),m(a,{children:[l&&o(d,{size:"sm",fontColor:"text.tertiary",children:l}),n&&{...n,props:{...n.props,className:n.props.color?void 0:p({color:"neutral.primary"}),width:16,height:16}}]})]})})})});y.displayName="NavigationButton";const C=Object.assign(y,{LeadingIcon:g,TrailingIcon:b});export{C as default};
+import{jsx as o,jsxs as m}from"react/jsx-runtime";import{ButtonContainer as w}from"../containers/button.js";import"../containers/card.js";import{css as a}from"@styled/css";import{Center as c,HStack as p,VStack as L}from"@styled/jsx";import{token as N}from"@styled/tokens";import j from"../icons/ico-external-link.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import d from"../primitives/text.js";import{Children as h,cloneElement as f,forwardRef as k}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";import{createSlot as g,createHost as v}from"create-slots";const u=g(({children:r,...t})=>o(c,{children:h.map(r,e=>f(e,t))})),b=g(({children:r,...t})=>o(c,{children:h.map(r,e=>f(e,t))})),y=k((r,t)=>{const{primaryLabel:e,secondaryLabel:l,isExternalLink:x}=r;return v(r.children,s=>{const i=s.get(u),n=s.get(b);return o(w,{ref:t,className:a({p:4,bg:"neutral.quaternary",_hover:{bg:"neutral.secondary"}}),borderRadius:"0.5rem",expand:!0,...r,children:m(p,{justify:"space-between",w:"full",children:[m(p,{children:[i&&{...i,props:{...i.props,className:i.props.color?void 0:a({color:"brand.base"}),height:24}},m(L,{gap:0,alignItems:"start",children:[m(p,{children:[o(d,{fontWeight:"medium",children:e}),x&&o(j,{width:14,height:14,color:N("colors.neutral.primary")})]}),l&&o(d,{size:"sm",fontColor:"text.tertiary",children:l})]})]}),o(p,{children:n&&{...n,props:{...n.props,className:n.props.color?void 0:a({color:"neutral.primary"}),width:16,height:16}}})]})})})});y.displayName="NavigationButton";const C=Object.assign(y,{LeadingIcon:u,TrailingIcon:b});export{C as default};
 //# sourceMappingURL=navigation-button.js.map

package/dist/es/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 { 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":"86BAiBA,MAAMA,EAAcC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAeR,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKO,EAAuBC,EAAqD,CAACR,EAAOS,IAAgB,CACxG,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,CAAc,EAAKZ,EAEzD,OAAOa,EAAWb,EAAM,SAAUc,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAIjB,CAAW,EACnCmB,EAAeF,EAAM,IAAIR,CAAY,EAE3C,OACEL,EAACgB,EACC,CAAA,IAAKR,EACL,UAAWS,EAAI,CACb,EAAG,EACH,GAAI,qBACJ,OAAQ,CAAE,GAAI,mBAAqB,EACpC,EACD,aAAa,SACb,OACI,GAAA,GAAAlB,EAEJ,SAAAmB,EAACC,EAAM,CAAC,QAAQ,gBAAgB,EAAE,iBAChCD,EAACC,EACE,CAAA,SAAA,CAAAL,GAAe,CACd,GAAGA,EACH,MAAO,CACL,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuC,OAA/BG,EAAI,CAAE,MAAO,aAAc,EACjE,OAAQ,EACT,GAEHjB,EAACoB,EAAI,CAAC,WAAW,SAAU,SAAAX,CAAoB,CAAA,EAC9CE,GAAkBX,EAACqB,EAAe,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOC,EAAM,wBAAwB,CAAC,CAAA,CAAI,CAC9F,CAAA,EACTJ,EAACC,aACET,GACCV,EAACoB,EAAI,CAAC,KAAK,KAAK,UAAU,gBACvB,SAAAV,CACI,CAAA,EAERK,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAA4C,OAApCE,EAAI,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"}
+{"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, VStack } 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            <VStack gap={0} alignItems=\"start\">\n              <HStack>\n                <Text fontWeight=\"medium\">{primaryLabel}</Text>\n                {isExternalLink && <IcoExternalLink width={14} height={14} color={token('colors.neutral.primary')} />}\n              </HStack>\n              {secondaryLabel && (\n                <Text size=\"sm\" fontColor=\"text.tertiary\">\n                  {secondaryLabel}\n                </Text>\n              )}\n            </VStack>\n          </HStack>\n          <HStack>\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","VStack","Text","IcoExternalLink","token","NavigationButton"],"mappings":"07BAiBA,MAAMA,EAAcC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAeR,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKO,EAAuBC,EAAqD,CAACR,EAAOS,IAAgB,CACxG,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,CAAc,EAAKZ,EAEzD,OAAOa,EAAWb,EAAM,SAAUc,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAIjB,CAAW,EACnCmB,EAAeF,EAAM,IAAIR,CAAY,EAE3C,OACEL,EAACgB,EACC,CAAA,IAAKR,EACL,UAAWS,EAAI,CACb,EAAG,EACH,GAAI,qBACJ,OAAQ,CAAE,GAAI,mBAAqB,EACpC,EACD,aAAa,SACb,OACI,GAAA,GAAAlB,EAEJ,SAAAmB,EAACC,EAAM,CAAC,QAAQ,gBAAgB,EAAE,iBAChCD,EAACC,EACE,CAAA,SAAA,CAAAL,GAAe,CACd,GAAGA,EACH,MAAO,CACL,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuC,OAA/BG,EAAI,CAAE,MAAO,aAAc,EACjE,OAAQ,EACT,CACF,EACDC,EAACE,EAAO,CAAA,IAAK,EAAG,WAAW,QAAO,SAAA,CAChCF,EAACC,aACCnB,EAACqB,EAAK,CAAA,WAAW,SAAU,SAAAZ,IAC1BE,GAAkBX,EAACsB,EAAgB,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOC,EAAM,wBAAwB,CAAC,CAAA,CAAI,CAC9F,CAAA,EACRb,GACCV,EAACqB,EAAK,CAAA,KAAK,KAAK,UAAU,yBACvBX,CAAc,CAAA,CAElB,CAAA,CAAA,CACM,IAEXV,EAACmB,EAAM,CAAA,SACJJ,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAA4C,OAApCE,EAAI,CAAE,MAAO,kBAAmB,EACvE,MAAO,GACP,OAAQ,EACT,EAEI,CAAA,CAAA,CAAA,CAAA,CAEK,CAAA,CAEtB,CAAC,CACH,CAAC,EAEDX,EAAqB,YAAc,mBAEnC,MAAMkB,EAAmB,OAAO,OAAOlB,EAAsB,CAAE,YAAAV,EAAa,aAAAS,CAAY,CAAE"}

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

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as s}from"react/jsx-runtime";import{ButtonContainer as k}from"../containers/button.js";import"../containers/card.js";import{css as u}from"@styled/css";import{Center as B,HStack as d,VStack as S}from"@styled/jsx";import"@styled/tokens";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import c from"../primitives/text.js";import{Children as x,cloneElement as W,useRef as I,useCallback as w}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import C from"../logos/icon-generic-token.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";import{createSlot as F,createHost as H}from"create-slots";const h=F(({children:o,...e})=>t(B,{children:x.map(o,i=>W(i,e))})),g=({name:o,fiatBalanceWithSymbol:e,tokenBalanceWithSymbol:i,tokenIcon:n,logoUrl:l,tokenBalanceFirst:a,disabled:m=!1})=>{const r=a||!e;return s(d,{w:"full",justify:"space-between",opacity:m?"0.5":"1",children:[s(d,{gap:4,children:[n?{...n,props:{...n.props,width:40,height:40}}:l?t("img",{width:40,height:40,src:l,alt:`${o} logo`}):t(C,{width:40,height:40}),t(c,{fontWeight:"medium",styles:{textTransform:"capitalize"},children:o})]}),s(S,{gap:0,alignItems:"flex-end",children:[t(c,{size:"sm",styles:{lineHeight:"1.5rem",textAlign:"right"},children:r?i:e}),t(c,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem",textAlign:"right"},children:r?e:i})]})]})},j=o=>{const{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,logoUrl:l,onPress:a,tokenBalanceFirst:m,disabled:r}=o,f=I(null),b=w(()=>{a?.()},[a]);return H(o.children,y=>{const p=y.get(h);return a?t(k,{ref:f,className:u({_dark:{bg:"surface.tertiary"},_hover:{bg:"neutral.secondary"},bg:"neutral.quaternary",px:4,py:2,minH:16}),borderRadius:"0.5rem",expand:!0,onPress:r?void 0:b,disabled:r,children:t(g,{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:p,logoUrl:l,tokenBalanceFirst:m,disabled:r})}):t(g,{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:p,logoUrl:l,tokenBalanceFirst:m,disabled:r})})},U=Object.assign(j,{TokenIcon:h});export{U as TokenListItem};
+import{jsx as t,jsxs as c,Fragment as d}from"react/jsx-runtime";import{ButtonContainer as x}from"../containers/button.js";import"../containers/card.js";import{css as S}from"@styled/css";import{Center as W,HStack as g,VStack as w}from"@styled/jsx";import"@styled/tokens";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import p from"../primitives/text.js";import{Children as I,cloneElement as C,useRef as F,useCallback as H}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import L from"../logos/icon-generic-token.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";import"../feedback/callout.js";import"../feedback/progress-bar.js";import{Skeleton as f}from"../feedback/skeleton.js";import"../primitives/portal.js";import"../../hooks/useToast.js";import"../../recipes/toast.js";import"../feedback/tooltip.js";import{createSlot as j,createHost as v}from"create-slots";const b=j(({children:o,...e})=>t(W,{children:I.map(o,i=>C(i,e))})),k=({name:o,fiatBalanceWithSymbol:e,tokenBalanceWithSymbol:i,tokenIcon:r,logoUrl:l,tokenBalanceFirst:a,disabled:s=!1,isLoading:n=!1})=>{const m=a||!e;return c(g,{w:"full",justify:"space-between",opacity:s?"0.5":"1",children:[c(g,{gap:4,children:[r?{...r,props:{...r.props,width:40,height:40}}:l?t("img",{width:40,height:40,src:l,alt:`${o} logo`}):t(L,{width:40,height:40}),t(p,{fontWeight:"medium",styles:{textTransform:"capitalize"},children:o})]}),t(w,{gap:0,alignItems:"flex-end",children:n?c(d,{children:[t(f,{height:"1rem",width:"6rem"}),i&&e&&t("div",{style:{marginTop:"4px"},children:t(f,{height:"1rem",width:"4rem"})})]}):c(d,{children:[t(p,{size:"sm",styles:{lineHeight:"1.5rem",textAlign:"right"},children:m?i:e}),t(p,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem",textAlign:"right"},children:m?e:i})]})})]})},T=o=>{const{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:r,logoUrl:l,onPress:a,tokenBalanceFirst:s,disabled:n,isLoading:m}=o,y=F(null),u=H(()=>{a?.()},[a]);return v(o.children,B=>{const h=B.get(b);return a?t(x,{ref:y,className:S({_dark:{bg:"surface.tertiary"},_hover:{bg:"neutral.secondary"},bg:"neutral.quaternary",px:4,py:2,minH:16}),borderRadius:"0.5rem",expand:!0,onPress:n?void 0:u,disabled:n,children:t(k,{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:r,tokenIcon:h,logoUrl:l,tokenBalanceFirst:s,disabled:n,isLoading:m})}):t(k,{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:r,tokenIcon:h,logoUrl:l,tokenBalanceFirst:s,disabled:n,isLoading:m})})},U=Object.assign(T,{TokenIcon:b});export{U as TokenListItem};
 //# sourceMappingURL=token-list-item.js.map

package/dist/es/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 { 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, FC, PropsWithChildren, 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  disabled?: 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  disabled = false,\n}: ListContentProps) => {\n  const balanceFirst = tokenBalanceFirst || !fiatBalanceWithSymbol;\n  return (\n    <HStack w=\"full\" justify=\"space-between\" opacity={disabled ? '0.5' : '1'}>\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', textAlign: 'right' }}>\n          {balanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n        </Text>\n        <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n          {balanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n        </Text>\n      </VStack>\n    </HStack>\n  );\n};\n\nconst TokenListItemBase: FC<PropsWithChildren<TokenListItemProps>> = props => {\n  const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, logoUrl, onPress, tokenBalanceFirst, disabled } = 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={disabled ? undefined : handlePress}\n          disabled={disabled}\n        >\n          <ListContent\n            name={name}\n            fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n            tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n            tokenIcon={tokenIcon}\n            logoUrl={logoUrl}\n            tokenBalanceFirst={tokenBalanceFirst}\n            disabled={disabled}\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        disabled={disabled}\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","disabled","balanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"w7BAmBA,MAAMA,EAAYC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAACC,EAAM,CAAA,SACJC,EAAS,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,EACA,SAAAC,EAAW,EACM,IAAI,CACrB,MAAMC,EAAeF,GAAqB,CAACJ,EAC3C,OACEO,EAACC,EAAM,CAAC,EAAE,OAAO,QAAQ,gBAAgB,QAASH,EAAW,MAAQ,IAAG,SAAA,CACtEE,EAACC,EAAM,CAAC,IAAK,EACV,SAAA,CAAAN,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,EAAA,MAAA,CAAK,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAO,CAAA,EAE7DN,EAACgB,EAAiB,CAAA,MAAO,GAAI,OAAQ,EAAE,CAAA,EAEzChB,EAACiB,EAAK,CAAA,WAAW,SAAS,OAAQ,CAAE,cAAe,cAChD,SAAAX,CACI,CAAA,CAAA,CAAA,CAAA,EAETQ,EAACI,EAAM,CAAC,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAlB,EAACiB,EAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,UAAW,OAAS,EAAA,SACjEJ,EAAeL,EAAyBD,IAE3CP,EAACiB,EAAI,CAAC,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,SAAU,UAAW,OAAS,EAAA,SAC5FJ,EAAeN,EAAwBC,CAAsB,CAAA,CACzD,CACA,CAAA,CAAA,CAAA,CAAA,CAGf,EAEMW,EAA+DpB,GAAQ,CAC3E,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAU,EAAS,kBAAAT,EAAmB,SAAAC,CAAU,EAAGb,EAEzGsB,EAAMC,EAAO,IAAI,EAEjBC,EAAcC,EAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAOK,EAAW1B,EAAM,SAAU2B,GAAQ,CACxC,MAAMjB,EAAYiB,EAAM,IAAI9B,CAAS,EAErC,OAAIwB,EAEApB,EAAC2B,EACC,CAAA,IAAKN,EACL,UAAWO,EAAI,CACb,MAAO,CAAE,GAAI,kBAAoB,EACjC,OAAQ,CAAE,GAAI,mBAAqB,EACnC,GAAI,qBACJ,GAAI,EACJ,GAAI,EACJ,KAAM,GACP,EACD,aAAa,SACb,OAAM,GACN,QAAShB,EAAW,OAAYW,EAChC,SAAUX,EAEV,SAAAZ,EAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,CAAQ,CAAA,CAEJ,CAAA,EAIpBZ,EAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,CAAQ,CAAA,CAGxB,CAAC,CACH,EAEaiB,EAAgB,OAAO,OAAOV,EAAmB,CAAE,UAAAvB,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 { Skeleton } from '@components/feedback';\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, FC, PropsWithChildren, 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  disabled?: boolean;\n  isLoading?: 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  disabled = false,\n  isLoading = false,\n}: ListContentProps) => {\n  const balanceFirst = tokenBalanceFirst || !fiatBalanceWithSymbol;\n  return (\n    <HStack w=\"full\" justify=\"space-between\" opacity={disabled ? '0.5' : '1'}>\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        {isLoading ? (\n          <>\n            <Skeleton height={'1rem'} width={'6rem'} />\n            {tokenBalanceWithSymbol && fiatBalanceWithSymbol && (\n              <div style={{ marginTop: '4px' }}>\n                <Skeleton height={'1rem'} width={'4rem'} />\n              </div>\n            )}\n          </>\n        ) : (\n          <>\n            <Text size=\"sm\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n              {balanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n            </Text>\n            <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n              {balanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n            </Text>\n          </>\n        )}\n      </VStack>\n    </HStack>\n  );\n};\n\nconst TokenListItemBase: FC<PropsWithChildren<TokenListItemProps>> = props => {\n  const {\n    name,\n    fiatBalanceWithSymbol,\n    tokenBalanceWithSymbol,\n    logoUrl,\n    onPress,\n    tokenBalanceFirst,\n    disabled,\n    isLoading,\n  } = 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={disabled ? undefined : handlePress}\n          disabled={disabled}\n        >\n          <ListContent\n            name={name}\n            fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n            tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n            tokenIcon={tokenIcon}\n            logoUrl={logoUrl}\n            tokenBalanceFirst={tokenBalanceFirst}\n            disabled={disabled}\n            isLoading={isLoading}\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        disabled={disabled}\n        isLoading={isLoading}\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","disabled","isLoading","balanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","_Fragment","Skeleton","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"0rCAqBA,MAAMA,EAAYC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAACC,EAAM,CAAA,SACJC,EAAS,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,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,EACK,IAAI,CACrB,MAAMC,EAAeH,GAAqB,CAACJ,EAC3C,OACEQ,EAACC,EAAM,CAAC,EAAE,OAAO,QAAQ,gBAAgB,QAASJ,EAAW,MAAQ,IAAG,SAAA,CACtEG,EAACC,EAAM,CAAC,IAAK,EACV,SAAA,CAAAP,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,GAEDC,EACFV,EAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAW,CAAA,EAEjEN,EAACiB,GAAiB,MAAO,GAAI,OAAQ,EAAE,CAAA,EAEzCjB,EAACkB,GAAK,WAAW,SAAS,OAAQ,CAAE,cAAe,YAAY,WAC5DZ,CAAI,CAAA,CACA,IAETN,EAACmB,EAAO,CAAA,IAAK,EAAG,WAAW,WAAU,SAClCN,EACCE,EAAAK,EAAA,CAAA,SAAA,CACEpB,EAACqB,EAAQ,CAAC,OAAQ,OAAQ,MAAO,MAAU,CAAA,EAC1Cb,GAA0BD,GACzBP,EAAK,MAAA,CAAA,MAAO,CAAE,UAAW,KAAK,WAC5BA,EAACqB,GAAS,OAAQ,OAAQ,MAAO,MAAM,CAAA,CACnC,CAAA,CACP,CACA,CAAA,EAEHN,EACEK,EAAA,CAAA,SAAA,CAAApB,EAACkB,EAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,UAAW,OAAO,EAC/D,SAAAJ,EAAeN,EAAyBD,CAAqB,CAAA,EAEhEP,EAACkB,GAAK,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,SAAU,UAAW,SACnF,SAAAJ,EAAeP,EAAwBC,CAAsB,CAAA,CACzD,GAEV,CAAA,CACM,CACF,CAAA,CAEb,EAEMc,EAA+DvB,GAAQ,CAC3E,KAAM,CACJ,KAAAO,EACA,sBAAAC,EACA,uBAAAC,EACA,QAAAE,EACA,QAAAa,EACA,kBAAAZ,EACA,SAAAC,EACA,UAAAC,CACD,EAAGd,EAEEyB,EAAMC,EAAO,IAAI,EAEjBC,EAAcC,EAAY,IAAK,CACnCJ,KACF,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAOK,EAAW7B,EAAM,SAAU8B,GAAQ,CACxC,MAAMpB,EAAYoB,EAAM,IAAIjC,CAAS,EAErC,OAAI2B,EAEAvB,EAAC8B,EACC,CAAA,IAAKN,EACL,UAAWO,EAAI,CACb,MAAO,CAAE,GAAI,kBAAoB,EACjC,OAAQ,CAAE,GAAI,mBAAqB,EACnC,GAAI,qBACJ,GAAI,EACJ,GAAI,EACJ,KAAM,EACP,CAAA,EACD,aAAa,SACb,OACA,GAAA,QAASnB,EAAW,OAAYc,EAChC,SAAUd,EAEV,SAAAZ,EAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,EACV,UAAWC,CAAS,CAAA,CAEN,CAAA,EAIpBb,EAACK,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,EACV,UAAWC,CAAS,CAAA,CAG1B,CAAC,CACH,EAEamB,EAAgB,OAAO,OAAOV,EAAmB,CAAE,UAAA1B,CAAS,CAAE"}

package/dist/panda.buildinfo.json

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

package/dist/types/components/list-items/navigation-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-button.d.ts","sourceRoot":"","sources":["../../../../src/components/list-items/navigation-button.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8ED,QAAA,MAAM,gBAAgB;;;CAAqE,CAAC;AAE5F,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"navigation-button.d.ts","sourceRoot":"","sources":["../../../../src/components/list-items/navigation-button.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkFD,QAAA,MAAM,gBAAgB;;;CAAqE,CAAC;AAE5F,eAAe,gBAAgB,CAAC"}

package/dist/types/components/list-items/token-list-item.d.ts

@@ -8,6 +8,7 @@ export interface TokenListItemProps extends AriaButtonProps {
     onPress?: () => void;
     tokenBalanceFirst?: boolean;
     disabled?: boolean;
+    isLoading?: boolean;
 }
 export declare const TokenListItem: FC<PropsWithChildren<TokenListItemProps>> & {
     TokenIcon: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/list-items/token-list-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token-list-item.d.ts","sourceRoot":"","sources":["../../../../src/components/list-items/token-list-item.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA0B,EAAE,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkHD,eAAO,MAAM,aAAa;;CAAkD,CAAC"}
+{"version":3,"file":"token-list-item.d.ts","sourceRoot":"","sources":["../../../../src/components/list-items/token-list-item.tsx"],"names":[],"mappings":"AAOA,OAAO,EAA0B,EAAE,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA2ID,eAAO,MAAM,aAAa;;CAAkD,CAAC"}

package/package.json

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