@magiclabs/ui-components 1.13.2 → 1.13.4

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, useCallback, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n  name: string;\n  symbol: string;\n  USDBalance: string;\n  tokenBalance: number;\n  onPress?: () => void;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n  tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({ name, USDBalance, tokenBalance, symbol, tokenIcon }: ListContentProps) => {\n  return (\n    <HStack w=\"full\" justify=\"space-between\">\n      <HStack gap={2}>\n        {tokenIcon ? (\n          {\n            ...tokenIcon,\n            props: {\n              ...tokenIcon.props,\n              width: 30,\n              height: 30,\n            },\n          }\n        ) : (\n          <IconGenericToken width={30} height={30} />\n        )}\n        <Text styles={{ fontWeight: '500', textTransform: 'capitalize' }}>{name}</Text>\n      </HStack>\n      <VStack gap={0} alignItems=\"flex-end\">\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem', fontWeight: '500' }}>\n          {USDBalance}\n        </Text>\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem', color: token('colors.text.secondary') }}>\n          {tokenBalance} {symbol.toUpperCase()}\n        </Text>\n      </VStack>\n    </HStack>\n  );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n  const { name, symbol, USDBalance, tokenBalance, onPress } = props;\n\n  const ref = useRef(null);\n\n  const handlePress = useCallback(() => {\n    onPress?.();\n  }, [onPress]);\n\n  const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const tokenIcon = slots.get(TokenIcon);\n\n    if (onPress)\n      return (\n        <button\n          ref={ref}\n          {...mergeProps(buttonProps, focusProps)}\n          className={css({\n            w: 'full',\n            p: 4,\n            minH: 20,\n            bg: 'neutral.quaternary',\n            transition: 'background-color 0.2s',\n            _hover: { bg: 'neutral.secondary' },\n            rounded: 'lg',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 1,\n            cursor: 'pointer',\n          })}\n        >\n          <ListContent\n            name={name}\n            symbol={symbol}\n            USDBalance={USDBalance}\n            tokenBalance={tokenBalance}\n            tokenIcon={tokenIcon}\n          />\n        </button>\n      );\n\n    return (\n      <ListContent\n        name={name}\n        symbol={symbol}\n        USDBalance={USDBalance}\n        tokenBalance={tokenBalance}\n        tokenIcon={tokenIcon}\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","USDBalance","tokenBalance","symbol","tokenIcon","_jsxs","HStack","IconGenericToken","Text","VStack","token","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","mergeProps","css","TokenListItem"],"mappings":"qfAiBA,MAAMA,EAAYC,EAAW,WAAA,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,MAACC,EAAM,OAAA,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAAA,aAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CAAE,KAAAC,EAAM,WAAAC,EAAY,aAAAC,EAAc,OAAAC,EAAQ,UAAAC,CAAS,IAEpEC,EAAAA,KAACC,EAAAA,OAAM,CAAC,EAAE,OAAO,QAAQ,0BACvBD,EAAAA,KAACC,EAAAA,OAAO,CAAA,IAAK,YACVF,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,GAGHV,EAAAA,IAACa,EAAAA,QAAgB,CAAC,MAAO,GAAI,OAAQ,KAEvCb,EAAAA,IAACc,EAAI,QAAA,CAAC,OAAQ,CAAE,WAAY,MAAO,cAAe,cAAiB,SAAAR,CAAY,CAAA,CAAA,CAAA,CAAA,EAEjFK,EAAAA,KAACI,SAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAf,MAACc,EAAI,QAAA,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,WAAY,KAAO,EAAA,SAChEP,CACI,CAAA,EACPI,EAAAA,KAACG,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,MAAOE,EAAAA,MAAM,uBAAuB,GACjF,SAAA,CAAAR,EAAe,IAAAC,EAAO,aAAa,CAC/B,CAAA,CAAA,CAAA,CAAA,CACA,CACF,CAAA,EAIPQ,EAAqBlB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,OAAAG,EAAQ,WAAAF,EAAY,aAAAC,EAAc,QAAAU,CAAS,EAAGnB,EAEtDoB,EAAMC,EAAO,OAAA,IAAI,EAEjBC,EAAcC,EAAAA,YAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEN,CAAE,YAAAK,CAAW,EAAKC,EAAAA,UAAU,CAAE,GAAGzB,EAAO,QAASsB,GAAeF,CAAG,EACnE,CAAE,eAAAM,EAAgB,WAAAC,GAAeC,iBAEvC,OAAOC,aAAW7B,EAAM,SAAU8B,GAAQ,CACxC,MAAMnB,EAAYmB,EAAM,IAAIjC,CAAS,EAErC,OAAIsB,EAEAlB,EAAAA,IACE,SAAA,CAAA,IAAKmB,KACDW,EAAAA,WAAWP,EAAaG,CAAU,EACtC,UAAWK,EAAAA,IAAI,CACb,EAAG,OACH,EAAG,EACH,KAAM,GACN,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,aAAc,aACd,aAAcN,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,EACf,OAAQ,UACT,EAAC,SAEFzB,EAAAA,IAACK,EACC,CAAA,KAAMC,EACN,OAAQG,EACR,WAAYF,EACZ,aAAcC,EACd,UAAWE,CAAS,CAAA,CAEf,CAAA,EAIXV,EAAAA,IAACK,EACC,CAAA,KAAMC,EACN,OAAQG,EACR,WAAYF,EACZ,aAAcC,EACd,UAAWE,CACX,CAAA,CAEN,CAAC,CACH,EAEasB,EAAgB,OAAO,OAAOf,EAAmB,CAAE,UAAArB,CAAS,CAAE"}
+{"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, useCallback, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n  name: string;\n  symbol: string;\n  USDBalance: string;\n  tokenBalance: number;\n  logoUrl?: string;\n  onPress?: () => void;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n  tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({ name, USDBalance, tokenBalance, symbol, tokenIcon, logoUrl }: ListContentProps) => {\n  return (\n    <HStack w=\"full\" justify=\"space-between\">\n      <HStack gap={2}>\n        {tokenIcon ? (\n          {\n            ...tokenIcon,\n            props: {\n              ...tokenIcon.props,\n              width: 30,\n              height: 30,\n            },\n          }\n        ) : logoUrl ? (\n          <img width={30} height={30} src={logoUrl} alt={`${name} logo`} />\n        ) : (\n          <IconGenericToken width={30} height={30} />\n        )}\n        <Text styles={{ fontWeight: '500', textTransform: 'capitalize' }}>{name}</Text>\n      </HStack>\n      <VStack gap={0} alignItems=\"flex-end\">\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem', fontWeight: '500' }}>\n          {USDBalance}\n        </Text>\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem', color: token('colors.text.secondary') }}>\n          {tokenBalance} {symbol.toUpperCase()}\n        </Text>\n      </VStack>\n    </HStack>\n  );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n  const { name, symbol, USDBalance, tokenBalance, logoUrl, onPress } = props;\n\n  const ref = useRef(null);\n\n  const handlePress = useCallback(() => {\n    onPress?.();\n  }, [onPress]);\n\n  const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const tokenIcon = slots.get(TokenIcon);\n\n    if (onPress)\n      return (\n        <button\n          ref={ref}\n          {...mergeProps(buttonProps, focusProps)}\n          className={css({\n            w: 'full',\n            p: 4,\n            minH: 20,\n            bg: 'neutral.quaternary',\n            transition: 'background-color 0.2s',\n            _hover: { bg: 'neutral.secondary' },\n            rounded: 'lg',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 1,\n            cursor: 'pointer',\n          })}\n        >\n          <ListContent\n            name={name}\n            symbol={symbol}\n            USDBalance={USDBalance}\n            tokenBalance={tokenBalance}\n            tokenIcon={tokenIcon}\n            logoUrl={logoUrl}\n          />\n        </button>\n      );\n\n    return (\n      <ListContent\n        name={name}\n        symbol={symbol}\n        USDBalance={USDBalance}\n        tokenBalance={tokenBalance}\n        tokenIcon={tokenIcon}\n        logoUrl={logoUrl}\n      />\n    );\n  });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","USDBalance","tokenBalance","symbol","tokenIcon","logoUrl","_jsxs","HStack","IconGenericToken","Text","VStack","token","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","mergeProps","css","TokenListItem"],"mappings":"qfAkBA,MAAMA,EAAYC,aAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAAAA,IAACC,EAAAA,OAAM,CAAA,SACJC,WAAS,IAAIJ,EAAUK,GACfC,eAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CAAE,KAAAC,EAAM,WAAAC,EAAY,aAAAC,EAAc,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,CAAO,IAE7EC,OAACC,EAAM,OAAA,CAAC,EAAE,OAAO,QAAQ,0BACvBD,EAAAA,KAACC,EAAAA,OAAO,CAAA,IAAK,YACVH,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFX,EAAAA,IAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKW,EAAS,IAAK,GAAGL,CAAI,OAAW,CAAA,EAEjEN,MAACc,EAAAA,QAAgB,CAAC,MAAO,GAAI,OAAQ,EAAE,CAAA,EAEzCd,EAAAA,IAACe,EAAAA,QAAK,CAAA,OAAQ,CAAE,WAAY,MAAO,cAAe,YAAY,EAAK,SAAAT,GAAY,CACxE,CAAA,EACTM,EAAAA,KAACI,EAAAA,OAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAhB,EAAAA,IAACe,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,WAAY,KAAO,EAAA,SAChER,CACI,CAAA,EACPK,EAACG,KAAAA,EAAAA,QAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,MAAOE,EAAAA,MAAM,uBAAuB,CAAC,EAClF,SAAA,CAAAT,EAAe,IAAAC,EAAO,YAAA,CAAa,CAAA,CAAA,CAC/B,CACA,CAAA,CAAA,CAAA,CAAA,EAKTS,EAAqBnB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,OAAAG,EAAQ,WAAAF,EAAY,aAAAC,EAAc,QAAAG,EAAS,QAAAQ,CAAS,EAAGpB,EAE/DqB,EAAMC,EAAAA,OAAO,IAAI,EAEjBC,EAAcC,EAAY,YAAA,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEN,CAAE,YAAAK,CAAW,EAAKC,EAAAA,UAAU,CAAE,GAAG1B,EAAO,QAASuB,GAAeF,CAAG,EACnE,CAAE,eAAAM,EAAgB,WAAAC,GAAeC,EAAAA,aAEvC,EAAA,OAAOC,aAAW9B,EAAM,SAAU+B,GAAQ,CACxC,MAAMpB,EAAYoB,EAAM,IAAIlC,CAAS,EAErC,OAAIuB,EAEAnB,EAAAA,IACE,SAAA,CAAA,IAAKoB,KACDW,aAAWP,EAAaG,CAAU,EACtC,UAAWK,EAAAA,IAAI,CACb,EAAG,OACH,EAAG,EACH,KAAM,GACN,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,aAAc,aACd,aAAcN,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,EACf,OAAQ,SACT,CAAA,EAED,SAAA1B,MAACK,EAAW,CACV,KAAMC,EACN,OAAQG,EACR,WAAYF,EACZ,aAAcC,EACd,UAAWE,EACX,QAASC,CACT,CAAA,CAAA,CAAA,EAKNX,EAACK,IAAAA,EAAW,CACV,KAAMC,EACN,OAAQG,EACR,WAAYF,EACZ,aAAcC,EACd,UAAWE,EACX,QAASC,CAAO,CAAA,CAGtB,CAAC,CACH,EAEasB,EAAgB,OAAO,OAAOf,EAAmB,CAAE,UAAAtB,CAAS,CAAE"}

package/dist/cjs/components/primitives/segmented-control.js

@@ -1,2 +1,2 @@
-"use strict";var u=require("react/jsx-runtime"),C=require("@styled/css"),f=require("@styled/jsx"),v=require("create-slots"),e=require("react"),h=require("react-aria");const j=e.createContext({currentTab:void 0,setCurrentTab:()=>{},tabRefs:{current:{}}}),y=v.createSlot(({children:a,...d})=>u.jsx(f.Flex,{alignItems:"center",justifyContent:"center",children:e.Children.map(a,o=>e.cloneElement(o,d))})),k=a=>{const{children:d,onChange:o,selectedTab:t,size:b="md"}=a,[r,i]=e.useState(t),s=e.useRef({}),[n,x]=e.useState({transform:"translateX(4px)",width:"",height:""});e.useEffect(()=>{t!==void 0&&i(t)},[t]),e.useEffect(()=>{if(r&&s.current[r]){const{offsetLeft:c,clientWidth:l,clientHeight:m}=s.current[r];x({transform:`translateX(${c}px)`,width:`${l}px`,height:`${m}px`})}},[r,b]);const p=e.useCallback(c=>{i(c),o(c)},[i,o]);return u.jsxs(f.Flex,{w:"full",role:"tablist",p:1,rounded:"full",bg:"ink.10",_dark:{bg:"slate.2"},"aria-label":"Segmented Control",position:"relative",children:[u.jsx(f.Box,{position:"absolute",bg:"paper",_dark:{bg:"slate.4"},boxShadow:"0px 4px 20px 0px {colors.ink.90/10}",transition:"transform 0.2s ease, width 0.2s ease",rounded:"inherit",ml:-1,style:{...n}}),u.jsx(j.Provider,{value:{currentTab:r,setCurrentTab:p,size:b,tabRefs:s},children:d})]})},S=e.forwardRef((a,d)=>{const{label:o,id:t}=a,{currentTab:b,setCurrentTab:r,tabRefs:i,size:s}=e.useContext(j),n=b===t,x=s==="sm"?8:s==="md"?10:13,p=s==="sm"?16:20,c=e.useRef(null),l=d||c;e.useEffect(()=>{typeof l=="object"&&i.current&&(i.current[t]=l.current)},[t]);const m=e.useCallback(()=>{r(t)},[r,t]),{buttonProps:w,isPressed:T}=h.useButton({onPress:m},l),{hoverProps:R}=h.useHover({}),{isFocusVisible:P,focusProps:q}=h.useFocusRing();return v.createHost(a.children,z=>{const g=z.get(y);return u.jsx("button",{className:C.css({display:"flex",justifyContent:"center",alignItems:"center",h:x,w:"full",rounded:"button",zIndex:0,cursor:"pointer",color:n?"text.primary":"text.secondary",fontSize:s,fontWeight:"semibold",whiteSpace:"nowrap",bg:"transparent",outlineColor:P?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",transition:n?"background 0s":"background 0.2s ease",_hover:{bg:n?"transparent":"ink.20",_dark:{bg:n?"transparent":"slate.1"}}}),ref:l,...h.mergeProps(w,R,q),children:u.jsxs(f.Flex,{opacity:T&&!n?.5:1,align:"center",justify:"center",children:[g&&{...g,props:{...g.props,className:C.css({mr:1,color:n?"text.primary":"text.secondary"}),width:p,height:p}},o]})})})}),F=Object.assign(S,{Icon:y});S.displayName="Tab",k.displayName="SegmentedControl",exports.SegmentedControl=k,exports.Tab=F;
+"use strict";var l=require("react/jsx-runtime"),C=require("@styled/css"),h=require("@styled/jsx"),j=require("create-slots"),e=require("react"),x=require("react-aria");const y=e.createContext({currentTab:void 0,setCurrentTab:()=>{},tabRefs:{current:{}}}),k=j.createSlot(({children:a,...u})=>l.jsx(h.Flex,{alignItems:"center",justifyContent:"center",children:e.Children.map(a,i=>e.cloneElement(i,u))})),S=a=>{const{children:u,onChange:i,selectedTab:o,size:f="md"}=a,[t,c]=e.useState(o),r=e.useRef({}),n=e.useRef(),[g,d]=e.useState({transform:"translateX(4px)",width:"",height:""});e.useEffect(()=>{o!==void 0&&c(o)},[o]),e.useEffect(()=>(n.current||(n.current=new ResizeObserver(()=>{const{offsetLeft:s,clientWidth:b,clientHeight:p}=r.current[t];d({transform:`translateX(${s}px)`,width:`${b}px`,height:`${p}px`})})),n.current.observe(r.current[t]),()=>{n.current&&r.current[t]&&n.current.unobserve(r.current[t])}),[]),e.useEffect(()=>{if(t&&r.current[t]){const{offsetLeft:s,clientWidth:b,clientHeight:p}=r.current[t];d({transform:`translateX(${s}px)`,width:`${b}px`,height:`${p}px`})}},[t,f]);const m=e.useCallback(s=>{c(s),i(s)},[c,i]);return l.jsxs(h.Flex,{w:"full",role:"tablist",p:1,rounded:"full",bg:"ink.10",_dark:{bg:"slate.2"},"aria-label":"Segmented Control",position:"relative",children:[l.jsx(h.Box,{position:"absolute",bg:"paper",_dark:{bg:"slate.4"},boxShadow:"0px 4px 20px 0px {colors.ink.90/10}",transition:"transform 0.2s ease",rounded:"inherit",ml:-1,style:{...g}}),l.jsx(y.Provider,{value:{currentTab:t,setCurrentTab:m,size:f,tabRefs:r},children:u})]})},w=e.forwardRef((a,u)=>{const{label:i,id:o}=a,{currentTab:f,setCurrentTab:t,tabRefs:c,size:r}=e.useContext(y),n=f===o,g=r==="sm"?8:r==="md"?10:13,d=r==="sm"?16:20,m=e.useRef(null),s=u||m;e.useEffect(()=>{typeof s=="object"&&c.current&&(c.current[o]=s.current)},[o]);const b=e.useCallback(()=>{t(o)},[t,o]),{buttonProps:p,isPressed:R}=x.useButton({onPress:b},s),{hoverProps:T}=x.useHover({}),{isFocusVisible:P,focusProps:z}=x.useFocusRing();return j.createHost(a.children,q=>{const v=q.get(k);return l.jsx("button",{className:C.css({display:"flex",justifyContent:"center",alignItems:"center",h:g,w:"full",rounded:"button",zIndex:0,cursor:"pointer",color:n?"text.primary":"text.secondary",fontSize:r,fontWeight:"semibold",whiteSpace:"nowrap",bg:"transparent",outlineColor:P?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",transition:n?"background 0s":"background 0.2s ease",_hover:{bg:n?"transparent":"ink.20",_dark:{bg:n?"transparent":"slate.1"}}}),ref:s,...x.mergeProps(p,T,z),children:l.jsxs(h.Flex,{opacity:R&&!n?.5:1,align:"center",justify:"center",children:[v&&{...v,props:{...v.props,className:C.css({mr:1,color:n?"text.primary":"text.secondary"}),width:d,height:d}},i]})})})}),$=Object.assign(w,{Icon:k});w.displayName="Tab",S.displayName="SegmentedControl",exports.SegmentedControl=S,exports.Tab=$;
 //# sourceMappingURL=segmented-control.js.map

package/dist/cjs/components/primitives/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","sources":["../../../../src/components/primitives/segmented-control.tsx"],"sourcesContent":["import { css } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, {\n  Children,\n  RefObject,\n  cloneElement,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useHover } from 'react-aria';\n\nexport interface SegmentedControlProps {\n  children: React.ReactNode;\n  onChange: (value: string) => void;\n  selectedTab: string;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport interface TabProps extends AriaButtonProps {\n  label: string;\n  id: string;\n}\n\ntype TabRefs = {\n  [key: string]: HTMLButtonElement | null;\n};\n\nconst SegmentedControlContext = createContext<{\n  currentTab: string | undefined;\n  setCurrentTab: (id: string) => void;\n  size?: 'sm' | 'md' | 'lg';\n  tabRefs: RefObject<TabRefs>;\n}>({\n  currentTab: undefined,\n  setCurrentTab: () => {},\n  tabRefs: { current: {} },\n});\n\nconst Icon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nexport const SegmentedControl = (props: SegmentedControlProps) => {\n  const { children, onChange, selectedTab, size = 'md' } = props;\n  const [currentTab, setCurrentTab] = useState(selectedTab);\n  const tabRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});\n  const [indicatorStyle, setIndicatorStyle] = useState({ transform: 'translateX(4px)', width: '', height: '' });\n\n  useEffect(() => {\n    if (selectedTab !== undefined) {\n      setCurrentTab(selectedTab);\n    }\n  }, [selectedTab]);\n\n  useEffect(() => {\n    if (currentTab && tabRefs.current[currentTab]) {\n      const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n      setIndicatorStyle({\n        transform: `translateX(${offsetLeft}px)`,\n        width: `${clientWidth}px`,\n        height: `${clientHeight}px`,\n      });\n    }\n  }, [currentTab, size]);\n\n  const handleSelect = useCallback(\n    (id: string) => {\n      setCurrentTab(id);\n      onChange(id);\n    },\n    [setCurrentTab, onChange],\n  );\n\n  return (\n    <Flex\n      w=\"full\"\n      role=\"tablist\"\n      p={1}\n      rounded=\"full\"\n      bg=\"ink.10\"\n      _dark={{ bg: 'slate.2' }}\n      aria-label=\"Segmented Control\"\n      position=\"relative\"\n    >\n      <Box\n        position=\"absolute\"\n        bg=\"paper\"\n        _dark={{ bg: 'slate.4' }}\n        boxShadow=\"0px 4px 20px 0px {colors.ink.90/10}\"\n        transition=\"transform 0.2s ease, width 0.2s ease\"\n        rounded=\"inherit\"\n        ml={-1}\n        style={{ ...indicatorStyle }}\n      />\n      <SegmentedControlContext.Provider value={{ currentTab, setCurrentTab: handleSelect, size, tabRefs }}>\n        {children}\n      </SegmentedControlContext.Provider>\n    </Flex>\n  );\n};\n\nconst TabComponent = forwardRef<HTMLButtonElement, TabProps>((props, forwardedRef) => {\n  const { label, id } = props;\n  const { currentTab, setCurrentTab, tabRefs, size } = useContext(SegmentedControlContext);\n\n  const isSelected = currentTab === id;\n  const height = size === 'sm' ? 8 : size === 'md' ? 10 : 13;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef<HTMLButtonElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  useEffect(() => {\n    if (typeof ref === 'object' && tabRefs.current) {\n      tabRefs.current[id] = ref.current;\n    }\n  }, [id]);\n\n  const handlePress = useCallback(() => {\n    setCurrentTab(id);\n  }, [setCurrentTab, id]);\n\n  const { buttonProps, isPressed } = useButton({ onPress: handlePress }, ref as React.RefObject<HTMLButtonElement>);\n  const { hoverProps } = useHover({});\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const icon = slots.get(Icon);\n\n    return (\n      <button\n        className={css({\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          h: height,\n          w: 'full',\n          rounded: 'button',\n          zIndex: 0,\n          cursor: 'pointer',\n          color: isSelected ? 'text.primary' : 'text.secondary',\n          fontSize: size,\n          fontWeight: 'semibold',\n          whiteSpace: 'nowrap',\n          bg: 'transparent',\n          outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n          outlineStyle: 'solid',\n          outlineWidth: 'thick',\n          transition: isSelected ? 'background 0s' : 'background 0.2s ease',\n          _hover: {\n            bg: isSelected ? 'transparent' : 'ink.20',\n            _dark: { bg: isSelected ? 'transparent' : 'slate.1' },\n          },\n        })}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n      >\n        <Flex opacity={isPressed && !isSelected ? 0.5 : 1} align=\"center\" justify=\"center\">\n          {icon && {\n            ...icon,\n            props: {\n              ...icon.props,\n              className: css({ mr: 1, color: isSelected ? 'text.primary' : 'text.secondary' }),\n              width: iconSize,\n              height: iconSize,\n            },\n          }}\n          {label}\n        </Flex>\n      </button>\n    );\n  });\n});\n\nexport const Tab = Object.assign(TabComponent, {\n  Icon,\n});\n\nTabComponent.displayName = 'Tab';\nSegmentedControl.displayName = 'SegmentedControl';\n"],"names":["SegmentedControlContext","createContext","Icon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","SegmentedControl","onChange","selectedTab","size","currentTab","setCurrentTab","useState","tabRefs","useRef","indicatorStyle","setIndicatorStyle","useEffect","offsetLeft","clientWidth","clientHeight","handleSelect","useCallback","id","_jsxs","Box","TabComponent","forwardRef","forwardedRef","label","useContext","isSelected","height","iconSize","internalRef","ref","handlePress","buttonProps","isPressed","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","icon","css","mergeProps","Tab"],"mappings":"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"}
+{"version":3,"file":"segmented-control.js","sources":["../../../../src/components/primitives/segmented-control.tsx"],"sourcesContent":["import { css } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, {\n  Children,\n  RefObject,\n  cloneElement,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useHover } from 'react-aria';\n\nexport interface SegmentedControlProps {\n  children: React.ReactNode;\n  onChange: (value: string) => void;\n  selectedTab: string;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport interface TabProps extends AriaButtonProps {\n  label: string;\n  id: string;\n}\n\ntype TabRefs = {\n  [key: string]: HTMLButtonElement | null;\n};\n\nconst SegmentedControlContext = createContext<{\n  currentTab: string | undefined;\n  setCurrentTab: (id: string) => void;\n  size?: 'sm' | 'md' | 'lg';\n  tabRefs: RefObject<TabRefs>;\n}>({\n  currentTab: undefined,\n  setCurrentTab: () => {},\n  tabRefs: { current: {} },\n});\n\nconst Icon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nexport const SegmentedControl = (props: SegmentedControlProps) => {\n  const { children, onChange, selectedTab, size = 'md' } = props;\n  const [currentTab, setCurrentTab] = useState(selectedTab);\n  const tabRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});\n  const observer = useRef<ResizeObserver>();\n  const [indicatorStyle, setIndicatorStyle] = useState({ transform: 'translateX(4px)', width: '', height: '' });\n\n  useEffect(() => {\n    if (selectedTab !== undefined) {\n      setCurrentTab(selectedTab);\n    }\n  }, [selectedTab]);\n\n  useEffect(() => {\n    if (!observer.current) {\n      observer.current = new ResizeObserver(() => {\n        const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n        setIndicatorStyle({\n          transform: `translateX(${offsetLeft}px)`,\n          width: `${clientWidth}px`,\n          height: `${clientHeight}px`,\n        });\n      });\n    }\n\n    observer.current.observe(tabRefs.current[currentTab]!);\n\n    return () => {\n      if (observer.current && tabRefs.current[currentTab]) {\n        observer.current.unobserve(tabRefs.current[currentTab]!);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    if (currentTab && tabRefs.current[currentTab]) {\n      const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n      setIndicatorStyle({\n        transform: `translateX(${offsetLeft}px)`,\n        width: `${clientWidth}px`,\n        height: `${clientHeight}px`,\n      });\n    }\n  }, [currentTab, size]);\n\n  const handleSelect = useCallback(\n    (id: string) => {\n      setCurrentTab(id);\n      onChange(id);\n    },\n    [setCurrentTab, onChange],\n  );\n\n  return (\n    <Flex\n      w=\"full\"\n      role=\"tablist\"\n      p={1}\n      rounded=\"full\"\n      bg=\"ink.10\"\n      _dark={{ bg: 'slate.2' }}\n      aria-label=\"Segmented Control\"\n      position=\"relative\"\n    >\n      <Box\n        position=\"absolute\"\n        bg=\"paper\"\n        _dark={{ bg: 'slate.4' }}\n        boxShadow=\"0px 4px 20px 0px {colors.ink.90/10}\"\n        transition=\"transform 0.2s ease\"\n        rounded=\"inherit\"\n        ml={-1}\n        style={{ ...indicatorStyle }}\n      />\n      <SegmentedControlContext.Provider value={{ currentTab, setCurrentTab: handleSelect, size, tabRefs }}>\n        {children}\n      </SegmentedControlContext.Provider>\n    </Flex>\n  );\n};\n\nconst TabComponent = forwardRef<HTMLButtonElement, TabProps>((props, forwardedRef) => {\n  const { label, id } = props;\n  const { currentTab, setCurrentTab, tabRefs, size } = useContext(SegmentedControlContext);\n\n  const isSelected = currentTab === id;\n  const height = size === 'sm' ? 8 : size === 'md' ? 10 : 13;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef<HTMLButtonElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  useEffect(() => {\n    if (typeof ref === 'object' && tabRefs.current) {\n      tabRefs.current[id] = ref.current;\n    }\n  }, [id]);\n\n  const handlePress = useCallback(() => {\n    setCurrentTab(id);\n  }, [setCurrentTab, id]);\n\n  const { buttonProps, isPressed } = useButton({ onPress: handlePress }, ref as React.RefObject<HTMLButtonElement>);\n  const { hoverProps } = useHover({});\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const icon = slots.get(Icon);\n\n    return (\n      <button\n        className={css({\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          h: height,\n          w: 'full',\n          rounded: 'button',\n          zIndex: 0,\n          cursor: 'pointer',\n          color: isSelected ? 'text.primary' : 'text.secondary',\n          fontSize: size,\n          fontWeight: 'semibold',\n          whiteSpace: 'nowrap',\n          bg: 'transparent',\n          outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n          outlineStyle: 'solid',\n          outlineWidth: 'thick',\n          transition: isSelected ? 'background 0s' : 'background 0.2s ease',\n          _hover: {\n            bg: isSelected ? 'transparent' : 'ink.20',\n            _dark: { bg: isSelected ? 'transparent' : 'slate.1' },\n          },\n        })}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n      >\n        <Flex opacity={isPressed && !isSelected ? 0.5 : 1} align=\"center\" justify=\"center\">\n          {icon && {\n            ...icon,\n            props: {\n              ...icon.props,\n              className: css({ mr: 1, color: isSelected ? 'text.primary' : 'text.secondary' }),\n              width: iconSize,\n              height: iconSize,\n            },\n          }}\n          {label}\n        </Flex>\n      </button>\n    );\n  });\n});\n\nexport const Tab = Object.assign(TabComponent, {\n  Icon,\n});\n\nTabComponent.displayName = 'Tab';\nSegmentedControl.displayName = 'SegmentedControl';\n"],"names":["SegmentedControlContext","createContext","Icon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","SegmentedControl","onChange","selectedTab","size","currentTab","setCurrentTab","useState","tabRefs","useRef","observer","indicatorStyle","setIndicatorStyle","useEffect","offsetLeft","clientWidth","clientHeight","handleSelect","useCallback","id","_jsxs","Box","TabComponent","forwardRef","forwardedRef","label","useContext","isSelected","height","iconSize","internalRef","ref","handlePress","buttonProps","isPressed","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","icon","css","mergeProps","Tab"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, useCallback, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n  name: string;\n  symbol: string;\n  USDBalance: string;\n  tokenBalance: number;\n  onPress?: () => void;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n  tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({ name, USDBalance, tokenBalance, symbol, tokenIcon }: ListContentProps) => {\n  return (\n    <HStack w=\"full\" justify=\"space-between\">\n      <HStack gap={2}>\n        {tokenIcon ? (\n          {\n            ...tokenIcon,\n            props: {\n              ...tokenIcon.props,\n              width: 30,\n              height: 30,\n            },\n          }\n        ) : (\n          <IconGenericToken width={30} height={30} />\n        )}\n        <Text styles={{ fontWeight: '500', textTransform: 'capitalize' }}>{name}</Text>\n      </HStack>\n      <VStack gap={0} alignItems=\"flex-end\">\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem', fontWeight: '500' }}>\n          {USDBalance}\n        </Text>\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem', color: token('colors.text.secondary') }}>\n          {tokenBalance} {symbol.toUpperCase()}\n        </Text>\n      </VStack>\n    </HStack>\n  );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n  const { name, symbol, USDBalance, tokenBalance, onPress } = props;\n\n  const ref = useRef(null);\n\n  const handlePress = useCallback(() => {\n    onPress?.();\n  }, [onPress]);\n\n  const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const tokenIcon = slots.get(TokenIcon);\n\n    if (onPress)\n      return (\n        <button\n          ref={ref}\n          {...mergeProps(buttonProps, focusProps)}\n          className={css({\n            w: 'full',\n            p: 4,\n            minH: 20,\n            bg: 'neutral.quaternary',\n            transition: 'background-color 0.2s',\n            _hover: { bg: 'neutral.secondary' },\n            rounded: 'lg',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 1,\n            cursor: 'pointer',\n          })}\n        >\n          <ListContent\n            name={name}\n            symbol={symbol}\n            USDBalance={USDBalance}\n            tokenBalance={tokenBalance}\n            tokenIcon={tokenIcon}\n          />\n        </button>\n      );\n\n    return (\n      <ListContent\n        name={name}\n        symbol={symbol}\n        USDBalance={USDBalance}\n        tokenBalance={tokenBalance}\n        tokenIcon={tokenIcon}\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","USDBalance","tokenBalance","symbol","tokenIcon","_jsxs","HStack","IconGenericToken","Text","VStack","token","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","mergeProps","css","TokenListItem"],"mappings":"2qBAiBA,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,CAAE,KAAAC,EAAM,WAAAC,EAAY,aAAAC,EAAc,OAAAC,EAAQ,UAAAC,CAAS,IAEpEC,EAACC,EAAM,CAAC,EAAE,OAAO,QAAQ,0BACvBD,EAACC,EAAO,CAAA,IAAK,YACVF,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,GAGHV,EAACa,EAAgB,CAAC,MAAO,GAAI,OAAQ,KAEvCb,EAACc,EAAI,CAAC,OAAQ,CAAE,WAAY,MAAO,cAAe,cAAiB,SAAAR,CAAY,CAAA,CAAA,CAAA,CAAA,EAEjFK,EAACI,EAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAf,EAACc,EAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,WAAY,KAAO,EAAA,SAChEP,CACI,CAAA,EACPI,EAACG,EAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,MAAOE,EAAM,uBAAuB,GACjF,SAAA,CAAAR,EAAe,IAAAC,EAAO,aAAa,CAC/B,CAAA,CAAA,CAAA,CAAA,CACA,CACF,CAAA,EAIPQ,EAAqBlB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,OAAAG,EAAQ,WAAAF,EAAY,aAAAC,EAAc,QAAAU,CAAS,EAAGnB,EAEtDoB,EAAMC,EAAO,IAAI,EAEjBC,EAAcC,EAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEN,CAAE,YAAAK,CAAW,EAAKC,EAAU,CAAE,GAAGzB,EAAO,QAASsB,GAAeF,CAAG,EACnE,CAAE,eAAAM,EAAgB,WAAAC,GAAeC,IAEvC,OAAOC,EAAW7B,EAAM,SAAU8B,GAAQ,CACxC,MAAMnB,EAAYmB,EAAM,IAAIjC,CAAS,EAErC,OAAIsB,EAEAlB,EACE,SAAA,CAAA,IAAKmB,KACDW,EAAWP,EAAaG,CAAU,EACtC,UAAWK,EAAI,CACb,EAAG,OACH,EAAG,EACH,KAAM,GACN,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,aAAc,aACd,aAAcN,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,EACf,OAAQ,UACT,EAAC,SAEFzB,EAACK,EACC,CAAA,KAAMC,EACN,OAAQG,EACR,WAAYF,EACZ,aAAcC,EACd,UAAWE,CAAS,CAAA,CAEf,CAAA,EAIXV,EAACK,EACC,CAAA,KAAMC,EACN,OAAQG,EACR,WAAYF,EACZ,aAAcC,EACd,UAAWE,CACX,CAAA,CAEN,CAAC,CACH,EAEasB,EAAgB,OAAO,OAAOf,EAAmB,CAAE,UAAArB,CAAS,CAAE"}
+{"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, useCallback, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n  name: string;\n  symbol: string;\n  USDBalance: string;\n  tokenBalance: number;\n  logoUrl?: string;\n  onPress?: () => void;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n  tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({ name, USDBalance, tokenBalance, symbol, tokenIcon, logoUrl }: ListContentProps) => {\n  return (\n    <HStack w=\"full\" justify=\"space-between\">\n      <HStack gap={2}>\n        {tokenIcon ? (\n          {\n            ...tokenIcon,\n            props: {\n              ...tokenIcon.props,\n              width: 30,\n              height: 30,\n            },\n          }\n        ) : logoUrl ? (\n          <img width={30} height={30} src={logoUrl} alt={`${name} logo`} />\n        ) : (\n          <IconGenericToken width={30} height={30} />\n        )}\n        <Text styles={{ fontWeight: '500', textTransform: 'capitalize' }}>{name}</Text>\n      </HStack>\n      <VStack gap={0} alignItems=\"flex-end\">\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem', fontWeight: '500' }}>\n          {USDBalance}\n        </Text>\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem', color: token('colors.text.secondary') }}>\n          {tokenBalance} {symbol.toUpperCase()}\n        </Text>\n      </VStack>\n    </HStack>\n  );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n  const { name, symbol, USDBalance, tokenBalance, logoUrl, onPress } = props;\n\n  const ref = useRef(null);\n\n  const handlePress = useCallback(() => {\n    onPress?.();\n  }, [onPress]);\n\n  const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const tokenIcon = slots.get(TokenIcon);\n\n    if (onPress)\n      return (\n        <button\n          ref={ref}\n          {...mergeProps(buttonProps, focusProps)}\n          className={css({\n            w: 'full',\n            p: 4,\n            minH: 20,\n            bg: 'neutral.quaternary',\n            transition: 'background-color 0.2s',\n            _hover: { bg: 'neutral.secondary' },\n            rounded: 'lg',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 1,\n            cursor: 'pointer',\n          })}\n        >\n          <ListContent\n            name={name}\n            symbol={symbol}\n            USDBalance={USDBalance}\n            tokenBalance={tokenBalance}\n            tokenIcon={tokenIcon}\n            logoUrl={logoUrl}\n          />\n        </button>\n      );\n\n    return (\n      <ListContent\n        name={name}\n        symbol={symbol}\n        USDBalance={USDBalance}\n        tokenBalance={tokenBalance}\n        tokenIcon={tokenIcon}\n        logoUrl={logoUrl}\n      />\n    );\n  });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","USDBalance","tokenBalance","symbol","tokenIcon","logoUrl","_jsxs","HStack","IconGenericToken","Text","VStack","token","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","mergeProps","css","TokenListItem"],"mappings":"2qBAkBA,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,CAAE,KAAAC,EAAM,WAAAC,EAAY,aAAAC,EAAc,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,CAAO,IAE7EC,EAACC,EAAM,CAAC,EAAE,OAAO,QAAQ,0BACvBD,EAACC,EAAO,CAAA,IAAK,YACVH,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFX,EAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKW,EAAS,IAAK,GAAGL,CAAI,OAAW,CAAA,EAEjEN,EAACc,EAAgB,CAAC,MAAO,GAAI,OAAQ,EAAE,CAAA,EAEzCd,EAACe,EAAK,CAAA,OAAQ,CAAE,WAAY,MAAO,cAAe,YAAY,EAAK,SAAAT,GAAY,CACxE,CAAA,EACTM,EAACI,EAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAhB,EAACe,EAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,WAAY,KAAO,EAAA,SAChER,CACI,CAAA,EACPK,EAACG,EAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,MAAOE,EAAM,uBAAuB,CAAC,EAClF,SAAA,CAAAT,EAAe,IAAAC,EAAO,YAAA,CAAa,CAAA,CAAA,CAC/B,CACA,CAAA,CAAA,CAAA,CAAA,EAKTS,EAAqBnB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,OAAAG,EAAQ,WAAAF,EAAY,aAAAC,EAAc,QAAAG,EAAS,QAAAQ,CAAS,EAAGpB,EAE/DqB,EAAMC,EAAO,IAAI,EAEjBC,EAAcC,EAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEN,CAAE,YAAAK,CAAW,EAAKC,EAAU,CAAE,GAAG1B,EAAO,QAASuB,GAAeF,CAAG,EACnE,CAAE,eAAAM,EAAgB,WAAAC,GAAeC,EAEvC,EAAA,OAAOC,EAAW9B,EAAM,SAAU+B,GAAQ,CACxC,MAAMpB,EAAYoB,EAAM,IAAIlC,CAAS,EAErC,OAAIuB,EAEAnB,EACE,SAAA,CAAA,IAAKoB,KACDW,EAAWP,EAAaG,CAAU,EACtC,UAAWK,EAAI,CACb,EAAG,OACH,EAAG,EACH,KAAM,GACN,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,aAAc,aACd,aAAcN,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,EACf,OAAQ,SACT,CAAA,EAED,SAAA1B,EAACK,EAAW,CACV,KAAMC,EACN,OAAQG,EACR,WAAYF,EACZ,aAAcC,EACd,UAAWE,EACX,QAASC,CACT,CAAA,CAAA,CAAA,EAKNX,EAACK,EAAW,CACV,KAAMC,EACN,OAAQG,EACR,WAAYF,EACZ,aAAcC,EACd,UAAWE,EACX,QAASC,CAAO,CAAA,CAGtB,CAAC,CACH,EAEasB,EAAgB,OAAO,OAAOf,EAAmB,CAAE,UAAAtB,CAAS,CAAE"}

package/dist/es/components/primitives/segmented-control.js

@@ -1,2 +1,2 @@
-import{jsx as p,jsxs as x}from"react/jsx-runtime";import{css as y}from"@styled/css";import{Flex as h,Box as F}from"@styled/jsx";import{createSlot as H,createHost as W}from"create-slots";import{createContext as $,Children as B,cloneElement as E,forwardRef as X,useContext as L,useRef as C,useEffect as g,useCallback as k,useState as w}from"react";import{useButton as O,useHover as V,useFocusRing as q,mergeProps as A}from"react-aria";const v=$({currentTab:void 0,setCurrentTab:()=>{},tabRefs:{current:{}}}),S=H(({children:s,...c})=>p(h,{alignItems:"center",justifyContent:"center",children:B.map(s,o=>E(o,c))})),T=s=>{const{children:c,onChange:o,selectedTab:e,size:d="md"}=s,[t,a]=w(e),r=C({}),[n,b]=w({transform:"translateX(4px)",width:"",height:""});g(()=>{e!==void 0&&a(e)},[e]),g(()=>{if(t&&r.current[t]){const{offsetLeft:i,clientWidth:l,clientHeight:m}=r.current[t];b({transform:`translateX(${i}px)`,width:`${l}px`,height:`${m}px`})}},[t,d]);const u=k(i=>{a(i),o(i)},[a,o]);return x(h,{w:"full",role:"tablist",p:1,rounded:"full",bg:"ink.10",_dark:{bg:"slate.2"},"aria-label":"Segmented Control",position:"relative",children:[p(F,{position:"absolute",bg:"paper",_dark:{bg:"slate.4"},boxShadow:"0px 4px 20px 0px {colors.ink.90/10}",transition:"transform 0.2s ease, width 0.2s ease",rounded:"inherit",ml:-1,style:{...n}}),p(v.Provider,{value:{currentTab:t,setCurrentTab:u,size:d,tabRefs:r},children:c})]})},j=X((s,c)=>{const{label:o,id:e}=s,{currentTab:d,setCurrentTab:t,tabRefs:a,size:r}=L(v),n=d===e,b=r==="sm"?8:r==="md"?10:13,u=r==="sm"?16:20,i=C(null),l=c||i;g(()=>{typeof l=="object"&&a.current&&(a.current[e]=l.current)},[e]);const m=k(()=>{t(e)},[t,e]),{buttonProps:P,isPressed:R}=O({onPress:m},l),{hoverProps:z}=V({}),{isFocusVisible:_,focusProps:I}=q();return W(s.children,N=>{const f=N.get(S);return p("button",{className:y({display:"flex",justifyContent:"center",alignItems:"center",h:b,w:"full",rounded:"button",zIndex:0,cursor:"pointer",color:n?"text.primary":"text.secondary",fontSize:r,fontWeight:"semibold",whiteSpace:"nowrap",bg:"transparent",outlineColor:_?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",transition:n?"background 0s":"background 0.2s ease",_hover:{bg:n?"transparent":"ink.20",_dark:{bg:n?"transparent":"slate.1"}}}),ref:l,...A(P,z,I),children:x(h,{opacity:R&&!n?.5:1,align:"center",justify:"center",children:[f&&{...f,props:{...f.props,className:y({mr:1,color:n?"text.primary":"text.secondary"}),width:u,height:u}},o]})})})}),D=Object.assign(j,{Icon:S});j.displayName="Tab",T.displayName="SegmentedControl";export{T as SegmentedControl,D as Tab};
+import{jsx as b,jsxs as C}from"react/jsx-runtime";import{css as v}from"@styled/css";import{Flex as x,Box as I}from"@styled/jsx";import{createSlot as N,createHost as W}from"create-slots";import{createContext as F,Children as X,cloneElement as B,forwardRef as E,useContext as L,useRef as y,useEffect as m,useCallback as k,useState as w}from"react";import{useButton as O,useHover as V,useFocusRing as q,mergeProps as A}from"react-aria";const S=F({currentTab:void 0,setCurrentTab:()=>{},tabRefs:{current:{}}}),T=N(({children:s,...c})=>b(x,{alignItems:"center",justifyContent:"center",children:X.map(s,i=>B(i,c))})),j=s=>{const{children:c,onChange:i,selectedTab:o,size:p="md"}=s,[e,a]=w(o),t=y({}),r=y(),[f,l]=w({transform:"translateX(4px)",width:"",height:""});m(()=>{o!==void 0&&a(o)},[o]),m(()=>(r.current||(r.current=new ResizeObserver(()=>{const{offsetLeft:n,clientWidth:u,clientHeight:d}=t.current[e];l({transform:`translateX(${n}px)`,width:`${u}px`,height:`${d}px`})})),r.current.observe(t.current[e]),()=>{r.current&&t.current[e]&&r.current.unobserve(t.current[e])}),[]),m(()=>{if(e&&t.current[e]){const{offsetLeft:n,clientWidth:u,clientHeight:d}=t.current[e];l({transform:`translateX(${n}px)`,width:`${u}px`,height:`${d}px`})}},[e,p]);const h=k(n=>{a(n),i(n)},[a,i]);return C(x,{w:"full",role:"tablist",p:1,rounded:"full",bg:"ink.10",_dark:{bg:"slate.2"},"aria-label":"Segmented Control",position:"relative",children:[b(I,{position:"absolute",bg:"paper",_dark:{bg:"slate.4"},boxShadow:"0px 4px 20px 0px {colors.ink.90/10}",transition:"transform 0.2s ease",rounded:"inherit",ml:-1,style:{...f}}),b(S.Provider,{value:{currentTab:e,setCurrentTab:h,size:p,tabRefs:t},children:c})]})},P=E((s,c)=>{const{label:i,id:o}=s,{currentTab:p,setCurrentTab:e,tabRefs:a,size:t}=L(S),r=p===o,f=t==="sm"?8:t==="md"?10:13,l=t==="sm"?16:20,h=y(null),n=c||h;m(()=>{typeof n=="object"&&a.current&&(a.current[o]=n.current)},[o]);const u=k(()=>{e(o)},[e,o]),{buttonProps:d,isPressed:R}=O({onPress:u},n),{hoverProps:z}=V({}),{isFocusVisible:$,focusProps:_}=q();return W(s.children,H=>{const g=H.get(T);return b("button",{className:v({display:"flex",justifyContent:"center",alignItems:"center",h:f,w:"full",rounded:"button",zIndex:0,cursor:"pointer",color:r?"text.primary":"text.secondary",fontSize:t,fontWeight:"semibold",whiteSpace:"nowrap",bg:"transparent",outlineColor:$?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",transition:r?"background 0s":"background 0.2s ease",_hover:{bg:r?"transparent":"ink.20",_dark:{bg:r?"transparent":"slate.1"}}}),ref:n,...A(d,z,_),children:C(x,{opacity:R&&!r?.5:1,align:"center",justify:"center",children:[g&&{...g,props:{...g.props,className:v({mr:1,color:r?"text.primary":"text.secondary"}),width:l,height:l}},i]})})})}),D=Object.assign(P,{Icon:T});P.displayName="Tab",j.displayName="SegmentedControl";export{j as SegmentedControl,D as Tab};
 //# sourceMappingURL=segmented-control.js.map

package/dist/es/components/primitives/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","sources":["../../../../src/components/primitives/segmented-control.tsx"],"sourcesContent":["import { css } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, {\n  Children,\n  RefObject,\n  cloneElement,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useHover } from 'react-aria';\n\nexport interface SegmentedControlProps {\n  children: React.ReactNode;\n  onChange: (value: string) => void;\n  selectedTab: string;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport interface TabProps extends AriaButtonProps {\n  label: string;\n  id: string;\n}\n\ntype TabRefs = {\n  [key: string]: HTMLButtonElement | null;\n};\n\nconst SegmentedControlContext = createContext<{\n  currentTab: string | undefined;\n  setCurrentTab: (id: string) => void;\n  size?: 'sm' | 'md' | 'lg';\n  tabRefs: RefObject<TabRefs>;\n}>({\n  currentTab: undefined,\n  setCurrentTab: () => {},\n  tabRefs: { current: {} },\n});\n\nconst Icon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nexport const SegmentedControl = (props: SegmentedControlProps) => {\n  const { children, onChange, selectedTab, size = 'md' } = props;\n  const [currentTab, setCurrentTab] = useState(selectedTab);\n  const tabRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});\n  const [indicatorStyle, setIndicatorStyle] = useState({ transform: 'translateX(4px)', width: '', height: '' });\n\n  useEffect(() => {\n    if (selectedTab !== undefined) {\n      setCurrentTab(selectedTab);\n    }\n  }, [selectedTab]);\n\n  useEffect(() => {\n    if (currentTab && tabRefs.current[currentTab]) {\n      const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n      setIndicatorStyle({\n        transform: `translateX(${offsetLeft}px)`,\n        width: `${clientWidth}px`,\n        height: `${clientHeight}px`,\n      });\n    }\n  }, [currentTab, size]);\n\n  const handleSelect = useCallback(\n    (id: string) => {\n      setCurrentTab(id);\n      onChange(id);\n    },\n    [setCurrentTab, onChange],\n  );\n\n  return (\n    <Flex\n      w=\"full\"\n      role=\"tablist\"\n      p={1}\n      rounded=\"full\"\n      bg=\"ink.10\"\n      _dark={{ bg: 'slate.2' }}\n      aria-label=\"Segmented Control\"\n      position=\"relative\"\n    >\n      <Box\n        position=\"absolute\"\n        bg=\"paper\"\n        _dark={{ bg: 'slate.4' }}\n        boxShadow=\"0px 4px 20px 0px {colors.ink.90/10}\"\n        transition=\"transform 0.2s ease, width 0.2s ease\"\n        rounded=\"inherit\"\n        ml={-1}\n        style={{ ...indicatorStyle }}\n      />\n      <SegmentedControlContext.Provider value={{ currentTab, setCurrentTab: handleSelect, size, tabRefs }}>\n        {children}\n      </SegmentedControlContext.Provider>\n    </Flex>\n  );\n};\n\nconst TabComponent = forwardRef<HTMLButtonElement, TabProps>((props, forwardedRef) => {\n  const { label, id } = props;\n  const { currentTab, setCurrentTab, tabRefs, size } = useContext(SegmentedControlContext);\n\n  const isSelected = currentTab === id;\n  const height = size === 'sm' ? 8 : size === 'md' ? 10 : 13;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef<HTMLButtonElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  useEffect(() => {\n    if (typeof ref === 'object' && tabRefs.current) {\n      tabRefs.current[id] = ref.current;\n    }\n  }, [id]);\n\n  const handlePress = useCallback(() => {\n    setCurrentTab(id);\n  }, [setCurrentTab, id]);\n\n  const { buttonProps, isPressed } = useButton({ onPress: handlePress }, ref as React.RefObject<HTMLButtonElement>);\n  const { hoverProps } = useHover({});\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const icon = slots.get(Icon);\n\n    return (\n      <button\n        className={css({\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          h: height,\n          w: 'full',\n          rounded: 'button',\n          zIndex: 0,\n          cursor: 'pointer',\n          color: isSelected ? 'text.primary' : 'text.secondary',\n          fontSize: size,\n          fontWeight: 'semibold',\n          whiteSpace: 'nowrap',\n          bg: 'transparent',\n          outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n          outlineStyle: 'solid',\n          outlineWidth: 'thick',\n          transition: isSelected ? 'background 0s' : 'background 0.2s ease',\n          _hover: {\n            bg: isSelected ? 'transparent' : 'ink.20',\n            _dark: { bg: isSelected ? 'transparent' : 'slate.1' },\n          },\n        })}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n      >\n        <Flex opacity={isPressed && !isSelected ? 0.5 : 1} align=\"center\" justify=\"center\">\n          {icon && {\n            ...icon,\n            props: {\n              ...icon.props,\n              className: css({ mr: 1, color: isSelected ? 'text.primary' : 'text.secondary' }),\n              width: iconSize,\n              height: iconSize,\n            },\n          }}\n          {label}\n        </Flex>\n      </button>\n    );\n  });\n});\n\nexport const Tab = Object.assign(TabComponent, {\n  Icon,\n});\n\nTabComponent.displayName = 'Tab';\nSegmentedControl.displayName = 'SegmentedControl';\n"],"names":["SegmentedControlContext","createContext","Icon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","SegmentedControl","onChange","selectedTab","size","currentTab","setCurrentTab","useState","tabRefs","useRef","indicatorStyle","setIndicatorStyle","useEffect","offsetLeft","clientWidth","clientHeight","handleSelect","useCallback","id","_jsxs","Box","TabComponent","forwardRef","forwardedRef","label","useContext","isSelected","height","iconSize","internalRef","ref","handlePress","buttonProps","isPressed","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","icon","css","mergeProps","Tab"],"mappings":"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"}
+{"version":3,"file":"segmented-control.js","sources":["../../../../src/components/primitives/segmented-control.tsx"],"sourcesContent":["import { css } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, {\n  Children,\n  RefObject,\n  cloneElement,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useHover } from 'react-aria';\n\nexport interface SegmentedControlProps {\n  children: React.ReactNode;\n  onChange: (value: string) => void;\n  selectedTab: string;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport interface TabProps extends AriaButtonProps {\n  label: string;\n  id: string;\n}\n\ntype TabRefs = {\n  [key: string]: HTMLButtonElement | null;\n};\n\nconst SegmentedControlContext = createContext<{\n  currentTab: string | undefined;\n  setCurrentTab: (id: string) => void;\n  size?: 'sm' | 'md' | 'lg';\n  tabRefs: RefObject<TabRefs>;\n}>({\n  currentTab: undefined,\n  setCurrentTab: () => {},\n  tabRefs: { current: {} },\n});\n\nconst Icon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nexport const SegmentedControl = (props: SegmentedControlProps) => {\n  const { children, onChange, selectedTab, size = 'md' } = props;\n  const [currentTab, setCurrentTab] = useState(selectedTab);\n  const tabRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});\n  const observer = useRef<ResizeObserver>();\n  const [indicatorStyle, setIndicatorStyle] = useState({ transform: 'translateX(4px)', width: '', height: '' });\n\n  useEffect(() => {\n    if (selectedTab !== undefined) {\n      setCurrentTab(selectedTab);\n    }\n  }, [selectedTab]);\n\n  useEffect(() => {\n    if (!observer.current) {\n      observer.current = new ResizeObserver(() => {\n        const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n        setIndicatorStyle({\n          transform: `translateX(${offsetLeft}px)`,\n          width: `${clientWidth}px`,\n          height: `${clientHeight}px`,\n        });\n      });\n    }\n\n    observer.current.observe(tabRefs.current[currentTab]!);\n\n    return () => {\n      if (observer.current && tabRefs.current[currentTab]) {\n        observer.current.unobserve(tabRefs.current[currentTab]!);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    if (currentTab && tabRefs.current[currentTab]) {\n      const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n      setIndicatorStyle({\n        transform: `translateX(${offsetLeft}px)`,\n        width: `${clientWidth}px`,\n        height: `${clientHeight}px`,\n      });\n    }\n  }, [currentTab, size]);\n\n  const handleSelect = useCallback(\n    (id: string) => {\n      setCurrentTab(id);\n      onChange(id);\n    },\n    [setCurrentTab, onChange],\n  );\n\n  return (\n    <Flex\n      w=\"full\"\n      role=\"tablist\"\n      p={1}\n      rounded=\"full\"\n      bg=\"ink.10\"\n      _dark={{ bg: 'slate.2' }}\n      aria-label=\"Segmented Control\"\n      position=\"relative\"\n    >\n      <Box\n        position=\"absolute\"\n        bg=\"paper\"\n        _dark={{ bg: 'slate.4' }}\n        boxShadow=\"0px 4px 20px 0px {colors.ink.90/10}\"\n        transition=\"transform 0.2s ease\"\n        rounded=\"inherit\"\n        ml={-1}\n        style={{ ...indicatorStyle }}\n      />\n      <SegmentedControlContext.Provider value={{ currentTab, setCurrentTab: handleSelect, size, tabRefs }}>\n        {children}\n      </SegmentedControlContext.Provider>\n    </Flex>\n  );\n};\n\nconst TabComponent = forwardRef<HTMLButtonElement, TabProps>((props, forwardedRef) => {\n  const { label, id } = props;\n  const { currentTab, setCurrentTab, tabRefs, size } = useContext(SegmentedControlContext);\n\n  const isSelected = currentTab === id;\n  const height = size === 'sm' ? 8 : size === 'md' ? 10 : 13;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef<HTMLButtonElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  useEffect(() => {\n    if (typeof ref === 'object' && tabRefs.current) {\n      tabRefs.current[id] = ref.current;\n    }\n  }, [id]);\n\n  const handlePress = useCallback(() => {\n    setCurrentTab(id);\n  }, [setCurrentTab, id]);\n\n  const { buttonProps, isPressed } = useButton({ onPress: handlePress }, ref as React.RefObject<HTMLButtonElement>);\n  const { hoverProps } = useHover({});\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const icon = slots.get(Icon);\n\n    return (\n      <button\n        className={css({\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          h: height,\n          w: 'full',\n          rounded: 'button',\n          zIndex: 0,\n          cursor: 'pointer',\n          color: isSelected ? 'text.primary' : 'text.secondary',\n          fontSize: size,\n          fontWeight: 'semibold',\n          whiteSpace: 'nowrap',\n          bg: 'transparent',\n          outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n          outlineStyle: 'solid',\n          outlineWidth: 'thick',\n          transition: isSelected ? 'background 0s' : 'background 0.2s ease',\n          _hover: {\n            bg: isSelected ? 'transparent' : 'ink.20',\n            _dark: { bg: isSelected ? 'transparent' : 'slate.1' },\n          },\n        })}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n      >\n        <Flex opacity={isPressed && !isSelected ? 0.5 : 1} align=\"center\" justify=\"center\">\n          {icon && {\n            ...icon,\n            props: {\n              ...icon.props,\n              className: css({ mr: 1, color: isSelected ? 'text.primary' : 'text.secondary' }),\n              width: iconSize,\n              height: iconSize,\n            },\n          }}\n          {label}\n        </Flex>\n      </button>\n    );\n  });\n});\n\nexport const Tab = Object.assign(TabComponent, {\n  Icon,\n});\n\nTabComponent.displayName = 'Tab';\nSegmentedControl.displayName = 'SegmentedControl';\n"],"names":["SegmentedControlContext","createContext","Icon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","SegmentedControl","onChange","selectedTab","size","currentTab","setCurrentTab","useState","tabRefs","useRef","observer","indicatorStyle","setIndicatorStyle","useEffect","offsetLeft","clientWidth","clientHeight","handleSelect","useCallback","id","_jsxs","Box","TabComponent","forwardRef","forwardedRef","label","useContext","isSelected","height","iconSize","internalRef","ref","handlePress","buttonProps","isPressed","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","icon","css","mergeProps","Tab"],"mappings":"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"}

package/dist/panda.buildinfo.json

@@ -1 +1 @@
-{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.2s 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.2s 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","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","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.base]___[cond:_groupHover<___>_dark","color]___[value:chalk","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","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","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","height]___[value:full","background]___[value:surface.primary","overflow]___[value:hidden","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","backgroundColor]___[value:surface.tertiary","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","flexDirection]___[value:column","gap]___[value:2","textAlign]___[value:left","textAlign]___[value:right","opacity]___[value:0.3","fontWeight]___[value:medium","fontSize]___[value:xl","transition]___[value:all linear 120ms","width]___[value:100%","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","backgroundColor]___[value:transparent","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","outlineColor]___[value:brand.base]___[cond:_focus","outlineStyle]___[value:solid]___[cond:_focus","outlineWidth]___[value:thick]___[cond:_focus","outlineOffset]___[value:0.5]___[cond:_focus","height]___[value:10","borderColor]___[value:negative.base","paddingLeft]___[value:11","paddingRight]___[value:11","paddingLeft]___[value:9","paddingRight]___[value:9","position]___[value:absolute","top]___[value:50%","transform]___[value:translateY(-50%)","transition]___[value:opacity linear 120ms","left]___[value:3","right]___[value:3","color]___[value:negative.darker","color]___[value:positive.base","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","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","gap]___[value:10px","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","paddingInline]___[value:8","display]___[value:block","display]___[value:none","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","flexDirection]___[value:row","padding]___[value:6","paddingBottom]___[value:5","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","alignItems]___[value:flex-start","gap]___[value:1.5","width]___[value:16","width]___[value:20","height]___[value:16","height]___[value:20","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","maxWidth]___[value:72","width]___[value:max","backgroundColor]___[value:surface.primary","paddingBlock]___[value:2","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","width]___[value:72","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","borderColor]___[value:neutral.primary]___[cond:_hover","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","gap]___[value:4","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","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","gap]___[value:0","marginTop]___[value:8","marginTop]___[value:4","background]___[value:neutral.quaternary","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","borderRadius]___[value:lg","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","alignItems]___[value:flex-end","minHeight]___[value:20","outlineOffset]___[value:1","strokeWidth]___[value:2.5","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","borderWidth]___[value:thick","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","marginLeft]___[value:3","srOnly]___[value:true","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:5","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","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, width 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","height]___[value:8","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","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","width]___[value:4","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","gap]___[value:3","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","borderRadius]___[value:1rem","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","cursor]___[value:default","justifyContent]___[value:space-around","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","borderColor]___[value:surface.primary","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","color]___[value:positive.darker","color]___[value:text.tertiary","fontVariant]___[value:no-contextual","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:1","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}
+{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.2s 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.2s 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","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","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.base]___[cond:_groupHover<___>_dark","color]___[value:chalk","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","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","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","height]___[value:full","background]___[value:surface.primary","overflow]___[value:hidden","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","backgroundColor]___[value:surface.tertiary","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","flexDirection]___[value:column","gap]___[value:2","textAlign]___[value:left","textAlign]___[value:right","opacity]___[value:0.3","fontWeight]___[value:medium","fontSize]___[value:xl","transition]___[value:all linear 120ms","width]___[value:100%","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","backgroundColor]___[value:transparent","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","outlineColor]___[value:brand.base]___[cond:_focus","outlineStyle]___[value:solid]___[cond:_focus","outlineWidth]___[value:thick]___[cond:_focus","outlineOffset]___[value:0.5]___[cond:_focus","height]___[value:10","borderColor]___[value:negative.base","paddingLeft]___[value:11","paddingRight]___[value:11","paddingLeft]___[value:9","paddingRight]___[value:9","position]___[value:absolute","top]___[value:50%","transform]___[value:translateY(-50%)","transition]___[value:opacity linear 120ms","left]___[value:3","right]___[value:3","color]___[value:negative.darker","color]___[value:positive.base","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","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","gap]___[value:10px","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","paddingInline]___[value:8","display]___[value:block","display]___[value:none","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","flexDirection]___[value:row","padding]___[value:6","paddingBottom]___[value:5","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","alignItems]___[value:flex-start","gap]___[value:1.5","width]___[value:16","width]___[value:20","height]___[value:16","height]___[value:20","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","maxWidth]___[value:72","width]___[value:max","backgroundColor]___[value:surface.primary","paddingBlock]___[value:2","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","width]___[value:72","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","borderColor]___[value:neutral.primary]___[cond:_hover","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","gap]___[value:4","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","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","gap]___[value:0","marginTop]___[value:8","marginTop]___[value:4","background]___[value:neutral.quaternary","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","borderRadius]___[value:lg","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","alignItems]___[value:flex-end","minHeight]___[value:20","outlineOffset]___[value:1","strokeWidth]___[value:2.5","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","borderWidth]___[value:thick","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","marginLeft]___[value:3","srOnly]___[value:true","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:5","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","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","height]___[value:8","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","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","width]___[value:4","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","gap]___[value:3","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","borderRadius]___[value:1rem","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","cursor]___[value:default","justifyContent]___[value:space-around","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","borderColor]___[value:surface.primary","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","color]___[value:positive.darker","color]___[value:text.tertiary","fontVariant]___[value:no-contextual","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:1","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}

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

@@ -5,6 +5,7 @@ export interface TokenListItemProps extends AriaButtonProps {
     symbol: string;
     USDBalance: string;
     tokenBalance: number;
+    logoUrl?: string;
     onPress?: () => void;
 }
 export declare const TokenListItem: ((props: TokenListItemProps) => JSX.Element) & {

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

@@ -1 +1 @@
-{"version":3,"file":"token-list-item.d.ts","sourceRoot":"","sources":["../../../../src/components/list-items/token-list-item.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,eAAe,EAAuC,MAAM,YAAY,CAAC;AAElF,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAuGD,eAAO,MAAM,aAAa,WAzDQ,kBAAkB;;CAyDwB,CAAC"}
+{"version":3,"file":"token-list-item.d.ts","sourceRoot":"","sources":["../../../../src/components/list-items/token-list-item.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,eAAe,EAAuC,MAAM,YAAY,CAAC;AAElF,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA2GD,eAAO,MAAM,aAAa,WA3DQ,kBAAkB;;CA2DwB,CAAC"}

package/dist/types/components/primitives/segmented-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/segmented-control.tsx"],"names":[],"mappings":"AAGA,OAAO,KAWN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAiD,MAAM,YAAY,CAAC;AAE5F,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,QAAS,SAAQ,eAAe;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AA2BD,eAAO,MAAM,gBAAgB;YAAW,qBAAqB;;CAyD5D,CAAC;AA2EF,eAAO,MAAM,GAAG;;CAEd,CAAC"}
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/segmented-control.tsx"],"names":[],"mappings":"AAGA,OAAO,KAWN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAiD,MAAM,YAAY,CAAC;AAE5F,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,QAAS,SAAQ,eAAe;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AA2BD,eAAO,MAAM,gBAAgB;YAAW,qBAAqB;;CA+E5D,CAAC;AA2EF,eAAO,MAAM,GAAG;;CAEd,CAAC"}

package/package.json

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