@magiclabs/ui-components 1.23.1 → 1.23.3

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  fiatBalanceWithSymbol: string;\n  tokenBalanceWithSymbol: string;\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, fiatBalanceWithSymbol, tokenBalanceWithSymbol, 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          {fiatBalanceWithSymbol}\n        </Text>\n        <Text size=\"sm\" styles={{ lineHeight: '1.5rem', color: token('colors.text.secondary') }}>\n          {tokenBalanceWithSymbol}\n        </Text>\n      </VStack>\n    </HStack>\n  );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n  const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, 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            fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n            tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n            tokenIcon={tokenIcon}\n            logoUrl={logoUrl}\n          />\n        </button>\n      );\n\n    return (\n      <ListContent\n        name={name}\n        fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n        tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n        tokenIcon={tokenIcon}\n        logoUrl={logoUrl}\n      />\n    );\n  });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","_jsxs","HStack","IconGenericToken","Text","VStack","token","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","mergeProps","css","TokenListItem"],"mappings":"miBAiBA,MAAMA,EAAYC,aAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAAAA,IAACC,SAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAaD,aAAAA,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CAAE,KAAAC,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,UAAAC,EAAW,QAAAC,CAAO,IAE1FC,EAAAA,KAACC,EAAAA,OAAM,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,EACFV,EAAAA,IAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAW,CAAA,EAEjEN,MAACa,EAAiB,QAAA,CAAA,MAAO,GAAI,OAAQ,EAAM,CAAA,EAE7Cb,MAACc,EAAI,QAAA,CAAC,OAAQ,CAAE,WAAY,MAAO,cAAe,YAAc,EAAA,SAAGR,CAAI,CAAA,CAAQ,CACxE,CAAA,EACTK,EAAAA,KAACI,SAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAf,EAAAA,IAACc,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,WAAY,KAAO,EAAA,SAChEP,CAAqB,CAAA,EAExBP,EAAAA,IAACc,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,MAAOE,EAAAA,MAAM,uBAAuB,CAAC,EAClF,SAAAR,CACI,CAAA,CAAA,CAAA,CAAA,CACA,CACF,CAAA,EAIPS,EAAqBlB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAQ,CAAS,EAAGnB,EAE5EoB,EAAMC,SAAO,IAAI,EAEjBC,EAAcC,EAAAA,YAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEN,CAAE,YAAAK,CAAW,EAAKC,YAAU,CAAE,GAAGzB,EAAO,QAASsB,GAAeF,CAAG,EACnE,CAAE,eAAAM,EAAgB,WAAAC,GAAeC,EAAAA,aAEvC,EAAA,OAAOC,EAAAA,WAAW7B,EAAM,SAAU8B,GAAQ,CACxC,MAAMpB,EAAYoB,EAAM,IAAIjC,CAAS,EAErC,OAAIsB,EAEAlB,EAAAA,IACE,SAAA,CAAA,IAAKmB,KACDW,EAAAA,WAAWP,EAAaG,CAAU,EACtC,UAAWK,MAAI,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,MAACK,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,CAAO,CAAA,CAEX,CAAA,EAIXV,EAAAA,IAACK,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,CACT,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 { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, useCallback, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n  name: string;\n  fiatBalanceWithSymbol: string;\n  tokenBalanceWithSymbol: string;\n  logoUrl?: string;\n  onPress?: () => void;\n}\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, fiatBalanceWithSymbol, tokenBalanceWithSymbol, 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 fontWeight=\"medium\" styles={{ textTransform: 'capitalize' }}>\n          {name}\n        </Text>\n      </HStack>\n      <VStack gap={0} alignItems=\"flex-end\">\n        <Text size=\"sm\" fontWeight=\"medium\" styles={{ lineHeight: '1.5rem' }}>\n          {fiatBalanceWithSymbol}\n        </Text>\n        <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem' }}>\n          {tokenBalanceWithSymbol}\n        </Text>\n      </VStack>\n    </HStack>\n  );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n  const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, 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            fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n            tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n            tokenIcon={tokenIcon}\n            logoUrl={logoUrl}\n          />\n        </button>\n      );\n\n    return (\n      <ListContent\n        name={name}\n        fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n        tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n        tokenIcon={tokenIcon}\n        logoUrl={logoUrl}\n      />\n    );\n  });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","_jsxs","HStack","IconGenericToken","Text","VStack","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","mergeProps","css","TokenListItem"],"mappings":"iiBAgBA,MAAMA,EAAYC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAACC,IAAAA,EAAAA,OAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAaD,aAAAA,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CAAE,KAAAC,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,UAAAC,EAAW,QAAAC,CAAO,IAE1FC,EAAAA,KAACC,EAAAA,OAAM,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,GAEDC,EACFV,MAAA,MAAA,CAAK,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAO,CAAA,EAE7DN,EAAAA,IAACa,EAAAA,QAAiB,CAAA,MAAO,GAAI,OAAQ,EAAM,CAAA,EAE7Cb,EAAAA,IAACc,EAAAA,QAAI,CAAC,WAAW,SAAS,OAAQ,CAAE,cAAe,YAAc,EAAA,SAC9DR,CACI,CAAA,CAAA,CAAA,CAAA,EAETK,EAAAA,KAACI,EAAAA,OAAM,CAAC,IAAK,EAAG,WAAW,WAAU,SAAA,CACnCf,EAACc,IAAAA,EAAAA,QAAK,CAAA,KAAK,KAAK,WAAW,SAAS,OAAQ,CAAE,WAAY,QAAQ,EAC/D,SAAAP,CACI,CAAA,EACPP,MAACc,EAAK,QAAA,CAAA,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,QAAQ,EACtE,SAAAN,CACI,CAAA,CAAA,CAAA,CAAA,CACA,CACF,CAAA,EAIPQ,EAAqBjB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAO,CAAS,EAAGlB,EAE5EmB,EAAMC,EAAAA,OAAO,IAAI,EAEjBC,EAAcC,EAAAA,YAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEN,CAAE,YAAAK,CAAW,EAAKC,YAAU,CAAE,GAAGxB,EAAO,QAASqB,GAAeF,CAAG,EACnE,CAAE,eAAAM,EAAgB,WAAAC,GAAeC,EAAAA,eAEvC,OAAOC,EAAAA,WAAW5B,EAAM,SAAU6B,GAAQ,CACxC,MAAMnB,EAAYmB,EAAM,IAAIhC,CAAS,EAErC,OAAIqB,EAEAjB,MACE,SAAA,CAAA,IAAKkB,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,UACT,EAAC,SAEFxB,EAAAA,IAACK,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,CAAO,CAAA,CAEX,CAAA,EAIXV,EAACK,IAAAA,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,CACT,CAAA,CAEN,CAAC,CACH,EAEaqB,EAAgB,OAAO,OAAOf,EAAmB,CAAE,UAAApB,CAAS,CAAE"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),j=require("@styled/tokens"),y=require("../icons/ico-checkmark.js"),k=require("./text.js"),q=require("../../hooks/useToggleState.js"),i=require("@styled/css"),C=require("@styled/jsx/flex"),o=require("react"),a=require("react-aria");const b=o.forwardRef((c,h)=>{const{label:n,indeterminate:r=!1,disabled:l=!1,checked:x,"aria-label":f,...m}=c,s=q.useToggleState({...c,isSelected:x}),g=o.useRef(null),t=h||g;o.useEffect(()=>{const u="current"in t?t.current:null;u&&(u.indeterminate=!!r)},[r,t]);const{inputProps:p}=a.useCheckbox({...m,"aria-label":n||f||"Checkbox",isDisabled:l,isIndeterminate:r},s,t),{isFocusVisible:d,focusProps:v}=a.useFocusRing();return e.jsxs("label",{className:i.css({display:"flex",alignItems:"center",rounded:"sm",opacity:l?.3:1}),children:[e.jsx(a.VisuallyHidden,{children:e.jsx("input",{...a.mergeProps(p,v),ref:t})}),e.jsx("div",{className:i.css({display:"flex",alignItems:"center",justifyContent:"center",width:5,height:5,bg:s.isSelected?"brand.base":"transparent",borderWidth:"thick",borderColor:s.isSelected||d?"brand.base":"text.tertiary",transition:"background-color 0.2s ease, border-color 0.2s ease",_hover:{cursor:"pointer",borderColor:"brand.base"},pointerEvents:l?"none":"auto",rounded:"sm",boxSizing:"border-box",outlineColor:d?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}),children:e.jsxs("span",{children:[s.isSelected&&!r&&e.jsx(y.default,{height:16,width:16,color:j.token("colors.surface.primary")}),s.isSelected&&!!r&&e.jsx(C.Flex,{justifyContent:"center",alignItems:"center",children:e.jsx("div",{className:i.css({w:2.5,h:.5,bg:"surface.primary"})})})]})}),n&&e.jsx("div",{className:i.css({ml:3}),children:e.jsx(k.default,{styles:{fontWeight:500,lineHeight:1},children:n})})]})});b.displayName="Checkbox",exports.default=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),j=require("@styled/tokens"),y=require("../icons/ico-checkmark.js"),k=require("./text.js"),q=require("../../hooks/useToggleState.js"),i=require("@styled/css"),C=require("@styled/jsx/flex"),o=require("react"),a=require("react-aria");const b=o.forwardRef((c,h)=>{const{label:n,indeterminate:r=!1,disabled:l=!1,checked:x,"aria-label":m,...f}=c,s=q.useToggleState({...c,isSelected:x}),g=o.useRef(null),t=h||g;o.useEffect(()=>{const u="current"in t?t.current:null;u&&(u.indeterminate=!!r)},[r,t]);const{inputProps:p}=a.useCheckbox({...f,"aria-label":n||m||"Checkbox",isDisabled:l,isIndeterminate:r},s,t),{isFocusVisible:d,focusProps:v}=a.useFocusRing();return e.jsxs("label",{className:i.css({display:"flex",alignItems:"center",rounded:"sm",opacity:l?.3:1}),children:[e.jsx(a.VisuallyHidden,{children:e.jsx("input",{...a.mergeProps(p,v),ref:t})}),e.jsx("div",{className:i.css({display:"flex",alignItems:"center",justifyContent:"center",width:5,height:5,bg:s.isSelected?"brand.base":"transparent",borderWidth:"thick",borderColor:s.isSelected||d?"brand.base":"text.tertiary",transition:"background-color 0.2s ease, border-color 0.2s ease",_hover:{cursor:"pointer",borderColor:"brand.base"},pointerEvents:l?"none":"auto",rounded:"sm",boxSizing:"border-box",outlineColor:d?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}),children:e.jsxs("span",{children:[s.isSelected&&!r&&e.jsx(y.default,{height:16,width:16,color:j.token("colors.surface.primary")}),s.isSelected&&!!r&&e.jsx(C.Flex,{justifyContent:"center",alignItems:"center",children:e.jsx("div",{className:i.css({w:2.5,h:.5,bg:"surface.primary"})})})]})}),n&&e.jsx("div",{className:i.css({ml:3}),children:e.jsx(k.default,{fontWeight:"medium",styles:{lineHeight:1},children:n})})]})});b.displayName="Checkbox",exports.default=b;
 //# sourceMappingURL=checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../src/components/primitives/checkbox.tsx"],"sourcesContent":["import { IcoCheckmark } from '@components/icons';\nimport Text from '@components/primitives/text';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css } from '@styled/css';\nimport { Flex } from '@styled/jsx/flex';\nimport { token } from '@styled/tokens';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { VisuallyHidden, mergeProps, useCheckbox, useFocusRing, type AriaCheckboxProps } from 'react-aria';\n\nexport type CheckboxProps = AriaCheckboxProps & {\n  label?: string;\n  disabled?: boolean;\n  indeterminate?: boolean;\n  checked?: boolean;\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, forwardedRef) => {\n  const { label, indeterminate = false, disabled = false, checked, 'aria-label': ariaLabel, ...otherProps } = props;\n  const state = useToggleState({ ...props, isSelected: checked });\n  const internalRef = useRef<HTMLInputElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  useEffect(() => {\n    const currentRef = 'current' in ref ? ref.current : null;\n    if (currentRef) {\n      currentRef.indeterminate = !!indeterminate;\n    }\n  }, [indeterminate, ref]);\n\n  const { inputProps } = useCheckbox(\n    {\n      ...otherProps,\n      'aria-label': label || ariaLabel || 'Checkbox',\n      isDisabled: disabled,\n      isIndeterminate: indeterminate,\n    },\n    state,\n    ref as React.RefObject<HTMLInputElement>,\n  );\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return (\n    <label\n      className={css({\n        display: 'flex',\n        alignItems: 'center',\n        rounded: 'sm',\n        opacity: disabled ? 0.3 : 1,\n      })}\n    >\n      <VisuallyHidden>\n        <input {...mergeProps(inputProps, focusProps)} ref={ref} />\n      </VisuallyHidden>\n      <div\n        className={css({\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: 5,\n          height: 5,\n          bg: state.isSelected ? 'brand.base' : 'transparent',\n          borderWidth: 'thick',\n          borderColor: state.isSelected || isFocusVisible ? 'brand.base' : 'text.tertiary',\n          transition: 'background-color 0.2s ease, border-color 0.2s ease',\n          _hover: {\n            cursor: 'pointer',\n            borderColor: 'brand.base',\n          },\n          pointerEvents: disabled ? 'none' : 'auto',\n          rounded: 'sm',\n          boxSizing: 'border-box',\n          outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n          outlineStyle: 'solid',\n          outlineWidth: 'thick',\n          outlineOffset: 0.5,\n        })}\n      >\n        <span>\n          {state.isSelected && !indeterminate && (\n            <IcoCheckmark height={16} width={16} color={token('colors.surface.primary')} />\n          )}\n          {state.isSelected && !!indeterminate && (\n            <Flex justifyContent=\"center\" alignItems=\"center\">\n              <div\n                className={css({\n                  w: 2.5,\n                  h: 0.5,\n                  bg: 'surface.primary',\n                })}\n              />\n            </Flex>\n          )}\n        </span>\n      </div>\n      {label && (\n        <div className={css({ ml: 3 })}>\n          <Text styles={{ fontWeight: 500, lineHeight: 1 }}>{label}</Text>\n        </div>\n      )}\n    </label>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","props","forwardedRef","label","indeterminate","disabled","checked","ariaLabel","otherProps","state","useToggleState","internalRef","useRef","ref","useEffect","currentRef","inputProps","useCheckbox","isFocusVisible","focusProps","useFocusRing","_jsxs","css","_jsx","VisuallyHidden","mergeProps","IcoCheckmark","token","Flex","Text"],"mappings":"oVAgBMA,EAAWC,EAAAA,WAA4C,CAACC,EAAOC,IAAgB,CACnF,KAAM,CAAE,MAAAC,EAAO,cAAAC,EAAgB,GAAO,SAAAC,EAAW,GAAO,QAAAC,EAAS,aAAcC,EAAW,GAAGC,CAAU,EAAKP,EACtGQ,EAAQC,iBAAe,CAAE,GAAGT,EAAO,WAAYK,CAAO,CAAE,EACxDK,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAMX,GAAgBS,EAE5BG,EAAAA,UAAU,IAAK,CACb,MAAMC,EAAa,YAAaF,EAAMA,EAAI,QAAU,KAChDE,IACFA,EAAW,cAAgB,CAAC,CAACX,EAEjC,EAAG,CAACA,EAAeS,CAAG,CAAC,EAEvB,KAAM,CAAE,WAAAG,CAAY,EAAGC,cACrB,CACE,GAAGT,EACH,aAAcL,GAASI,GAAa,WACpC,WAAYF,EACZ,gBAAiBD,CAClB,EACDK,EACAI,CAAwC,EAEpC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,EAAAA,eAEvC,OACEC,EAAAA,KAAA,QAAA,CACE,UAAWC,MAAI,CACb,QAAS,OACT,WAAY,SACZ,QAAS,KACT,QAASjB,EAAW,GAAM,EAC3B,EAAC,SAAA,CAEFkB,MAACC,iBAAc,CAAA,SACbD,kBAAWE,aAAWT,EAAYG,CAAU,EAAG,IAAKN,CAAO,CAAA,CAAA,CAAA,EAE7DU,MACE,MAAA,CAAA,UAAWD,EAAAA,IAAI,CACb,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,MAAO,EACP,OAAQ,EACR,GAAIb,EAAM,WAAa,aAAe,cACtC,YAAa,QACb,YAAaA,EAAM,YAAcS,EAAiB,aAAe,gBACjE,WAAY,qDACZ,OAAQ,CACN,OAAQ,UACR,YAAa,YACd,EACD,cAAeb,EAAW,OAAS,OACnC,QAAS,KACT,UAAW,aACX,aAAca,EAAiB,aAAe,cAC9C,aAAc,QACd,aAAc,QACd,cAAe,GAChB,EAAC,SAEFG,EAAAA,KACG,OAAA,CAAA,SAAA,CAAAZ,EAAM,YAAc,CAACL,GACpBmB,MAACG,WAAa,OAAQ,GAAI,MAAO,GAAI,MAAOC,EAAM,MAAA,wBAAwB,IAE3ElB,EAAM,YAAc,CAAC,CAACL,GACrBmB,MAACK,QAAK,eAAe,SAAS,WAAW,SAAQ,SAC/CL,MACE,MAAA,CAAA,UAAWD,EAAAA,IAAI,CACb,EAAG,IACH,EAAG,GACH,GAAI,iBACL,CAAA,GAEE,CAAA,CACR,GAEC,CAAA,EACLnB,GACCoB,EAAAA,WAAK,UAAWD,MAAI,CAAE,GAAI,EAAG,EAAC,SAC5BC,EAACM,IAAAA,EAAAA,SAAK,OAAQ,CAAE,WAAY,IAAK,WAAY,CAAC,WAAK1B,CAAK,CAAA,GAE3D,CAAA,CAAA,CAGP,CAAC,EAEDJ,EAAS,YAAc"}
+{"version":3,"file":"checkbox.js","sources":["../../../../src/components/primitives/checkbox.tsx"],"sourcesContent":["import { IcoCheckmark } from '@components/icons';\nimport Text from '@components/primitives/text';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css } from '@styled/css';\nimport { Flex } from '@styled/jsx/flex';\nimport { token } from '@styled/tokens';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { VisuallyHidden, mergeProps, useCheckbox, useFocusRing, type AriaCheckboxProps } from 'react-aria';\n\nexport type CheckboxProps = AriaCheckboxProps & {\n  label?: string;\n  disabled?: boolean;\n  indeterminate?: boolean;\n  checked?: boolean;\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, forwardedRef) => {\n  const { label, indeterminate = false, disabled = false, checked, 'aria-label': ariaLabel, ...otherProps } = props;\n  const state = useToggleState({ ...props, isSelected: checked });\n  const internalRef = useRef<HTMLInputElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  useEffect(() => {\n    const currentRef = 'current' in ref ? ref.current : null;\n    if (currentRef) {\n      currentRef.indeterminate = !!indeterminate;\n    }\n  }, [indeterminate, ref]);\n\n  const { inputProps } = useCheckbox(\n    {\n      ...otherProps,\n      'aria-label': label || ariaLabel || 'Checkbox',\n      isDisabled: disabled,\n      isIndeterminate: indeterminate,\n    },\n    state,\n    ref as React.RefObject<HTMLInputElement>,\n  );\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return (\n    <label\n      className={css({\n        display: 'flex',\n        alignItems: 'center',\n        rounded: 'sm',\n        opacity: disabled ? 0.3 : 1,\n      })}\n    >\n      <VisuallyHidden>\n        <input {...mergeProps(inputProps, focusProps)} ref={ref} />\n      </VisuallyHidden>\n      <div\n        className={css({\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: 5,\n          height: 5,\n          bg: state.isSelected ? 'brand.base' : 'transparent',\n          borderWidth: 'thick',\n          borderColor: state.isSelected || isFocusVisible ? 'brand.base' : 'text.tertiary',\n          transition: 'background-color 0.2s ease, border-color 0.2s ease',\n          _hover: {\n            cursor: 'pointer',\n            borderColor: 'brand.base',\n          },\n          pointerEvents: disabled ? 'none' : 'auto',\n          rounded: 'sm',\n          boxSizing: 'border-box',\n          outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n          outlineStyle: 'solid',\n          outlineWidth: 'thick',\n          outlineOffset: 0.5,\n        })}\n      >\n        <span>\n          {state.isSelected && !indeterminate && (\n            <IcoCheckmark height={16} width={16} color={token('colors.surface.primary')} />\n          )}\n          {state.isSelected && !!indeterminate && (\n            <Flex justifyContent=\"center\" alignItems=\"center\">\n              <div\n                className={css({\n                  w: 2.5,\n                  h: 0.5,\n                  bg: 'surface.primary',\n                })}\n              />\n            </Flex>\n          )}\n        </span>\n      </div>\n      {label && (\n        <div className={css({ ml: 3 })}>\n          <Text fontWeight=\"medium\" styles={{ lineHeight: 1 }}>\n            {label}\n          </Text>\n        </div>\n      )}\n    </label>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","props","forwardedRef","label","indeterminate","disabled","checked","ariaLabel","otherProps","state","useToggleState","internalRef","useRef","ref","useEffect","currentRef","inputProps","useCheckbox","isFocusVisible","focusProps","useFocusRing","_jsxs","css","_jsx","VisuallyHidden","mergeProps","IcoCheckmark","token","Flex","Text"],"mappings":"oVAgBMA,EAAWC,EAAAA,WAA4C,CAACC,EAAOC,IAAgB,CACnF,KAAM,CAAE,MAAAC,EAAO,cAAAC,EAAgB,GAAO,SAAAC,EAAW,GAAO,QAAAC,EAAS,aAAcC,EAAW,GAAGC,CAAU,EAAKP,EACtGQ,EAAQC,iBAAe,CAAE,GAAGT,EAAO,WAAYK,CAAO,CAAE,EACxDK,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAMX,GAAgBS,EAE5BG,EAAAA,UAAU,IAAK,CACb,MAAMC,EAAa,YAAaF,EAAMA,EAAI,QAAU,KAChDE,IACFA,EAAW,cAAgB,CAAC,CAACX,EAEjC,EAAG,CAACA,EAAeS,CAAG,CAAC,EAEvB,KAAM,CAAE,WAAAG,CAAY,EAAGC,cACrB,CACE,GAAGT,EACH,aAAcL,GAASI,GAAa,WACpC,WAAYF,EACZ,gBAAiBD,CAClB,EACDK,EACAI,CAAwC,EAEpC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,EAAAA,eAEvC,OACEC,EAAAA,KAAA,QAAA,CACE,UAAWC,MAAI,CACb,QAAS,OACT,WAAY,SACZ,QAAS,KACT,QAASjB,EAAW,GAAM,EAC3B,EAAC,SAAA,CAEFkB,MAACC,iBAAc,CAAA,SACbD,kBAAWE,aAAWT,EAAYG,CAAU,EAAG,IAAKN,CAAO,CAAA,CAAA,CAAA,EAE7DU,MACE,MAAA,CAAA,UAAWD,EAAAA,IAAI,CACb,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,MAAO,EACP,OAAQ,EACR,GAAIb,EAAM,WAAa,aAAe,cACtC,YAAa,QACb,YAAaA,EAAM,YAAcS,EAAiB,aAAe,gBACjE,WAAY,qDACZ,OAAQ,CACN,OAAQ,UACR,YAAa,YACd,EACD,cAAeb,EAAW,OAAS,OACnC,QAAS,KACT,UAAW,aACX,aAAca,EAAiB,aAAe,cAC9C,aAAc,QACd,aAAc,QACd,cAAe,GAChB,EAAC,SAEFG,EAAAA,KACG,OAAA,CAAA,SAAA,CAAAZ,EAAM,YAAc,CAACL,GACpBmB,MAACG,WAAa,OAAQ,GAAI,MAAO,GAAI,MAAOC,EAAM,MAAA,wBAAwB,IAE3ElB,EAAM,YAAc,CAAC,CAACL,GACrBmB,MAACK,QAAK,eAAe,SAAS,WAAW,SAAQ,SAC/CL,MACE,MAAA,CAAA,UAAWD,EAAAA,IAAI,CACb,EAAG,IACH,EAAG,GACH,GAAI,iBACL,CAAA,GAEE,CAAA,CACR,GAEC,CAAA,EACLnB,GACCoB,EAAAA,WAAK,UAAWD,MAAI,CAAE,GAAI,EAAG,EAAC,SAC5BC,EAACM,IAAAA,EAAAA,SAAK,WAAW,SAAS,OAAQ,CAAE,WAAY,CAAC,WAC9C1B,CAAK,CAAA,GAGX,CAAA,CAAA,CAGP,CAAC,EAEDJ,EAAS,YAAc"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n  children: ReactNode;\n  onSelect: (value: string) => void;\n  label?: string;\n  placeholder?: string;\n  selectedValue?: string;\n  size?: 'sm' | 'md' | 'lg';\n  tooltipContent?: string;\n  disabled?: boolean;\n  viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n  value: string;\n  label: string;\n  isFocused?: boolean;\n  size?: DropdownSelectorProps['size'];\n}\n\ninterface OptionData {\n  value: string;\n  label: string;\n}\n\nexport interface DropdownContextType {\n  selectedOption: OptionData | null;\n  setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n  sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n  md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n  lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n  selectedOption: null,\n  setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused }: DropdownOptionProps) => {\n  const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n  const isSelected = selectedOption?.value === value;\n  const sizeProps = SIZES[size];\n\n  const handleSelectOption = useCallback(() => {\n    setSelectedOption({ value, label });\n  }, [setSelectedOption, value, label]);\n\n  return (\n    <HStack\n      py={1.5}\n      gap={2}\n      bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n      _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n      onClick={handleSelectOption}\n      style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n    >\n      <Box style={{ width: sizeProps.width }}>\n        {isSelected && (\n          <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.surface.primary')} />\n        )}\n      </Box>\n      <Text size={size} styles={{ fontWeight: 500, color: token(`colors.${isSelected ? 'surface' : 'text'}.primary`) }}>\n        {label}\n      </Text>\n    </HStack>\n  );\n};\n\nexport const DropdownSelector = ({\n  children,\n  onSelect,\n  label,\n  placeholder = 'Select one',\n  selectedValue,\n  size = 'lg',\n  tooltipContent,\n  disabled,\n  viewMax = 5,\n  ...props\n}: DropdownSelectorProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const sizeProps = SIZES[size];\n  const maxHeight = viewMax * sizeProps.mult + 1;\n\n  const toggleDropdown = useCallback(() => {\n    setIsOpen(prev => !prev);\n    if (!isOpen) {\n      setFocusedIndex(null);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (option: OptionData) => {\n      onSelect(option.value);\n      setIsOpen(false);\n    },\n    [onSelect],\n  );\n\n  const selectedLabel = useMemo(() => {\n    const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n    const matchedChild = childElements.find(child => child.props.value === selectedValue);\n    return matchedChild ? matchedChild.props.label : placeholder;\n  }, [selectedValue, children]);\n\n  const { buttonProps } = useButton(\n    {\n      ...props,\n      isDisabled: disabled,\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: event => {\n      if (!isOpen) return;\n\n      let newFocusedIndex = focusedIndex;\n      const childArray = Children.toArray(children);\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(Children.count(children) - 1);\n          } else {\n            newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(0);\n          } else {\n            newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'Enter':\n          event.preventDefault();\n          buttonRef.current?.focus();\n          if (focusedIndex === null) return;\n          if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n            const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n            if (selectedChild) {\n              onSelect(selectedChild.props.value);\n            }\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          buttonRef.current?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (!dropdownRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  return (\n    <DropdownContext.Provider\n      value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n    >\n      <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n        {(label || tooltipContent) && (\n          <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n            {label && (\n              <Text size=\"sm\" styles={{ fontWeight: 500 }}>\n                {label}\n              </Text>\n            )}\n\n            {tooltipContent && (\n              <Tooltip isDisabled={disabled} content={tooltipContent}>\n                <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n              </Tooltip>\n            )}\n          </HStack>\n        )}\n\n        <button\n          className={css({\n            w: 'full',\n            h: 'fit-content',\n            borderWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 'xl',\n            transition: 'all linear 120ms',\n            position: 'relative',\n            cursor: 'pointer',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            _hover: { borderColor: 'neutral.primary' },\n            _disabled: { opacity: 0.3, pointerEvents: 'none' },\n          })}\n          ref={buttonRef}\n          {...mergeProps(buttonProps, focusProps, keyboardProps)}\n        >\n          <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n            <Text size={size} styles={{ color: token(`colors.text.${selectedValue ? 'primary' : 'tertiary'}`) }}>\n              {selectedLabel}\n            </Text>\n            {isOpen ? (\n              <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            ) : (\n              <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            )}\n          </HStack>\n\n          {isOpen && (\n            <Box\n              ref={dropdownRef}\n              tabIndex={-1}\n              py={2}\n              bg=\"surface.primary\"\n              position=\"absolute\"\n              w=\"full\"\n              rounded=\"input\"\n              boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n              style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n              overflowY=\"auto\"\n              outline=\"none\"\n              zIndex=\"max\"\n            >\n              {Children.map(children, (child, index) =>\n                cloneElement(child as ReactElement<DropdownOptionProps>, {\n                  isFocused: index === focusedIndex,\n                  size,\n                }),\n              )}\n            </Box>\n          )}\n        </button>\n      </VStack>\n    </DropdownContext.Provider>\n  );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"2tBAkDA,MAAMA,EAAQ,CACZ,GAAI,CAAE,MAAO,GAAI,MAAO,GAAI,OAAQ,WAAY,IAAK,GAAI,MAAO,UAAW,KAAM,IAAM,EACvF,GAAI,CAAE,MAAO,GAAI,MAAO,GAAI,OAAQ,YAAa,IAAK,GAAI,MAAO,UAAW,KAAM,IAAM,EACxF,GAAI,CAAE,MAAO,GAAI,MAAO,GAAI,OAAQ,OAAQ,IAAK,GAAI,MAAO,OAAQ,KAAM,GAAK,GAG3EC,EAAkBC,EAAmC,cAAA,CACzD,eAAgB,KAChB,kBAAmB,IAAK,EACzB,CAAA,EAEYC,EAAiB,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAO,KAAM,UAAAC,CAAS,IAA2B,CAC9F,KAAM,CAAE,eAAAC,EAAgB,kBAAAC,CAAiB,EAAKC,EAAWT,WAAAA,CAAe,EAClEU,EAAaH,GAAgB,QAAUJ,EACvCQ,EAAYZ,EAAMM,CAAI,EAEtBO,EAAqBC,EAAY,YAAA,IAAK,CAC1CL,EAAkB,CAAE,MAAAL,EAAO,MAAAC,CAAK,CAAE,CACpC,EAAG,CAACI,EAAmBL,EAAOC,CAAK,CAAC,EAEpC,OACEU,EAACC,KAAAA,SAAM,CACL,GAAI,IACJ,IAAK,EACL,GAAIL,EAAa,aAAeJ,EAAY,iBAAmB,GAC/D,OAASI,EAAwC,CAAA,EAA3B,CAAE,GAAI,gBAAgB,EAC5C,QAASE,EACT,MAAO,CAAE,YAAaD,EAAU,MAAO,aAAcA,EAAU,KAAK,EAEpE,SAAA,CAAAK,MAACC,EAAAA,IAAI,CAAA,MAAO,CAAE,MAAON,EAAU,KAAO,EAAA,SACnCD,GACCM,EAAAA,IAACE,EAAAA,QAAY,CAAC,MAAOP,EAAU,MAAO,OAAQA,EAAU,MAAO,MAAOQ,EAAAA,MAAM,wBAAwB,CAAC,CAAA,CAEnG,CAAA,EACNH,EAAAA,IAACI,UAAK,CAAA,KAAMf,EAAM,OAAQ,CAAE,WAAY,IAAK,MAAOc,QAAM,UAAUT,EAAa,UAAY,MAAM,UAAU,GAC1G,SAAAN,CACI,CAAA,CAAA,CAAA,CAAA,CAGb,EAEaiB,EAAmB,CAAC,CAC/B,SAAAC,EACA,SAAAC,EACA,MAAAnB,EACA,YAAAoB,EAAc,aACd,cAAAC,EACA,KAAApB,EAAO,KACP,eAAAqB,EACA,SAAAC,EACA,QAAAC,EAAU,EACV,GAAGC,CAAK,IACkB,CAC1B,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EACpC,CAACC,EAAcC,CAAe,EAAIF,EAAAA,SAAwB,IAAI,EAC9DG,EAAYC,SAA0B,IAAI,EAC1CC,EAAcD,EAAAA,OAAuB,IAAI,EACzCzB,EAAYZ,EAAMM,CAAI,EACtBiC,EAAYV,EAAUjB,EAAU,KAAO,EAEvC4B,EAAiB1B,cAAY,IAAK,CACtCkB,EAAUS,GAAQ,CAACA,CAAI,EAClBV,IACHI,EAAgB,IAAI,EACpB,WAAW,IAAK,CAAA,IAAAO,EAAC,OAAAA,EAAAJ,EAAY,qCAAS,OAAO,CAAA,EAEjD,EAAG,CAACP,CAAM,CAAC,EAELY,EAAe7B,EAAAA,YAClB8B,GAAsB,CACrBpB,EAASoB,EAAO,KAAK,EACrBZ,EAAU,EAAK,CACjB,EACA,CAACR,CAAQ,CAAC,EAGNqB,EAAgBC,UAAQ,IAAK,CAEjC,MAAMC,EADgBC,EAAS,SAAA,QAAQzB,CAAQ,EACZ,KAAK0B,GAASA,EAAM,MAAM,QAAUvB,CAAa,EACpF,OAAOqB,EAAeA,EAAa,MAAM,MAAQtB,CACnD,EAAG,CAACC,EAAeH,CAAQ,CAAC,EAEtB,CAAE,YAAA2B,CAAa,EAAGC,EAAAA,UACtB,CACE,GAAGrB,EACH,WAAYF,EACZ,QAASY,GAEXJ,CAAS,EAGL,CAAE,WAAAgB,EAAY,eAAAC,GAAmBC,EAAAA,eAEjC,CAAE,cAAAC,CAAe,EAAGC,cAAY,CACpC,UAAWC,GAAQ,SACjB,GAAI,CAAC1B,EAAQ,OAEb,IAAI2B,EAAkBxB,EACtB,MAAMyB,EAAaX,EAAAA,SAAS,QAAQzB,CAAQ,EAE5C,OAAQkC,EAAM,KACZ,IAAK,UACHA,EAAM,eAAc,EAChBvB,IAAiB,KACnBC,EAAgBa,EAAAA,SAAS,MAAMzB,CAAQ,EAAI,CAAC,GAE5CmC,EAAkBxB,EAAe,EAAIA,EAAe,EAAIc,EAAAA,SAAS,MAAMzB,CAAQ,EAAI,EACnFY,EAAgBuB,CAAe,GAEjC,MACF,IAAK,YACHD,EAAM,eAAc,EAChBvB,IAAiB,KACnBC,EAAgB,CAAC,GAEjBuB,EAAkBxB,EAAec,EAAAA,SAAS,MAAMzB,CAAQ,EAAI,EAAIW,EAAe,EAAI,EACnFC,EAAgBuB,CAAe,GAEjC,MACF,IAAK,QAGH,GAFAD,EAAM,eAAc,GACpBf,EAAAN,EAAU,WAAS,MAAAM,IAAA,QAAAA,EAAA,MACfR,EAAAA,IAAiB,KAAM,OAC3B,GAAIA,GAAgB,GAAKA,EAAeyB,EAAW,OAAQ,CACzD,MAAMC,EAAgBD,EAAWzB,CAAY,EACzC0B,GACFpC,EAASoC,EAAc,MAAM,KAAK,CAEtC,CACA,MACF,IAAK,SACH5B,EAAU,EAAK,GACf6B,EAAAzB,EAAU,WAAS,MAAAyB,IAAA,QAAAA,EAAA,QACnB,KAGJ,CACF,CACD,CAAA,EAED,OAAAC,EAAAA,UAAU,IAAK,CACb,MAAMC,EAAeN,GAAqB,OACnC,GAAAf,EAAAJ,EAAY,WAAO,MAAAI,IAAA,SAAAA,EAAE,SAASe,EAAM,MAAc,GACrDzB,EAAU,EAAK,CAEnB,EAEA,OAAS,SAAA,iBAAiB,YAAa+B,CAAW,EAE3C,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAW,CACvD,CACF,EAAG,CAAE,CAAA,EAGH9C,EAAAA,IAAChB,EAAgB,SACf,CAAA,MAAO,CAAE,eAAgB,CAAE,MAAOyB,GAAiB,GAAI,MAAOmB,CAAe,EAAE,kBAAmBF,CAAc,EAAA,SAEhH5B,EAAAA,KAACiD,EAAAA,OAAM,CAAC,IAAK,EAAG,EAAE,OAAO,WAAW,aACjC,SAAA,EAAC3D,GAASsB,IACTZ,OAACC,SAAM,CAAC,IAAK,EAAG,QAASY,EAAW,GAAM,GAAI,WAAY,mBACvD,SAAA,CAAAvB,GACCY,EAAAA,IAACI,EAAI,QAAA,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,GAAG,EACtC,SAAAhB,IAIJsB,GACCV,MAACgD,EAAQ,QAAA,CAAA,WAAYrC,EAAU,QAASD,EAAc,SACpDV,MAACiD,EAAAA,SAAsB,UAAWC,EAAI,IAAA,CAAE,EAAG,EAAG,EAAG,EAAG,MAAO,iBAAiB,CAAE,CAAK,CAAA,CAAA,CAAA,CAEtF,CAAA,CAAA,EAILpD,EAAAA,KAAA,SAAA,CACE,UAAWoD,EAAI,IAAA,CACb,EAAG,OACH,EAAG,cACH,YAAa,OACb,YAAa,oBACb,QAAS,KACT,WAAY,mBACZ,SAAU,WACV,OAAQ,UACR,aAAc,aACd,aAAcd,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,GACf,OAAQ,CAAE,YAAa,iBAAmB,EAC1C,UAAW,CAAE,QAAS,GAAK,cAAe,MAAQ,EACnD,EACD,IAAKjB,KACDgC,EAAAA,WAAWlB,EAAaE,EAAYG,CAAa,EAAC,SAAA,CAEtDxC,EAACC,KAAAA,SAAM,CAAC,EAAE,OAAO,EAAG,EAAG,eAAe,gBAAgB,MAAO,CAAE,OAAQJ,EAAU,QAC/E,SAAA,CAAAK,MAACI,EAAAA,QAAI,CAAC,KAAMf,EAAM,OAAQ,CAAE,MAAOc,EAAAA,MAAM,eAAeM,EAAgB,UAAY,UAAU,EAAE,CAAG,EAAA,SAChGmB,CAAa,CAAA,EAEfd,EACCd,EAACoD,IAAAA,UAAU,CAAC,MAAOzD,EAAU,MAAO,OAAQA,EAAU,MAAO,MAAOQ,QAAM,mBAAmB,CAAK,CAAA,EAElGH,EAAAA,IAACqD,EAAY,QAAA,CAAC,MAAO1D,EAAU,MAAO,OAAQA,EAAU,MAAO,MAAOQ,EAAAA,MAAM,mBAAmB,CAAC,CAAA,CACjG,CACM,CAAA,EAERW,GACCd,MAACC,EAAAA,IACC,CAAA,IAAKoB,EACL,SAAU,GACV,GAAI,EACJ,GAAG,kBACH,SAAS,WACT,EAAE,OACF,QAAQ,QACR,UAAU,uCACV,MAAO,CAAE,UAAW,GAAGC,CAAS,MAAO,IAAK3B,EAAU,GAAG,EACzD,UAAU,OACV,QAAQ,OACR,OAAO,MAAK,SAEXoC,WAAS,IAAIzB,EAAU,CAAC0B,EAAOsB,IAC9BC,eAAavB,EAA4C,CACvD,UAAWsB,IAAUrC,EACrB,KAAA5B,CACD,CAAA,CAAC,CAEA,CAAA,CACP,GACM,CACF,CAAA,CAAA,CAAA,CAGf,EAEAH,EAAe,YAAc,iBAC7BmB,EAAiB,YAAc"}
+{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n  children: ReactNode;\n  onSelect: (value: string) => void;\n  label?: string;\n  placeholder?: string;\n  selectedValue?: string;\n  size?: 'sm' | 'md' | 'lg';\n  tooltipContent?: string;\n  disabled?: boolean;\n  viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n  value: string;\n  label: string;\n  isFocused?: boolean;\n  size?: DropdownSelectorProps['size'];\n}\n\ninterface OptionData {\n  value: string;\n  label: string;\n}\n\nexport interface DropdownContextType {\n  selectedOption: OptionData | null;\n  setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n  sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n  md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n  lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n  selectedOption: null,\n  setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused }: DropdownOptionProps) => {\n  const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n  const isSelected = selectedOption?.value === value;\n  const sizeProps = SIZES[size];\n\n  const handleSelectOption = useCallback(() => {\n    setSelectedOption({ value, label });\n  }, [setSelectedOption, value, label]);\n\n  return (\n    <HStack\n      py={1.5}\n      gap={2}\n      bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n      _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n      onClick={handleSelectOption}\n      style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n    >\n      <Box style={{ width: sizeProps.width }}>\n        {isSelected && (\n          <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n        )}\n      </Box>\n      <Text\n        size={size}\n        fontWeight=\"medium\"\n        fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n        styles={{ textAlign: 'left' }}\n      >\n        {label}\n      </Text>\n    </HStack>\n  );\n};\n\nexport const DropdownSelector = ({\n  children,\n  onSelect,\n  label,\n  placeholder = 'Select one',\n  selectedValue,\n  size = 'lg',\n  tooltipContent,\n  disabled,\n  viewMax = 5,\n  ...props\n}: DropdownSelectorProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const sizeProps = SIZES[size];\n  const maxHeight = viewMax * sizeProps.mult + 1;\n\n  const toggleDropdown = useCallback(() => {\n    setIsOpen(prev => !prev);\n    if (!isOpen) {\n      setFocusedIndex(null);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (option: OptionData) => {\n      onSelect(option.value);\n      setIsOpen(false);\n    },\n    [onSelect],\n  );\n\n  const selectedLabel = useMemo(() => {\n    const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n    const matchedChild = childElements.find(child => child.props.value === selectedValue);\n    return matchedChild ? matchedChild.props.label : placeholder;\n  }, [selectedValue, children]);\n\n  const { buttonProps } = useButton(\n    {\n      ...props,\n      isDisabled: disabled,\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: event => {\n      if (!isOpen) return;\n\n      let newFocusedIndex = focusedIndex;\n      const childArray = Children.toArray(children);\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(Children.count(children) - 1);\n          } else {\n            newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(0);\n          } else {\n            newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'Enter':\n          event.preventDefault();\n          buttonRef.current?.focus();\n          if (focusedIndex === null) return;\n          if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n            const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n            if (selectedChild) {\n              onSelect(selectedChild.props.value);\n            }\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          buttonRef.current?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (!dropdownRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  return (\n    <DropdownContext.Provider\n      value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n    >\n      <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n        {(label || tooltipContent) && (\n          <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n            {label && (\n              <Text size=\"sm\" fontWeight=\"medium\">\n                {label}\n              </Text>\n            )}\n\n            {tooltipContent && (\n              <Tooltip isDisabled={disabled} content={tooltipContent}>\n                <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n              </Tooltip>\n            )}\n          </HStack>\n        )}\n\n        <button\n          className={css({\n            w: 'full',\n            h: 'fit-content',\n            bg: 'surface.primary',\n            borderWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 'xl',\n            transition: 'all linear 120ms',\n            position: 'relative',\n            cursor: 'pointer',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            _hover: { borderColor: 'neutral.primary' },\n            _disabled: { opacity: 0.3, pointerEvents: 'none' },\n          })}\n          ref={buttonRef}\n          {...mergeProps(buttonProps, focusProps, keyboardProps)}\n        >\n          <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n            <Text size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n              {selectedLabel}\n            </Text>\n            {isOpen ? (\n              <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            ) : (\n              <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n            )}\n          </HStack>\n\n          {isOpen && (\n            <Box\n              ref={dropdownRef}\n              tabIndex={-1}\n              py={2}\n              bg=\"surface.primary\"\n              position=\"absolute\"\n              w=\"full\"\n              rounded=\"input\"\n              boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n              style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n              overflowY=\"auto\"\n              outline=\"none\"\n              zIndex=\"max\"\n            >\n              {Children.map(children, (child, index) =>\n                cloneElement(child as ReactElement<DropdownOptionProps>, {\n                  isFocused: index === focusedIndex,\n                  size,\n                }),\n              )}\n            </Box>\n          )}\n        </button>\n      </VStack>\n    </DropdownContext.Provider>\n  );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),C=require("./text.js"),i=require("@styled/jsx"),R=require("@styled/patterns"),s=require("react"),t=require("react-aria");const b=s.createContext({selectedValue:void 0,setSelectedValue:()=>{}}),h=n=>{const{children:d,onChange:a,selectedValue:l,vertical:r}=n,u=s.useCallback(c=>{a(c)},[a]);return e.jsx(i.Flex,{direction:r?"column":"row",gap:r?5:10,role:"radiogroup",children:e.jsx(b.Provider,{value:{selectedValue:l,setSelectedValue:u},children:d})})},p=s.forwardRef((n,d)=>{const{label:a,value:l}=n,r=s.useContext(b),u=s.useRef(null),c=d||u,v=s.useCallback(()=>{r.setSelectedValue(l)},[r,l]),{hoverProps:f}=t.useHover({}),{focusProps:j,isFocusVisible:x}=t.useFocusRing(),{pressProps:g}=t.usePress({onPress:v}),o=r.selectedValue===l,m=o?0:-1;return e.jsxs("label",{className:R.flex({alignItems:"center"}),children:[e.jsx(t.VisuallyHidden,{children:e.jsx("input",{...t.mergeProps(g,j,f),ref:c,type:"radio",checked:o,tabIndex:m,readOnly:!0})}),e.jsx(i.Flex,{justifyContent:"center",alignItems:"center",borderWidth:"thick",borderColor:x||o?"brand.base":"text.tertiary",transition:"border-color 0.2s ease",outlineColor:"brand.base",outlineStyle:x?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"brand.base"},cursor:"pointer",w:6,h:6,rounded:"full","aria-hidden":"true",children:o&&e.jsx(i.Circle,{size:3,bg:"brand.base"})}),e.jsx(i.Box,{ml:3,children:e.jsx(C.default,{size:"lg",styles:{fontWeight:500},children:a})})]})});h.displayName="RadioGroup",p.displayName="Radio",exports.Radio=p,exports.RadioGroup=h;
+"use strict";var e=require("react/jsx-runtime"),C=require("./text.js"),o=require("@styled/jsx"),R=require("@styled/patterns"),s=require("react"),t=require("react-aria");const b=s.createContext({selectedValue:void 0,setSelectedValue:()=>{}}),h=d=>{const{children:n,onChange:a,selectedValue:l,vertical:r}=d,u=s.useCallback(c=>{a(c)},[a]);return e.jsx(o.Flex,{direction:r?"column":"row",gap:r?5:10,role:"radiogroup",children:e.jsx(b.Provider,{value:{selectedValue:l,setSelectedValue:u},children:n})})},p=s.forwardRef((d,n)=>{const{label:a,value:l}=d,r=s.useContext(b),u=s.useRef(null),c=n||u,v=s.useCallback(()=>{r.setSelectedValue(l)},[r,l]),{hoverProps:f}=t.useHover({}),{focusProps:j,isFocusVisible:x}=t.useFocusRing(),{pressProps:m}=t.usePress({onPress:v}),i=r.selectedValue===l,g=i?0:-1;return e.jsxs("label",{className:R.flex({alignItems:"center"}),children:[e.jsx(t.VisuallyHidden,{children:e.jsx("input",{...t.mergeProps(m,j,f),ref:c,type:"radio",checked:i,tabIndex:g,readOnly:!0})}),e.jsx(o.Flex,{justifyContent:"center",alignItems:"center",borderWidth:"thick",borderColor:x||i?"brand.base":"text.tertiary",transition:"border-color 0.2s ease",outlineColor:"brand.base",outlineStyle:x?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"brand.base"},cursor:"pointer",w:6,h:6,rounded:"full","aria-hidden":"true",children:i&&e.jsx(o.Circle,{size:3,bg:"brand.base"})}),e.jsx(o.Box,{ml:3,children:e.jsx(C.default,{size:"lg",fontWeight:"medium",children:a})})]})});h.displayName="RadioGroup",p.displayName="Radio",exports.Radio=p,exports.RadioGroup=h;
 //# sourceMappingURL=radio.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sources":["../../../../src/components/primitives/radio.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { Box, Circle, Flex } from '@styled/jsx';\nimport { flex } from '@styled/patterns';\nimport { PropsWithChildren, createContext, forwardRef, useCallback, useContext, useRef } from 'react';\nimport {\n  AriaRadioGroupProps,\n  AriaRadioProps,\n  VisuallyHidden,\n  mergeProps,\n  useFocusRing,\n  useHover,\n  usePress,\n} from 'react-aria';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, PropsWithChildren {\n  onChange: (value: string) => void;\n  selectedValue?: string;\n  vertical?: boolean;\n}\n\nexport interface RadioProps extends AriaRadioProps {\n  label?: string;\n}\n\nconst RadioContext = createContext<{\n  selectedValue: string | undefined;\n  setSelectedValue: (value: string) => void;\n}>({\n  selectedValue: undefined,\n  setSelectedValue: () => {},\n});\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n  const { children, onChange, selectedValue, vertical } = props;\n\n  const handleSelect = useCallback(\n    (value: string) => {\n      onChange(value);\n    },\n    [onChange],\n  );\n\n  return (\n    <Flex direction={vertical ? 'column' : 'row'} gap={vertical ? 5 : 10} role=\"radiogroup\">\n      <RadioContext.Provider value={{ selectedValue, setSelectedValue: handleSelect }}>\n        {children}\n      </RadioContext.Provider>\n    </Flex>\n  );\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>((props, forwardedRef) => {\n  const { label, value } = props;\n  const state = useContext(RadioContext);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  const handlePress = useCallback(() => {\n    state.setSelectedValue(value);\n  }, [state, value]);\n\n  const { hoverProps } = useHover({});\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { pressProps } = usePress({\n    onPress: handlePress,\n  });\n\n  const isSelected = state.selectedValue === value;\n\n  const tabIndex = isSelected ? 0 : -1;\n\n  return (\n    <label className={flex({ alignItems: 'center' })}>\n      <VisuallyHidden>\n        <input\n          {...mergeProps(pressProps, focusProps, hoverProps)}\n          ref={ref}\n          type=\"radio\"\n          checked={isSelected}\n          tabIndex={tabIndex}\n          readOnly\n        />\n      </VisuallyHidden>\n      <Flex\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        borderWidth=\"thick\"\n        borderColor={isFocusVisible || isSelected ? 'brand.base' : 'text.tertiary'}\n        transition=\"border-color 0.2s ease\"\n        outlineColor=\"brand.base\"\n        outlineStyle={isFocusVisible ? 'solid' : 'none'}\n        outlineWidth=\"thick\"\n        outlineOffset={0.5}\n        _hover={{ borderColor: 'brand.base' }}\n        cursor=\"pointer\"\n        w={6}\n        h={6}\n        rounded=\"full\"\n        aria-hidden=\"true\"\n      >\n        {isSelected && <Circle size={3} bg=\"brand.base\" />}\n      </Flex>\n      <Box ml={3}>\n        <Text size=\"lg\" styles={{ fontWeight: 500 }}>\n          {label}\n        </Text>\n      </Box>\n    </label>\n  );\n});\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"],"names":["RadioContext","createContext","RadioGroup","props","children","onChange","selectedValue","vertical","handleSelect","useCallback","value","_jsx","Flex","Radio","forwardRef","forwardedRef","label","state","useContext","internalRef","useRef","ref","handlePress","hoverProps","useHover","focusProps","isFocusVisible","useFocusRing","pressProps","usePress","isSelected","tabIndex","_jsxs","flex","VisuallyHidden","mergeProps","Circle","Box","Text"],"mappings":"yKAwBA,MAAMA,EAAeC,EAAAA,cAGlB,CACD,cAAe,OACf,iBAAkB,IAAK,CACxB,CAAA,CAAA,EAEYC,EAAcC,GAA0B,CACnD,KAAM,CAAE,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,SAAAC,CAAQ,EAAKJ,EAElDK,EAAeC,EAAAA,YAClBC,GAAiB,CAChBL,EAASK,CAAK,CAChB,EACA,CAACL,CAAQ,CAAC,EAGZ,OACEM,EAACC,IAAAA,EAAAA,KAAI,CAAC,UAAWL,EAAW,SAAW,MAAO,IAAKA,EAAW,EAAI,GAAI,KAAK,aAAY,SACrFI,MAACX,EAAa,SAAQ,CAAC,MAAO,CAAE,cAAAM,EAAe,iBAAkBE,CAAY,WAC1EJ,CAAQ,CAAA,CAEN,CAAA,CAEX,EAEaS,EAAQC,EAAAA,WAAyC,CAACX,EAAOY,IAAgB,CACpF,KAAM,CAAE,MAAAC,EAAO,MAAAN,CAAO,EAAGP,EACnBc,EAAQC,EAAWlB,WAAAA,CAAY,EAE/BmB,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAMN,GAAgBI,EAEtBG,EAAcb,EAAAA,YAAY,IAAK,CACnCQ,EAAM,iBAAiBP,CAAK,CAC9B,EAAG,CAACO,EAAOP,CAAK,CAAC,EAEX,CAAE,WAAAa,CAAY,EAAGC,EAAS,SAAA,CAAE,CAAA,EAC5B,CAAE,WAAAC,EAAY,eAAAC,GAAmBC,iBACjC,CAAE,WAAAC,CAAY,EAAGC,WAAS,CAC9B,QAASP,CACV,CAAA,EAEKQ,EAAab,EAAM,gBAAkBP,EAErCqB,EAAWD,EAAa,EAAI,GAElC,OACEE,EAAAA,KAAO,QAAA,CAAA,UAAWC,EAAK,KAAA,CAAE,WAAY,SAAU,EAAC,SAAA,CAC9CtB,EAAAA,IAACuB,iBAAc,CAAA,SACbvB,kBACMwB,EAAAA,WAAWP,EAAYH,EAAYF,CAAU,EACjD,IAAKF,EACL,KAAK,QACL,QAASS,EACT,SAAUC,EACV,aAEa,CAAA,EACjBpB,EAACC,IAAAA,EAAAA,KAAI,CACH,eAAe,SACf,WAAW,SACX,YAAY,QACZ,YAAac,GAAkBI,EAAa,aAAe,gBAC3D,WAAW,yBACX,aAAa,aACb,aAAcJ,EAAiB,QAAU,OACzC,aAAa,QACb,cAAe,GACf,OAAQ,CAAE,YAAa,cACvB,OAAO,UACP,EAAG,EACH,EAAG,EACH,QAAQ,qBACI,OAAM,SAEjBI,GAAcnB,EAAAA,IAACyB,EAAAA,OAAM,CAAC,KAAM,EAAG,GAAG,YAAY,CAAA,IAEjDzB,EAAAA,IAAC0B,EAAI,IAAA,CAAA,GAAI,EAAC,SACR1B,EAAC2B,IAAAA,EAAAA,SAAK,KAAK,KAAK,OAAQ,CAAE,WAAY,KACnC,SAAAtB,GAEC,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAEDd,EAAW,YAAc,aACzBW,EAAM,YAAc"}
+{"version":3,"file":"radio.js","sources":["../../../../src/components/primitives/radio.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { Box, Circle, Flex } from '@styled/jsx';\nimport { flex } from '@styled/patterns';\nimport { PropsWithChildren, createContext, forwardRef, useCallback, useContext, useRef } from 'react';\nimport {\n  AriaRadioGroupProps,\n  AriaRadioProps,\n  VisuallyHidden,\n  mergeProps,\n  useFocusRing,\n  useHover,\n  usePress,\n} from 'react-aria';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, PropsWithChildren {\n  onChange: (value: string) => void;\n  selectedValue?: string;\n  vertical?: boolean;\n}\n\nexport interface RadioProps extends AriaRadioProps {\n  label?: string;\n}\n\nconst RadioContext = createContext<{\n  selectedValue: string | undefined;\n  setSelectedValue: (value: string) => void;\n}>({\n  selectedValue: undefined,\n  setSelectedValue: () => {},\n});\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n  const { children, onChange, selectedValue, vertical } = props;\n\n  const handleSelect = useCallback(\n    (value: string) => {\n      onChange(value);\n    },\n    [onChange],\n  );\n\n  return (\n    <Flex direction={vertical ? 'column' : 'row'} gap={vertical ? 5 : 10} role=\"radiogroup\">\n      <RadioContext.Provider value={{ selectedValue, setSelectedValue: handleSelect }}>\n        {children}\n      </RadioContext.Provider>\n    </Flex>\n  );\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>((props, forwardedRef) => {\n  const { label, value } = props;\n  const state = useContext(RadioContext);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  const handlePress = useCallback(() => {\n    state.setSelectedValue(value);\n  }, [state, value]);\n\n  const { hoverProps } = useHover({});\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { pressProps } = usePress({\n    onPress: handlePress,\n  });\n\n  const isSelected = state.selectedValue === value;\n\n  const tabIndex = isSelected ? 0 : -1;\n\n  return (\n    <label className={flex({ alignItems: 'center' })}>\n      <VisuallyHidden>\n        <input\n          {...mergeProps(pressProps, focusProps, hoverProps)}\n          ref={ref}\n          type=\"radio\"\n          checked={isSelected}\n          tabIndex={tabIndex}\n          readOnly\n        />\n      </VisuallyHidden>\n      <Flex\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        borderWidth=\"thick\"\n        borderColor={isFocusVisible || isSelected ? 'brand.base' : 'text.tertiary'}\n        transition=\"border-color 0.2s ease\"\n        outlineColor=\"brand.base\"\n        outlineStyle={isFocusVisible ? 'solid' : 'none'}\n        outlineWidth=\"thick\"\n        outlineOffset={0.5}\n        _hover={{ borderColor: 'brand.base' }}\n        cursor=\"pointer\"\n        w={6}\n        h={6}\n        rounded=\"full\"\n        aria-hidden=\"true\"\n      >\n        {isSelected && <Circle size={3} bg=\"brand.base\" />}\n      </Flex>\n      <Box ml={3}>\n        <Text size=\"lg\" fontWeight=\"medium\">\n          {label}\n        </Text>\n      </Box>\n    </label>\n  );\n});\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"],"names":["RadioContext","createContext","RadioGroup","props","children","onChange","selectedValue","vertical","handleSelect","useCallback","value","_jsx","Flex","Radio","forwardRef","forwardedRef","label","state","useContext","internalRef","useRef","ref","handlePress","hoverProps","useHover","focusProps","isFocusVisible","useFocusRing","pressProps","usePress","isSelected","tabIndex","_jsxs","flex","VisuallyHidden","mergeProps","Circle","Box","Text"],"mappings":"yKAwBA,MAAMA,EAAeC,EAAAA,cAGlB,CACD,cAAe,OACf,iBAAkB,IAAK,CACxB,CAAA,CAAA,EAEYC,EAAcC,GAA0B,CACnD,KAAM,CAAE,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,SAAAC,CAAQ,EAAKJ,EAElDK,EAAeC,EAAAA,YAClBC,GAAiB,CAChBL,EAASK,CAAK,CAChB,EACA,CAACL,CAAQ,CAAC,EAGZ,OACEM,EAAAA,IAACC,EAAAA,KAAI,CAAC,UAAWL,EAAW,SAAW,MAAO,IAAKA,EAAW,EAAI,GAAI,KAAK,aAAY,SACrFI,EAACX,IAAAA,EAAa,SAAQ,CAAC,MAAO,CAAE,cAAAM,EAAe,iBAAkBE,CAAY,WAC1EJ,CAAQ,CAAA,CAEN,CAAA,CAEX,EAEaS,EAAQC,EAAAA,WAAyC,CAACX,EAAOY,IAAgB,CACpF,KAAM,CAAE,MAAAC,EAAO,MAAAN,CAAO,EAAGP,EACnBc,EAAQC,EAAAA,WAAWlB,CAAY,EAE/BmB,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAMN,GAAgBI,EAEtBG,EAAcb,EAAAA,YAAY,IAAK,CACnCQ,EAAM,iBAAiBP,CAAK,CAC9B,EAAG,CAACO,EAAOP,CAAK,CAAC,EAEX,CAAE,WAAAa,CAAY,EAAGC,EAAAA,SAAS,CAAE,CAAA,EAC5B,CAAE,WAAAC,EAAY,eAAAC,GAAmBC,iBACjC,CAAE,WAAAC,CAAY,EAAGC,EAAAA,SAAS,CAC9B,QAASP,CACV,CAAA,EAEKQ,EAAab,EAAM,gBAAkBP,EAErCqB,EAAWD,EAAa,EAAI,GAElC,OACEE,OAAO,QAAA,CAAA,UAAWC,OAAK,CAAE,WAAY,SAAU,EAAC,SAAA,CAC9CtB,EAACuB,IAAAA,iBAAc,CAAA,SACbvB,kBACMwB,EAAAA,WAAWP,EAAYH,EAAYF,CAAU,EACjD,IAAKF,EACL,KAAK,QACL,QAASS,EACT,SAAUC,EACV,SACA,EAAA,CAAA,CAAA,CAAA,EAEJpB,EAAAA,IAACC,EAAAA,KACC,CAAA,eAAe,SACf,WAAW,SACX,YAAY,QACZ,YAAac,GAAkBI,EAAa,aAAe,gBAC3D,WAAW,yBACX,aAAa,aACb,aAAcJ,EAAiB,QAAU,OACzC,aAAa,QACb,cAAe,GACf,OAAQ,CAAE,YAAa,cACvB,OAAO,UACP,EAAG,EACH,EAAG,EACH,QAAQ,OACI,cAAA,gBAEXI,GAAcnB,EAAAA,IAACyB,UAAO,KAAM,EAAG,GAAG,cAC9B,CAAA,EACPzB,EAAAA,IAAC0B,EAAAA,IAAG,CAAC,GAAI,EACP,SAAA1B,EAAAA,IAAC2B,UAAK,CAAA,KAAK,KAAK,WAAW,SACxB,SAAAtB,GAEC,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAEDd,EAAW,YAAc,aACzBW,EAAM,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),v=require("./text.js"),m=require("../../hooks/useToggleState.js"),a=require("@styled/css"),x=require("@styled/jsx/flex"),S=require("@styled/patterns"),l=require("react"),s=require("react-aria");const n=l.forwardRef((t,o)=>{const{checked:u,disabled:c=!1,label:i,...d}=t,b=l.useRef(null),p=o||b,e=m.useToggleState({...t,isSelected:u}),{buttonProps:g}=s.useToggleButton({...d,isDisabled:c},e,p),{isFocusVisible:f,focusProps:h}=s.useFocusRing();return r.jsxs(x.Flex,{alignItems:"center",children:[i&&r.jsx("div",{className:a.css({mr:2}),children:r.jsx(v.default,{styles:{fontWeight:500,lineHeight:1},children:i})}),r.jsx("button",{...s.mergeProps(g,h),className:a.css({px:.5,h:5,width:11,_disabled:{opacity:.3,pointerEvents:"none"},bg:e.isSelected?"brand.base":"neutral.primary",_hover:{bg:e.isSelected?"brand.base":"ink.70",_dark:{bg:e.isSelected?"brand.base":"slate.4"}},transition:"background-color 0.2s ease",rounded:"full",outlineColor:f?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer"}),children:r.jsx("span",{className:S.circle({h:4,w:4,bg:"paper",position:"relative",left:e.isSelected?6:0,transition:"left 0.2s ease"})})})]})});n.displayName="Switch",exports.default=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),v=require("./text.js"),m=require("../../hooks/useToggleState.js"),a=require("@styled/css"),x=require("@styled/jsx/flex"),S=require("@styled/patterns"),l=require("react"),s=require("react-aria");const n=l.forwardRef((t,o)=>{const{checked:u,disabled:c=!1,label:i,...d}=t,b=l.useRef(null),p=o||b,e=m.useToggleState({...t,isSelected:u}),{buttonProps:g}=s.useToggleButton({...d,isDisabled:c},e,p),{isFocusVisible:f,focusProps:h}=s.useFocusRing();return r.jsxs(x.Flex,{alignItems:"center",children:[i&&r.jsx("div",{className:a.css({mr:2}),children:r.jsx(v.default,{fontWeight:"medium",styles:{lineHeight:1},children:i})}),r.jsx("button",{...s.mergeProps(g,h),className:a.css({px:.5,h:5,width:11,_disabled:{opacity:.3,pointerEvents:"none"},bg:e.isSelected?"brand.base":"neutral.primary",_hover:{bg:e.isSelected?"brand.base":"ink.70",_dark:{bg:e.isSelected?"brand.base":"slate.4"}},transition:"background-color 0.2s ease",rounded:"full",outlineColor:f?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer"}),children:r.jsx("span",{className:S.circle({h:4,w:4,bg:"paper",position:"relative",left:e.isSelected?6:0,transition:"left 0.2s ease"})})})]})});n.displayName="Switch",exports.default=n;
 //# sourceMappingURL=switch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":["../../../../src/components/primitives/switch.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css } from '@styled/css';\nimport { Flex } from '@styled/jsx/flex';\nimport { circle } from '@styled/patterns';\nimport { forwardRef, useRef } from 'react';\nimport { mergeProps, useFocusRing, useToggleButton, type AriaToggleButtonProps } from 'react-aria';\n\nexport type SwitchProps = AriaToggleButtonProps & {\n  checked?: boolean;\n  disabled?: boolean;\n  label?: string;\n};\n\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, forwardedRef) => {\n  const { checked, disabled = false, label, ...otherProps } = props;\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const state = useToggleState({ ...props, isSelected: checked });\n\n  const { buttonProps } = useToggleButton(\n    { ...otherProps, isDisabled: disabled },\n    state,\n    ref as React.RefObject<HTMLButtonElement>,\n  );\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return (\n    <Flex alignItems=\"center\">\n      {label && (\n        <div className={css({ mr: 2 })}>\n          <Text styles={{ fontWeight: 500, lineHeight: 1 }}>{label}</Text>\n        </div>\n      )}\n      <button\n        {...mergeProps(buttonProps, focusProps)}\n        className={css({\n          px: 0.5,\n          h: 5,\n          width: 11,\n          _disabled: {\n            opacity: 0.3,\n            pointerEvents: 'none',\n          },\n          bg: state.isSelected ? 'brand.base' : 'neutral.primary',\n          _hover: {\n            bg: !state.isSelected ? 'ink.70' : 'brand.base',\n            _dark: {\n              bg: !state.isSelected ? 'slate.4' : 'brand.base',\n            },\n          },\n          transition: 'background-color 0.2s ease',\n          rounded: 'full',\n          outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n          outlineStyle: 'solid',\n          outlineWidth: 'thick',\n          outlineOffset: 0.5,\n          cursor: 'pointer',\n        })}\n      >\n        <span\n          className={circle({\n            h: 4,\n            w: 4,\n            bg: 'paper',\n            position: 'relative',\n            left: state.isSelected ? 6 : 0,\n            transition: 'left 0.2s ease',\n          })}\n        />\n      </button>\n    </Flex>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["Switch","forwardRef","props","forwardedRef","checked","disabled","label","otherProps","internalRef","useRef","ref","state","useToggleState","buttonProps","useToggleButton","isFocusVisible","focusProps","useFocusRing","_jsxs","Flex","_jsx","css","Text","mergeProps","circle"],"mappings":"ySAcA,MAAMA,EAASC,EAAAA,WAA2C,CAACC,EAAOC,IAAgB,CAChF,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAW,GAAO,MAAAC,EAAO,GAAGC,CAAY,EAAGL,EAEtDM,EAAcC,SAAO,IAAI,EACzBC,EAAMP,GAAgBK,EAEtBG,EAAQC,EAAe,eAAA,CAAE,GAAGV,EAAO,WAAYE,CAAO,CAAE,EAExD,CAAE,YAAAS,CAAW,EAAKC,EAAAA,gBACtB,CAAE,GAAGP,EAAY,WAAYF,CAAU,EACvCM,EACAD,CAAyC,EAErC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,iBAEvC,OACEC,OAACC,EAAAA,KAAK,CAAA,WAAW,SAAQ,SAAA,CACtBb,GACCc,EAAAA,IAAA,MAAA,CAAK,UAAWC,MAAI,CAAE,GAAI,CAAC,CAAE,EAAC,SAC5BD,EAACE,IAAAA,EAAAA,QAAK,CAAA,OAAQ,CAAE,WAAY,IAAK,WAAY,CAAC,EAAK,SAAAhB,CAAa,CAAA,CAAA,CAAA,EAGpEc,EAAA,IAAA,SAAA,CAAA,GACMG,EAAWV,WAAAA,EAAaG,CAAU,EACtC,UAAWK,MAAI,CACb,GAAI,GACJ,EAAG,EACH,MAAO,GACP,UAAW,CACT,QAAS,GACT,cAAe,MAChB,EACD,GAAIV,EAAM,WAAa,aAAe,kBACtC,OAAQ,CACN,GAAKA,EAAM,WAAwB,aAAX,SACxB,MAAO,CACL,GAAKA,EAAM,WAAyB,aAAZ,SACzB,CACF,EACD,WAAY,6BACZ,QAAS,OACT,aAAcI,EAAiB,aAAe,cAC9C,aAAc,QACd,aAAc,QACd,cAAe,GACf,OAAQ,SACT,CAAA,EAED,SAAAK,EAAAA,IAAA,OAAA,CACE,UAAWI,EAAAA,OAAO,CAChB,EAAG,EACH,EAAG,EACH,GAAI,QACJ,SAAU,WACV,KAAMb,EAAM,WAAa,EAAI,EAC7B,WAAY,gBACb,CAAA,CACD,CAAA,CAAA,CAAA,CACK,CACJ,CAAA,CAEX,CAAC,EAEDX,EAAO,YAAc"}
+{"version":3,"file":"switch.js","sources":["../../../../src/components/primitives/switch.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css } from '@styled/css';\nimport { Flex } from '@styled/jsx/flex';\nimport { circle } from '@styled/patterns';\nimport { forwardRef, useRef } from 'react';\nimport { mergeProps, useFocusRing, useToggleButton, type AriaToggleButtonProps } from 'react-aria';\n\nexport type SwitchProps = AriaToggleButtonProps & {\n  checked?: boolean;\n  disabled?: boolean;\n  label?: string;\n};\n\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, forwardedRef) => {\n  const { checked, disabled = false, label, ...otherProps } = props;\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const state = useToggleState({ ...props, isSelected: checked });\n\n  const { buttonProps } = useToggleButton(\n    { ...otherProps, isDisabled: disabled },\n    state,\n    ref as React.RefObject<HTMLButtonElement>,\n  );\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return (\n    <Flex alignItems=\"center\">\n      {label && (\n        <div className={css({ mr: 2 })}>\n          <Text fontWeight=\"medium\" styles={{ lineHeight: 1 }}>\n            {label}\n          </Text>\n        </div>\n      )}\n      <button\n        {...mergeProps(buttonProps, focusProps)}\n        className={css({\n          px: 0.5,\n          h: 5,\n          width: 11,\n          _disabled: {\n            opacity: 0.3,\n            pointerEvents: 'none',\n          },\n          bg: state.isSelected ? 'brand.base' : 'neutral.primary',\n          _hover: {\n            bg: !state.isSelected ? 'ink.70' : 'brand.base',\n            _dark: {\n              bg: !state.isSelected ? 'slate.4' : 'brand.base',\n            },\n          },\n          transition: 'background-color 0.2s ease',\n          rounded: 'full',\n          outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n          outlineStyle: 'solid',\n          outlineWidth: 'thick',\n          outlineOffset: 0.5,\n          cursor: 'pointer',\n        })}\n      >\n        <span\n          className={circle({\n            h: 4,\n            w: 4,\n            bg: 'paper',\n            position: 'relative',\n            left: state.isSelected ? 6 : 0,\n            transition: 'left 0.2s ease',\n          })}\n        />\n      </button>\n    </Flex>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["Switch","forwardRef","props","forwardedRef","checked","disabled","label","otherProps","internalRef","useRef","ref","state","useToggleState","buttonProps","useToggleButton","isFocusVisible","focusProps","useFocusRing","_jsxs","Flex","_jsx","css","Text","mergeProps","circle"],"mappings":"ySAcA,MAAMA,EAASC,EAAAA,WAA2C,CAACC,EAAOC,IAAgB,CAChF,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAW,GAAO,MAAAC,EAAO,GAAGC,CAAY,EAAGL,EAEtDM,EAAcC,SAAO,IAAI,EACzBC,EAAMP,GAAgBK,EAEtBG,EAAQC,EAAe,eAAA,CAAE,GAAGV,EAAO,WAAYE,CAAO,CAAE,EAExD,CAAE,YAAAS,CAAW,EAAKC,EAAAA,gBACtB,CAAE,GAAGP,EAAY,WAAYF,CAAU,EACvCM,EACAD,CAAyC,EAErC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,iBAEvC,OACEC,OAACC,EAAAA,KAAK,CAAA,WAAW,SAAQ,SAAA,CACtBb,GACCc,EAAAA,IAAA,MAAA,CAAK,UAAWC,MAAI,CAAE,GAAI,CAAC,CAAE,EAAC,SAC5BD,EAACE,IAAAA,EAAAA,QAAK,CAAA,WAAW,SAAS,OAAQ,CAAE,WAAY,CAAC,EAC9C,SAAAhB,CACI,CAAA,CAAA,CAAA,EAGXc,EAAA,IAAA,SAAA,CAAA,GACMG,EAAWV,WAAAA,EAAaG,CAAU,EACtC,UAAWK,MAAI,CACb,GAAI,GACJ,EAAG,EACH,MAAO,GACP,UAAW,CACT,QAAS,GACT,cAAe,MAChB,EACD,GAAIV,EAAM,WAAa,aAAe,kBACtC,OAAQ,CACN,GAAKA,EAAM,WAAwB,aAAX,SACxB,MAAO,CACL,GAAKA,EAAM,WAAyB,aAAZ,SACzB,CACF,EACD,WAAY,6BACZ,QAAS,OACT,aAAcI,EAAiB,aAAe,cAC9C,aAAc,QACd,aAAc,QACd,cAAe,GACf,OAAQ,SACT,CAAA,EAED,SAAAK,EAAAA,IAAA,OAAA,CACE,UAAWI,EAAAA,OAAO,CAChB,EAAG,EACH,EAAG,EACH,GAAI,QACJ,SAAU,WACV,KAAMb,EAAM,WAAa,EAAI,EAC7B,WAAY,gBACb,CAAA,CACD,CAAA,CAAA,CAAA,CACK,CACJ,CAAA,CAEX,CAAC,EAEDX,EAAO,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var a=require("react/jsx-runtime"),h=require("../../recipes/text.js"),l=require("@styled/css"),c=require("react");const d={color:"text.primary"},f=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h1",{ref:r,className:l.css({textStyle:s?"h1-scaled":"h1",textWrap:"pretty",...d}),style:t,children:e})),o=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h2",{ref:r,className:l.css({textStyle:s?"h2-scaled":"h2",textWrap:"pretty",...d}),style:t,children:e})),p=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h3",{ref:r,className:l.css({textStyle:s?"h3-scaled":"h3",textWrap:"pretty",...d}),style:t,children:e})),m=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h4",{ref:r,className:l.css({textStyle:s?"h4-scaled":"h4",textWrap:"pretty",...d}),style:t,children:e})),N=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h5",{ref:r,className:l.css({textStyle:s?"h5-scaled":"h5",textWrap:"pretty",...d}),style:t,children:e})),u=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h6",{ref:r,className:l.css({textStyle:s?"h6-scaled":"h6",textWrap:"pretty",color:"text.secondary"}),style:t,children:e})),j=c.forwardRef(({children:e,styles:t={},variant:s="text",size:r="md",truncate:i=!1},n)=>{const y=h.text({mono:!0,variant:s,size:r});return a.jsx("span",{ref:n,className:`${y} ${l.css({truncate:i})}`,style:t,children:e})}),H=c.forwardRef(({children:e,styles:t={},scale:s,inline:r=!1,variant:i="text",size:n="md",truncate:y=!1},v)=>{const R=h.text({variant:i,size:n,scale:s}),x={ref:v,className:`${R} ${l.css({truncate:y})}`,style:t};return r?a.jsx("span",{...x,children:e}):a.jsx("p",{...x,children:e})}),T=Object.assign(H,{H1:f,H2:o,H3:p,H4:m,H5:N,H6:u,Mono:j});H.displayName="Text",f.displayName="Text.H1",o.displayName="Text.H2",p.displayName="Text.H3",m.displayName="Text.H4",N.displayName="Text.H5",u.displayName="Text.H6",j.displayName="Text.Mono";var w=T;exports.default=w;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("react/jsx-runtime"),S=require("../../recipes/text.js"),o=require("@styled/css"),n=require("react");const d="text.primary",h=n.forwardRef(({children:e,styles:s={},scale:t,fontColor:r=d,...a},l)=>c.jsx("h1",{ref:l,className:o.css({textStyle:t?"h1-scaled":"h1",color:r,...a}),style:s,children:e})),x=n.forwardRef(({children:e,styles:s={},scale:t,fontColor:r=d,...a},l)=>c.jsx("h2",{ref:l,className:o.css({textStyle:t?"h2-scaled":"h2",color:r,...a}),style:s,children:e})),y=n.forwardRef(({children:e,styles:s={},scale:t,fontColor:r=d,...a},l)=>c.jsx("h3",{ref:l,className:o.css({textStyle:t?"h3-scaled":"h3",color:r,...a}),style:s,children:e})),m=n.forwardRef(({children:e,styles:s={},scale:t,fontColor:r=d,...a},l)=>c.jsx("h4",{ref:l,className:o.css({textStyle:t?"h4-scaled":"h4",color:r,...a}),style:s,children:e})),N=n.forwardRef(({children:e,styles:s={},scale:t,fontColor:r=d,...a},l)=>c.jsx("h5",{ref:l,className:o.css({textStyle:t?"h5-scaled":"h5",color:r,...a}),style:s,children:e})),u=n.forwardRef(({children:e,styles:s={},scale:t,fontColor:r="text.secondary",...a},l)=>c.jsx("h6",{ref:l,className:o.css({textStyle:t?"h6-scaled":"h6",color:r,...a}),style:s,children:e})),i=n.forwardRef(({children:e,styles:s={},scale:t,inline:r=!1,mono:a=!1,variant:l="text",size:H="md",truncate:j=!1,fontWeight:R,fontColor:T,...w},v)=>{const C=S.text({mono:a,variant:l,size:H,scale:t}),f={ref:v,className:o.cx(C,o.css({truncate:j,fontWeight:R??(l!=="text"?"medium":"normal"),color:T,...w})),style:s};return r?c.jsx("span",{...f,children:e}):c.jsx("p",{...f,children:e})}),p=n.forwardRef((e,s)=>c.jsx(i,{ref:s,mono:!0,...e})),q=Object.assign(i,{H1:h,H2:x,H3:y,H4:m,H5:N,H6:u,Mono:p});i.displayName="Text",h.displayName="Text.H1",x.displayName="Text.H2",y.displayName="Text.H3",m.displayName="Text.H4",N.displayName="Text.H5",u.displayName="Text.H6",p.displayName="Text.Mono",exports.default=q;
 //# sourceMappingURL=text.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../../src/components/primitives/text.tsx"],"sourcesContent":["import { text } from '@recipes/text';\nimport { css } from '@styled/css';\nimport { CSSProperties, PropsWithChildren, forwardRef } from 'react';\n\nexport type TextStyles = {\n  color?: CSSProperties['color'];\n  fontWeight?: CSSProperties['fontWeight'];\n  fontSize?: CSSProperties['fontSize'];\n  lineHeight?: CSSProperties['lineHeight'];\n  letterSpacing?: CSSProperties['letterSpacing'];\n  textAlign?: CSSProperties['textAlign'];\n  textDecoration?: CSSProperties['textDecoration'];\n  textTransform?: CSSProperties['textTransform'];\n};\n\nexport interface TextProps extends PropsWithChildren {\n  styles?: TextStyles;\n  scale?: boolean;\n}\n\nexport interface BodyProps extends TextProps {\n  inline?: boolean;\n  variant?: 'text' | 'error' | 'info' | 'success' | 'warning';\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  truncate?: boolean;\n}\n\nconst defaultColor = { color: 'text.primary' };\n\nconst TextH1 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h1\n    ref={ref}\n    className={css({ textStyle: scale ? 'h1-scaled' : 'h1', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h1>\n));\n\nconst TextH2 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h2\n    ref={ref}\n    className={css({ textStyle: scale ? 'h2-scaled' : 'h2', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h2>\n));\n\nconst TextH3 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h3\n    ref={ref}\n    className={css({ textStyle: scale ? 'h3-scaled' : 'h3', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h3>\n));\n\nconst TextH4 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h4\n    ref={ref}\n    className={css({ textStyle: scale ? 'h4-scaled' : 'h4', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h4>\n));\n\nconst TextH5 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h5\n    ref={ref}\n    className={css({ textStyle: scale ? 'h5-scaled' : 'h5', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h5>\n));\n\nconst TextH6 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h6\n    ref={ref}\n    className={css({ textStyle: scale ? 'h6-scaled' : 'h6', textWrap: 'pretty', color: 'text.secondary' })}\n    style={styles}\n  >\n    {children}\n  </h6>\n));\n\nconst TextMono = forwardRef<HTMLParagraphElement, BodyProps>(\n  ({ children, styles = {}, variant = 'text', size = 'md', truncate = false }, ref) => {\n    const classStyles = text({ mono: true, variant, size });\n\n    return (\n      <span ref={ref} className={`${classStyles} ${css({ truncate })}`} style={styles}>\n        {children}\n      </span>\n    );\n  },\n);\n\nconst Body = forwardRef<HTMLParagraphElement, BodyProps>(\n  ({ children, styles = {}, scale, inline = false, variant = 'text', size = 'md', truncate = false }, ref) => {\n    const classStyles = text({ variant, size, scale });\n    const bodyProps = {\n      ref,\n      className: `${classStyles} ${css({ truncate })}`,\n      style: styles,\n    };\n\n    if (inline) {\n      return <span {...bodyProps}>{children}</span>;\n    }\n\n    return <p {...bodyProps}>{children}</p>;\n  },\n);\n\nconst Text = Object.assign(Body, {\n  H1: TextH1,\n  H2: TextH2,\n  H3: TextH3,\n  H4: TextH4,\n  H5: TextH5,\n  H6: TextH6,\n  Mono: TextMono,\n});\n\nBody.displayName = 'Text';\nTextH1.displayName = 'Text.H1';\nTextH2.displayName = 'Text.H2';\nTextH3.displayName = 'Text.H3';\nTextH4.displayName = 'Text.H4';\nTextH5.displayName = 'Text.H5';\nTextH6.displayName = 'Text.H6';\nTextMono.displayName = 'Text.Mono';\n\nexport default Text;\n"],"names":["defaultColor","TextH1","forwardRef","children","styles","scale","ref","_jsx","css","TextH2","TextH3","TextH4","TextH5","TextH6","TextMono","variant","size","truncate","classStyles","text","Body","inline","bodyProps","Text"],"mappings":"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"}
+{"version":3,"file":"text.js","sources":["../../../../src/components/primitives/text.tsx"],"sourcesContent":["import { text } from '@recipes/text';\nimport { css, cx } from '@styled/css';\nimport { CSSProperties, PropsWithChildren, forwardRef } from 'react';\n\nexport type TextStyles = {\n  color?: CSSProperties['color'];\n  fontWeight?: CSSProperties['fontWeight'];\n  fontSize?: CSSProperties['fontSize'];\n  lineHeight?: CSSProperties['lineHeight'];\n  letterSpacing?: CSSProperties['letterSpacing'];\n  textAlign?: CSSProperties['textAlign'];\n  textDecoration?: CSSProperties['textDecoration'];\n  textTransform?: CSSProperties['textTransform'];\n  textWrap?: CSSProperties['textWrap'];\n  maxWidth?: CSSProperties['maxWidth'];\n};\n\nexport interface TextProps extends PropsWithChildren {\n  styles?: TextStyles;\n  scale?: boolean;\n  fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';\n  fontColor?: 'text.primary' | 'text.secondary' | 'text.tertiary' | 'text.quaternary';\n}\n\nexport interface BodyProps extends TextProps {\n  inline?: boolean;\n  mono?: boolean;\n  variant?: 'text' | 'error' | 'info' | 'success' | 'warning';\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  truncate?: boolean;\n}\n\nconst defaultColor = 'text.primary';\n\nconst TextH1 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = defaultColor, ...props }, ref) => (\n    <h1 ref={ref} className={css({ textStyle: scale ? 'h1-scaled' : 'h1', color, ...props })} style={styles}>\n      {children}\n    </h1>\n  ),\n);\n\nconst TextH2 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = defaultColor, ...props }, ref) => (\n    <h2 ref={ref} className={css({ textStyle: scale ? 'h2-scaled' : 'h2', color, ...props })} style={styles}>\n      {children}\n    </h2>\n  ),\n);\n\nconst TextH3 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = defaultColor, ...props }, ref) => (\n    <h3 ref={ref} className={css({ textStyle: scale ? 'h3-scaled' : 'h3', color, ...props })} style={styles}>\n      {children}\n    </h3>\n  ),\n);\n\nconst TextH4 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = defaultColor, ...props }, ref) => (\n    <h4 ref={ref} className={css({ textStyle: scale ? 'h4-scaled' : 'h4', color, ...props })} style={styles}>\n      {children}\n    </h4>\n  ),\n);\n\nconst TextH5 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = defaultColor, ...props }, ref) => (\n    <h5 ref={ref} className={css({ textStyle: scale ? 'h5-scaled' : 'h5', color, ...props })} style={styles}>\n      {children}\n    </h5>\n  ),\n);\n\nconst TextH6 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = 'text.secondary', ...props }, ref) => (\n    <h6 ref={ref} className={css({ textStyle: scale ? 'h6-scaled' : 'h6', color, ...props })} style={styles}>\n      {children}\n    </h6>\n  ),\n);\n\nconst Body = forwardRef<HTMLParagraphElement, BodyProps>(\n  (\n    {\n      children,\n      styles = {},\n      scale,\n      inline = false,\n      mono = false,\n      variant = 'text',\n      size = 'md',\n      truncate = false,\n      fontWeight,\n      fontColor: color,\n      ...props\n    },\n    ref,\n  ) => {\n    const classStyles = text({ mono, variant, size, scale });\n    const fontWeightStyle = fontWeight ?? (variant !== 'text' ? 'medium' : 'normal');\n    const bodyProps = {\n      ref,\n      className: cx(classStyles, css({ truncate, fontWeight: fontWeightStyle, color, ...props })),\n      style: styles,\n    };\n\n    if (inline) {\n      return <span {...bodyProps}>{children}</span>;\n    }\n\n    return <p {...bodyProps}>{children}</p>;\n  },\n);\n\nconst TextMono = forwardRef<HTMLParagraphElement, BodyProps>((props, ref) => {\n  return <Body ref={ref} mono {...props} />;\n});\n\nconst Text = Object.assign(Body, {\n  H1: TextH1,\n  H2: TextH2,\n  H3: TextH3,\n  H4: TextH4,\n  H5: TextH5,\n  H6: TextH6,\n  Mono: TextMono,\n});\n\nBody.displayName = 'Text';\nTextH1.displayName = 'Text.H1';\nTextH2.displayName = 'Text.H2';\nTextH3.displayName = 'Text.H3';\nTextH4.displayName = 'Text.H4';\nTextH5.displayName = 'Text.H5';\nTextH6.displayName = 'Text.H6';\nTextMono.displayName = 'Text.Mono';\n\nexport default Text;\n"],"names":["defaultColor","TextH1","forwardRef","children","styles","scale","color","props","ref","_jsx","css","TextH2","TextH3","TextH4","TextH5","TextH6","Body","inline","mono","variant","size","truncate","fontWeight","classStyles","text","bodyProps","cx","TextMono","Text"],"mappings":"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"}

package/dist/cjs/recipes/callout.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@styled/css");const o=e.sva({slots:["container","label","description","icon","button","focus"],base:{container:{px:4,py:3,rounded:10,w:"full"},button:{cursor:"pointer",outline:"none",_focusVisible:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,rounded:2}}},variants:{size:{sm:{label:{fontSize:"sm"}},md:{label:{fontSize:"md"}},lg:{label:{fontSize:"lg"}}},variant:{branded:{container:{bg:"brand.lightest",_focusVisible:{outlineColor:"brand.lightest"}},label:{color:"brand.darkest"},description:{color:"brand.darkest"},icon:{color:"brand.darkest"},button:{color:"brand.darkest"}},success:{container:{bg:"positive.lightest",_focusVisible:{outlineColor:"positive.lightest"}},label:{color:"positive.darkest"},description:{color:"positive.darkest"},icon:{color:"positive.darkest"},button:{color:"positive.darkest"}},error:{container:{bg:"negative.lightest",_focusVisible:{outlineColor:"negative.lightest"}},label:{color:"negative.darkest"},description:{color:"negative.darkest"},icon:{color:"negative.darkest"},button:{color:"negative.darkest"}},warning:{container:{bg:"warning.lightest",_focusVisible:{outlineColor:"warning.lightest"}},label:{color:"warning.darkest"},description:{color:"warning.darkest"},icon:{color:"warning.darkest"},button:{color:"warning.darkest"}},neutral:{container:{bg:"surface.secondary",_focusVisible:{outlineColor:"surface.secondary"}},label:{color:"text.secondary"},description:{color:"text.secondary"},icon:{color:"text.secondary"},button:{color:"text.secondary"}}},icon:{true:{description:{ml:7}}},dismissible:{true:{description:{mr:7}}},interactive:{true:{container:{cursor:"pointer",transition:"transform 0.2s ease, opacity 0.2s ease",_active:{transform:"scale(0.95)"},_hover:{opacity:.8},_focusVisible:{outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}}}},description:{true:{label:{textTransform:"uppercase",fontSize:"xs",fontWeight:"semibold",letterSpacing:"0.06rem"}}},isDismissed:{true:{container:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}}});exports.callout=o;
+"use strict";var e=require("@styled/css");const o=e.sva({slots:["container","label","description","icon","button","focus"],base:{container:{px:4,py:3,rounded:10,w:"full"},button:{cursor:"pointer",outline:"none",_focusVisible:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,rounded:2}},label:{textAlign:"left"}},variants:{size:{sm:{label:{fontSize:"sm"}},md:{label:{fontSize:"md"}},lg:{label:{fontSize:"lg"}}},variant:{branded:{container:{bg:"brand.lightest",_focusVisible:{outlineColor:"brand.lightest"}},label:{color:"brand.darkest"},description:{color:"brand.darkest"},icon:{color:"brand.darkest"},button:{color:"brand.darkest"}},success:{container:{bg:"positive.lightest",_focusVisible:{outlineColor:"positive.lightest"}},label:{color:"positive.darkest"},description:{color:"positive.darkest"},icon:{color:"positive.darkest"},button:{color:"positive.darkest"}},error:{container:{bg:"negative.lightest",_focusVisible:{outlineColor:"negative.lightest"}},label:{color:"negative.darkest"},description:{color:"negative.darkest"},icon:{color:"negative.darkest"},button:{color:"negative.darkest"}},warning:{container:{bg:"warning.lightest",_focusVisible:{outlineColor:"warning.lightest"}},label:{color:"warning.darkest"},description:{color:"warning.darkest"},icon:{color:"warning.darkest"},button:{color:"warning.darkest"}},neutral:{container:{bg:"surface.secondary",_focusVisible:{outlineColor:"surface.secondary"}},label:{color:"text.secondary"},description:{color:"text.secondary"},icon:{color:"text.secondary"},button:{color:"text.secondary"}}},icon:{true:{description:{ml:7}}},dismissible:{true:{description:{mr:7}}},interactive:{true:{container:{cursor:"pointer",transition:"transform 0.2s ease, opacity 0.2s ease",_active:{transform:"scale(0.95)"},_hover:{opacity:.8},_focusVisible:{outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}}}},description:{true:{label:{textTransform:"uppercase",fontSize:"xs",fontWeight:"semibold",letterSpacing:"0.06rem"}}},isDismissed:{true:{container:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}}});exports.callout=o;
 //# sourceMappingURL=callout.js.map

package/dist/cjs/recipes/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","sources":["../../../src/recipes/callout.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const callout = sva({\n  slots: ['container', 'label', 'description', 'icon', 'button', 'focus'],\n  base: {\n    container: {\n      px: 4,\n      py: 3,\n      rounded: 10,\n      w: 'full',\n    },\n    button: {\n      cursor: 'pointer',\n      outline: 'none',\n      _focusVisible: {\n        outlineColor: 'brand.base',\n        outlineStyle: 'solid',\n        outlineWidth: 'thick',\n        outlineOffset: 0.5,\n        rounded: 2,\n      },\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        label: { fontSize: 'sm' },\n      },\n      md: {\n        label: { fontSize: 'md' },\n      },\n      lg: {\n        label: { fontSize: 'lg' },\n      },\n    },\n    variant: {\n      branded: {\n        container: {\n          bg: 'brand.lightest',\n          _focusVisible: {\n            outlineColor: 'brand.lightest',\n          },\n        },\n        label: {\n          color: 'brand.darkest',\n        },\n        description: {\n          color: 'brand.darkest',\n        },\n        icon: {\n          color: 'brand.darkest',\n        },\n        button: {\n          color: 'brand.darkest',\n        },\n      },\n      success: {\n        container: {\n          bg: 'positive.lightest',\n          _focusVisible: {\n            outlineColor: 'positive.lightest',\n          },\n        },\n        label: {\n          color: 'positive.darkest',\n        },\n        description: {\n          color: 'positive.darkest',\n        },\n        icon: {\n          color: 'positive.darkest',\n        },\n        button: {\n          color: 'positive.darkest',\n        },\n      },\n      error: {\n        container: {\n          bg: 'negative.lightest',\n          _focusVisible: {\n            outlineColor: 'negative.lightest',\n          },\n        },\n        label: {\n          color: 'negative.darkest',\n        },\n        description: {\n          color: 'negative.darkest',\n        },\n        icon: {\n          color: 'negative.darkest',\n        },\n        button: {\n          color: 'negative.darkest',\n        },\n      },\n      warning: {\n        container: {\n          bg: 'warning.lightest',\n          _focusVisible: {\n            outlineColor: 'warning.lightest',\n          },\n        },\n        label: {\n          color: 'warning.darkest',\n        },\n        description: {\n          color: 'warning.darkest',\n        },\n        icon: {\n          color: 'warning.darkest',\n        },\n        button: {\n          color: 'warning.darkest',\n        },\n      },\n      neutral: {\n        container: {\n          bg: 'surface.secondary',\n          _focusVisible: {\n            outlineColor: 'surface.secondary',\n          },\n        },\n        label: {\n          color: 'text.secondary',\n        },\n        description: {\n          color: 'text.secondary',\n        },\n        icon: {\n          color: 'text.secondary',\n        },\n        button: {\n          color: 'text.secondary',\n        },\n      },\n    },\n    icon: {\n      true: {\n        description: {\n          ml: 7,\n        },\n      },\n    },\n    dismissible: {\n      true: {\n        description: {\n          mr: 7,\n        },\n      },\n    },\n    interactive: {\n      true: {\n        container: {\n          cursor: 'pointer',\n          transition: 'transform 0.2s ease, opacity 0.2s ease',\n          _active: { transform: 'scale(0.95)' },\n          _hover: {\n            opacity: 0.8,\n          },\n          _focusVisible: {\n            outlineStyle: 'solid',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n          },\n        },\n      },\n    },\n    description: {\n      true: {\n        label: {\n          textTransform: 'uppercase',\n          fontSize: 'xs',\n          fontWeight: 'semibold',\n          letterSpacing: '0.06rem',\n        },\n      },\n    },\n    isDismissed: {\n      true: {\n        container: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleOut',\n          animationDuration: '150ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n  },\n});\n"],"names":["callout","sva"],"mappings":"0CAEa,MAAAA,EAAUC,MAAI,CACzB,MAAO,CAAC,YAAa,QAAS,cAAe,OAAQ,SAAU,OAAO,EACtE,KAAM,CACJ,UAAW,CACT,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,EAAG,MACJ,EACD,OAAQ,CACN,OAAQ,UACR,QAAS,OACT,cAAe,CACb,aAAc,aACd,aAAc,QACd,aAAc,QACd,cAAe,GACf,QAAS,CACV,CACF,CACF,EACD,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,CAAE,SAAU,IAAM,CAC1B,EACD,GAAI,CACF,MAAO,CAAE,SAAU,IAAM,CAC1B,EACD,GAAI,CACF,MAAO,CAAE,SAAU,IAAM,CAC1B,CACF,EACD,QAAS,CACP,QAAS,CACP,UAAW,CACT,GAAI,iBACJ,cAAe,CACb,aAAc,gBACf,CACF,EACD,MAAO,CACL,MAAO,eACR,EACD,YAAa,CACX,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,EACD,OAAQ,CACN,MAAO,eACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,MAAO,CACL,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,mBACJ,cAAe,CACb,aAAc,kBACf,CACF,EACD,MAAO,CACL,MAAO,iBACR,EACD,YAAa,CACX,MAAO,iBACR,EACD,KAAM,CACJ,MAAO,iBACR,EACD,OAAQ,CACN,MAAO,iBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,gBACR,EACD,YAAa,CACX,MAAO,gBACR,EACD,KAAM,CACJ,MAAO,gBACR,EACD,OAAQ,CACN,MAAO,gBACR,CACF,CACF,EACD,KAAM,CACJ,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,UAAW,CACT,OAAQ,UACR,WAAY,yCACZ,QAAS,CAAE,UAAW,aAAe,EACrC,OAAQ,CACN,QAAS,EACV,EACD,cAAe,CACb,aAAc,QACd,aAAc,QACd,cAAe,EAChB,CACF,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,MAAO,CACL,cAAe,YACf,SAAU,KACV,WAAY,WACZ,cAAe,SAChB,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,UAAW,CACT,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,CACF,CAAA"}
+{"version":3,"file":"callout.js","sources":["../../../src/recipes/callout.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const callout = sva({\n  slots: ['container', 'label', 'description', 'icon', 'button', 'focus'],\n  base: {\n    container: {\n      px: 4,\n      py: 3,\n      rounded: 10,\n      w: 'full',\n    },\n    button: {\n      cursor: 'pointer',\n      outline: 'none',\n      _focusVisible: {\n        outlineColor: 'brand.base',\n        outlineStyle: 'solid',\n        outlineWidth: 'thick',\n        outlineOffset: 0.5,\n        rounded: 2,\n      },\n    },\n    label: {\n      textAlign: 'left',\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        label: { fontSize: 'sm' },\n      },\n      md: {\n        label: { fontSize: 'md' },\n      },\n      lg: {\n        label: { fontSize: 'lg' },\n      },\n    },\n    variant: {\n      branded: {\n        container: {\n          bg: 'brand.lightest',\n          _focusVisible: {\n            outlineColor: 'brand.lightest',\n          },\n        },\n        label: {\n          color: 'brand.darkest',\n        },\n        description: {\n          color: 'brand.darkest',\n        },\n        icon: {\n          color: 'brand.darkest',\n        },\n        button: {\n          color: 'brand.darkest',\n        },\n      },\n      success: {\n        container: {\n          bg: 'positive.lightest',\n          _focusVisible: {\n            outlineColor: 'positive.lightest',\n          },\n        },\n        label: {\n          color: 'positive.darkest',\n        },\n        description: {\n          color: 'positive.darkest',\n        },\n        icon: {\n          color: 'positive.darkest',\n        },\n        button: {\n          color: 'positive.darkest',\n        },\n      },\n      error: {\n        container: {\n          bg: 'negative.lightest',\n          _focusVisible: {\n            outlineColor: 'negative.lightest',\n          },\n        },\n        label: {\n          color: 'negative.darkest',\n        },\n        description: {\n          color: 'negative.darkest',\n        },\n        icon: {\n          color: 'negative.darkest',\n        },\n        button: {\n          color: 'negative.darkest',\n        },\n      },\n      warning: {\n        container: {\n          bg: 'warning.lightest',\n          _focusVisible: {\n            outlineColor: 'warning.lightest',\n          },\n        },\n        label: {\n          color: 'warning.darkest',\n        },\n        description: {\n          color: 'warning.darkest',\n        },\n        icon: {\n          color: 'warning.darkest',\n        },\n        button: {\n          color: 'warning.darkest',\n        },\n      },\n      neutral: {\n        container: {\n          bg: 'surface.secondary',\n          _focusVisible: {\n            outlineColor: 'surface.secondary',\n          },\n        },\n        label: {\n          color: 'text.secondary',\n        },\n        description: {\n          color: 'text.secondary',\n        },\n        icon: {\n          color: 'text.secondary',\n        },\n        button: {\n          color: 'text.secondary',\n        },\n      },\n    },\n    icon: {\n      true: {\n        description: {\n          ml: 7,\n        },\n      },\n    },\n    dismissible: {\n      true: {\n        description: {\n          mr: 7,\n        },\n      },\n    },\n    interactive: {\n      true: {\n        container: {\n          cursor: 'pointer',\n          transition: 'transform 0.2s ease, opacity 0.2s ease',\n          _active: { transform: 'scale(0.95)' },\n          _hover: {\n            opacity: 0.8,\n          },\n          _focusVisible: {\n            outlineStyle: 'solid',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n          },\n        },\n      },\n    },\n    description: {\n      true: {\n        label: {\n          textTransform: 'uppercase',\n          fontSize: 'xs',\n          fontWeight: 'semibold',\n          letterSpacing: '0.06rem',\n        },\n      },\n    },\n    isDismissed: {\n      true: {\n        container: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleOut',\n          animationDuration: '150ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n  },\n});\n"],"names":["callout","sva"],"mappings":"0CAEa,MAAAA,EAAUC,MAAI,CACzB,MAAO,CAAC,YAAa,QAAS,cAAe,OAAQ,SAAU,OAAO,EACtE,KAAM,CACJ,UAAW,CACT,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,EAAG,MACJ,EACD,OAAQ,CACN,OAAQ,UACR,QAAS,OACT,cAAe,CACb,aAAc,aACd,aAAc,QACd,aAAc,QACd,cAAe,GACf,QAAS,CACV,CACF,EACD,MAAO,CACL,UAAW,MACZ,CACF,EACD,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,CAAE,SAAU,IAAM,CAC1B,EACD,GAAI,CACF,MAAO,CAAE,SAAU,IAAM,CAC1B,EACD,GAAI,CACF,MAAO,CAAE,SAAU,IAAM,CAC1B,CACF,EACD,QAAS,CACP,QAAS,CACP,UAAW,CACT,GAAI,iBACJ,cAAe,CACb,aAAc,gBACf,CACF,EACD,MAAO,CACL,MAAO,eACR,EACD,YAAa,CACX,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,EACD,OAAQ,CACN,MAAO,eACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,MAAO,CACL,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,mBACJ,cAAe,CACb,aAAc,kBACf,CACF,EACD,MAAO,CACL,MAAO,iBACR,EACD,YAAa,CACX,MAAO,iBACR,EACD,KAAM,CACJ,MAAO,iBACR,EACD,OAAQ,CACN,MAAO,iBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,gBACR,EACD,YAAa,CACX,MAAO,gBACR,EACD,KAAM,CACJ,MAAO,gBACR,EACD,OAAQ,CACN,MAAO,gBACR,CACF,CACF,EACD,KAAM,CACJ,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,UAAW,CACT,OAAQ,UACR,WAAY,yCACZ,QAAS,CAAE,UAAW,aAAe,EACrC,OAAQ,CACN,QAAS,EACV,EACD,cAAe,CACb,aAAc,QACd,aAAc,QACd,cAAe,EAChB,CACF,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,MAAO,CACL,cAAe,YACf,SAAU,KACV,WAAY,WACZ,cAAe,SAChB,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,UAAW,CACT,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,CACF,CAAA"}

package/dist/cjs/recipes/card.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@styled/css");const a=e.cva({base:{bgColor:"surface.primary",borderRadius:"1rem"},variants:{asButton:{false:{cursor:"default"},true:{alignItems:"center",cursor:"pointer",h:"10.75rem",justifyContent:"center",p:4,transition:"all 0.1s ease",w:"10.75rem",_active:{transform:"scale(0.95)"}}},alignment:{center:{alignItems:"center"},left:{alignItems:"flex-start"},right:{alignItems:"flex-end"}},alt:{true:{}},expand:{false:{overflow:"hidden"},true:{overflow:"visible",w:"full"}},gapType:{none:{gap:0},sm:{gap:4},md:{gap:5},lg:{gap:6}},heavyShadow:{false:{boxShadow:"0px 1px 2px rgba(189, 189, 189, 0.3)"},true:{boxShadow:"8px 8px 48px rgba(16, 15, 17, 0.14)"}},paddingType:{none:{p:0},sm:{px:4,py:3},md:{px:8,py:6},lg:{p:12}},widthMax:{true:{flex:1,maxW:"29.125rem",mdDown:{maxW:"full"}}}},compoundVariants:[{asButton:!0,alt:!0,css:{bgColor:"surface.tertiary",color:"text.secondary",_hover:{filter:"brightness(0.9)"}}}],defaultVariants:{alt:!1,expand:!1,gapType:"md",heavyShadow:!1,paddingType:"md",widthMax:!1}});exports.card=a;
+"use strict";var e=require("@styled/css");const a=e.cva({base:{bgColor:"surface.primary",borderRadius:"1rem"},variants:{asButton:{false:{cursor:"default"},true:{alignItems:"center",cursor:"pointer",h:"10.75rem",justifyContent:"center",p:4,transition:"all 0.1s ease",w:"10.75rem",_active:{transform:"scale(0.95)"}}},alignment:{center:{alignItems:"center"},left:{alignItems:"flex-start"},right:{alignItems:"flex-end"}},alt:{true:{}},expand:{false:{overflow:"hidden"},true:{overflow:"visible",w:"full"}},gapType:{none:{gap:0},sm:{gap:4},md:{gap:5},lg:{gap:6}},heavyShadow:{false:{boxShadow:"0px 1px 2px rgba(189, 189, 189, 0.3)"},true:{boxShadow:"8px 8px 48px rgba(16, 15, 17, 0.14)"}},paddingType:{none:{p:0},sm:{px:4,py:3},md:{px:8,py:6},lg:{p:12}},widthMax:{true:{flex:1,maxW:"29.125rem",mdDown:{maxW:"full"}}},disabled:{true:{opacity:.3,pointerEvents:"none"}},validating:{true:{pointerEvents:"none"}}},compoundVariants:[{asButton:!0,alt:!0,css:{bgColor:"surface.tertiary",color:"text.secondary",_hover:{filter:"brightness(0.9)"}}}],defaultVariants:{alt:!1,expand:!1,gapType:"md",heavyShadow:!1,paddingType:"md",widthMax:!1}});exports.card=a;
 //# sourceMappingURL=card.js.map

package/dist/cjs/recipes/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../src/recipes/card.ts"],"sourcesContent":["import { cva, type RecipeVariantProps } from '@styled/css';\n\nexport const card = cva({\n  base: {\n    bgColor: 'surface.primary',\n    borderRadius: '1rem',\n  },\n  variants: {\n    asButton: {\n      false: {\n        cursor: 'default',\n      },\n      true: {\n        alignItems: 'center',\n        cursor: 'pointer',\n        h: '10.75rem',\n        justifyContent: 'center',\n        p: 4,\n        transition: 'all 0.1s ease',\n        w: '10.75rem',\n        _active: { transform: 'scale(0.95)' },\n      },\n    },\n    alignment: {\n      center: {\n        alignItems: 'center',\n      },\n      left: {\n        alignItems: 'flex-start',\n      },\n      right: {\n        alignItems: 'flex-end',\n      },\n    },\n    alt: {\n      true: {},\n    },\n    expand: {\n      false: {\n        overflow: 'hidden',\n      },\n      true: {\n        overflow: 'visible',\n        w: 'full',\n      },\n    },\n    gapType: {\n      none: {\n        gap: 0,\n      },\n      sm: {\n        gap: 4,\n      },\n      md: {\n        gap: 5,\n      },\n      lg: {\n        gap: 6,\n      },\n    },\n    heavyShadow: {\n      false: {\n        boxShadow: '0px 1px 2px rgba(189, 189, 189, 0.3)',\n      },\n      true: {\n        boxShadow: '8px 8px 48px rgba(16, 15, 17, 0.14)',\n      },\n    },\n    paddingType: {\n      none: {\n        p: 0,\n      },\n      sm: {\n        px: 4,\n        py: 3,\n      },\n      md: {\n        px: 8,\n        py: 6,\n      },\n      lg: {\n        p: 12,\n      },\n    },\n    widthMax: {\n      true: {\n        flex: 1,\n        maxW: '29.125rem',\n        mdDown: { maxW: 'full' },\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      asButton: true,\n      alt: true,\n      css: {\n        bgColor: 'surface.tertiary',\n        color: 'text.secondary',\n        _hover: {\n          filter: 'brightness(0.9)',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    alt: false,\n    expand: false,\n    gapType: 'md',\n    heavyShadow: false,\n    paddingType: 'md',\n    widthMax: false,\n  },\n});\n\nexport type CardVariants = RecipeVariantProps<typeof card>;\n"],"names":["card","cva"],"mappings":"0CAEO,MAAMA,EAAOC,EAAAA,IAAI,CACtB,KAAM,CACJ,QAAS,kBACT,aAAc,MACf,EACD,SAAU,CACR,SAAU,CACR,MAAO,CACL,OAAQ,SACT,EACD,KAAM,CACJ,WAAY,SACZ,OAAQ,UACR,EAAG,WACH,eAAgB,SAChB,EAAG,EACH,WAAY,gBACZ,EAAG,WACH,QAAS,CAAE,UAAW,aAAe,CACtC,CACF,EACD,UAAW,CACT,OAAQ,CACN,WAAY,QACb,EACD,KAAM,CACJ,WAAY,YACb,EACD,MAAO,CACL,WAAY,UACb,CACF,EACD,IAAK,CACH,KAAM,CACP,CAAA,EACD,OAAQ,CACN,MAAO,CACL,SAAU,QACX,EACD,KAAM,CACJ,SAAU,UACV,EAAG,MACJ,CACF,EACD,QAAS,CACP,KAAM,CACJ,IAAK,CACN,EACD,GAAI,CACF,IAAK,CACN,EACD,GAAI,CACF,IAAK,CACN,EACD,GAAI,CACF,IAAK,CACN,CACF,EACD,YAAa,CACX,MAAO,CACL,UAAW,sCACZ,EACD,KAAM,CACJ,UAAW,qCACZ,CACF,EACD,YAAa,CACX,KAAM,CACJ,EAAG,CACJ,EACD,GAAI,CACF,GAAI,EACJ,GAAI,CACL,EACD,GAAI,CACF,GAAI,EACJ,GAAI,CACL,EACD,GAAI,CACF,EAAG,EACJ,CACF,EACD,SAAU,CACR,KAAM,CACJ,KAAM,EACN,KAAM,YACN,OAAQ,CAAE,KAAM,MAAQ,CACzB,CACF,CACF,EACD,iBAAkB,CAChB,CACE,SAAU,GACV,IAAK,GACL,IAAK,CACH,QAAS,mBACT,MAAO,iBACP,OAAQ,CACN,OAAQ,iBACT,CACF,CACF,CACF,EACD,gBAAiB,CACf,IAAK,GACL,OAAQ,GACR,QAAS,KACT,YAAa,GACb,YAAa,KACb,SAAU,EACX,CACF,CAAA"}
+{"version":3,"file":"card.js","sources":["../../../src/recipes/card.ts"],"sourcesContent":["import { cva, type RecipeVariantProps } from '@styled/css';\n\nexport const card = cva({\n  base: {\n    bgColor: 'surface.primary',\n    borderRadius: '1rem',\n  },\n  variants: {\n    asButton: {\n      false: {\n        cursor: 'default',\n      },\n      true: {\n        alignItems: 'center',\n        cursor: 'pointer',\n        h: '10.75rem',\n        justifyContent: 'center',\n        p: 4,\n        transition: 'all 0.1s ease',\n        w: '10.75rem',\n        _active: { transform: 'scale(0.95)' },\n      },\n    },\n    alignment: {\n      center: {\n        alignItems: 'center',\n      },\n      left: {\n        alignItems: 'flex-start',\n      },\n      right: {\n        alignItems: 'flex-end',\n      },\n    },\n    alt: {\n      true: {},\n    },\n    expand: {\n      false: {\n        overflow: 'hidden',\n      },\n      true: {\n        overflow: 'visible',\n        w: 'full',\n      },\n    },\n    gapType: {\n      none: {\n        gap: 0,\n      },\n      sm: {\n        gap: 4,\n      },\n      md: {\n        gap: 5,\n      },\n      lg: {\n        gap: 6,\n      },\n    },\n    heavyShadow: {\n      false: {\n        boxShadow: '0px 1px 2px rgba(189, 189, 189, 0.3)',\n      },\n      true: {\n        boxShadow: '8px 8px 48px rgba(16, 15, 17, 0.14)',\n      },\n    },\n    paddingType: {\n      none: {\n        p: 0,\n      },\n      sm: {\n        px: 4,\n        py: 3,\n      },\n      md: {\n        px: 8,\n        py: 6,\n      },\n      lg: {\n        p: 12,\n      },\n    },\n    widthMax: {\n      true: {\n        flex: 1,\n        maxW: '29.125rem',\n        mdDown: { maxW: 'full' },\n      },\n    },\n    disabled: {\n      true: {\n        opacity: 0.3,\n        pointerEvents: 'none',\n      },\n    },\n    validating: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      asButton: true,\n      alt: true,\n      css: {\n        bgColor: 'surface.tertiary',\n        color: 'text.secondary',\n        _hover: {\n          filter: 'brightness(0.9)',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    alt: false,\n    expand: false,\n    gapType: 'md',\n    heavyShadow: false,\n    paddingType: 'md',\n    widthMax: false,\n  },\n});\n\nexport type CardVariants = RecipeVariantProps<typeof card>;\n"],"names":["card","cva"],"mappings":"0CAEO,MAAMA,EAAOC,EAAAA,IAAI,CACtB,KAAM,CACJ,QAAS,kBACT,aAAc,MACf,EACD,SAAU,CACR,SAAU,CACR,MAAO,CACL,OAAQ,SACT,EACD,KAAM,CACJ,WAAY,SACZ,OAAQ,UACR,EAAG,WACH,eAAgB,SAChB,EAAG,EACH,WAAY,gBACZ,EAAG,WACH,QAAS,CAAE,UAAW,aAAe,CACtC,CACF,EACD,UAAW,CACT,OAAQ,CACN,WAAY,QACb,EACD,KAAM,CACJ,WAAY,YACb,EACD,MAAO,CACL,WAAY,UACb,CACF,EACD,IAAK,CACH,KAAM,CAAA,CACP,EACD,OAAQ,CACN,MAAO,CACL,SAAU,QACX,EACD,KAAM,CACJ,SAAU,UACV,EAAG,MACJ,CACF,EACD,QAAS,CACP,KAAM,CACJ,IAAK,CACN,EACD,GAAI,CACF,IAAK,CACN,EACD,GAAI,CACF,IAAK,CACN,EACD,GAAI,CACF,IAAK,CACN,CACF,EACD,YAAa,CACX,MAAO,CACL,UAAW,sCACZ,EACD,KAAM,CACJ,UAAW,qCACZ,CACF,EACD,YAAa,CACX,KAAM,CACJ,EAAG,CACJ,EACD,GAAI,CACF,GAAI,EACJ,GAAI,CACL,EACD,GAAI,CACF,GAAI,EACJ,GAAI,CACL,EACD,GAAI,CACF,EAAG,EACJ,CACF,EACD,SAAU,CACR,KAAM,CACJ,KAAM,EACN,KAAM,YACN,OAAQ,CAAE,KAAM,MAAQ,CACzB,CACF,EACD,SAAU,CACR,KAAM,CACJ,QAAS,GACT,cAAe,MAChB,CACF,EACD,WAAY,CACV,KAAM,CACJ,cAAe,MAChB,CACF,CACF,EACD,iBAAkB,CAChB,CACE,SAAU,GACV,IAAK,GACL,IAAK,CACH,QAAS,mBACT,MAAO,iBACP,OAAQ,CACN,OAAQ,iBACT,CACF,CACF,CACF,EACD,gBAAiB,CACf,IAAK,GACL,OAAQ,GACR,QAAS,KACT,YAAa,GACb,YAAa,KACb,SAAU,EACX,CACF,CAAA"}

package/dist/cjs/recipes/text.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@styled/css");const t=e.cva({base:{textWrap:"pretty"},variants:{mono:{false:{},true:{}},scale:{false:{},true:{}},variant:{text:{color:"text.primary"},error:{color:"negative.darker",fontWeight:"medium"},info:{color:"brand.base",fontWeight:"medium"},success:{color:"positive.base",fontWeight:"medium"},warning:{color:"warning.base",fontWeight:"medium"}},size:{xs:{textStyle:"body-xs"},sm:{textStyle:"body-sm"},md:{textStyle:"body-md"},lg:{textStyle:"body-lg"}}},compoundVariants:[{scale:!0,size:"sm",css:{textStyle:"body-sm-scaled"}},{scale:!0,size:"md",css:{textStyle:"body-md-scaled"}},{scale:!0,size:"lg",css:{textStyle:"body-lg-scaled"}},{mono:!0,size:"sm",css:{textStyle:"mono-sm"}},{mono:!0,size:"md",css:{textStyle:"mono-md"}},{mono:!0,size:"lg",css:{textStyle:"mono-lg"}}],defaultVariants:{mono:!1,variant:"text",size:"md"}});exports.text=t;
+"use strict";var e=require("@styled/css");const t=e.cva({base:{textWrap:"wrap"},variants:{mono:{false:{},true:{}},scale:{false:{},true:{}},variant:{text:{color:"text.primary"},error:{color:"negative.darker"},info:{color:"brand.base"},success:{color:"positive.base"},warning:{color:"warning.base"}},size:{xs:{textStyle:"body-xs"},sm:{textStyle:"body-sm"},md:{textStyle:"body-md"},lg:{textStyle:"body-lg"}}},compoundVariants:[{scale:!0,size:"sm",css:{textStyle:"body-sm-scaled"}},{scale:!0,size:"md",css:{textStyle:"body-md-scaled"}},{scale:!0,size:"lg",css:{textStyle:"body-lg-scaled"}},{mono:!0,size:"sm",css:{textStyle:"mono-sm"}},{mono:!0,size:"md",css:{textStyle:"mono-md"}},{mono:!0,size:"lg",css:{textStyle:"mono-lg"}}],defaultVariants:{mono:!1,variant:"text",size:"md"}});exports.text=t;
 //# sourceMappingURL=text.js.map

package/dist/cjs/recipes/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../src/recipes/text.ts"],"sourcesContent":["import { cva, type RecipeVariantProps } from '@styled/css';\n\nexport const text = cva({\n  base: {\n    textWrap: 'pretty',\n  },\n  variants: {\n    mono: {\n      false: {},\n      true: {},\n    },\n    scale: {\n      false: {},\n      true: {},\n    },\n    variant: {\n      text: {\n        color: 'text.primary',\n      },\n      error: {\n        color: 'negative.darker',\n        fontWeight: 'medium',\n      },\n      info: {\n        color: 'brand.base',\n        fontWeight: 'medium',\n      },\n      success: {\n        color: 'positive.base',\n        fontWeight: 'medium',\n      },\n      warning: {\n        color: 'warning.base',\n        fontWeight: 'medium',\n      },\n    },\n    size: {\n      xs: {\n        textStyle: 'body-xs',\n      },\n      sm: {\n        textStyle: 'body-sm',\n      },\n      md: {\n        textStyle: 'body-md',\n      },\n      lg: {\n        textStyle: 'body-lg',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      scale: true,\n      size: 'sm',\n      css: {\n        textStyle: 'body-sm-scaled',\n      },\n    },\n    {\n      scale: true,\n      size: 'md',\n      css: {\n        textStyle: 'body-md-scaled',\n      },\n    },\n    {\n      scale: true,\n      size: 'lg',\n      css: {\n        textStyle: 'body-lg-scaled',\n      },\n    },\n    {\n      mono: true,\n      size: 'sm',\n      css: {\n        textStyle: 'mono-sm',\n      },\n    },\n    {\n      mono: true,\n      size: 'md',\n      css: {\n        textStyle: 'mono-md',\n      },\n    },\n    {\n      mono: true,\n      size: 'lg',\n      css: {\n        textStyle: 'mono-lg',\n      },\n    },\n  ],\n  defaultVariants: {\n    mono: false,\n    variant: 'text',\n    size: 'md',\n  },\n});\n\nexport type TextVariants = RecipeVariantProps<typeof text>;\n"],"names":["text","cva"],"mappings":"0CAEa,MAAAA,EAAOC,MAAI,CACtB,KAAM,CACJ,SAAU,QACX,EACD,SAAU,CACR,KAAM,CACJ,MAAO,CAAE,EACT,KAAM,CACP,CAAA,EACD,MAAO,CACL,MAAO,CAAA,EACP,KAAM,CAAA,CACP,EACD,QAAS,CACP,KAAM,CACJ,MAAO,cACR,EACD,MAAO,CACL,MAAO,kBACP,WAAY,QACb,EACD,KAAM,CACJ,MAAO,aACP,WAAY,QACb,EACD,QAAS,CACP,MAAO,gBACP,WAAY,QACb,EACD,QAAS,CACP,MAAO,eACP,WAAY,QACb,CACF,EACD,KAAM,CACJ,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,CACF,CACF,EACD,iBAAkB,CAChB,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,CACF,EACD,gBAAiB,CACf,KAAM,GACN,QAAS,OACT,KAAM,IACP,CACF,CAAA"}
+{"version":3,"file":"text.js","sources":["../../../src/recipes/text.ts"],"sourcesContent":["import { cva, type RecipeVariantProps } from '@styled/css';\n\nexport const text = cva({\n  base: {\n    textWrap: 'wrap',\n  },\n  variants: {\n    mono: {\n      false: {},\n      true: {},\n    },\n    scale: {\n      false: {},\n      true: {},\n    },\n    variant: {\n      text: {\n        color: 'text.primary',\n      },\n      error: {\n        color: 'negative.darker',\n      },\n      info: {\n        color: 'brand.base',\n      },\n      success: {\n        color: 'positive.base',\n      },\n      warning: {\n        color: 'warning.base',\n      },\n    },\n    size: {\n      xs: {\n        textStyle: 'body-xs',\n      },\n      sm: {\n        textStyle: 'body-sm',\n      },\n      md: {\n        textStyle: 'body-md',\n      },\n      lg: {\n        textStyle: 'body-lg',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      scale: true,\n      size: 'sm',\n      css: {\n        textStyle: 'body-sm-scaled',\n      },\n    },\n    {\n      scale: true,\n      size: 'md',\n      css: {\n        textStyle: 'body-md-scaled',\n      },\n    },\n    {\n      scale: true,\n      size: 'lg',\n      css: {\n        textStyle: 'body-lg-scaled',\n      },\n    },\n    {\n      mono: true,\n      size: 'sm',\n      css: {\n        textStyle: 'mono-sm',\n      },\n    },\n    {\n      mono: true,\n      size: 'md',\n      css: {\n        textStyle: 'mono-md',\n      },\n    },\n    {\n      mono: true,\n      size: 'lg',\n      css: {\n        textStyle: 'mono-lg',\n      },\n    },\n  ],\n  defaultVariants: {\n    mono: false,\n    variant: 'text',\n    size: 'md',\n  },\n});\n\nexport type TextVariants = RecipeVariantProps<typeof text>;\n"],"names":["text","cva"],"mappings":"0CAEa,MAAAA,EAAOC,MAAI,CACtB,KAAM,CACJ,SAAU,MACX,EACD,SAAU,CACR,KAAM,CACJ,MAAO,CAAA,EACP,KAAM,CAAA,CACP,EACD,MAAO,CACL,MAAO,CAAA,EACP,KAAM,CAAA,CACP,EACD,QAAS,CACP,KAAM,CACJ,MAAO,cACR,EACD,MAAO,CACL,MAAO,iBACR,EACD,KAAM,CACJ,MAAO,YACR,EACD,QAAS,CACP,MAAO,eACR,EACD,QAAS,CACP,MAAO,cACR,CACF,EACD,KAAM,CACJ,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,CACF,CACF,EACD,iBAAkB,CAChB,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,CACF,EACD,gBAAiB,CACf,KAAM,GACN,QAAS,OACT,KAAM,IACP,CACF,CAAA"}

package/dist/cjs/styles/semantic-tokens.js

@@ -1,2 +1,2 @@
-"use strict";var r=require("@pandacss/dev");const a=r.defineSemanticTokens.colors({surface:{primary:{value:{base:"var(--surface-primary, {colors.paper})",_dark:"var(--surface-primary-dark, {colors.slate.0})"}},secondary:{value:{base:"var(--surface-secondary, {colors.ink.10})",_dark:"var(--surface-secondary-dark, {colors.slate.1})"}},tertiary:{value:{base:"var(--surface-tertiary, {colors.ink.20})",_dark:"var(--surface-tertiary-dark, {colors.slate.2})"}}},text:{primary:{value:{base:"var(--text-primary, {colors.ink.90})",_dark:"var(--text-primary-dark, {colors.chalk})"}},secondary:{value:{base:"var(--text-secondary, {colors.ink.80})",_dark:"var(--text-secondary-dark, {colors.chalk/72})"}},tertiary:{value:{base:"var(--text-tertiary, {colors.ink.70})",_dark:"var(--text-tertiary-dark, {colors.chalk/44})"}}},neutral:{primary:{value:{base:"var(--neutral-primary, {colors.ink.50})",_dark:"var(--neutral-primary-dark, {colors.chalk/16})"}},secondary:{value:{base:"var(--neutral-secondary, {colors.ink.30})",_dark:"var(--neutral-secondary-dark, {colors.chalk/12})"}},tertiary:{value:{base:"var(--neutral-tertiary, {colors.ink.20})",_dark:"var(--neutral-tertiary-dark, {colors.chalk/8})"}},quaternary:{value:{base:"var(--neutral-quaternary, {colors.ink.10})",_dark:"var(--neutral-quaternary-dark, {colors.chalk/5})"}}},brand:{lightest:{value:{base:"var(--brand-lightest, {colors.magic.10})",_dark:"var(--brand-lightest-dark, {colors.magic.30/25})"}},lighter:{value:{base:"var(--brand-lighter, {colors.magic.30})",_dark:"var(--brand-lighter-dark, {colors.magic.30/66})"}},base:{value:{base:"var(--brand-base, {colors.magic.50})",_dark:"var(--brand-base-dark, {colors.magic.30})"}},darker:{value:{base:"var(--brand-darker, {colors.magic.70})",_dark:"var(--brand-darker-dark, {colors.magic.10})"}},darkest:{value:{base:"var(--brand-darkest, {colors.magic.90})",_dark:"var(--brand-darkest-dark, {colors.magic.10})"}}},positive:{lightest:{value:{base:"{colors.leaf.10}",_dark:"{colors.leaf.30/8}"}},lighter:{value:{base:"{colors.leaf.30}",_dark:"{colors.leaf.50}"}},base:{value:{base:"{colors.leaf.50}",_dark:"{colors.leaf.50}"}},darker:{value:{base:"{colors.leaf.70}",_dark:"{colors.leaf.50}"}},darkest:{value:{base:"{colors.leaf.90}",_dark:"{colors.leaf.50}"}}},negative:{lightest:{value:{base:"{colors.ruby.10}",_dark:"{colors.ruby.30/8}"}},lighter:{value:{base:"{colors.ruby.30}",_dark:"{colors.ruby.50}"}},base:{value:{base:"{colors.ruby.50}",_dark:"{colors.ruby.50}"}},darker:{value:{base:"{colors.ruby.70}",_dark:"{colors.ruby.50}"}},darkest:{value:{base:"{colors.ruby.90}",_dark:"{colors.ruby.50}"}}},warning:{lightest:{value:{base:"{colors.gold.10}",_dark:"{colors.gold.30/8}"}},lighter:{value:{base:"{colors.gold.30}",_dark:"{colors.gold.50}"}},base:{value:{base:"{colors.gold.50}",_dark:"{colors.gold.50}"}},darker:{value:{base:"{colors.gold.70}",_dark:"{colors.gold.50}"}},darkest:{value:{base:"{colors.gold.90}",_dark:"{colors.gold.50}"}}},dedicated:{lightest:{value:{base:"{colors.sky.10}",_dark:"{colors.sky.30/8}"}},lighter:{value:{base:"{colors.sky.30}",_dark:"{colors.sky.30}"}},base:{value:{base:"{colors.sky.50}",_dark:"{colors.sky.30}"}},darker:{value:{base:"{colors.sky.70}",_dark:"{colors.sky.30}"}},darkest:{value:{base:"{colors.sky.90}",_dark:"{colors.sky.30}"}}}});exports.semanticColors=a;
+"use strict";var r=require("@pandacss/dev");const a=r.defineSemanticTokens.colors({surface:{primary:{value:{base:"var(--surface-primary, {colors.paper})",_dark:"var(--surface-primary-dark, {colors.slate.0})"}},secondary:{value:{base:"var(--surface-secondary, {colors.ink.10})",_dark:"var(--surface-secondary-dark, {colors.slate.1})"}},tertiary:{value:{base:"var(--surface-tertiary, {colors.ink.20})",_dark:"var(--surface-tertiary-dark, {colors.slate.2})"}}},text:{primary:{value:{base:"var(--text-primary, {colors.ink.90})",_dark:"var(--text-primary-dark, {colors.chalk})"}},secondary:{value:{base:"var(--text-secondary, {colors.ink.80})",_dark:"var(--text-secondary-dark, {colors.chalk/72})"}},tertiary:{value:{base:"var(--text-tertiary, {colors.ink.70})",_dark:"var(--text-tertiary-dark, {colors.chalk/44})"}},quaternary:{value:{base:"var(--text-quaternary, {colors.chalk})",_dark:"var(--text-quaternary-dark, {colors.ink.90})"}}},neutral:{primary:{value:{base:"var(--neutral-primary, {colors.ink.50})",_dark:"var(--neutral-primary-dark, {colors.chalk/16})"}},secondary:{value:{base:"var(--neutral-secondary, {colors.ink.30})",_dark:"var(--neutral-secondary-dark, {colors.chalk/12})"}},tertiary:{value:{base:"var(--neutral-tertiary, {colors.ink.20})",_dark:"var(--neutral-tertiary-dark, {colors.chalk/8})"}},quaternary:{value:{base:"var(--neutral-quaternary, {colors.ink.10})",_dark:"var(--neutral-quaternary-dark, {colors.chalk/5})"}}},brand:{lightest:{value:{base:"var(--brand-lightest, {colors.magic.10})",_dark:"var(--brand-lightest-dark, {colors.magic.30/25})"}},lighter:{value:{base:"var(--brand-lighter, {colors.magic.30})",_dark:"var(--brand-lighter-dark, {colors.magic.30/66})"}},base:{value:{base:"var(--brand-base, {colors.magic.50})",_dark:"var(--brand-base-dark, {colors.magic.30})"}},darker:{value:{base:"var(--brand-darker, {colors.magic.70})",_dark:"var(--brand-darker-dark, {colors.magic.10})"}},darkest:{value:{base:"var(--brand-darkest, {colors.magic.90})",_dark:"var(--brand-darkest-dark, {colors.magic.10})"}}},positive:{lightest:{value:{base:"{colors.leaf.10}",_dark:"{colors.leaf.30/8}"}},lighter:{value:{base:"{colors.leaf.30}",_dark:"{colors.leaf.50}"}},base:{value:{base:"{colors.leaf.50}",_dark:"{colors.leaf.50}"}},darker:{value:{base:"{colors.leaf.70}",_dark:"{colors.leaf.50}"}},darkest:{value:{base:"{colors.leaf.90}",_dark:"{colors.leaf.50}"}}},negative:{lightest:{value:{base:"{colors.ruby.10}",_dark:"{colors.ruby.30/8}"}},lighter:{value:{base:"{colors.ruby.30}",_dark:"{colors.ruby.50}"}},base:{value:{base:"{colors.ruby.50}",_dark:"{colors.ruby.50}"}},darker:{value:{base:"{colors.ruby.70}",_dark:"{colors.ruby.50}"}},darkest:{value:{base:"{colors.ruby.90}",_dark:"{colors.ruby.50}"}}},warning:{lightest:{value:{base:"{colors.gold.10}",_dark:"{colors.gold.30/8}"}},lighter:{value:{base:"{colors.gold.30}",_dark:"{colors.gold.50}"}},base:{value:{base:"{colors.gold.50}",_dark:"{colors.gold.50}"}},darker:{value:{base:"{colors.gold.70}",_dark:"{colors.gold.50}"}},darkest:{value:{base:"{colors.gold.90}",_dark:"{colors.gold.50}"}}},dedicated:{lightest:{value:{base:"{colors.sky.10}",_dark:"{colors.sky.30/8}"}},lighter:{value:{base:"{colors.sky.30}",_dark:"{colors.sky.30}"}},base:{value:{base:"{colors.sky.50}",_dark:"{colors.sky.30}"}},darker:{value:{base:"{colors.sky.70}",_dark:"{colors.sky.30}"}},darkest:{value:{base:"{colors.sky.90}",_dark:"{colors.sky.30}"}}}});exports.semanticColors=a;
 //# sourceMappingURL=semantic-tokens.js.map

package/dist/cjs/styles/semantic-tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"semantic-tokens.js","sources":["../../../src/styles/semantic-tokens.ts"],"sourcesContent":["import { defineSemanticTokens } from '@pandacss/dev';\n\nexport const semanticColors = defineSemanticTokens.colors({\n  surface: {\n    primary: {\n      value: {\n        base: 'var(--surface-primary, {colors.paper})',\n        _dark: 'var(--surface-primary-dark, {colors.slate.0})',\n      },\n    },\n    secondary: {\n      value: {\n        base: 'var(--surface-secondary, {colors.ink.10})',\n        _dark: 'var(--surface-secondary-dark, {colors.slate.1})',\n      },\n    },\n    tertiary: {\n      value: {\n        base: 'var(--surface-tertiary, {colors.ink.20})',\n        _dark: 'var(--surface-tertiary-dark, {colors.slate.2})',\n      },\n    },\n  },\n  text: {\n    primary: {\n      value: {\n        base: 'var(--text-primary, {colors.ink.90})',\n        _dark: 'var(--text-primary-dark, {colors.chalk})',\n      },\n    },\n    secondary: {\n      value: {\n        base: 'var(--text-secondary, {colors.ink.80})',\n        _dark: 'var(--text-secondary-dark, {colors.chalk/72})',\n      },\n    },\n    tertiary: {\n      value: {\n        base: 'var(--text-tertiary, {colors.ink.70})',\n        _dark: 'var(--text-tertiary-dark, {colors.chalk/44})',\n      },\n    },\n  },\n  neutral: {\n    primary: {\n      value: {\n        base: 'var(--neutral-primary, {colors.ink.50})',\n        _dark: 'var(--neutral-primary-dark, {colors.chalk/16})',\n      },\n    },\n    secondary: {\n      value: {\n        base: 'var(--neutral-secondary, {colors.ink.30})',\n        _dark: 'var(--neutral-secondary-dark, {colors.chalk/12})',\n      },\n    },\n    tertiary: {\n      value: {\n        base: 'var(--neutral-tertiary, {colors.ink.20})',\n        _dark: 'var(--neutral-tertiary-dark, {colors.chalk/8})',\n      },\n    },\n    quaternary: {\n      value: {\n        base: 'var(--neutral-quaternary, {colors.ink.10})',\n        _dark: 'var(--neutral-quaternary-dark, {colors.chalk/5})',\n      },\n    },\n  },\n  brand: {\n    lightest: {\n      value: {\n        base: 'var(--brand-lightest, {colors.magic.10})',\n        _dark: 'var(--brand-lightest-dark, {colors.magic.30/25})',\n      },\n    },\n    lighter: {\n      value: {\n        base: 'var(--brand-lighter, {colors.magic.30})',\n        _dark: 'var(--brand-lighter-dark, {colors.magic.30/66})',\n      },\n    },\n    base: {\n      value: {\n        base: 'var(--brand-base, {colors.magic.50})',\n        _dark: 'var(--brand-base-dark, {colors.magic.30})',\n      },\n    },\n    darker: {\n      value: {\n        base: 'var(--brand-darker, {colors.magic.70})',\n        _dark: 'var(--brand-darker-dark, {colors.magic.10})',\n      },\n    },\n    darkest: {\n      value: {\n        base: 'var(--brand-darkest, {colors.magic.90})',\n        _dark: 'var(--brand-darkest-dark, {colors.magic.10})',\n      },\n    },\n  },\n  positive: {\n    lightest: { value: { base: '{colors.leaf.10}', _dark: '{colors.leaf.30/8}' } },\n    lighter: { value: { base: '{colors.leaf.30}', _dark: '{colors.leaf.50}' } },\n    base: { value: { base: '{colors.leaf.50}', _dark: '{colors.leaf.50}' } },\n    darker: { value: { base: '{colors.leaf.70}', _dark: '{colors.leaf.50}' } },\n    darkest: { value: { base: '{colors.leaf.90}', _dark: '{colors.leaf.50}' } },\n  },\n  negative: {\n    lightest: { value: { base: '{colors.ruby.10}', _dark: '{colors.ruby.30/8}' } },\n    lighter: { value: { base: '{colors.ruby.30}', _dark: '{colors.ruby.50}' } },\n    base: { value: { base: '{colors.ruby.50}', _dark: '{colors.ruby.50}' } },\n    darker: { value: { base: '{colors.ruby.70}', _dark: '{colors.ruby.50}' } },\n    darkest: { value: { base: '{colors.ruby.90}', _dark: '{colors.ruby.50}' } },\n  },\n  warning: {\n    lightest: { value: { base: '{colors.gold.10}', _dark: '{colors.gold.30/8}' } },\n    lighter: { value: { base: '{colors.gold.30}', _dark: '{colors.gold.50}' } },\n    base: { value: { base: '{colors.gold.50}', _dark: '{colors.gold.50}' } },\n    darker: { value: { base: '{colors.gold.70}', _dark: '{colors.gold.50}' } },\n    darkest: { value: { base: '{colors.gold.90}', _dark: '{colors.gold.50}' } },\n  },\n  dedicated: {\n    lightest: { value: { base: '{colors.sky.10}', _dark: '{colors.sky.30/8}' } },\n    lighter: { value: { base: '{colors.sky.30}', _dark: '{colors.sky.30}' } },\n    base: { value: { base: '{colors.sky.50}', _dark: '{colors.sky.30}' } },\n    darker: { value: { base: '{colors.sky.70}', _dark: '{colors.sky.30}' } },\n    darkest: { value: { base: '{colors.sky.90}', _dark: '{colors.sky.30}' } },\n  },\n});\n"],"names":["semanticColors","defineSemanticTokens"],"mappings":"4CAEO,MAAMA,EAAiBC,EAAqB,qBAAA,OAAO,CACxD,QAAS,CACP,QAAS,CACP,MAAO,CACL,KAAM,yCACN,MAAO,+CACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,4CACN,MAAO,iDACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,gDACR,CACF,CACF,EACD,KAAM,CACJ,QAAS,CACP,MAAO,CACL,KAAM,uCACN,MAAO,0CACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,yCACN,MAAO,+CACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,wCACN,MAAO,8CACR,CACF,CACF,EACD,QAAS,CACP,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,gDACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,4CACN,MAAO,kDACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,gDACR,CACF,EACD,WAAY,CACV,MAAO,CACL,KAAM,6CACN,MAAO,kDACR,CACF,CACF,EACD,MAAO,CACL,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,kDACR,CACF,EACD,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,iDACR,CACF,EACD,KAAM,CACJ,MAAO,CACL,KAAM,uCACN,MAAO,2CACR,CACF,EACD,OAAQ,CACN,MAAO,CACL,KAAM,yCACN,MAAO,6CACR,CACF,EACD,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,8CACR,CACF,CACF,EACD,SAAU,CACR,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,SAAU,CACR,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,QAAS,CACP,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,UAAW,CACT,SAAU,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,oBAAuB,EAC5E,QAAS,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,EACzE,KAAM,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,EACtE,OAAQ,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,EACxE,QAAS,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,CAC1E,CACF,CAAA"}
+{"version":3,"file":"semantic-tokens.js","sources":["../../../src/styles/semantic-tokens.ts"],"sourcesContent":["import { defineSemanticTokens } from '@pandacss/dev';\n\nexport const semanticColors = defineSemanticTokens.colors({\n  surface: {\n    primary: {\n      value: {\n        base: 'var(--surface-primary, {colors.paper})',\n        _dark: 'var(--surface-primary-dark, {colors.slate.0})',\n      },\n    },\n    secondary: {\n      value: {\n        base: 'var(--surface-secondary, {colors.ink.10})',\n        _dark: 'var(--surface-secondary-dark, {colors.slate.1})',\n      },\n    },\n    tertiary: {\n      value: {\n        base: 'var(--surface-tertiary, {colors.ink.20})',\n        _dark: 'var(--surface-tertiary-dark, {colors.slate.2})',\n      },\n    },\n  },\n  text: {\n    primary: {\n      value: {\n        base: 'var(--text-primary, {colors.ink.90})',\n        _dark: 'var(--text-primary-dark, {colors.chalk})',\n      },\n    },\n    secondary: {\n      value: {\n        base: 'var(--text-secondary, {colors.ink.80})',\n        _dark: 'var(--text-secondary-dark, {colors.chalk/72})',\n      },\n    },\n    tertiary: {\n      value: {\n        base: 'var(--text-tertiary, {colors.ink.70})',\n        _dark: 'var(--text-tertiary-dark, {colors.chalk/44})',\n      },\n    },\n    quaternary: {\n      value: {\n        base: 'var(--text-quaternary, {colors.chalk})',\n        _dark: 'var(--text-quaternary-dark, {colors.ink.90})',\n      },\n    },\n  },\n  neutral: {\n    primary: {\n      value: {\n        base: 'var(--neutral-primary, {colors.ink.50})',\n        _dark: 'var(--neutral-primary-dark, {colors.chalk/16})',\n      },\n    },\n    secondary: {\n      value: {\n        base: 'var(--neutral-secondary, {colors.ink.30})',\n        _dark: 'var(--neutral-secondary-dark, {colors.chalk/12})',\n      },\n    },\n    tertiary: {\n      value: {\n        base: 'var(--neutral-tertiary, {colors.ink.20})',\n        _dark: 'var(--neutral-tertiary-dark, {colors.chalk/8})',\n      },\n    },\n    quaternary: {\n      value: {\n        base: 'var(--neutral-quaternary, {colors.ink.10})',\n        _dark: 'var(--neutral-quaternary-dark, {colors.chalk/5})',\n      },\n    },\n  },\n  brand: {\n    lightest: {\n      value: {\n        base: 'var(--brand-lightest, {colors.magic.10})',\n        _dark: 'var(--brand-lightest-dark, {colors.magic.30/25})',\n      },\n    },\n    lighter: {\n      value: {\n        base: 'var(--brand-lighter, {colors.magic.30})',\n        _dark: 'var(--brand-lighter-dark, {colors.magic.30/66})',\n      },\n    },\n    base: {\n      value: {\n        base: 'var(--brand-base, {colors.magic.50})',\n        _dark: 'var(--brand-base-dark, {colors.magic.30})',\n      },\n    },\n    darker: {\n      value: {\n        base: 'var(--brand-darker, {colors.magic.70})',\n        _dark: 'var(--brand-darker-dark, {colors.magic.10})',\n      },\n    },\n    darkest: {\n      value: {\n        base: 'var(--brand-darkest, {colors.magic.90})',\n        _dark: 'var(--brand-darkest-dark, {colors.magic.10})',\n      },\n    },\n  },\n  positive: {\n    lightest: { value: { base: '{colors.leaf.10}', _dark: '{colors.leaf.30/8}' } },\n    lighter: { value: { base: '{colors.leaf.30}', _dark: '{colors.leaf.50}' } },\n    base: { value: { base: '{colors.leaf.50}', _dark: '{colors.leaf.50}' } },\n    darker: { value: { base: '{colors.leaf.70}', _dark: '{colors.leaf.50}' } },\n    darkest: { value: { base: '{colors.leaf.90}', _dark: '{colors.leaf.50}' } },\n  },\n  negative: {\n    lightest: { value: { base: '{colors.ruby.10}', _dark: '{colors.ruby.30/8}' } },\n    lighter: { value: { base: '{colors.ruby.30}', _dark: '{colors.ruby.50}' } },\n    base: { value: { base: '{colors.ruby.50}', _dark: '{colors.ruby.50}' } },\n    darker: { value: { base: '{colors.ruby.70}', _dark: '{colors.ruby.50}' } },\n    darkest: { value: { base: '{colors.ruby.90}', _dark: '{colors.ruby.50}' } },\n  },\n  warning: {\n    lightest: { value: { base: '{colors.gold.10}', _dark: '{colors.gold.30/8}' } },\n    lighter: { value: { base: '{colors.gold.30}', _dark: '{colors.gold.50}' } },\n    base: { value: { base: '{colors.gold.50}', _dark: '{colors.gold.50}' } },\n    darker: { value: { base: '{colors.gold.70}', _dark: '{colors.gold.50}' } },\n    darkest: { value: { base: '{colors.gold.90}', _dark: '{colors.gold.50}' } },\n  },\n  dedicated: {\n    lightest: { value: { base: '{colors.sky.10}', _dark: '{colors.sky.30/8}' } },\n    lighter: { value: { base: '{colors.sky.30}', _dark: '{colors.sky.30}' } },\n    base: { value: { base: '{colors.sky.50}', _dark: '{colors.sky.30}' } },\n    darker: { value: { base: '{colors.sky.70}', _dark: '{colors.sky.30}' } },\n    darkest: { value: { base: '{colors.sky.90}', _dark: '{colors.sky.30}' } },\n  },\n});\n"],"names":["semanticColors","defineSemanticTokens"],"mappings":"4CAEO,MAAMA,EAAiBC,EAAqB,qBAAA,OAAO,CACxD,QAAS,CACP,QAAS,CACP,MAAO,CACL,KAAM,yCACN,MAAO,+CACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,4CACN,MAAO,iDACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,gDACR,CACF,CACF,EACD,KAAM,CACJ,QAAS,CACP,MAAO,CACL,KAAM,uCACN,MAAO,0CACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,yCACN,MAAO,+CACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,wCACN,MAAO,8CACR,CACF,EACD,WAAY,CACV,MAAO,CACL,KAAM,yCACN,MAAO,8CACR,CACF,CACF,EACD,QAAS,CACP,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,gDACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,4CACN,MAAO,kDACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,gDACR,CACF,EACD,WAAY,CACV,MAAO,CACL,KAAM,6CACN,MAAO,kDACR,CACF,CACF,EACD,MAAO,CACL,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,kDACR,CACF,EACD,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,iDACR,CACF,EACD,KAAM,CACJ,MAAO,CACL,KAAM,uCACN,MAAO,2CACR,CACF,EACD,OAAQ,CACN,MAAO,CACL,KAAM,yCACN,MAAO,6CACR,CACF,EACD,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,8CACR,CACF,CACF,EACD,SAAU,CACR,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,SAAU,CACR,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,QAAS,CACP,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,UAAW,CACT,SAAU,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,oBAAuB,EAC5E,QAAS,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,EACzE,KAAM,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,EACtE,OAAQ,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,EACxE,QAAS,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,CAC1E,CACF,CAAA"}

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

@@ -1,2 +1,2 @@
-import{jsx as c}from"react/jsx-runtime";import{card as l}from"../../recipes/card.js";import{cx as m}from"@styled/css";import{Flex as f,Box as d}from"@styled/jsx";import{forwardRef as p}from"react";const n=p(({children:o,className:t,asButton:r,stack:s,...i},e)=>{const a=l({asButton:r,...i});return s||r?c(f,{className:m(a,t),flexDirection:"column",role:r?"button":"none",ref:e,children:o}):c(d,{className:m(a,t),ref:e,children:o})});n.displayName="Card";export{n as Card};
+import{jsx as r}from"react/jsx-runtime";import"../feedback/callout.js";import{LoadingSpinner as d}from"../feedback/loading-spinner.js";import"../feedback/progress-bar.js";import"@styled/tokens";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import"../primitives/text.js";import"../primitives/portal.js";import{forwardRef as f}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import{Flex as u,Box as x}from"@styled/jsx";import"../feedback/tooltip.js";import{card as C}from"../../recipes/card.js";import{cx as n}from"@styled/css";const e=f(({children:t,className:i,asButton:o,stack:l,onClick:c,validating:m,...s},p)=>{const a=C({asButton:o,validating:m,...s});return l||o?r(u,{className:n(a,i),flexDirection:"column",role:o?"button":"none",onClick:o?c:void 0,ref:p,children:m?r(d,{neutral:!0}):t}):r(x,{className:n(a,i),ref:p,children:t})});e.displayName="Card";export{e as Card};
 //# sourceMappingURL=card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../src/components/containers/card.tsx"],"sourcesContent":["import { card } from '@recipes/card';\nimport { cx } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { ComponentProps, forwardRef } from 'react';\n\nexport interface CardProps extends ComponentProps<'div'> {\n  alt?: boolean;\n  className?: string;\n  asButton?: boolean;\n  alignment?: 'center' | 'left' | 'right';\n  expand?: boolean;\n  gapType?: 'none' | 'sm' | 'md' | 'lg';\n  heavyShadow?: boolean;\n  paddingType?: 'none' | 'sm' | 'md' | 'lg';\n  stack?: boolean;\n  widthMax?: boolean;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(({ children, className, asButton, stack, ...props }, ref) => {\n  const classStyles = card({ asButton, ...props });\n\n  return stack || asButton ? (\n    <Flex className={cx(classStyles, className)} flexDirection=\"column\" role={asButton ? 'button' : 'none'} ref={ref}>\n      {children}\n    </Flex>\n  ) : (\n    <Box className={cx(classStyles, className)} ref={ref}>\n      {children}\n    </Box>\n  );\n});\n\nCard.displayName = 'Card';\n"],"names":["Card","forwardRef","children","className","asButton","stack","props","ref","classStyles","card","_jsx","Flex","cx","Box"],"mappings":"qMAkBa,MAAAA,EAAOC,EAAsC,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAO,EAAEC,IAAO,CACpH,MAAMC,EAAcC,EAAK,CAAE,SAAAL,EAAU,GAAGE,CAAO,CAAA,EAE/C,OAAOD,GAASD,EACdM,EAACC,EAAI,CAAC,UAAWC,EAAGJ,EAAaL,CAAS,EAAG,cAAc,SAAS,KAAMC,EAAW,SAAW,OAAQ,IAAKG,EAC1G,SAAAL,CACI,CAAA,EAEPQ,EAACG,EAAG,CAAC,UAAWD,EAAGJ,EAAaL,CAAS,EAAG,IAAKI,EAAG,SACjDL,CAAQ,CAAA,CAGf,CAAC,EAEDF,EAAK,YAAc"}
+{"version":3,"file":"card.js","sources":["../../../../src/components/containers/card.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { card } from '@recipes/card';\nimport { cx } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { ComponentProps, forwardRef } from 'react';\n\nexport interface CardProps extends ComponentProps<'div'> {\n  alt?: boolean;\n  className?: string;\n  asButton?: boolean;\n  alignment?: 'center' | 'left' | 'right';\n  expand?: boolean;\n  gapType?: 'none' | 'sm' | 'md' | 'lg';\n  heavyShadow?: boolean;\n  paddingType?: 'none' | 'sm' | 'md' | 'lg';\n  stack?: boolean;\n  widthMax?: boolean;\n  disabled?: boolean;\n  validating?: boolean;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  ({ children, className, asButton, stack, onClick, validating, ...props }, ref) => {\n    const classStyles = card({ asButton, validating, ...props });\n\n    return stack || asButton ? (\n      <Flex\n        className={cx(classStyles, className)}\n        flexDirection=\"column\"\n        role={asButton ? 'button' : 'none'}\n        onClick={asButton ? onClick : undefined}\n        ref={ref}\n      >\n        {validating ? <LoadingSpinner neutral /> : children}\n      </Flex>\n    ) : (\n      <Box className={cx(classStyles, className)} ref={ref}>\n        {children}\n      </Box>\n    );\n  },\n);\n\nCard.displayName = 'Card';\n"],"names":["Card","forwardRef","children","className","asButton","stack","onClick","validating","props","ref","classStyles","card","_jsx","Flex","cx","LoadingSpinner","Box"],"mappings":"mvBAqBO,MAAMA,EAAOC,EAClB,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,MAAAC,EAAO,QAAAC,EAAS,WAAAC,EAAY,GAAGC,CAAO,EAAEC,IAAO,CAC/E,MAAMC,EAAcC,EAAK,CAAE,SAAAP,EAAU,WAAAG,EAAY,GAAGC,CAAK,CAAE,EAE3D,OAAOH,GAASD,EACdQ,EAACC,GACC,UAAWC,EAAGJ,EAAaP,CAAS,EACpC,cAAc,SACd,KAAMC,EAAW,SAAW,OAC5B,QAASA,EAAWE,EAAU,OAC9B,IAAKG,EAEJ,SAAAF,EAAaK,EAACG,EAAc,CAAC,QAAU,EAAA,CAAA,EAAGb,IAG7CU,EAACI,EAAG,CAAC,UAAWF,EAAGJ,EAAaP,CAAS,EAAG,IAAKM,WAC9CP,CAAQ,CAAA,CAGf,CAAC,EAGHF,EAAK,YAAc"}