@magiclabs/ui-components 1.34.1 → 1.34.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react/jsx-runtime"),f=require("../containers/button.js");require("../containers/card.js");var y=require("@styled/css"),s=require("@styled/jsx");require("@styled/tokens"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var c=require("../primitives/text.js"),o=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var b=require("../logos/icon-generic-token.js");require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");var m=require("create-slots");const d=m.createSlot(({children:r,...t})=>e.jsx(s.Center,{children:o.Children.map(r,n=>o.cloneElement(n,t))})),q=({name:r,fiatBalanceWithSymbol:t,tokenBalanceWithSymbol:n,tokenIcon:i,logoUrl:l,tokenBalanceFirst:a})=>e.jsxs(s.HStack,{w:"full",justify:"space-between",children:[e.jsxs(s.HStack,{gap:4,children:[i?{...i,props:{...i.props,width:40,height:40}}:l?e.jsx("img",{width:40,height:40,src:l,alt:`${r} logo`}):e.jsx(b.default,{width:40,height:40}),e.jsx(c.default,{fontWeight:"medium",styles:{textTransform:"capitalize"},children:r})]}),e.jsxs(s.VStack,{gap:0,alignItems:"flex-end",children:[e.jsx(c.default,{size:"sm",styles:{lineHeight:"1.5rem"},children:a?n:t}),e.jsx(c.default,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem"},children:a?t:n})]})]}),j=r=>{const{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:i,logoUrl:l,onPress:a,tokenBalanceFirst:u}=r,g=o.useRef(null),k=o.useCallback(()=>{a?.()},[a]);return m.createHost(r.children,x=>{const h=x.get(d);return a?e.jsx(f.ButtonContainer,{ref:g,className:y.css({_dark:{bg:"surface.tertiary"},_hover:{bg:"neutral.secondary"},bg:"neutral.quaternary",px:4,py:2,minH:16}),borderRadius:"0.5rem",expand:!0,onPress:k,children:e.jsx(q,{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:i,tokenIcon:h,logoUrl:l,tokenBalanceFirst:u})}):e.jsx(q,{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:i,tokenIcon:h,logoUrl:l,tokenBalanceFirst:u})})},p=Object.assign(j,{TokenIcon:d});exports.TokenListItem=p;
1
+ "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 q=m.createSlot(({children:r,...t})=>e.jsx(c.Center,{children:u.Children.map(r,i=>u.cloneElement(i,t))})),b=({name:r,fiatBalanceWithSymbol:t,tokenBalanceWithSymbol:i,tokenIcon:a,logoUrl:l,tokenBalanceFirst:n,disabled:s=!1})=>e.jsxs(c.HStack,{w:"full",justify:"space-between",opacity:s?"0.5":"1",children:[e.jsxs(c.HStack,{gap:4,children:[a?{...a,props:{...a.props,width:40,height:40}}:l?e.jsx("img",{width:40,height:40,src:l,alt:`${r} logo`}):e.jsx(j.default,{width:40,height:40}),e.jsx(d.default,{fontWeight:"medium",styles:{textTransform:"capitalize"},children:r})]}),e.jsxs(c.VStack,{gap:0,alignItems:"flex-end",children:[e.jsx(d.default,{size:"sm",styles:{lineHeight:"1.5rem"},children:n?i:t}),e.jsx(d.default,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem"},children:n?t:i})]})]}),p=r=>{const{name:t,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:a,logoUrl:l,onPress:n,tokenBalanceFirst:s,disabled:o}=r,g=u.useRef(null),k=u.useCallback(()=>{n?.()},[n]);return m.createHost(r.children,x=>{const h=x.get(q);return n?e.jsx(f.ButtonContainer,{ref:g,className:y.css({_dark:{bg:"surface.tertiary"},_hover:{bg:"neutral.secondary"},bg:"neutral.quaternary",px:4,py:2,minH:16}),borderRadius:"0.5rem",expand:!0,onPress:o?void 0:k,disabled:o,children:e.jsx(b,{name:t,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:a,tokenIcon:h,logoUrl:l,tokenBalanceFirst:s,disabled:o})}):e.jsx(b,{name:t,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:a,tokenIcon:h,logoUrl:l,tokenBalanceFirst:s,disabled:o})})},B=Object.assign(p,{TokenIcon:q});exports.TokenListItem=B;
2
2
  //# sourceMappingURL=token-list-item.js.map
@@ -1 +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, useCallback, useRef } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n name: string;\n fiatBalanceWithSymbol: string;\n tokenBalanceWithSymbol: string;\n logoUrl?: string;\n onPress?: () => void;\n tokenBalanceFirst?: boolean;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({\n name,\n fiatBalanceWithSymbol,\n tokenBalanceWithSymbol,\n tokenIcon,\n logoUrl,\n tokenBalanceFirst,\n}: ListContentProps) => {\n return (\n <HStack w=\"full\" justify=\"space-between\">\n <HStack gap={4}>\n {tokenIcon ? (\n {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 40,\n height: 40,\n },\n }\n ) : logoUrl ? (\n <img width={40} height={40} src={logoUrl} alt={`${name} logo`} />\n ) : (\n <IconGenericToken width={40} height={40} />\n )}\n <Text fontWeight=\"medium\" styles={{ textTransform: 'capitalize' }}>\n {name}\n </Text>\n </HStack>\n <VStack gap={0} alignItems=\"flex-end\">\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem' }}>\n {tokenBalanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n </Text>\n <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem' }}>\n {tokenBalanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n </Text>\n </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, logoUrl, onPress, tokenBalanceFirst } = props;\n\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n return createHost(props.children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n\n if (onPress)\n return (\n <ButtonContainer\n ref={ref}\n className={css({\n _dark: { bg: 'surface.tertiary' },\n _hover: { bg: 'neutral.secondary' },\n bg: 'neutral.quaternary',\n px: 4,\n py: 2,\n minH: 16,\n })}\n borderRadius=\"0.5rem\"\n expand\n onPress={handlePress}\n >\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n />\n </ButtonContainer>\n );\n\n return (\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n />\n );\n });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","tokenBalanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"m1BAkBA,MAAMA,EAAYC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAAAA,IAACC,EAAAA,OAAM,CAAA,SACJC,EAAS,SAAA,IAAIJ,EAAUK,GACfC,eAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CACnB,KAAAC,EACA,sBAAAC,EACA,uBAAAC,EACA,UAAAC,EACA,QAAAC,EACA,kBAAAC,CAAiB,IAGfC,EAAAA,KAACC,EAAM,OAAA,CAAC,EAAE,OAAO,QAAQ,0BACvBD,EAACC,KAAAA,EAAAA,OAAO,CAAA,IAAK,YACVJ,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,EAAAA,IAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAO,CAAA,EAE7DN,EAACc,IAAAA,UAAiB,CAAA,MAAO,GAAI,OAAQ,EAAM,CAAA,EAE7Cd,EAAAA,IAACe,UAAK,CAAA,WAAW,SAAS,OAAQ,CAAE,cAAe,YAAY,EAC5D,SAAAT,CACI,CAAA,CAAA,CAAA,CAAA,EAETM,EAAAA,KAACI,EAAAA,OAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAhB,EAAAA,IAACe,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,QAAQ,EAC3C,SAAAJ,EAAoBH,EAAyBD,CAAqB,CAAA,EAErEP,EAACe,IAAAA,EAAAA,QAAI,CAAC,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,QAAQ,EACtE,SAAAJ,EAAoBJ,EAAwBC,CAAsB,CAAA,CAC9D,CACA,CAAA,CAAA,CAAA,CAAA,EAKTS,EAAqBlB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAQ,EAAS,kBAAAP,CAAmB,EAAGZ,EAE/FoB,EAAMC,EAAAA,OAAO,IAAI,EAEjBC,EAAcC,EAAAA,YAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAOK,EAAAA,WAAWxB,EAAM,SAAUyB,GAAQ,CACxC,MAAMf,EAAYe,EAAM,IAAI5B,CAAS,EAErC,OAAIsB,EAEAlB,MAACyB,EACC,gBAAA,CAAA,IAAKN,EACL,UAAWO,EAAAA,IAAI,CACb,MAAO,CAAE,GAAI,kBAAoB,EACjC,OAAQ,CAAE,GAAI,mBAAqB,EACnC,GAAI,qBACJ,GAAI,EACJ,GAAI,EACJ,KAAM,EACP,CAAA,EACD,aAAa,SACb,UACA,QAASL,EAAW,SAEpBrB,EAAAA,IAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,CACnB,CAAA,CAAA,CAAA,EAKNX,EAAAA,IAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,CAAiB,CAAA,CAG1C,CAAC,CACH,EAEagB,EAAgB,OAAO,OAAOV,EAAmB,CAAE,UAAArB,CAAS,CAAE"}
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 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' }}>\n {tokenBalanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n </Text>\n <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem' }}>\n {tokenBalanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n </Text>\n </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase: 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","_jsxs","HStack","IconGenericToken","Text","VStack","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"m1BAmBA,MAAMA,EAAYC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAAAA,IAACC,SAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAaD,aAAAA,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CACnB,KAAAC,EACA,sBAAAC,EACA,uBAAAC,EACA,UAAAC,EACA,QAAAC,EACA,kBAAAC,EACA,SAAAC,EAAW,EACM,IAEfC,OAACC,EAAM,OAAA,CAAC,EAAE,OAAO,QAAQ,gBAAgB,QAASF,EAAW,MAAQ,IAAG,SAAA,CACtEC,EAAAA,KAACC,EAAAA,OAAM,CAAC,IAAK,EACV,SAAA,CAAAL,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,EAAAA,IAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAO,CAAA,EAE7DN,MAACe,EAAiB,QAAA,CAAA,MAAO,GAAI,OAAQ,EAAM,CAAA,EAE7Cf,EAACgB,IAAAA,EAAAA,QAAK,CAAA,WAAW,SAAS,OAAQ,CAAE,cAAe,YAAY,EAC5D,SAAAV,CACI,CAAA,CAAA,CAAA,CAAA,EAETO,EAAAA,KAACI,EAAAA,OAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAjB,EAAAA,IAACgB,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,QAAQ,EAC3C,SAAAL,EAAoBH,EAAyBD,CAAqB,CAAA,EAErEP,EAACgB,IAAAA,EAAAA,QAAI,CAAC,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,QAAQ,EACtE,SAAAL,EAAoBJ,EAAwBC,CAAsB,CAAA,CAC9D,CACA,CAAA,CAAA,CAAA,CAAA,EAKTU,EAA+DnB,GAAQ,CAC3E,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAS,EAAS,kBAAAR,EAAmB,SAAAC,CAAU,EAAGb,EAEzGqB,EAAMC,EAAAA,OAAO,IAAI,EAEjBC,EAAcC,EAAAA,YAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAOK,EAAAA,WAAWzB,EAAM,SAAU0B,GAAQ,CACxC,MAAMhB,EAAYgB,EAAM,IAAI7B,CAAS,EAErC,OAAIuB,EAEAnB,EAAC0B,IAAAA,EAAAA,gBACC,CAAA,IAAKN,EACL,UAAWO,EAAAA,IAAI,CACb,MAAO,CAAE,GAAI,kBAAoB,EACjC,OAAQ,CAAE,GAAI,mBAAqB,EACnC,GAAI,qBACJ,GAAI,EACJ,GAAI,EACJ,KAAM,GACP,EACD,aAAa,SACb,OAAM,GACN,QAASf,EAAW,OAAYU,EAChC,SAAUV,EAEV,SAAAZ,EAAAA,IAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,CAAQ,CAAA,CAEJ,CAAA,EAIpBZ,MAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,CAAQ,CAAA,CAGxB,CAAC,CACH,EAEagB,EAAgB,OAAO,OAAOV,EAAmB,CAAE,UAAAtB,CAAS,CAAE"}
@@ -1,2 +1,2 @@
1
- "use strict";var t=require("@styled/css");const a=t.sva({slots:["trigger","content","spacer"],base:{trigger:{position:"relative",w:"auto"},content:{w:"max",maxW:72,color:"text.secondary",bg:"surface.primary",_dark:{bg:"surface.secondary"},position:"absolute",py:2,px:3,rounded:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",zIndex:"max",display:"none"},spacer:{position:"absolute"}},variants:{expand:{true:{trigger:{w:"full"}}},isOpen:{true:{content:{display:"block"}}},placement:{top:{content:{top:"0%",left:"50%",transform:"translateX(-50%) translateY(calc(-100% - 0.75rem))"}},"top left":{content:{top:"0%",right:"100%",transform:"translateX(10%) translateY(calc(-100% - 0.75rem))"}},"top right":{content:{top:"0%",left:"0%",transform:"translateX(-10%) translateY(calc(-100% - 0.75rem))"}},left:{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-50%)"}},"left top":{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-75%)"}},"left bottom":{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-25%)"}},right:{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-50%)"}},"right top":{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-75%)"}},"right bottom":{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-25%)"}},bottom:{content:{bottom:"0%",left:"50%",transform:"translateX(-50%) translateY(calc(100% + 0.75rem))"}},"bottom left":{content:{bottom:"0%",right:"0%",transform:"translateX(10%) translateY(calc(100% + 0.75rem))"}},"bottom right":{content:{bottom:"0%",left:"0%",transform:"translateX(-10%) translateY(calc(100% + 0.75rem))"}}},position:{top:{spacer:{width:72,height:4,bottom:0,left:"50%",transform:"translateX(-50%) translateY(0.75rem)"}},bottom:{spacer:{width:72,height:4,top:0,left:"50%",transform:"translateX(-50%) translateY(-0.75rem)"}},left:{spacer:{width:4,height:48,top:"50%",right:-6,transform:"translateX(-0.75rem) translateY(-50%)"}},right:{spacer:{width:4,height:48,top:"50%",left:-6,transform:"translateX(0.75rem) translateY(-50%)"}}}}});exports.tooltip=a;
1
+ "use strict";var t=require("@styled/css");const a=t.sva({slots:["trigger","content","spacer"],base:{trigger:{position:"relative",w:"auto"},content:{w:"max",maxW:72,color:"text.secondary",bg:"surface.primary",_dark:{bg:"surface.secondary"},position:"absolute",py:2,px:3,rounded:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",zIndex:"max",display:"none"},spacer:{position:"absolute"}},variants:{expand:{true:{trigger:{w:"full"}}},isOpen:{true:{content:{display:"block"}}},placement:{top:{content:{top:"0%",left:"50%",transform:"translateX(-50%) translateY(calc(-100% - 0.75rem))"}},"top left":{content:{top:"0%",right:"100%",transform:"translateX(10%) translateY(calc(-100% - 0.75rem))"}},"top right":{content:{top:"0%",left:"100%",transform:"translateX(-10%) translateY(calc(-100% - 0.75rem))"}},left:{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-50%)"}},"left top":{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-75%)"}},"left bottom":{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-25%)"}},right:{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-50%)"}},"right top":{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-75%)"}},"right bottom":{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-25%)"}},bottom:{content:{bottom:"0%",left:"50%",transform:"translateX(-50%) translateY(calc(100% + 0.75rem))"}},"bottom left":{content:{bottom:"0%",right:"100%",transform:"translateX(10%) translateY(calc(100% + 0.75rem))"}},"bottom right":{content:{bottom:"0%",left:"100%",transform:"translateX(-10%) translateY(calc(100% + 0.75rem))"}}},position:{top:{spacer:{width:72,height:4,bottom:0,left:"50%",transform:"translateX(-50%) translateY(0.75rem)"}},bottom:{spacer:{width:72,height:4,top:0,left:"50%",transform:"translateX(-50%) translateY(-0.75rem)"}},left:{spacer:{width:4,height:48,top:"50%",right:-6,transform:"translateX(-0.75rem) translateY(-50%)"}},right:{spacer:{width:4,height:48,top:"50%",left:-6,transform:"translateX(0.75rem) translateY(-50%)"}}}}});exports.tooltip=a;
2
2
  //# sourceMappingURL=tooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.js","sources":["../../../src/recipes/tooltip.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const tooltip = sva({\n slots: ['trigger', 'content', 'spacer'],\n base: {\n trigger: {\n position: 'relative',\n w: 'auto',\n },\n content: {\n w: 'max',\n maxW: 72,\n color: 'text.secondary',\n bg: 'surface.primary',\n _dark: { bg: 'surface.secondary' },\n position: 'absolute',\n py: 2,\n px: 3,\n rounded: 'xl',\n boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n zIndex: 'max',\n display: 'none',\n },\n spacer: {\n position: 'absolute',\n },\n },\n variants: {\n expand: {\n true: {\n trigger: {\n w: 'full',\n },\n },\n },\n isOpen: {\n true: {\n content: {\n display: 'block',\n },\n },\n },\n placement: {\n top: {\n content: {\n top: '0%',\n left: '50%',\n transform: 'translateX(-50%) translateY(calc(-100% - 0.75rem))',\n },\n },\n 'top left': {\n content: {\n top: '0%',\n right: '100%',\n transform: 'translateX(10%) translateY(calc(-100% - 0.75rem))',\n },\n },\n 'top right': {\n content: {\n top: '0%',\n left: '0%',\n transform: 'translateX(-10%) translateY(calc(-100% - 0.75rem))',\n },\n },\n left: {\n content: {\n top: '50%',\n left: '0%',\n transform: 'translateX(calc(-100% - 0.75rem)) translateY(-50%)',\n },\n },\n 'left top': {\n content: {\n top: '50%',\n left: '0%',\n transform: 'translateX(calc(-100% - 0.75rem)) translateY(-75%)',\n },\n },\n 'left bottom': {\n content: {\n top: '50%',\n left: '0%',\n transform: 'translateX(calc(-100% - 0.75rem)) translateY(-25%)',\n },\n },\n right: {\n content: {\n top: '50%',\n right: '0%',\n transform: 'translateX(calc(100% + 0.75rem)) translateY(-50%)',\n },\n },\n 'right top': {\n content: {\n top: '50%',\n right: '0%',\n transform: 'translateX(calc(100% + 0.75rem)) translateY(-75%)',\n },\n },\n 'right bottom': {\n content: {\n top: '50%',\n right: '0%',\n transform: 'translateX(calc(100% + 0.75rem)) translateY(-25%)',\n },\n },\n bottom: {\n content: {\n bottom: '0%',\n left: '50%',\n transform: 'translateX(-50%) translateY(calc(100% + 0.75rem))',\n },\n },\n 'bottom left': {\n content: {\n bottom: '0%',\n right: '0%',\n transform: 'translateX(10%) translateY(calc(100% + 0.75rem))',\n },\n },\n 'bottom right': {\n content: {\n bottom: '0%',\n left: '0%',\n transform: 'translateX(-10%) translateY(calc(100% + 0.75rem))',\n },\n },\n },\n position: {\n top: {\n spacer: {\n width: 72,\n height: 4,\n bottom: 0,\n left: '50%',\n transform: 'translateX(-50%) translateY(0.75rem)',\n },\n },\n bottom: {\n spacer: {\n width: 72,\n height: 4,\n top: 0,\n left: '50%',\n transform: 'translateX(-50%) translateY(-0.75rem)',\n },\n },\n left: {\n spacer: {\n width: 4,\n height: 48,\n top: '50%',\n right: -6,\n transform: 'translateX(-0.75rem) translateY(-50%)',\n },\n },\n right: {\n spacer: {\n width: 4,\n height: 48,\n top: '50%',\n left: -6,\n transform: 'translateX(0.75rem) translateY(-50%)',\n },\n },\n },\n },\n});\n"],"names":["tooltip","sva"],"mappings":"0CAEO,MAAMA,EAAUC,EAAAA,IAAI,CACzB,MAAO,CAAC,UAAW,UAAW,QAAQ,EACtC,KAAM,CACJ,QAAS,CACP,SAAU,WACV,EAAG,MACJ,EACD,QAAS,CACP,EAAG,MACH,KAAM,GACN,MAAO,iBACP,GAAI,kBACJ,MAAO,CAAE,GAAI,mBAAqB,EAClC,SAAU,WACV,GAAI,EACJ,GAAI,EACJ,QAAS,KACT,UAAW,uCACX,OAAQ,MACR,QAAS,MACV,EACD,OAAQ,CACN,SAAU,UACX,CACF,EACD,SAAU,CACR,OAAQ,CACN,KAAM,CACJ,QAAS,CACP,EAAG,MACJ,CACF,CACF,EACD,OAAQ,CACN,KAAM,CACJ,QAAS,CACP,QAAS,OACV,CACF,CACF,EACD,UAAW,CACT,IAAK,CACH,QAAS,CACP,IAAK,KACL,KAAM,MACN,UAAW,oDACZ,CACF,EACD,WAAY,CACV,QAAS,CACP,IAAK,KACL,MAAO,OACP,UAAW,mDACZ,CACF,EACD,YAAa,CACX,QAAS,CACP,IAAK,KACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,KAAM,CACJ,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,WAAY,CACV,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,cAAe,CACb,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,MAAO,CACL,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,YAAa,CACX,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,eAAgB,CACd,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,OAAQ,CACN,QAAS,CACP,OAAQ,KACR,KAAM,MACN,UAAW,mDACZ,CACF,EACD,cAAe,CACb,QAAS,CACP,OAAQ,KACR,MAAO,KACP,UAAW,kDACZ,CACF,EACD,eAAgB,CACd,QAAS,CACP,OAAQ,KACR,KAAM,KACN,UAAW,mDACZ,CACF,CACF,EACD,SAAU,CACR,IAAK,CACH,OAAQ,CACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,KAAM,MACN,UAAW,sCACZ,CACF,EACD,OAAQ,CACN,OAAQ,CACN,MAAO,GACP,OAAQ,EACR,IAAK,EACL,KAAM,MACN,UAAW,uCACZ,CACF,EACD,KAAM,CACJ,OAAQ,CACN,MAAO,EACP,OAAQ,GACR,IAAK,MACL,MAAO,GACP,UAAW,uCACZ,CACF,EACD,MAAO,CACL,OAAQ,CACN,MAAO,EACP,OAAQ,GACR,IAAK,MACL,KAAM,GACN,UAAW,sCACZ,CACF,CACF,CACF,CACF,CAAA"}
1
+ {"version":3,"file":"tooltip.js","sources":["../../../src/recipes/tooltip.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const tooltip = sva({\n slots: ['trigger', 'content', 'spacer'],\n base: {\n trigger: {\n position: 'relative',\n w: 'auto',\n },\n content: {\n w: 'max',\n maxW: 72,\n color: 'text.secondary',\n bg: 'surface.primary',\n _dark: { bg: 'surface.secondary' },\n position: 'absolute',\n py: 2,\n px: 3,\n rounded: 'xl',\n boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n zIndex: 'max',\n display: 'none',\n },\n spacer: {\n position: 'absolute',\n },\n },\n variants: {\n expand: {\n true: {\n trigger: {\n w: 'full',\n },\n },\n },\n isOpen: {\n true: {\n content: {\n display: 'block',\n },\n },\n },\n placement: {\n top: {\n content: {\n top: '0%',\n left: '50%',\n transform: 'translateX(-50%) translateY(calc(-100% - 0.75rem))',\n },\n },\n 'top left': {\n content: {\n top: '0%',\n right: '100%',\n transform: 'translateX(10%) translateY(calc(-100% - 0.75rem))',\n },\n },\n 'top right': {\n content: {\n top: '0%',\n left: '100%',\n transform: 'translateX(-10%) translateY(calc(-100% - 0.75rem))',\n },\n },\n left: {\n content: {\n top: '50%',\n left: '0%',\n transform: 'translateX(calc(-100% - 0.75rem)) translateY(-50%)',\n },\n },\n 'left top': {\n content: {\n top: '50%',\n left: '0%',\n transform: 'translateX(calc(-100% - 0.75rem)) translateY(-75%)',\n },\n },\n 'left bottom': {\n content: {\n top: '50%',\n left: '0%',\n transform: 'translateX(calc(-100% - 0.75rem)) translateY(-25%)',\n },\n },\n right: {\n content: {\n top: '50%',\n right: '0%',\n transform: 'translateX(calc(100% + 0.75rem)) translateY(-50%)',\n },\n },\n 'right top': {\n content: {\n top: '50%',\n right: '0%',\n transform: 'translateX(calc(100% + 0.75rem)) translateY(-75%)',\n },\n },\n 'right bottom': {\n content: {\n top: '50%',\n right: '0%',\n transform: 'translateX(calc(100% + 0.75rem)) translateY(-25%)',\n },\n },\n bottom: {\n content: {\n bottom: '0%',\n left: '50%',\n transform: 'translateX(-50%) translateY(calc(100% + 0.75rem))',\n },\n },\n 'bottom left': {\n content: {\n bottom: '0%',\n right: '100%',\n transform: 'translateX(10%) translateY(calc(100% + 0.75rem))',\n },\n },\n 'bottom right': {\n content: {\n bottom: '0%',\n left: '100%',\n transform: 'translateX(-10%) translateY(calc(100% + 0.75rem))',\n },\n },\n },\n position: {\n top: {\n spacer: {\n width: 72,\n height: 4,\n bottom: 0,\n left: '50%',\n transform: 'translateX(-50%) translateY(0.75rem)',\n },\n },\n bottom: {\n spacer: {\n width: 72,\n height: 4,\n top: 0,\n left: '50%',\n transform: 'translateX(-50%) translateY(-0.75rem)',\n },\n },\n left: {\n spacer: {\n width: 4,\n height: 48,\n top: '50%',\n right: -6,\n transform: 'translateX(-0.75rem) translateY(-50%)',\n },\n },\n right: {\n spacer: {\n width: 4,\n height: 48,\n top: '50%',\n left: -6,\n transform: 'translateX(0.75rem) translateY(-50%)',\n },\n },\n },\n },\n});\n"],"names":["tooltip","sva"],"mappings":"0CAEO,MAAMA,EAAUC,EAAAA,IAAI,CACzB,MAAO,CAAC,UAAW,UAAW,QAAQ,EACtC,KAAM,CACJ,QAAS,CACP,SAAU,WACV,EAAG,MACJ,EACD,QAAS,CACP,EAAG,MACH,KAAM,GACN,MAAO,iBACP,GAAI,kBACJ,MAAO,CAAE,GAAI,mBAAqB,EAClC,SAAU,WACV,GAAI,EACJ,GAAI,EACJ,QAAS,KACT,UAAW,uCACX,OAAQ,MACR,QAAS,MACV,EACD,OAAQ,CACN,SAAU,UACX,CACF,EACD,SAAU,CACR,OAAQ,CACN,KAAM,CACJ,QAAS,CACP,EAAG,MACJ,CACF,CACF,EACD,OAAQ,CACN,KAAM,CACJ,QAAS,CACP,QAAS,OACV,CACF,CACF,EACD,UAAW,CACT,IAAK,CACH,QAAS,CACP,IAAK,KACL,KAAM,MACN,UAAW,oDACZ,CACF,EACD,WAAY,CACV,QAAS,CACP,IAAK,KACL,MAAO,OACP,UAAW,mDACZ,CACF,EACD,YAAa,CACX,QAAS,CACP,IAAK,KACL,KAAM,OACN,UAAW,oDACZ,CACF,EACD,KAAM,CACJ,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,WAAY,CACV,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,cAAe,CACb,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,MAAO,CACL,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,YAAa,CACX,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,eAAgB,CACd,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,OAAQ,CACN,QAAS,CACP,OAAQ,KACR,KAAM,MACN,UAAW,mDACZ,CACF,EACD,cAAe,CACb,QAAS,CACP,OAAQ,KACR,MAAO,OACP,UAAW,kDACZ,CACF,EACD,eAAgB,CACd,QAAS,CACP,OAAQ,KACR,KAAM,OACN,UAAW,mDACZ,CACF,CACF,EACD,SAAU,CACR,IAAK,CACH,OAAQ,CACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,KAAM,MACN,UAAW,sCACZ,CACF,EACD,OAAQ,CACN,OAAQ,CACN,MAAO,GACP,OAAQ,EACR,IAAK,EACL,KAAM,MACN,UAAW,uCACZ,CACF,EACD,KAAM,CACJ,OAAQ,CACN,MAAO,EACP,OAAQ,GACR,IAAK,MACL,MAAO,GACP,UAAW,uCACZ,CACF,EACD,MAAO,CACL,OAAQ,CACN,MAAO,EACP,OAAQ,GACR,IAAK,MACL,KAAM,GACN,UAAW,sCACZ,CACF,CACF,CACF,CACF,CAAA"}
@@ -1,2 +1,2 @@
1
- import{jsx as t,jsxs as l}from"react/jsx-runtime";import{ButtonContainer as y}from"../containers/button.js";import"../containers/card.js";import{css as b}from"@styled/css";import{Center as u,HStack as p,VStack as B}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 m from"../primitives/text.js";import{Children as S,cloneElement as W,useRef as x,useCallback as H}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import I 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 w,createHost as C}from"create-slots";const h=w(({children:e,...o})=>t(u,{children:S.map(e,r=>W(r,o))})),d=({name:e,fiatBalanceWithSymbol:o,tokenBalanceWithSymbol:r,tokenIcon:i,logoUrl:a,tokenBalanceFirst:n})=>l(p,{w:"full",justify:"space-between",children:[l(p,{gap:4,children:[i?{...i,props:{...i.props,width:40,height:40}}:a?t("img",{width:40,height:40,src:a,alt:`${e} logo`}):t(I,{width:40,height:40}),t(m,{fontWeight:"medium",styles:{textTransform:"capitalize"},children:e})]}),l(B,{gap:0,alignItems:"flex-end",children:[t(m,{size:"sm",styles:{lineHeight:"1.5rem"},children:n?r:o}),t(m,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem"},children:n?o:r})]})]}),j=e=>{const{name:o,fiatBalanceWithSymbol:r,tokenBalanceWithSymbol:i,logoUrl:a,onPress:n,tokenBalanceFirst:c}=e,f=x(null),g=H(()=>{n?.()},[n]);return C(e.children,k=>{const s=k.get(h);return n?t(y,{ref:f,className:b({_dark:{bg:"surface.tertiary"},_hover:{bg:"neutral.secondary"},bg:"neutral.quaternary",px:4,py:2,minH:16}),borderRadius:"0.5rem",expand:!0,onPress:g,children:t(d,{name:o,fiatBalanceWithSymbol:r,tokenBalanceWithSymbol:i,tokenIcon:s,logoUrl:a,tokenBalanceFirst:c})}):t(d,{name:o,fiatBalanceWithSymbol:r,tokenBalanceWithSymbol:i,tokenIcon:s,logoUrl:a,tokenBalanceFirst:c})})},F=Object.assign(j,{TokenIcon:h});export{F as TokenListItem};
1
+ import{jsx as e,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 W,cloneElement as x,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 H,createHost as j}from"create-slots";const h=H(({children:t,...o})=>e(B,{children:W.map(t,r=>x(r,o))})),f=({name:t,fiatBalanceWithSymbol:o,tokenBalanceWithSymbol:r,tokenIcon:i,logoUrl:a,tokenBalanceFirst:n,disabled:l=!1})=>s(d,{w:"full",justify:"space-between",opacity:l?"0.5":"1",children:[s(d,{gap:4,children:[i?{...i,props:{...i.props,width:40,height:40}}:a?e("img",{width:40,height:40,src:a,alt:`${t} logo`}):e(C,{width:40,height:40}),e(c,{fontWeight:"medium",styles:{textTransform:"capitalize"},children:t})]}),s(S,{gap:0,alignItems:"flex-end",children:[e(c,{size:"sm",styles:{lineHeight:"1.5rem"},children:n?r:o}),e(c,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem"},children:n?o:r})]})]}),F=t=>{const{name:o,fiatBalanceWithSymbol:r,tokenBalanceWithSymbol:i,logoUrl:a,onPress:n,tokenBalanceFirst:l,disabled:m}=t,g=I(null),b=w(()=>{n?.()},[n]);return j(t.children,y=>{const p=y.get(h);return n?e(k,{ref:g,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:m?void 0:b,disabled:m,children:e(f,{name:o,fiatBalanceWithSymbol:r,tokenBalanceWithSymbol:i,tokenIcon:p,logoUrl:a,tokenBalanceFirst:l,disabled:m})}):e(f,{name:o,fiatBalanceWithSymbol:r,tokenBalanceWithSymbol:i,tokenIcon:p,logoUrl:a,tokenBalanceFirst:l,disabled:m})})},U=Object.assign(F,{TokenIcon:h});export{U as TokenListItem};
2
2
  //# sourceMappingURL=token-list-item.js.map
@@ -1 +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, useCallback, useRef } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n name: string;\n fiatBalanceWithSymbol: string;\n tokenBalanceWithSymbol: string;\n logoUrl?: string;\n onPress?: () => void;\n tokenBalanceFirst?: boolean;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({\n name,\n fiatBalanceWithSymbol,\n tokenBalanceWithSymbol,\n tokenIcon,\n logoUrl,\n tokenBalanceFirst,\n}: ListContentProps) => {\n return (\n <HStack w=\"full\" justify=\"space-between\">\n <HStack gap={4}>\n {tokenIcon ? (\n {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 40,\n height: 40,\n },\n }\n ) : logoUrl ? (\n <img width={40} height={40} src={logoUrl} alt={`${name} logo`} />\n ) : (\n <IconGenericToken width={40} height={40} />\n )}\n <Text fontWeight=\"medium\" styles={{ textTransform: 'capitalize' }}>\n {name}\n </Text>\n </HStack>\n <VStack gap={0} alignItems=\"flex-end\">\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem' }}>\n {tokenBalanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n </Text>\n <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem' }}>\n {tokenBalanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n </Text>\n </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, logoUrl, onPress, tokenBalanceFirst } = props;\n\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n return createHost(props.children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n\n if (onPress)\n return (\n <ButtonContainer\n ref={ref}\n className={css({\n _dark: { bg: 'surface.tertiary' },\n _hover: { bg: 'neutral.secondary' },\n bg: 'neutral.quaternary',\n px: 4,\n py: 2,\n minH: 16,\n })}\n borderRadius=\"0.5rem\"\n expand\n onPress={handlePress}\n >\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n />\n </ButtonContainer>\n );\n\n return (\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n />\n );\n });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","tokenBalanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"w7BAkBA,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,CAAiB,IAGfC,EAACC,EAAM,CAAC,EAAE,OAAO,QAAQ,0BACvBD,EAACC,EAAO,CAAA,IAAK,YACVJ,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,EAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAO,CAAA,EAE7DN,EAACc,EAAiB,CAAA,MAAO,GAAI,OAAQ,EAAM,CAAA,EAE7Cd,EAACe,EAAK,CAAA,WAAW,SAAS,OAAQ,CAAE,cAAe,YAAY,EAC5D,SAAAT,CACI,CAAA,CAAA,CAAA,CAAA,EAETM,EAACI,EAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAhB,EAACe,EAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,QAAQ,EAC3C,SAAAJ,EAAoBH,EAAyBD,CAAqB,CAAA,EAErEP,EAACe,EAAI,CAAC,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,QAAQ,EACtE,SAAAJ,EAAoBJ,EAAwBC,CAAsB,CAAA,CAC9D,CACA,CAAA,CAAA,CAAA,CAAA,EAKTS,EAAqBlB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAQ,EAAS,kBAAAP,CAAmB,EAAGZ,EAE/FoB,EAAMC,EAAO,IAAI,EAEjBC,EAAcC,EAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAOK,EAAWxB,EAAM,SAAUyB,GAAQ,CACxC,MAAMf,EAAYe,EAAM,IAAI5B,CAAS,EAErC,OAAIsB,EAEAlB,EAACyB,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,UACA,QAASL,EAAW,SAEpBrB,EAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,CACnB,CAAA,CAAA,CAAA,EAKNX,EAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,CAAiB,CAAA,CAG1C,CAAC,CACH,EAEagB,EAAgB,OAAO,OAAOV,EAAmB,CAAE,UAAArB,CAAS,CAAE"}
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 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' }}>\n {tokenBalanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n </Text>\n <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem' }}>\n {tokenBalanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n </Text>\n </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase: 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","_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,IAEfC,EAACC,EAAM,CAAC,EAAE,OAAO,QAAQ,gBAAgB,QAASF,EAAW,MAAQ,IAAG,SAAA,CACtEC,EAACC,EAAM,CAAC,IAAK,EACV,SAAA,CAAAL,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,EAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAO,CAAA,EAE7DN,EAACe,EAAiB,CAAA,MAAO,GAAI,OAAQ,EAAM,CAAA,EAE7Cf,EAACgB,EAAK,CAAA,WAAW,SAAS,OAAQ,CAAE,cAAe,YAAY,EAC5D,SAAAV,CACI,CAAA,CAAA,CAAA,CAAA,EAETO,EAACI,EAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAjB,EAACgB,EAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,QAAQ,EAC3C,SAAAL,EAAoBH,EAAyBD,CAAqB,CAAA,EAErEP,EAACgB,EAAI,CAAC,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,QAAQ,EACtE,SAAAL,EAAoBJ,EAAwBC,CAAsB,CAAA,CAC9D,CACA,CAAA,CAAA,CAAA,CAAA,EAKTU,EAA+DnB,GAAQ,CAC3E,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAS,EAAS,kBAAAR,EAAmB,SAAAC,CAAU,EAAGb,EAEzGqB,EAAMC,EAAO,IAAI,EAEjBC,EAAcC,EAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAOK,EAAWzB,EAAM,SAAU0B,GAAQ,CACxC,MAAMhB,EAAYgB,EAAM,IAAI7B,CAAS,EAErC,OAAIuB,EAEAnB,EAAC0B,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,QAASf,EAAW,OAAYU,EAChC,SAAUV,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,EAEagB,EAAgB,OAAO,OAAOV,EAAmB,CAAE,UAAAtB,CAAS,CAAE"}
@@ -1,2 +1,2 @@
1
- import{sva as t}from"@styled/css";const a=t({slots:["trigger","content","spacer"],base:{trigger:{position:"relative",w:"auto"},content:{w:"max",maxW:72,color:"text.secondary",bg:"surface.primary",_dark:{bg:"surface.secondary"},position:"absolute",py:2,px:3,rounded:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",zIndex:"max",display:"none"},spacer:{position:"absolute"}},variants:{expand:{true:{trigger:{w:"full"}}},isOpen:{true:{content:{display:"block"}}},placement:{top:{content:{top:"0%",left:"50%",transform:"translateX(-50%) translateY(calc(-100% - 0.75rem))"}},"top left":{content:{top:"0%",right:"100%",transform:"translateX(10%) translateY(calc(-100% - 0.75rem))"}},"top right":{content:{top:"0%",left:"0%",transform:"translateX(-10%) translateY(calc(-100% - 0.75rem))"}},left:{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-50%)"}},"left top":{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-75%)"}},"left bottom":{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-25%)"}},right:{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-50%)"}},"right top":{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-75%)"}},"right bottom":{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-25%)"}},bottom:{content:{bottom:"0%",left:"50%",transform:"translateX(-50%) translateY(calc(100% + 0.75rem))"}},"bottom left":{content:{bottom:"0%",right:"0%",transform:"translateX(10%) translateY(calc(100% + 0.75rem))"}},"bottom right":{content:{bottom:"0%",left:"0%",transform:"translateX(-10%) translateY(calc(100% + 0.75rem))"}}},position:{top:{spacer:{width:72,height:4,bottom:0,left:"50%",transform:"translateX(-50%) translateY(0.75rem)"}},bottom:{spacer:{width:72,height:4,top:0,left:"50%",transform:"translateX(-50%) translateY(-0.75rem)"}},left:{spacer:{width:4,height:48,top:"50%",right:-6,transform:"translateX(-0.75rem) translateY(-50%)"}},right:{spacer:{width:4,height:48,top:"50%",left:-6,transform:"translateX(0.75rem) translateY(-50%)"}}}}});export{a as tooltip};
1
+ import{sva as t}from"@styled/css";const a=t({slots:["trigger","content","spacer"],base:{trigger:{position:"relative",w:"auto"},content:{w:"max",maxW:72,color:"text.secondary",bg:"surface.primary",_dark:{bg:"surface.secondary"},position:"absolute",py:2,px:3,rounded:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",zIndex:"max",display:"none"},spacer:{position:"absolute"}},variants:{expand:{true:{trigger:{w:"full"}}},isOpen:{true:{content:{display:"block"}}},placement:{top:{content:{top:"0%",left:"50%",transform:"translateX(-50%) translateY(calc(-100% - 0.75rem))"}},"top left":{content:{top:"0%",right:"100%",transform:"translateX(10%) translateY(calc(-100% - 0.75rem))"}},"top right":{content:{top:"0%",left:"100%",transform:"translateX(-10%) translateY(calc(-100% - 0.75rem))"}},left:{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-50%)"}},"left top":{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-75%)"}},"left bottom":{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-25%)"}},right:{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-50%)"}},"right top":{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-75%)"}},"right bottom":{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-25%)"}},bottom:{content:{bottom:"0%",left:"50%",transform:"translateX(-50%) translateY(calc(100% + 0.75rem))"}},"bottom left":{content:{bottom:"0%",right:"100%",transform:"translateX(10%) translateY(calc(100% + 0.75rem))"}},"bottom right":{content:{bottom:"0%",left:"100%",transform:"translateX(-10%) translateY(calc(100% + 0.75rem))"}}},position:{top:{spacer:{width:72,height:4,bottom:0,left:"50%",transform:"translateX(-50%) translateY(0.75rem)"}},bottom:{spacer:{width:72,height:4,top:0,left:"50%",transform:"translateX(-50%) translateY(-0.75rem)"}},left:{spacer:{width:4,height:48,top:"50%",right:-6,transform:"translateX(-0.75rem) translateY(-50%)"}},right:{spacer:{width:4,height:48,top:"50%",left:-6,transform:"translateX(0.75rem) translateY(-50%)"}}}}});export{a as tooltip};
2
2
  //# sourceMappingURL=tooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.js","sources":["../../../src/recipes/tooltip.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const tooltip = sva({\n slots: ['trigger', 'content', 'spacer'],\n base: {\n trigger: {\n position: 'relative',\n w: 'auto',\n },\n content: {\n w: 'max',\n maxW: 72,\n color: 'text.secondary',\n bg: 'surface.primary',\n _dark: { bg: 'surface.secondary' },\n position: 'absolute',\n py: 2,\n px: 3,\n rounded: 'xl',\n boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n zIndex: 'max',\n display: 'none',\n },\n spacer: {\n position: 'absolute',\n },\n },\n variants: {\n expand: {\n true: {\n trigger: {\n w: 'full',\n },\n },\n },\n isOpen: {\n true: {\n content: {\n display: 'block',\n },\n },\n },\n placement: {\n top: {\n content: {\n top: '0%',\n left: '50%',\n transform: 'translateX(-50%) translateY(calc(-100% - 0.75rem))',\n },\n },\n 'top left': {\n content: {\n top: '0%',\n right: '100%',\n transform: 'translateX(10%) translateY(calc(-100% - 0.75rem))',\n },\n },\n 'top right': {\n content: {\n top: '0%',\n left: '0%',\n transform: 'translateX(-10%) translateY(calc(-100% - 0.75rem))',\n },\n },\n left: {\n content: {\n top: '50%',\n left: '0%',\n transform: 'translateX(calc(-100% - 0.75rem)) translateY(-50%)',\n },\n },\n 'left top': {\n content: {\n top: '50%',\n left: '0%',\n transform: 'translateX(calc(-100% - 0.75rem)) translateY(-75%)',\n },\n },\n 'left bottom': {\n content: {\n top: '50%',\n left: '0%',\n transform: 'translateX(calc(-100% - 0.75rem)) translateY(-25%)',\n },\n },\n right: {\n content: {\n top: '50%',\n right: '0%',\n transform: 'translateX(calc(100% + 0.75rem)) translateY(-50%)',\n },\n },\n 'right top': {\n content: {\n top: '50%',\n right: '0%',\n transform: 'translateX(calc(100% + 0.75rem)) translateY(-75%)',\n },\n },\n 'right bottom': {\n content: {\n top: '50%',\n right: '0%',\n transform: 'translateX(calc(100% + 0.75rem)) translateY(-25%)',\n },\n },\n bottom: {\n content: {\n bottom: '0%',\n left: '50%',\n transform: 'translateX(-50%) translateY(calc(100% + 0.75rem))',\n },\n },\n 'bottom left': {\n content: {\n bottom: '0%',\n right: '0%',\n transform: 'translateX(10%) translateY(calc(100% + 0.75rem))',\n },\n },\n 'bottom right': {\n content: {\n bottom: '0%',\n left: '0%',\n transform: 'translateX(-10%) translateY(calc(100% + 0.75rem))',\n },\n },\n },\n position: {\n top: {\n spacer: {\n width: 72,\n height: 4,\n bottom: 0,\n left: '50%',\n transform: 'translateX(-50%) translateY(0.75rem)',\n },\n },\n bottom: {\n spacer: {\n width: 72,\n height: 4,\n top: 0,\n left: '50%',\n transform: 'translateX(-50%) translateY(-0.75rem)',\n },\n },\n left: {\n spacer: {\n width: 4,\n height: 48,\n top: '50%',\n right: -6,\n transform: 'translateX(-0.75rem) translateY(-50%)',\n },\n },\n right: {\n spacer: {\n width: 4,\n height: 48,\n top: '50%',\n left: -6,\n transform: 'translateX(0.75rem) translateY(-50%)',\n },\n },\n },\n },\n});\n"],"names":["tooltip","sva"],"mappings":"kCAEO,MAAMA,EAAUC,EAAI,CACzB,MAAO,CAAC,UAAW,UAAW,QAAQ,EACtC,KAAM,CACJ,QAAS,CACP,SAAU,WACV,EAAG,MACJ,EACD,QAAS,CACP,EAAG,MACH,KAAM,GACN,MAAO,iBACP,GAAI,kBACJ,MAAO,CAAE,GAAI,mBAAqB,EAClC,SAAU,WACV,GAAI,EACJ,GAAI,EACJ,QAAS,KACT,UAAW,uCACX,OAAQ,MACR,QAAS,MACV,EACD,OAAQ,CACN,SAAU,UACX,CACF,EACD,SAAU,CACR,OAAQ,CACN,KAAM,CACJ,QAAS,CACP,EAAG,MACJ,CACF,CACF,EACD,OAAQ,CACN,KAAM,CACJ,QAAS,CACP,QAAS,OACV,CACF,CACF,EACD,UAAW,CACT,IAAK,CACH,QAAS,CACP,IAAK,KACL,KAAM,MACN,UAAW,oDACZ,CACF,EACD,WAAY,CACV,QAAS,CACP,IAAK,KACL,MAAO,OACP,UAAW,mDACZ,CACF,EACD,YAAa,CACX,QAAS,CACP,IAAK,KACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,KAAM,CACJ,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,WAAY,CACV,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,cAAe,CACb,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,MAAO,CACL,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,YAAa,CACX,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,eAAgB,CACd,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,OAAQ,CACN,QAAS,CACP,OAAQ,KACR,KAAM,MACN,UAAW,mDACZ,CACF,EACD,cAAe,CACb,QAAS,CACP,OAAQ,KACR,MAAO,KACP,UAAW,kDACZ,CACF,EACD,eAAgB,CACd,QAAS,CACP,OAAQ,KACR,KAAM,KACN,UAAW,mDACZ,CACF,CACF,EACD,SAAU,CACR,IAAK,CACH,OAAQ,CACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,KAAM,MACN,UAAW,sCACZ,CACF,EACD,OAAQ,CACN,OAAQ,CACN,MAAO,GACP,OAAQ,EACR,IAAK,EACL,KAAM,MACN,UAAW,uCACZ,CACF,EACD,KAAM,CACJ,OAAQ,CACN,MAAO,EACP,OAAQ,GACR,IAAK,MACL,MAAO,GACP,UAAW,uCACZ,CACF,EACD,MAAO,CACL,OAAQ,CACN,MAAO,EACP,OAAQ,GACR,IAAK,MACL,KAAM,GACN,UAAW,sCACZ,CACF,CACF,CACF,CACF,CAAA"}
1
+ {"version":3,"file":"tooltip.js","sources":["../../../src/recipes/tooltip.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const tooltip = sva({\n slots: ['trigger', 'content', 'spacer'],\n base: {\n trigger: {\n position: 'relative',\n w: 'auto',\n },\n content: {\n w: 'max',\n maxW: 72,\n color: 'text.secondary',\n bg: 'surface.primary',\n _dark: { bg: 'surface.secondary' },\n position: 'absolute',\n py: 2,\n px: 3,\n rounded: 'xl',\n boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n zIndex: 'max',\n display: 'none',\n },\n spacer: {\n position: 'absolute',\n },\n },\n variants: {\n expand: {\n true: {\n trigger: {\n w: 'full',\n },\n },\n },\n isOpen: {\n true: {\n content: {\n display: 'block',\n },\n },\n },\n placement: {\n top: {\n content: {\n top: '0%',\n left: '50%',\n transform: 'translateX(-50%) translateY(calc(-100% - 0.75rem))',\n },\n },\n 'top left': {\n content: {\n top: '0%',\n right: '100%',\n transform: 'translateX(10%) translateY(calc(-100% - 0.75rem))',\n },\n },\n 'top right': {\n content: {\n top: '0%',\n left: '100%',\n transform: 'translateX(-10%) translateY(calc(-100% - 0.75rem))',\n },\n },\n left: {\n content: {\n top: '50%',\n left: '0%',\n transform: 'translateX(calc(-100% - 0.75rem)) translateY(-50%)',\n },\n },\n 'left top': {\n content: {\n top: '50%',\n left: '0%',\n transform: 'translateX(calc(-100% - 0.75rem)) translateY(-75%)',\n },\n },\n 'left bottom': {\n content: {\n top: '50%',\n left: '0%',\n transform: 'translateX(calc(-100% - 0.75rem)) translateY(-25%)',\n },\n },\n right: {\n content: {\n top: '50%',\n right: '0%',\n transform: 'translateX(calc(100% + 0.75rem)) translateY(-50%)',\n },\n },\n 'right top': {\n content: {\n top: '50%',\n right: '0%',\n transform: 'translateX(calc(100% + 0.75rem)) translateY(-75%)',\n },\n },\n 'right bottom': {\n content: {\n top: '50%',\n right: '0%',\n transform: 'translateX(calc(100% + 0.75rem)) translateY(-25%)',\n },\n },\n bottom: {\n content: {\n bottom: '0%',\n left: '50%',\n transform: 'translateX(-50%) translateY(calc(100% + 0.75rem))',\n },\n },\n 'bottom left': {\n content: {\n bottom: '0%',\n right: '100%',\n transform: 'translateX(10%) translateY(calc(100% + 0.75rem))',\n },\n },\n 'bottom right': {\n content: {\n bottom: '0%',\n left: '100%',\n transform: 'translateX(-10%) translateY(calc(100% + 0.75rem))',\n },\n },\n },\n position: {\n top: {\n spacer: {\n width: 72,\n height: 4,\n bottom: 0,\n left: '50%',\n transform: 'translateX(-50%) translateY(0.75rem)',\n },\n },\n bottom: {\n spacer: {\n width: 72,\n height: 4,\n top: 0,\n left: '50%',\n transform: 'translateX(-50%) translateY(-0.75rem)',\n },\n },\n left: {\n spacer: {\n width: 4,\n height: 48,\n top: '50%',\n right: -6,\n transform: 'translateX(-0.75rem) translateY(-50%)',\n },\n },\n right: {\n spacer: {\n width: 4,\n height: 48,\n top: '50%',\n left: -6,\n transform: 'translateX(0.75rem) translateY(-50%)',\n },\n },\n },\n },\n});\n"],"names":["tooltip","sva"],"mappings":"kCAEO,MAAMA,EAAUC,EAAI,CACzB,MAAO,CAAC,UAAW,UAAW,QAAQ,EACtC,KAAM,CACJ,QAAS,CACP,SAAU,WACV,EAAG,MACJ,EACD,QAAS,CACP,EAAG,MACH,KAAM,GACN,MAAO,iBACP,GAAI,kBACJ,MAAO,CAAE,GAAI,mBAAqB,EAClC,SAAU,WACV,GAAI,EACJ,GAAI,EACJ,QAAS,KACT,UAAW,uCACX,OAAQ,MACR,QAAS,MACV,EACD,OAAQ,CACN,SAAU,UACX,CACF,EACD,SAAU,CACR,OAAQ,CACN,KAAM,CACJ,QAAS,CACP,EAAG,MACJ,CACF,CACF,EACD,OAAQ,CACN,KAAM,CACJ,QAAS,CACP,QAAS,OACV,CACF,CACF,EACD,UAAW,CACT,IAAK,CACH,QAAS,CACP,IAAK,KACL,KAAM,MACN,UAAW,oDACZ,CACF,EACD,WAAY,CACV,QAAS,CACP,IAAK,KACL,MAAO,OACP,UAAW,mDACZ,CACF,EACD,YAAa,CACX,QAAS,CACP,IAAK,KACL,KAAM,OACN,UAAW,oDACZ,CACF,EACD,KAAM,CACJ,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,WAAY,CACV,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,cAAe,CACb,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,MAAO,CACL,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,YAAa,CACX,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,eAAgB,CACd,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,OAAQ,CACN,QAAS,CACP,OAAQ,KACR,KAAM,MACN,UAAW,mDACZ,CACF,EACD,cAAe,CACb,QAAS,CACP,OAAQ,KACR,MAAO,OACP,UAAW,kDACZ,CACF,EACD,eAAgB,CACd,QAAS,CACP,OAAQ,KACR,KAAM,OACN,UAAW,mDACZ,CACF,CACF,EACD,SAAU,CACR,IAAK,CACH,OAAQ,CACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,KAAM,MACN,UAAW,sCACZ,CACF,EACD,OAAQ,CACN,OAAQ,CACN,MAAO,GACP,OAAQ,EACR,IAAK,EACL,KAAM,MACN,UAAW,uCACZ,CACF,EACD,KAAM,CACJ,OAAQ,CACN,MAAO,EACP,OAAQ,GACR,IAAK,MACL,MAAO,GACP,UAAW,uCACZ,CACF,EACD,MAAO,CACL,OAAQ,CACN,MAAO,EACP,OAAQ,GACR,IAAK,MACL,KAAM,GACN,UAAW,sCACZ,CACF,CACF,CACF,CACF,CAAA"}
@@ -1 +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: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","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.darkest]___[cond:_groupHover","color]___[value:ruby.70]___[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","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.secondary]___[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:0%","transform]___[value:translateX(-10%) translateY(calc(-100% - 0.75rem))","top]___[value:50%","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","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","borderRadius]___[value:3xl","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","color]___[value:positive.darker","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","objectFit]___[value:cover","borderStartRadius]___[value:input","width]___[value:20","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","gap]___[value:2","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","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","width]___[value:40","height]___[value:40","background]___[value:surface.tertiary]___[cond:_dark","minHeight]___[value:16","width]___[value:16","height]___[value:16","borderRadius]___[value:0.75rem","opacity]___[value:1","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","opacity]___[value:0.5","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","height]___[value:76px","maxWidth]___[value:115px","height]___[value:100%","minWidth]___[value:20","paddingInline]___[value:10","pointerEvents]___[value:initial","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","textStyle]___[value:negative","width]___[value:114px","height]___[value:48px","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":{}}}
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: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","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.darkest]___[cond:_groupHover","color]___[value:ruby.70]___[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","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.secondary]___[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","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","borderRadius]___[value:3xl","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","color]___[value:positive.darker","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","objectFit]___[value:cover","borderStartRadius]___[value:input","width]___[value:20","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","gap]___[value:2","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","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","background]___[value:surface.tertiary]___[cond:_dark","minHeight]___[value:16","width]___[value:16","height]___[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","height]___[value:76px","maxWidth]___[value:115px","height]___[value:100%","minWidth]___[value:20","paddingInline]___[value:10","pointerEvents]___[value:initial","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","textStyle]___[value:negative","width]___[value:114px","height]___[value:48px","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":{}}}
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import { FC, PropsWithChildren } from 'react';
2
2
  import { AriaButtonProps } from 'react-aria';
3
3
  export interface TokenListItemProps extends AriaButtonProps {
4
4
  name: string;
@@ -7,8 +7,9 @@ export interface TokenListItemProps extends AriaButtonProps {
7
7
  logoUrl?: string;
8
8
  onPress?: () => void;
9
9
  tokenBalanceFirst?: boolean;
10
+ disabled?: boolean;
10
11
  }
11
- export declare const TokenListItem: ((props: TokenListItemProps) => JSX.Element) & {
12
+ export declare const TokenListItem: FC<PropsWithChildren<TokenListItemProps>> & {
12
13
  TokenIcon: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;
13
14
  };
14
15
  //# sourceMappingURL=token-list-item.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"token-list-item.d.ts","sourceRoot":"","sources":["../../../../src/components/list-items/token-list-item.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB,EAAE,MAAM,CAAC;IAC9B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AA6GD,eAAO,MAAM,aAAa,WApDQ,kBAAkB;;CAoDwB,CAAC"}
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,EAAE,MAAM,CAAC;IAC9B,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;AAiHD,eAAO,MAAM,aAAa;;CAAkD,CAAC"}
@@ -31,7 +31,7 @@ export declare const tooltip: import("../../styled-system/types").SlotRecipeRunt
31
31
  'top right': {
32
32
  content: {
33
33
  top: "0%";
34
- left: "0%";
34
+ left: "100%";
35
35
  transform: "translateX(-10%) translateY(calc(-100% - 0.75rem))";
36
36
  };
37
37
  };
@@ -87,14 +87,14 @@ export declare const tooltip: import("../../styled-system/types").SlotRecipeRunt
87
87
  'bottom left': {
88
88
  content: {
89
89
  bottom: "0%";
90
- right: "0%";
90
+ right: "100%";
91
91
  transform: "translateX(10%) translateY(calc(100% + 0.75rem))";
92
92
  };
93
93
  };
94
94
  'bottom right': {
95
95
  content: {
96
96
  bottom: "0%";
97
- left: "0%";
97
+ left: "100%";
98
98
  transform: "translateX(-10%) translateY(calc(100% + 0.75rem))";
99
99
  };
100
100
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magiclabs/ui-components",
3
- "version": "1.34.1",
3
+ "version": "1.34.3",
4
4
  "description": "💅 A theme-able library of reusable UI components",
5
5
  "author": "Magic Labs <open-source@magic.link>",
6
6
  "repository": {
@@ -132,7 +132,7 @@
132
132
  "rollup-plugin-visualizer": "^5.12.0",
133
133
  "storybook": "^8.3.0",
134
134
  "storybook-addon-deep-controls": "^0.6.2",
135
- "storybook-dark-mode": "^4.0.1",
135
+ "storybook-dark-mode": "^4.0.2",
136
136
  "ts-jest": "^29.1.4",
137
137
  "ts-node": "^10.9.2",
138
138
  "tsx": "^4.15.1",