@magiclabs/ui-components 1.23.2 → 1.23.3

package/dist/cjs/components/feedback/toast-provider.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var N=require("../icons/ico-dismiss.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var b=require("../primitives/text.js"),k=require("../primitives/portal.js"),C=require("../utils/animate.js"),S=require("../../hooks/useToast.js"),p=require("../../recipes/toast.js"),h=require("@styled/jsx"),o=require("react"),P=require("./status-icon.js");let R=0;const j=t=>{const{dismissible:l,lifespan:n,message:d="",variant:s="branded"}=t,i=p.toast({variant:s}),a=t.id,u=t.removeToast,[v,c]=o.useState(!0);return n&&setTimeout(()=>{c(!1)},n),e.jsx(C.default,{"aria-live":["error"].includes(s||"")?"assertive":"polite",show:v,type:"slide",onHidden:()=>{a&&u(a)},children:e.jsxs(h.HStack,{className:i.toast,children:[t.icon&&e.jsx(P.StatusIcon,{className:i.icon,variant:s}),e.jsx(b.default,{color:"text.quaternary",children:d}),l&&e.jsx("button",{className:i.dismiss,onClick:()=>c(!1),"aria-label":"dismiss toast",children:e.jsx(N.default,{className:i.icon})})]})})},g=({icon:t=!1,lifespan:l=0,position:n="top-right",children:d})=>{const s=o.useRef([]),i=o.useReducer(r=>r+1,0)[1],a=o.useCallback(r=>{s.current=s.current.filter(m=>m.id!==r),i()},[]),u=o.useCallback(r=>{const{icon:m=r.icon||t,lifespan:f=r.lifespan||l,...T}=r,x=++R;return s.current.push({icon:m,lifespan:f,id:x,...T}),i(),x},[]),v=o.useMemo(()=>({createToast:u,removeToast:a}),[u,a]),c=(n?.startsWith("top")?[...s.current]:[...s.current].reverse()).map(r=>e.jsx(j,{...r,removeToast:a},r.id)),q=p.toast({position:n});return e.jsxs(S.ToastContext.Provider,{value:v,children:[d,e.jsx(k.default,{children:e.jsx("div",{className:q.portal,children:e.jsx(h.VStack,{className:q.container,children:c})})})]})};exports.Toast=j,exports.ToastProvider=g;
+"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var N=require("../icons/ico-dismiss.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var b=require("../primitives/text.js"),C=require("../primitives/portal.js"),k=require("../utils/animate.js"),S=require("../../hooks/useToast.js"),p=require("../../recipes/toast.js"),f=require("@styled/jsx"),o=require("react"),P=require("./status-icon.js");let R=0;const h=t=>{const{dismissible:l,lifespan:n,message:d="",variant:s="branded"}=t,i=p.toast({variant:s}),a=t.id,u=t.removeToast,[v,c]=o.useState(!0);return n&&setTimeout(()=>{c(!1)},n),e.jsx(k.default,{"aria-live":["error"].includes(s||"")?"assertive":"polite",show:v,type:"slide",onHidden:()=>{a&&u(a)},children:e.jsxs(f.HStack,{className:i.toast,children:[t.icon&&e.jsx(P.StatusIcon,{className:i.icon,variant:s}),e.jsx(b.default,{fontColor:"text.quaternary",children:d}),l&&e.jsx("button",{className:i.dismiss,onClick:()=>c(!1),"aria-label":"dismiss toast",children:e.jsx(N.default,{className:i.icon})})]})})},g=({icon:t=!1,lifespan:l=0,position:n="top-right",children:d})=>{const s=o.useRef([]),i=o.useReducer(r=>r+1,0)[1],a=o.useCallback(r=>{s.current=s.current.filter(m=>m.id!==r),i()},[]),u=o.useCallback(r=>{const{icon:m=r.icon||t,lifespan:j=r.lifespan||l,...T}=r,x=++R;return s.current.push({icon:m,lifespan:j,id:x,...T}),i(),x},[]),v=o.useMemo(()=>({createToast:u,removeToast:a}),[u,a]),c=(n?.startsWith("top")?[...s.current]:[...s.current].reverse()).map(r=>e.jsx(h,{...r,removeToast:a},r.id)),q=p.toast({position:n});return e.jsxs(S.ToastContext.Provider,{value:v,children:[d,e.jsx(C.default,{children:e.jsx("div",{className:q.portal,children:e.jsx(f.VStack,{className:q.container,children:c})})})]})};exports.Toast=h,exports.ToastProvider=g;
 //# sourceMappingURL=toast-provider.js.map

package/dist/cjs/components/feedback/toast-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-provider.js","sources":["../../../../src/components/feedback/toast-provider.tsx"],"sourcesContent":["import { IcoDismiss } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport Portal from '@components/primitives/portal';\nimport Animate from '@components/utils/animate';\nimport { ToastProps as BaseToastProps, ToastContext, ToastDefinition } from '@hooks/useToast';\nimport { toast as classes } from '@recipes/toast';\nimport { HStack, VStack } from '@styled/jsx';\nimport { PropsWithChildren, useCallback, useMemo, useReducer, useRef, useState } from 'react';\nimport { StatusIcon } from './status-icon';\n\nlet toastID = 0;\n\ninterface InternalToast extends ToastDefinition {\n  removeToast: ToastContext['removeToast'];\n}\n\nexport interface ToastProps extends BaseToastProps {}\nexport interface ToastProviderProps extends PropsWithChildren {\n  icon?: boolean;\n  lifespan?: number;\n  position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';\n}\n\nexport const Toast = (props: ToastProps | InternalToast) => {\n  const { dismissible, lifespan, message = '', variant = 'branded' } = props;\n  const toastClasses = classes({ variant });\n  const dismissId = (props as InternalToast).id;\n  const removeToast = (props as InternalToast).removeToast;\n  const [show, setShow] = useState(true);\n\n  if (lifespan) {\n    setTimeout(() => {\n      setShow(false);\n    }, lifespan);\n  }\n\n  return (\n    <Animate\n      aria-live={['error'].includes(variant || '') ? 'assertive' : 'polite'}\n      show={show}\n      type=\"slide\"\n      onHidden={() => {\n        if (dismissId) {\n          removeToast(dismissId);\n        }\n      }}\n    >\n      <HStack className={toastClasses.toast}>\n        {props.icon && <StatusIcon className={toastClasses.icon} variant={variant} />}\n        <Text color=\"text.quaternary\">{message}</Text>\n        {dismissible && (\n          <button className={toastClasses.dismiss} onClick={() => setShow(false)} aria-label=\"dismiss toast\">\n            <IcoDismiss className={toastClasses.icon} />\n          </button>\n        )}\n      </HStack>\n    </Animate>\n  );\n};\n\nexport const ToastProvider = ({\n  icon: defaultIcon = false,\n  lifespan: defaultLifespan = 0,\n  position = 'top-right',\n  children,\n}: ToastProviderProps) => {\n  const toastsRef = useRef<ToastDefinition[]>([]);\n  const forceUpdate = useReducer((x: number) => x + 1, 0)[1];\n\n  const removeToast: ToastContext['removeToast'] = useCallback((id: number) => {\n    toastsRef.current = toastsRef.current.filter(toast => toast.id !== id);\n    forceUpdate();\n  }, []);\n\n  const createToast: ToastContext['createToast'] = useCallback(options => {\n    const { icon = options.icon || defaultIcon, lifespan = options.lifespan || defaultLifespan, ...props } = options;\n    const id = ++toastID;\n\n    toastsRef.current.push({ icon, lifespan, id, ...props });\n    forceUpdate();\n\n    return id;\n  }, []);\n\n  const toastCtx = useMemo(() => ({ createToast, removeToast }), [createToast, removeToast]);\n  const toasts = position?.startsWith('top') ? [...toastsRef.current] : [...toastsRef.current].reverse();\n  const activeToasts = toasts.map(toast => {\n    return <Toast key={toast.id} {...toast} removeToast={removeToast} />;\n  });\n\n  const providerClasses = classes({ position });\n\n  return (\n    <ToastContext.Provider value={toastCtx}>\n      {children}\n      <Portal>\n        <div className={providerClasses.portal}>\n          <VStack className={providerClasses.container}>{activeToasts}</VStack>\n        </div>\n      </Portal>\n    </ToastContext.Provider>\n  );\n};\n"],"names":["toastID","Toast","props","dismissible","lifespan","message","variant","toastClasses","classes","dismissId","removeToast","show","setShow","useState","_jsx","Animate","_jsxs","HStack","StatusIcon","Text","IcoDismiss","ToastProvider","defaultIcon","defaultLifespan","position","children","toastsRef","useRef","forceUpdate","useReducer","x","useCallback","id","toast","createToast","options","icon","toastCtx","useMemo","activeToasts","providerClasses","ToastContext","Portal","VStack"],"mappings":"goBAUA,IAAIA,EAAU,EAaP,MAAMC,EAASC,GAAqC,CACzD,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,QAAAC,EAAU,GAAI,QAAAC,EAAU,SAAW,EAAGJ,EAC/DK,EAAeC,QAAQ,CAAE,QAAAF,CAAO,CAAE,EAClCG,EAAaP,EAAwB,GACrCQ,EAAeR,EAAwB,YACvC,CAACS,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAI,EAErC,OAAIT,GACF,WAAW,IAAK,CACdQ,EAAQ,EAAK,CACf,EAAGR,CAAQ,EAIXU,EAACC,IAAAA,EAAAA,QAAO,CAAA,YACK,CAAC,OAAO,EAAE,SAAST,GAAW,EAAE,EAAI,YAAc,SAC7D,KAAMK,EACN,KAAK,QACL,SAAU,IAAK,CACTF,GACFC,EAAYD,CAAS,CAEzB,EAEA,SAAAO,EAAAA,KAACC,EAAAA,OAAM,CAAC,UAAWV,EAAa,gBAC7BL,EAAM,MAAQY,EAAAA,IAACI,EAAAA,WAAU,CAAC,UAAWX,EAAa,KAAM,QAASD,CAAO,CAAA,EACzEQ,EAAAA,IAACK,EAAAA,QAAK,CAAA,MAAM,2BAAmBd,CAAO,CAAA,EACrCF,GACCW,EAAAA,IAAQ,SAAA,CAAA,UAAWP,EAAa,QAAS,QAAS,IAAMK,EAAQ,EAAK,EAAC,aAAa,gBACjF,SAAAE,MAACM,EAAU,QAAA,CAAC,UAAWb,EAAa,MAC7B,CAAA,CACV,CACM,CAAA,CAAA,CAAA,CAGf,EAEac,EAAgB,CAAC,CAC5B,KAAMC,EAAc,GACpB,SAAUC,EAAkB,EAC5B,SAAAC,EAAW,YACX,SAAAC,CACmB,IAAI,CACvB,MAAMC,EAAYC,EAAAA,OAA0B,CAAE,CAAA,EACxCC,EAAcC,EAAAA,WAAYC,GAAcA,EAAI,EAAG,CAAC,EAAE,CAAC,EAEnDpB,EAA2CqB,EAAAA,YAAaC,GAAc,CAC1EN,EAAU,QAAUA,EAAU,QAAQ,OAAOO,GAASA,EAAM,KAAOD,CAAE,EACrEJ,EAAAA,CACF,EAAG,EAAE,EAECM,EAA2CH,EAAYI,YAAAA,GAAU,CACrE,KAAM,CAAE,KAAAC,EAAOD,EAAQ,MAAQb,EAAa,SAAAlB,EAAW+B,EAAQ,UAAYZ,EAAiB,GAAGrB,CAAK,EAAKiC,EACnGH,EAAK,EAAEhC,EAEb,OAAA0B,EAAU,QAAQ,KAAK,CAAE,KAAAU,EAAM,SAAAhC,EAAU,GAAA4B,EAAI,GAAG9B,CAAK,CAAE,EACvD0B,EAAAA,EAEOI,CACT,EAAG,CAAE,CAAA,EAECK,EAAWC,EAAAA,QAAQ,KAAO,CAAE,YAAAJ,EAAa,YAAAxB,CAAW,GAAK,CAACwB,EAAaxB,CAAW,CAAC,EAEnF6B,GADSf,GAAU,WAAW,KAAK,EAAI,CAAC,GAAGE,EAAU,OAAO,EAAI,CAAC,GAAGA,EAAU,OAAO,EAAE,WACjE,IAAIO,GACvBnB,EAAAA,IAACb,EAAyB,CAAA,GAAAgC,EAAO,YAAavB,CAAlC,EAAAuB,EAAM,EAAE,CAC5B,EAEKO,EAAkBhC,QAAQ,CAAE,SAAAgB,CAAQ,CAAE,EAE5C,OACER,EAACyB,KAAAA,EAAAA,aAAa,UAAS,MAAOJ,EAAQ,SAAA,CACnCZ,EACDX,EAAAA,IAAC4B,EAAAA,QAAM,CAAA,SACL5B,aAAK,UAAW0B,EAAgB,OAC9B,SAAA1B,MAAC6B,EAAM,OAAA,CAAC,UAAWH,EAAgB,mBAAYD,CAAY,CAAA,GAEtD,CAAA,CAAA,CAAA,CAAA,CAGf"}
+{"version":3,"file":"toast-provider.js","sources":["../../../../src/components/feedback/toast-provider.tsx"],"sourcesContent":["import { IcoDismiss } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport Portal from '@components/primitives/portal';\nimport Animate from '@components/utils/animate';\nimport { ToastProps as BaseToastProps, ToastContext, ToastDefinition } from '@hooks/useToast';\nimport { toast as classes } from '@recipes/toast';\nimport { HStack, VStack } from '@styled/jsx';\nimport { PropsWithChildren, useCallback, useMemo, useReducer, useRef, useState } from 'react';\nimport { StatusIcon } from './status-icon';\n\nlet toastID = 0;\n\ninterface InternalToast extends ToastDefinition {\n  removeToast: ToastContext['removeToast'];\n}\n\nexport interface ToastProps extends BaseToastProps {}\nexport interface ToastProviderProps extends PropsWithChildren {\n  icon?: boolean;\n  lifespan?: number;\n  position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';\n}\n\nexport const Toast = (props: ToastProps | InternalToast) => {\n  const { dismissible, lifespan, message = '', variant = 'branded' } = props;\n  const toastClasses = classes({ variant });\n  const dismissId = (props as InternalToast).id;\n  const removeToast = (props as InternalToast).removeToast;\n  const [show, setShow] = useState(true);\n\n  if (lifespan) {\n    setTimeout(() => {\n      setShow(false);\n    }, lifespan);\n  }\n\n  return (\n    <Animate\n      aria-live={['error'].includes(variant || '') ? 'assertive' : 'polite'}\n      show={show}\n      type=\"slide\"\n      onHidden={() => {\n        if (dismissId) {\n          removeToast(dismissId);\n        }\n      }}\n    >\n      <HStack className={toastClasses.toast}>\n        {props.icon && <StatusIcon className={toastClasses.icon} variant={variant} />}\n        <Text fontColor=\"text.quaternary\">{message}</Text>\n        {dismissible && (\n          <button className={toastClasses.dismiss} onClick={() => setShow(false)} aria-label=\"dismiss toast\">\n            <IcoDismiss className={toastClasses.icon} />\n          </button>\n        )}\n      </HStack>\n    </Animate>\n  );\n};\n\nexport const ToastProvider = ({\n  icon: defaultIcon = false,\n  lifespan: defaultLifespan = 0,\n  position = 'top-right',\n  children,\n}: ToastProviderProps) => {\n  const toastsRef = useRef<ToastDefinition[]>([]);\n  const forceUpdate = useReducer((x: number) => x + 1, 0)[1];\n\n  const removeToast: ToastContext['removeToast'] = useCallback((id: number) => {\n    toastsRef.current = toastsRef.current.filter(toast => toast.id !== id);\n    forceUpdate();\n  }, []);\n\n  const createToast: ToastContext['createToast'] = useCallback(options => {\n    const { icon = options.icon || defaultIcon, lifespan = options.lifespan || defaultLifespan, ...props } = options;\n    const id = ++toastID;\n\n    toastsRef.current.push({ icon, lifespan, id, ...props });\n    forceUpdate();\n\n    return id;\n  }, []);\n\n  const toastCtx = useMemo(() => ({ createToast, removeToast }), [createToast, removeToast]);\n  const toasts = position?.startsWith('top') ? [...toastsRef.current] : [...toastsRef.current].reverse();\n  const activeToasts = toasts.map(toast => {\n    return <Toast key={toast.id} {...toast} removeToast={removeToast} />;\n  });\n\n  const providerClasses = classes({ position });\n\n  return (\n    <ToastContext.Provider value={toastCtx}>\n      {children}\n      <Portal>\n        <div className={providerClasses.portal}>\n          <VStack className={providerClasses.container}>{activeToasts}</VStack>\n        </div>\n      </Portal>\n    </ToastContext.Provider>\n  );\n};\n"],"names":["toastID","Toast","props","dismissible","lifespan","message","variant","toastClasses","classes","dismissId","removeToast","show","setShow","useState","_jsx","Animate","_jsxs","HStack","StatusIcon","Text","IcoDismiss","ToastProvider","defaultIcon","defaultLifespan","position","children","toastsRef","useRef","forceUpdate","useReducer","x","useCallback","id","toast","createToast","options","icon","toastCtx","useMemo","activeToasts","providerClasses","ToastContext","Portal","VStack"],"mappings":"goBAUA,IAAIA,EAAU,EAaP,MAAMC,EAASC,GAAqC,CACzD,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,QAAAC,EAAU,GAAI,QAAAC,EAAU,SAAW,EAAGJ,EAC/DK,EAAeC,QAAQ,CAAE,QAAAF,CAAO,CAAE,EAClCG,EAAaP,EAAwB,GACrCQ,EAAeR,EAAwB,YACvC,CAACS,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAI,EAErC,OAAIT,GACF,WAAW,IAAK,CACdQ,EAAQ,EAAK,CACf,EAAGR,CAAQ,EAIXU,EAACC,IAAAA,EAAAA,QAAO,CAAA,YACK,CAAC,OAAO,EAAE,SAAST,GAAW,EAAE,EAAI,YAAc,SAC7D,KAAMK,EACN,KAAK,QACL,SAAU,IAAK,CACTF,GACFC,EAAYD,CAAS,CAEzB,EAEA,SAAAO,EAAAA,KAACC,EAAAA,OAAM,CAAC,UAAWV,EAAa,gBAC7BL,EAAM,MAAQY,EAAAA,IAACI,EAAAA,WAAU,CAAC,UAAWX,EAAa,KAAM,QAASD,CAAO,CAAA,EACzEQ,EAAAA,IAACK,EAAAA,QAAK,CAAA,UAAU,2BAAmBd,CAAO,CAAA,EACzCF,GACCW,EAAAA,IAAQ,SAAA,CAAA,UAAWP,EAAa,QAAS,QAAS,IAAMK,EAAQ,EAAK,EAAC,aAAa,gBACjF,SAAAE,MAACM,EAAU,QAAA,CAAC,UAAWb,EAAa,MAC7B,CAAA,CACV,CACM,CAAA,CAAA,CAAA,CAGf,EAEac,EAAgB,CAAC,CAC5B,KAAMC,EAAc,GACpB,SAAUC,EAAkB,EAC5B,SAAAC,EAAW,YACX,SAAAC,CACmB,IAAI,CACvB,MAAMC,EAAYC,EAAAA,OAA0B,CAAE,CAAA,EACxCC,EAAcC,EAAAA,WAAYC,GAAcA,EAAI,EAAG,CAAC,EAAE,CAAC,EAEnDpB,EAA2CqB,EAAAA,YAAaC,GAAc,CAC1EN,EAAU,QAAUA,EAAU,QAAQ,OAAOO,GAASA,EAAM,KAAOD,CAAE,EACrEJ,EAAAA,CACF,EAAG,EAAE,EAECM,EAA2CH,EAAYI,YAAAA,GAAU,CACrE,KAAM,CAAE,KAAAC,EAAOD,EAAQ,MAAQb,EAAa,SAAAlB,EAAW+B,EAAQ,UAAYZ,EAAiB,GAAGrB,CAAK,EAAKiC,EACnGH,EAAK,EAAEhC,EAEb,OAAA0B,EAAU,QAAQ,KAAK,CAAE,KAAAU,EAAM,SAAAhC,EAAU,GAAA4B,EAAI,GAAG9B,CAAK,CAAE,EACvD0B,EAAAA,EAEOI,CACT,EAAG,CAAE,CAAA,EAECK,EAAWC,EAAAA,QAAQ,KAAO,CAAE,YAAAJ,EAAa,YAAAxB,CAAW,GAAK,CAACwB,EAAaxB,CAAW,CAAC,EAEnF6B,GADSf,GAAU,WAAW,KAAK,EAAI,CAAC,GAAGE,EAAU,OAAO,EAAI,CAAC,GAAGA,EAAU,OAAO,EAAE,WACjE,IAAIO,GACvBnB,EAAAA,IAACb,EAAyB,CAAA,GAAAgC,EAAO,YAAavB,CAAlC,EAAAuB,EAAM,EAAE,CAC5B,EAEKO,EAAkBhC,QAAQ,CAAE,SAAAgB,CAAQ,CAAE,EAE5C,OACER,EAACyB,KAAAA,EAAAA,aAAa,UAAS,MAAOJ,EAAQ,SAAA,CACnCZ,EACDX,EAAAA,IAAC4B,EAAAA,QAAM,CAAA,SACL5B,aAAK,UAAW0B,EAAgB,OAC9B,SAAA1B,MAAC6B,EAAM,OAAA,CAAC,UAAWH,EAAgB,mBAAYD,CAAY,CAAA,GAEtD,CAAA,CAAA,CAAA,CAAA,CAGf"}

package/dist/cjs/components/inputs/phone-input.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("react/jsx-runtime"),G=require("@styled/tokens"),J=require("../icons/ico-caret-down.js"),Q=require("../icons/ico-checkmark-circle-fill.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var k=require("../primitives/text.js"),j=require("@styled/css"),u=require("@styled/jsx"),n=require("react"),d=require("react-aria"),h=require("react-international-phone");const D=({iso2:f})=>o.jsx(u.Flex,{width:"1.125rem",height:"1.125rem",borderRadius:"full",borderWidth:"thin",borderColor:"neutral.primary",overflow:"hidden",align:"center",children:o.jsx(h.FlagImage,{src:`https://flagcdn.com/${f}.svg`,iso2:f,size:16,className:j.css({objectFit:"cover"})})}),E=f=>{const{onChange:V,autoFocus:_=!0,errorMessage:C}=f,[M,z]=n.useState(""),[A,y]=n.useState(!1),[l,p]=n.useState(!1),[a,b]=n.useState(0),[w,q]=n.useState(""),H=n.useRef(null),L=n.useRef(null),m=n.useRef(null),v=n.useRef([]),S=n.useRef(void 0),{country:i,setCountry:P,inputRef:x,handlePhoneValueChange:N,inputValue:O}=h.usePhoneInput({defaultCountry:"us",value:M,onChange:e=>{z(e.phone),V(e.phone)}}),s=n.useMemo(()=>{const e=h.defaultCountries.filter(([,t])=>t!==i.iso2),r=h.defaultCountries.find(([,t])=>t===i.iso2);return r?[r,...e]:[...h.defaultCountries]},[i.iso2]),R=n.useMemo(()=>s.filter(([,e])=>e!==i.iso2),[i.iso2]),I=n.useCallback(e=>{var r;P(e),p(!1),(r=x.current)===null||r===void 0||r.focus()},[P]),B=n.useCallback(()=>{p(!l),l||(b(0),setTimeout(()=>{var e;return(e=m.current)===null||e===void 0?void 0:e.focus()}))},[l]),{buttonProps:K}=d.useButton({onPress:B},H),{focusProps:W,isFocusVisible:F}=d.useFocusRing(),{keyboardProps:T}=d.useKeyboard({onKeyDown:e=>{var r;if(l)switch(e.key){case"ArrowDown":e.preventDefault(),b(t=>(t+1)%s.length);break;case"ArrowUp":e.preventDefault(),b(t=>(t-1+s.length)%s.length);break;case"Enter":if(e.preventDefault(),a>=0){const[,t]=s[a];I(t)}break;case"Escape":p(!1),(r=x.current)===null||r===void 0||r.focus();break;default:(e.key===" "||e.key.match(/[\w]/i))&&(e.preventDefault(),clearTimeout(S.current),q(t=>t+e.key),S.current=window.setTimeout(()=>{q("")},1e3));break}}});n.useEffect(()=>{var e;_&&((e=x.current)===null||e===void 0||e.focus());const r=t=>{m.current&&!m.current.contains(t.target)&&(p(!1),y(!1))};return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[]),n.useEffect(()=>{var e;if(w!==""){const r=R.findIndex(([t])=>t.toLowerCase().startsWith(w.toLowerCase()));if(r!==-1){const t=s.findIndex(([g])=>g===R[r][0]);b(t),(e=v.current[t])===null||e===void 0||e.scrollIntoView({behavior:"smooth",block:"nearest"})}}},[w,s,i.iso2]),n.useEffect(()=>{var e;a>=0&&v.current[a]&&((e=v.current[a])===null||e===void 0||e.scrollIntoView({behavior:"smooth",block:"nearest"}))},[a]);const U=()=>{y(!0)},Y=()=>{y(!1)};return o.jsxs(u.VStack,{gap:2,children:[o.jsxs(u.Flex,{...d.mergeProps(T,W),ref:L,height:"fit-content",width:"full",alignItems:"center",justify:"center",borderWidth:"thin",borderColor:"neutral.secondary",borderRadius:"input",transition:"all linear 120ms",outlineColor:"brand.base",outlineStyle:A&&!F?"solid":"none",outlineWidth:"thick",outlineOffset:.5,onFocus:U,onBlur:Y,position:"relative",_hover:{borderColor:"neutral.primary"},children:[o.jsx("button",{...d.mergeProps(K,W),className:j.css({display:"flex",justifyContent:"center",alignItems:"center",borderStartRadius:"input",h:12,w:20,px:3,outlineColor:"brand.base",outlineStyle:F?"solid":"none",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer",transition:"all linear 120ms",_hover:{bg:"surface.tertiary"}}),children:o.jsxs(u.HStack,{gap:2,children:[o.jsx(D,{iso2:i.iso2}),o.jsx(J.default,{width:14,height:14,transform:l?"rotate(180)":""})]})}),l&&o.jsx(u.Box,{ref:m,tabIndex:-1,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",top:55,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",maxHeight:"17.5rem",overflowY:"auto",outline:"none",children:s.map(([e,r,t],g)=>{const c=i.iso2===r;return o.jsxs(u.HStack,{cursor:"pointer",bg:c?"brand.base":a===g?"brand.lightest":"",_hover:c?{}:{bg:"brand.lightest"},ref:$=>v.current[g]=$,gap:2,p:4,onClick:()=>I(r),justify:"space-between",children:[o.jsxs(u.HStack,{gap:4,children:[c?o.jsx(Q.default,{width:18,height:18,color:G.token("colors.surface.primary")}):o.jsx(D,{iso2:r}),o.jsx(k.default,{color:c?"text.quaternary":"text.primary",children:e})]}),o.jsxs(k.default,{color:c?"text.quaternary":"text.tertiary",children:["+",t]})]},r)})}),o.jsx("input",{type:"tel",inputMode:"tel",onChange:N,value:O,ref:x,className:j.css({transition:"all linear 120ms",width:"full",boxSizing:"border-box",borderLeftWidth:"thin",borderColor:"neutral.secondary",rounded:0,margin:0,minWidth:10,fontWeight:"medium",backgroundColor:"transparent",color:"text.primary",height:12,fontSize:"md",py:3,px:4,textAlign:"left",outline:"none",_placeholder:{color:"text.tertiary"}})})]}),C&&o.jsx(k.default,{variant:"error",size:"sm",fontWeight:"normal",children:C})]})};E.displayName="PhoneInput",exports.default=E;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("react/jsx-runtime"),G=require("@styled/tokens"),J=require("../icons/ico-caret-down.js"),Q=require("../icons/ico-checkmark-circle-fill.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var k=require("../primitives/text.js"),w=require("@styled/css"),u=require("@styled/jsx"),n=require("react"),d=require("react-aria"),h=require("react-international-phone");const D=({iso2:f})=>o.jsx(u.Flex,{width:"1.125rem",height:"1.125rem",borderRadius:"full",borderWidth:"thin",borderColor:"neutral.primary",overflow:"hidden",align:"center",children:o.jsx(h.FlagImage,{src:`https://flagcdn.com/${f}.svg`,iso2:f,size:16,className:w.css({objectFit:"cover"})})}),E=f=>{const{onChange:V,autoFocus:_=!0,errorMessage:j}=f,[M,z]=n.useState(""),[A,y]=n.useState(!1),[l,p]=n.useState(!1),[a,b]=n.useState(0),[C,q]=n.useState(""),H=n.useRef(null),L=n.useRef(null),m=n.useRef(null),v=n.useRef([]),S=n.useRef(void 0),{country:i,setCountry:P,inputRef:x,handlePhoneValueChange:N,inputValue:O}=h.usePhoneInput({defaultCountry:"us",value:M,onChange:e=>{z(e.phone),V(e.phone)}}),s=n.useMemo(()=>{const e=h.defaultCountries.filter(([,t])=>t!==i.iso2),r=h.defaultCountries.find(([,t])=>t===i.iso2);return r?[r,...e]:[...h.defaultCountries]},[i.iso2]),R=n.useMemo(()=>s.filter(([,e])=>e!==i.iso2),[i.iso2]),I=n.useCallback(e=>{var r;P(e),p(!1),(r=x.current)===null||r===void 0||r.focus()},[P]),B=n.useCallback(()=>{p(!l),l||(b(0),setTimeout(()=>{var e;return(e=m.current)===null||e===void 0?void 0:e.focus()}))},[l]),{buttonProps:K}=d.useButton({onPress:B},H),{focusProps:W,isFocusVisible:F}=d.useFocusRing(),{keyboardProps:T}=d.useKeyboard({onKeyDown:e=>{var r;if(l)switch(e.key){case"ArrowDown":e.preventDefault(),b(t=>(t+1)%s.length);break;case"ArrowUp":e.preventDefault(),b(t=>(t-1+s.length)%s.length);break;case"Enter":if(e.preventDefault(),a>=0){const[,t]=s[a];I(t)}break;case"Escape":p(!1),(r=x.current)===null||r===void 0||r.focus();break;default:(e.key===" "||e.key.match(/[\w]/i))&&(e.preventDefault(),clearTimeout(S.current),q(t=>t+e.key),S.current=window.setTimeout(()=>{q("")},1e3));break}}});n.useEffect(()=>{var e;_&&((e=x.current)===null||e===void 0||e.focus());const r=t=>{m.current&&!m.current.contains(t.target)&&(p(!1),y(!1))};return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[]),n.useEffect(()=>{var e;if(C!==""){const r=R.findIndex(([t])=>t.toLowerCase().startsWith(C.toLowerCase()));if(r!==-1){const t=s.findIndex(([g])=>g===R[r][0]);b(t),(e=v.current[t])===null||e===void 0||e.scrollIntoView({behavior:"smooth",block:"nearest"})}}},[C,s,i.iso2]),n.useEffect(()=>{var e;a>=0&&v.current[a]&&((e=v.current[a])===null||e===void 0||e.scrollIntoView({behavior:"smooth",block:"nearest"}))},[a]);const U=()=>{y(!0)},Y=()=>{y(!1)};return o.jsxs(u.VStack,{gap:2,children:[o.jsxs(u.Flex,{...d.mergeProps(T,W),ref:L,height:"fit-content",width:"full",alignItems:"center",justify:"center",borderWidth:"thin",borderColor:"neutral.secondary",borderRadius:"input",transition:"all linear 120ms",outlineColor:"brand.base",outlineStyle:A&&!F?"solid":"none",outlineWidth:"thick",outlineOffset:.5,onFocus:U,onBlur:Y,position:"relative",_hover:{borderColor:"neutral.primary"},children:[o.jsx("button",{...d.mergeProps(K,W),className:w.css({display:"flex",justifyContent:"center",alignItems:"center",borderStartRadius:"input",h:12,w:20,px:3,outlineColor:"brand.base",outlineStyle:F?"solid":"none",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer",transition:"all linear 120ms",_hover:{bg:"surface.tertiary"}}),children:o.jsxs(u.HStack,{gap:2,children:[o.jsx(D,{iso2:i.iso2}),o.jsx(J.default,{width:14,height:14,transform:l?"rotate(180)":""})]})}),l&&o.jsx(u.Box,{ref:m,tabIndex:-1,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",top:55,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",maxHeight:"17.5rem",overflowY:"auto",outline:"none",children:s.map(([e,r,t],g)=>{const c=i.iso2===r;return o.jsxs(u.HStack,{cursor:"pointer",bg:c?"brand.base":a===g?"brand.lightest":"",_hover:c?{}:{bg:"brand.lightest"},ref:$=>v.current[g]=$,gap:2,p:4,onClick:()=>I(r),justify:"space-between",children:[o.jsxs(u.HStack,{gap:4,children:[c?o.jsx(Q.default,{width:18,height:18,color:G.token("colors.surface.primary")}):o.jsx(D,{iso2:r}),o.jsx(k.default,{fontColor:c?"text.quaternary":"text.primary",children:e})]}),o.jsxs(k.default,{fontColor:c?"text.quaternary":"text.tertiary",children:["+",t]})]},r)})}),o.jsx("input",{type:"tel",inputMode:"tel",onChange:N,value:O,ref:x,className:w.css({transition:"all linear 120ms",width:"full",boxSizing:"border-box",borderLeftWidth:"thin",borderColor:"neutral.secondary",rounded:0,margin:0,minWidth:10,fontWeight:"medium",backgroundColor:"transparent",color:"text.primary",height:12,fontSize:"md",py:3,px:4,textAlign:"left",outline:"none",_placeholder:{color:"text.tertiary"}})})]}),j&&o.jsx(k.default,{variant:"error",size:"sm",fontWeight:"normal",children:j})]})};E.displayName="PhoneInput",exports.default=E;
 //# sourceMappingURL=phone-input.js.map

package/dist/cjs/components/inputs/phone-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-input.js","sources":["../../../../src/components/inputs/phone-input.tsx"],"sourcesContent":["import { IcoCaretDown, IcoCheckmarkCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\nimport { FlagImage, defaultCountries, usePhoneInput, type CountryIso2 } from 'react-international-phone';\n\nexport interface PhoneInputProps {\n  onChange: (phone: string) => void;\n  autoFocus?: boolean;\n  errorMessage?: string;\n}\n\nconst FlagContainer = ({ iso2 }: { iso2: CountryIso2 }) => {\n  return (\n    <Flex\n      width=\"1.125rem\"\n      height=\"1.125rem\"\n      borderRadius=\"full\"\n      borderWidth=\"thin\"\n      borderColor=\"neutral.primary\"\n      overflow=\"hidden\"\n      align=\"center\"\n    >\n      <FlagImage\n        src={`https://flagcdn.com/${iso2}.svg`}\n        iso2={iso2}\n        size={16}\n        className={css({ objectFit: 'cover' })}\n      />\n    </Flex>\n  );\n};\n\nconst PhoneInput = (props: PhoneInputProps) => {\n  const { onChange, autoFocus = true, errorMessage } = props;\n  const [value, setValue] = useState('');\n  const [isFocused, setIsFocused] = useState(false);\n  const [showDropdown, setShowDropdown] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState(0);\n  const [searchString, setSearchString] = useState('');\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const typeAheadTimeout = useRef<number | undefined>(undefined);\n\n  const { country, setCountry, inputRef, handlePhoneValueChange, inputValue } = usePhoneInput({\n    defaultCountry: 'us',\n    value,\n    onChange: data => {\n      setValue(data.phone);\n      onChange(data.phone);\n    },\n  });\n\n  const sortedCountries = useMemo(() => {\n    const otherCountries = defaultCountries.filter(([, iso2]) => iso2 !== country.iso2);\n    const selectedCountry = defaultCountries.find(([, iso2]) => iso2 === country.iso2);\n    return selectedCountry ? [selectedCountry, ...otherCountries] : [...defaultCountries];\n  }, [country.iso2]);\n\n  const filteredCountries = useMemo(() => {\n    return sortedCountries.filter(([, iso2]) => iso2 !== country.iso2);\n  }, [country.iso2]);\n\n  const handleSelect = useCallback(\n    (iso2: CountryIso2) => {\n      setCountry(iso2);\n      setShowDropdown(false);\n      inputRef.current?.focus();\n    },\n    [setCountry],\n  );\n\n  const toggleDropdown = useCallback(() => {\n    setShowDropdown(!showDropdown);\n    if (!showDropdown) {\n      setFocusedIndex(0);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [showDropdown]);\n\n  const { buttonProps } = useButton(\n    {\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible: isButtonFocused } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: e => {\n      if (!showDropdown) return;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          setFocusedIndex(prev => (prev + 1) % sortedCountries.length);\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          setFocusedIndex(prev => (prev - 1 + sortedCountries.length) % sortedCountries.length);\n          break;\n        case 'Enter':\n          e.preventDefault();\n          if (focusedIndex >= 0) {\n            const [, iso2] = sortedCountries[focusedIndex];\n            handleSelect(iso2);\n          }\n          break;\n        case 'Escape':\n          setShowDropdown(false);\n          inputRef.current?.focus();\n          break;\n        default:\n          if (e.key === ' ' || e.key.match(/[\\w]/i)) {\n            e.preventDefault();\n            clearTimeout(typeAheadTimeout.current);\n            setSearchString(s => s + e.key);\n            typeAheadTimeout.current = window.setTimeout(() => {\n              setSearchString('');\n            }, 1000);\n          }\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    // Focus the input when the component mounts if autoFocus is true\n    if (autoFocus) {\n      inputRef.current?.focus();\n    }\n\n    // Closes the dropdown when clicking outside of it\n    const handleClick = (event: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setShowDropdown(false);\n        setIsFocused(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  useEffect(() => {\n    // Implements type-ahead search functionality\n    if (searchString !== '') {\n      const matchIndex = filteredCountries.findIndex(([name]) =>\n        name.toLowerCase().startsWith(searchString.toLowerCase()),\n      );\n      if (matchIndex !== -1) {\n        const actualIndex = sortedCountries.findIndex(([name]) => name === filteredCountries[matchIndex][0]);\n        setFocusedIndex(actualIndex);\n        itemRefs.current[actualIndex]?.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n        });\n      }\n    }\n  }, [searchString, sortedCountries, country.iso2]);\n\n  useEffect(() => {\n    // Scrolls the focused item into view\n    if (focusedIndex >= 0 && itemRefs.current[focusedIndex]) {\n      itemRefs.current[focusedIndex]?.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n    }\n  }, [focusedIndex]);\n\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n  };\n\n  return (\n    <VStack gap={2}>\n      <Flex\n        {...mergeProps(keyboardProps, focusProps)}\n        ref={containerRef}\n        height=\"fit-content\"\n        width=\"full\"\n        alignItems=\"center\"\n        justify=\"center\"\n        borderWidth=\"thin\"\n        borderColor=\"neutral.secondary\"\n        borderRadius=\"input\"\n        transition=\"all linear 120ms\"\n        outlineColor=\"brand.base\"\n        outlineStyle={isFocused && !isButtonFocused ? 'solid' : 'none'}\n        outlineWidth=\"thick\"\n        outlineOffset={0.5}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        position=\"relative\"\n        _hover={{ borderColor: 'neutral.primary' }}\n      >\n        <button\n          {...mergeProps(buttonProps, focusProps)}\n          className={css({\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n            borderStartRadius: 'input',\n            h: 12,\n            w: 20,\n            px: 3,\n            outlineColor: 'brand.base',\n            outlineStyle: isButtonFocused ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            cursor: 'pointer',\n            transition: 'all linear 120ms',\n            _hover: {\n              bg: 'surface.tertiary',\n            },\n          })}\n        >\n          <HStack gap={2}>\n            <FlagContainer iso2={country.iso2} />\n            <IcoCaretDown width={14} height={14} transform={showDropdown ? 'rotate(180)' : ''} />\n          </HStack>\n        </button>\n\n        {showDropdown && (\n          <Box\n            ref={dropdownRef}\n            tabIndex={-1}\n            bg=\"surface.primary\"\n            position=\"absolute\"\n            w=\"full\"\n            rounded=\"input\"\n            top={55}\n            boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n            maxHeight=\"17.5rem\"\n            overflowY=\"auto\"\n            outline=\"none\"\n          >\n            {sortedCountries.map(([name, iso2, countryCode], index) => {\n              const isSelectedCountry = country.iso2 === iso2;\n              const isFocusedCountry = focusedIndex === index;\n\n              return (\n                <HStack\n                  cursor=\"pointer\"\n                  bg={isSelectedCountry ? 'brand.base' : isFocusedCountry ? 'brand.lightest' : ''}\n                  _hover={!isSelectedCountry ? { bg: 'brand.lightest' } : {}}\n                  key={iso2}\n                  ref={el => (itemRefs.current[index] = el)}\n                  gap={2}\n                  p={4}\n                  onClick={() => handleSelect(iso2)}\n                  justify=\"space-between\"\n                >\n                  <HStack gap={4}>\n                    {isSelectedCountry ? (\n                      <IcoCheckmarkCircleFill width={18} height={18} color={token('colors.surface.primary')} />\n                    ) : (\n                      <FlagContainer iso2={iso2} />\n                    )}\n                    <Text color={isSelectedCountry ? 'text.quaternary' : 'text.primary'}>{name}</Text>\n                  </HStack>\n                  <Text color={isSelectedCountry ? 'text.quaternary' : 'text.tertiary'}>+{countryCode}</Text>\n                </HStack>\n              );\n            })}\n          </Box>\n        )}\n        <input\n          type=\"tel\"\n          inputMode=\"tel\"\n          onChange={handlePhoneValueChange}\n          value={inputValue}\n          ref={inputRef}\n          className={css({\n            transition: 'all linear 120ms',\n            width: 'full',\n            boxSizing: 'border-box',\n            borderLeftWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 0,\n            margin: 0,\n            minWidth: 10,\n            fontWeight: 'medium',\n            backgroundColor: 'transparent',\n            color: 'text.primary',\n            height: 12,\n            fontSize: 'md',\n            py: 3,\n            px: 4,\n            textAlign: 'left',\n            outline: 'none',\n            _placeholder: {\n              color: 'text.tertiary',\n            },\n          })}\n        />\n      </Flex>\n      {errorMessage && (\n        <Text variant=\"error\" size=\"sm\" fontWeight=\"normal\">\n          {errorMessage}\n        </Text>\n      )}\n    </VStack>\n  );\n};\n\nPhoneInput.displayName = 'PhoneInput';\nexport default PhoneInput;\n"],"names":["FlagContainer","iso2","_jsx","Flex","FlagImage","css","PhoneInput","props","onChange","autoFocus","errorMessage","value","setValue","useState","isFocused","setIsFocused","showDropdown","setShowDropdown","focusedIndex","setFocusedIndex","searchString","setSearchString","buttonRef","useRef","containerRef","dropdownRef","itemRefs","typeAheadTimeout","country","setCountry","inputRef","handlePhoneValueChange","inputValue","usePhoneInput","data","sortedCountries","useMemo","otherCountries","defaultCountries","selectedCountry","filteredCountries","handleSelect","useCallback","_a","toggleDropdown","buttonProps","useButton","focusProps","isButtonFocused","useFocusRing","keyboardProps","useKeyboard","prev","s","useEffect","handleClick","event","matchIndex","name","actualIndex","handleFocus","handleBlur","_jsxs","VStack","mergeProps","HStack","IcoCaretDown","Box","countryCode","index","isSelectedCountry","el","IcoCheckmarkCircleFill","token","Text"],"mappings":"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"}
+{"version":3,"file":"phone-input.js","sources":["../../../../src/components/inputs/phone-input.tsx"],"sourcesContent":["import { IcoCaretDown, IcoCheckmarkCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\nimport { FlagImage, defaultCountries, usePhoneInput, type CountryIso2 } from 'react-international-phone';\n\nexport interface PhoneInputProps {\n  onChange: (phone: string) => void;\n  autoFocus?: boolean;\n  errorMessage?: string;\n}\n\nconst FlagContainer = ({ iso2 }: { iso2: CountryIso2 }) => {\n  return (\n    <Flex\n      width=\"1.125rem\"\n      height=\"1.125rem\"\n      borderRadius=\"full\"\n      borderWidth=\"thin\"\n      borderColor=\"neutral.primary\"\n      overflow=\"hidden\"\n      align=\"center\"\n    >\n      <FlagImage\n        src={`https://flagcdn.com/${iso2}.svg`}\n        iso2={iso2}\n        size={16}\n        className={css({ objectFit: 'cover' })}\n      />\n    </Flex>\n  );\n};\n\nconst PhoneInput = (props: PhoneInputProps) => {\n  const { onChange, autoFocus = true, errorMessage } = props;\n  const [value, setValue] = useState('');\n  const [isFocused, setIsFocused] = useState(false);\n  const [showDropdown, setShowDropdown] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState(0);\n  const [searchString, setSearchString] = useState('');\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const typeAheadTimeout = useRef<number | undefined>(undefined);\n\n  const { country, setCountry, inputRef, handlePhoneValueChange, inputValue } = usePhoneInput({\n    defaultCountry: 'us',\n    value,\n    onChange: data => {\n      setValue(data.phone);\n      onChange(data.phone);\n    },\n  });\n\n  const sortedCountries = useMemo(() => {\n    const otherCountries = defaultCountries.filter(([, iso2]) => iso2 !== country.iso2);\n    const selectedCountry = defaultCountries.find(([, iso2]) => iso2 === country.iso2);\n    return selectedCountry ? [selectedCountry, ...otherCountries] : [...defaultCountries];\n  }, [country.iso2]);\n\n  const filteredCountries = useMemo(() => {\n    return sortedCountries.filter(([, iso2]) => iso2 !== country.iso2);\n  }, [country.iso2]);\n\n  const handleSelect = useCallback(\n    (iso2: CountryIso2) => {\n      setCountry(iso2);\n      setShowDropdown(false);\n      inputRef.current?.focus();\n    },\n    [setCountry],\n  );\n\n  const toggleDropdown = useCallback(() => {\n    setShowDropdown(!showDropdown);\n    if (!showDropdown) {\n      setFocusedIndex(0);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [showDropdown]);\n\n  const { buttonProps } = useButton(\n    {\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible: isButtonFocused } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: e => {\n      if (!showDropdown) return;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          setFocusedIndex(prev => (prev + 1) % sortedCountries.length);\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          setFocusedIndex(prev => (prev - 1 + sortedCountries.length) % sortedCountries.length);\n          break;\n        case 'Enter':\n          e.preventDefault();\n          if (focusedIndex >= 0) {\n            const [, iso2] = sortedCountries[focusedIndex];\n            handleSelect(iso2);\n          }\n          break;\n        case 'Escape':\n          setShowDropdown(false);\n          inputRef.current?.focus();\n          break;\n        default:\n          if (e.key === ' ' || e.key.match(/[\\w]/i)) {\n            e.preventDefault();\n            clearTimeout(typeAheadTimeout.current);\n            setSearchString(s => s + e.key);\n            typeAheadTimeout.current = window.setTimeout(() => {\n              setSearchString('');\n            }, 1000);\n          }\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    // Focus the input when the component mounts if autoFocus is true\n    if (autoFocus) {\n      inputRef.current?.focus();\n    }\n\n    // Closes the dropdown when clicking outside of it\n    const handleClick = (event: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setShowDropdown(false);\n        setIsFocused(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  useEffect(() => {\n    // Implements type-ahead search functionality\n    if (searchString !== '') {\n      const matchIndex = filteredCountries.findIndex(([name]) =>\n        name.toLowerCase().startsWith(searchString.toLowerCase()),\n      );\n      if (matchIndex !== -1) {\n        const actualIndex = sortedCountries.findIndex(([name]) => name === filteredCountries[matchIndex][0]);\n        setFocusedIndex(actualIndex);\n        itemRefs.current[actualIndex]?.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n        });\n      }\n    }\n  }, [searchString, sortedCountries, country.iso2]);\n\n  useEffect(() => {\n    // Scrolls the focused item into view\n    if (focusedIndex >= 0 && itemRefs.current[focusedIndex]) {\n      itemRefs.current[focusedIndex]?.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n    }\n  }, [focusedIndex]);\n\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n  };\n\n  return (\n    <VStack gap={2}>\n      <Flex\n        {...mergeProps(keyboardProps, focusProps)}\n        ref={containerRef}\n        height=\"fit-content\"\n        width=\"full\"\n        alignItems=\"center\"\n        justify=\"center\"\n        borderWidth=\"thin\"\n        borderColor=\"neutral.secondary\"\n        borderRadius=\"input\"\n        transition=\"all linear 120ms\"\n        outlineColor=\"brand.base\"\n        outlineStyle={isFocused && !isButtonFocused ? 'solid' : 'none'}\n        outlineWidth=\"thick\"\n        outlineOffset={0.5}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        position=\"relative\"\n        _hover={{ borderColor: 'neutral.primary' }}\n      >\n        <button\n          {...mergeProps(buttonProps, focusProps)}\n          className={css({\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n            borderStartRadius: 'input',\n            h: 12,\n            w: 20,\n            px: 3,\n            outlineColor: 'brand.base',\n            outlineStyle: isButtonFocused ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            cursor: 'pointer',\n            transition: 'all linear 120ms',\n            _hover: {\n              bg: 'surface.tertiary',\n            },\n          })}\n        >\n          <HStack gap={2}>\n            <FlagContainer iso2={country.iso2} />\n            <IcoCaretDown width={14} height={14} transform={showDropdown ? 'rotate(180)' : ''} />\n          </HStack>\n        </button>\n\n        {showDropdown && (\n          <Box\n            ref={dropdownRef}\n            tabIndex={-1}\n            bg=\"surface.primary\"\n            position=\"absolute\"\n            w=\"full\"\n            rounded=\"input\"\n            top={55}\n            boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n            maxHeight=\"17.5rem\"\n            overflowY=\"auto\"\n            outline=\"none\"\n          >\n            {sortedCountries.map(([name, iso2, countryCode], index) => {\n              const isSelectedCountry = country.iso2 === iso2;\n              const isFocusedCountry = focusedIndex === index;\n\n              return (\n                <HStack\n                  cursor=\"pointer\"\n                  bg={isSelectedCountry ? 'brand.base' : isFocusedCountry ? 'brand.lightest' : ''}\n                  _hover={!isSelectedCountry ? { bg: 'brand.lightest' } : {}}\n                  key={iso2}\n                  ref={el => (itemRefs.current[index] = el)}\n                  gap={2}\n                  p={4}\n                  onClick={() => handleSelect(iso2)}\n                  justify=\"space-between\"\n                >\n                  <HStack gap={4}>\n                    {isSelectedCountry ? (\n                      <IcoCheckmarkCircleFill width={18} height={18} color={token('colors.surface.primary')} />\n                    ) : (\n                      <FlagContainer iso2={iso2} />\n                    )}\n                    <Text fontColor={isSelectedCountry ? 'text.quaternary' : 'text.primary'}>{name}</Text>\n                  </HStack>\n                  <Text fontColor={isSelectedCountry ? 'text.quaternary' : 'text.tertiary'}>+{countryCode}</Text>\n                </HStack>\n              );\n            })}\n          </Box>\n        )}\n        <input\n          type=\"tel\"\n          inputMode=\"tel\"\n          onChange={handlePhoneValueChange}\n          value={inputValue}\n          ref={inputRef}\n          className={css({\n            transition: 'all linear 120ms',\n            width: 'full',\n            boxSizing: 'border-box',\n            borderLeftWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 0,\n            margin: 0,\n            minWidth: 10,\n            fontWeight: 'medium',\n            backgroundColor: 'transparent',\n            color: 'text.primary',\n            height: 12,\n            fontSize: 'md',\n            py: 3,\n            px: 4,\n            textAlign: 'left',\n            outline: 'none',\n            _placeholder: {\n              color: 'text.tertiary',\n            },\n          })}\n        />\n      </Flex>\n      {errorMessage && (\n        <Text variant=\"error\" size=\"sm\" fontWeight=\"normal\">\n          {errorMessage}\n        </Text>\n      )}\n    </VStack>\n  );\n};\n\nPhoneInput.displayName = 'PhoneInput';\nexport default PhoneInput;\n"],"names":["FlagContainer","iso2","_jsx","Flex","FlagImage","css","PhoneInput","props","onChange","autoFocus","errorMessage","value","setValue","useState","isFocused","setIsFocused","showDropdown","setShowDropdown","focusedIndex","setFocusedIndex","searchString","setSearchString","buttonRef","useRef","containerRef","dropdownRef","itemRefs","typeAheadTimeout","country","setCountry","inputRef","handlePhoneValueChange","inputValue","usePhoneInput","data","sortedCountries","useMemo","otherCountries","defaultCountries","selectedCountry","filteredCountries","handleSelect","useCallback","_a","toggleDropdown","buttonProps","useButton","focusProps","isButtonFocused","useFocusRing","keyboardProps","useKeyboard","prev","s","useEffect","handleClick","event","matchIndex","name","actualIndex","handleFocus","handleBlur","_jsxs","VStack","mergeProps","HStack","IcoCaretDown","Box","countryCode","index","isSelectedCountry","el","IcoCheckmarkCircleFill","token","Text"],"mappings":"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"}

package/dist/cjs/components/inputs/text-input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("react"),n=require("react-aria"),R=require("../primitives/button.js");require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var x=require("../primitives/text.js"),k=require("../../recipes/text-input.js"),P=require("@styled/css"),m=require("@styled/jsx"),z=require("@styled/tokens"),l=require("create-slots");const E=l.createSlot(({children:s,...o})=>e.jsx(m.Flex,{alignItems:"center",justifyContent:"center",children:a.Children.map(s,r=>{var t;return a.cloneElement(r,{...o,color:(t=r.props.color)!==null&&t!==void 0?t:z.token("colors.neutral.primary")})})})),w=l.createSlot(({children:s,...o})=>e.jsx(m.Flex,{alignItems:"center",justifyContent:"center",children:a.Children.map(s,r=>{var t;return a.isValidElement(r)?a.cloneElement(r,{...o,color:(t=r.props.color)!==null&&t!==void 0?t:z.token("colors.brand.base")}):null})})),D=l.createSlot(R.default),H=l.createSlot(x.default),A=l.createSlot(x.default),V=a.forwardRef((s,o)=>{const{label:r,disabled:t,size:c="md",alignText:f="left",attr:g,description:u,autoFocus:j,className:q="",errorMessage:h,required:d}=s,v=c==="sm"?16:20,M=a.useRef(null),N=o||M,{labelProps:O,inputProps:W,descriptionProps:G,errorMessageProps:J,isInvalid:F,validationErrors:y}=n.useTextField({...s,isDisabled:t??!1,isInvalid:!!h},N),{focusProps:K}=n.useFocusRing({autoFocus:j??!1}),{hoverProps:L}=n.useHover({isDisabled:t??!1});return l.createHost(s.children,p=>{const b=p.get(E),I=p.get(w),C=p.getProps(D),T=p.getProps(H),S=p.getProps(A),i=k.textInput({size:c,alignText:f,disabled:t,isError:F});return e.jsxs(m.VStack,{className:P.cx(i.container,q),children:[r&&e.jsxs("label",{className:i.label,...O,children:[r," ",d&&e.jsx("span",{className:P.css({color:"negative.darker"}),children:"*"})]}),e.jsxs(m.HStack,{className:i.inputContainer,children:[b&&{...b,props:{...b.props,className:i.typeIcon,width:v,height:v}},T&&e.jsx(x.default,{...T,color:"text.tertiary"}),e.jsx("input",{ref:N,className:i.input,...n.mergeProps(W,K,L),...g}),S&&e.jsx(x.default,{...S,color:"text.tertiary"}),I&&{...I,props:{...I.props,className:i.actionIcon,width:v,height:v}},C&&e.jsx(m.Flex,{alignItems:"center",justifyContent:"center",className:i.actionButton,children:e.jsx(R.default,{...C,variant:"text",size:c})})]}),u&&e.jsx("div",{className:i.description,...G,children:u}),F&&e.jsx(x.default,{variant:"error",...J,size:"sm",fontWeight:"normal",children:y.length>0?y.join(" "):h})]})})}),B=a.forwardRef((s,o)=>{const{disabled:r,autoFocus:t,className:c="",attr:f}=s,g=a.useRef(null),u=o||g,{inputProps:j}=n.useTextField({...s,isDisabled:r??!1},u),{focusProps:q}=n.useFocusRing({autoFocus:t??!1}),{hoverProps:h}=n.useHover({isDisabled:r??!1}),d=k.textInput({char:!0,disabled:r});return e.jsx("div",{className:P.cx(d.container,d.inputContainer,c),children:e.jsx("input",{ref:u,className:d.input,...n.mergeProps(j,q,h),size:1,...f})})}),Q=Object.assign(V,{TypeIcon:E,ActionIcon:w,ActionButton:D,Char:B,Prefix:H,Suffix:A});V.displayName="TextInput",B.displayName="TextInputChar",exports.TextInput=Q;
+"use strict";var e=require("react/jsx-runtime"),a=require("react"),n=require("react-aria"),R=require("../primitives/button.js");require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var x=require("../primitives/text.js"),k=require("../../recipes/text-input.js"),P=require("@styled/css"),m=require("@styled/jsx"),z=require("@styled/tokens"),l=require("create-slots");const E=l.createSlot(({children:s,...o})=>e.jsx(m.Flex,{alignItems:"center",justifyContent:"center",children:a.Children.map(s,r=>{var t;return a.cloneElement(r,{...o,color:(t=r.props.color)!==null&&t!==void 0?t:z.token("colors.neutral.primary")})})})),w=l.createSlot(({children:s,...o})=>e.jsx(m.Flex,{alignItems:"center",justifyContent:"center",children:a.Children.map(s,r=>{var t;return a.isValidElement(r)?a.cloneElement(r,{...o,color:(t=r.props.color)!==null&&t!==void 0?t:z.token("colors.brand.base")}):null})})),D=l.createSlot(R.default),H=l.createSlot(x.default),A=l.createSlot(x.default),V=a.forwardRef((s,o)=>{const{label:r,disabled:t,size:c="md",alignText:v="left",attr:g,description:u,autoFocus:j,className:q="",errorMessage:h,required:d}=s,f=c==="sm"?16:20,M=a.useRef(null),N=o||M,{labelProps:O,inputProps:W,descriptionProps:G,errorMessageProps:J,isInvalid:C,validationErrors:F}=n.useTextField({...s,isDisabled:t??!1,isInvalid:!!h},N),{focusProps:K}=n.useFocusRing({autoFocus:j??!1}),{hoverProps:L}=n.useHover({isDisabled:t??!1});return l.createHost(s.children,p=>{const b=p.get(E),I=p.get(w),y=p.getProps(D),T=p.getProps(H),S=p.getProps(A),i=k.textInput({size:c,alignText:v,disabled:t,isError:C});return e.jsxs(m.VStack,{className:P.cx(i.container,q),children:[r&&e.jsxs("label",{className:i.label,...O,children:[r," ",d&&e.jsx("span",{className:P.css({color:"negative.darker"}),children:"*"})]}),e.jsxs(m.HStack,{className:i.inputContainer,children:[b&&{...b,props:{...b.props,className:i.typeIcon,width:f,height:f}},T&&e.jsx(x.default,{...T,fontColor:"text.tertiary"}),e.jsx("input",{ref:N,className:i.input,...n.mergeProps(W,K,L),...g}),S&&e.jsx(x.default,{...S,fontColor:"text.tertiary"}),I&&{...I,props:{...I.props,className:i.actionIcon,width:f,height:f}},y&&e.jsx(m.Flex,{alignItems:"center",justifyContent:"center",className:i.actionButton,children:e.jsx(R.default,{...y,variant:"text",size:c})})]}),u&&e.jsx("div",{className:i.description,...G,children:u}),C&&e.jsx(x.default,{variant:"error",...J,size:"sm",fontWeight:"normal",children:F.length>0?F.join(" "):h})]})})}),B=a.forwardRef((s,o)=>{const{disabled:r,autoFocus:t,className:c="",attr:v}=s,g=a.useRef(null),u=o||g,{inputProps:j}=n.useTextField({...s,isDisabled:r??!1},u),{focusProps:q}=n.useFocusRing({autoFocus:t??!1}),{hoverProps:h}=n.useHover({isDisabled:r??!1}),d=k.textInput({char:!0,disabled:r});return e.jsx("div",{className:P.cx(d.container,d.inputContainer,c),children:e.jsx("input",{ref:u,className:d.input,...n.mergeProps(j,q,h),size:1,...v})})}),Q=Object.assign(V,{TypeIcon:E,ActionIcon:w,ActionButton:D,Char:B,Prefix:H,Suffix:A});V.displayName="TextInput",B.displayName="TextInputChar",exports.TextInput=Q;
 //# sourceMappingURL=text-input.js.map

package/dist/cjs/components/inputs/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sources":["../../../../src/components/inputs/text-input.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  isValidElement,\n  ReactNode,\n  RefObject,\n  useRef,\n} from 'react';\nimport type { AriaTextFieldProps } from 'react-aria';\nimport { mergeProps, useFocusRing, useHover, useTextField } from 'react-aria';\n\nimport { Button, Text } from '@components/primitives';\nimport { textInput } from '@recipes/text-input';\nimport { css, cx } from '@styled/css';\nimport { Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nimport { createHost, createSlot } from 'create-slots';\n\nexport type TextInputProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n  errorMessage?: string;\n  children?: ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n  alignText?: 'left' | 'center' | 'right';\n  required?: boolean;\n};\n\nexport type CharProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n};\n\nexport type ActionIconProps = HTMLAttributes<HTMLElement> & {\n  onClick: () => void;\n};\n\nconst TypeIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, { ...props, color: child.props.color ?? token('colors.neutral.primary') });\n      })}\n    </Flex>\n  );\n});\n\nconst ActionIcon = createSlot(({ children, ...props }: ActionIconProps) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        if (isValidElement<ActionIconProps>(child)) {\n          return cloneElement(child, { ...props, color: child.props.color ?? token('colors.brand.base') });\n        }\n        return null;\n      })}\n    </Flex>\n  );\n});\n\nconst ActionButton = createSlot(Button);\nconst Prefix = createSlot(Text);\nconst Suffix = createSlot(Text);\n\nconst Component = forwardRef<HTMLInputElement, TextInputProps>((props, forwardedRef) => {\n  const {\n    label,\n    disabled,\n    size = 'md',\n    alignText = 'left',\n    attr,\n    description,\n    autoFocus,\n    className = '',\n    errorMessage,\n    required,\n  } = props;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { labelProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors } = useTextField(\n    { ...props, isDisabled: disabled ?? false, isInvalid: !!errorMessage },\n    ref as RefObject<HTMLInputElement>,\n  );\n\n  const { focusProps } = useFocusRing({\n    autoFocus: autoFocus ?? false,\n  });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  return createHost(props.children, slots => {\n    const typeIcon = slots.get(TypeIcon);\n    const actionIcon = slots.get(ActionIcon);\n    const actionButtonProps = slots.getProps(ActionButton);\n    const prefixProps = slots.getProps(Prefix);\n    const suffixProps = slots.getProps(Suffix);\n\n    const classes = textInput({\n      size,\n      alignText,\n      disabled,\n      isError: isInvalid,\n    });\n\n    return (\n      <VStack className={cx(classes.container, className)}>\n        {label && (\n          <label className={classes.label} {...labelProps}>\n            {label} {required && <span className={css({ color: 'negative.darker' })}>*</span>}\n          </label>\n        )}\n        <HStack className={classes.inputContainer}>\n          {typeIcon && {\n            ...typeIcon,\n            props: { ...typeIcon.props, className: classes.typeIcon, width: iconSize, height: iconSize },\n          }}\n          {prefixProps && <Text {...prefixProps} color=\"text.tertiary\" />}\n          <input ref={ref} className={classes.input} {...mergeProps(inputProps, focusProps, hoverProps)} {...attr} />\n          {suffixProps && <Text {...suffixProps} color=\"text.tertiary\" />}\n          {actionIcon && {\n            ...actionIcon,\n            props: { ...actionIcon.props, className: classes.actionIcon, width: iconSize, height: iconSize },\n          }}\n          {actionButtonProps && (\n            <Flex alignItems=\"center\" justifyContent=\"center\" className={classes.actionButton}>\n              <Button {...actionButtonProps} variant=\"text\" size={size} />\n            </Flex>\n          )}\n        </HStack>\n        {description && (\n          <div className={classes.description} {...descriptionProps}>\n            {description}\n          </div>\n        )}\n        {isInvalid && (\n          <Text variant=\"error\" {...errorMessageProps} size={'sm'} fontWeight=\"normal\">\n            {validationErrors.length > 0 ? validationErrors.join(' ') : errorMessage}\n          </Text>\n        )}\n      </VStack>\n    );\n  });\n});\n\nconst Char = forwardRef<HTMLInputElement, CharProps>((props, forwardedRef) => {\n  const { disabled, autoFocus, className = '', attr } = props;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { inputProps } = useTextField({ ...props, isDisabled: disabled ?? false }, ref as RefObject<HTMLInputElement>);\n\n  const { focusProps } = useFocusRing({ autoFocus: autoFocus ?? false });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  const classes = textInput({ char: true, disabled });\n\n  return (\n    <div className={cx(classes.container, classes.inputContainer, className)}>\n      <input\n        ref={ref}\n        className={classes.input}\n        {...mergeProps(inputProps, focusProps, hoverProps)}\n        size={1}\n        {...attr}\n      />\n    </div>\n  );\n});\n\nexport const TextInput = Object.assign(Component, {\n  TypeIcon,\n  ActionIcon,\n  ActionButton,\n  Char,\n  Prefix,\n  Suffix,\n});\n\nComponent.displayName = 'TextInput';\nChar.displayName = 'TextInputChar';\n"],"names":["TypeIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","_a","token","ActionIcon","isValidElement","ActionButton","Button","Prefix","Text","Suffix","Component","forwardRef","forwardedRef","label","disabled","size","alignText","attr","description","autoFocus","className","errorMessage","required","iconSize","internalRef","useRef","ref","labelProps","inputProps","descriptionProps","errorMessageProps","isInvalid","validationErrors","useTextField","focusProps","useFocusRing","hoverProps","useHover","createHost","slots","typeIcon","actionIcon","actionButtonProps","prefixProps","suffixProps","classes","textInput","_jsxs","VStack","cx","css","HStack","mergeProps","Char","TextInput"],"mappings":"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"}
+{"version":3,"file":"text-input.js","sources":["../../../../src/components/inputs/text-input.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  isValidElement,\n  ReactNode,\n  RefObject,\n  useRef,\n} from 'react';\nimport type { AriaTextFieldProps } from 'react-aria';\nimport { mergeProps, useFocusRing, useHover, useTextField } from 'react-aria';\n\nimport { Button, Text } from '@components/primitives';\nimport { textInput } from '@recipes/text-input';\nimport { css, cx } from '@styled/css';\nimport { Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nimport { createHost, createSlot } from 'create-slots';\n\nexport type TextInputProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n  errorMessage?: string;\n  children?: ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n  alignText?: 'left' | 'center' | 'right';\n  required?: boolean;\n};\n\nexport type CharProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n};\n\nexport type ActionIconProps = HTMLAttributes<HTMLElement> & {\n  onClick: () => void;\n};\n\nconst TypeIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, { ...props, color: child.props.color ?? token('colors.neutral.primary') });\n      })}\n    </Flex>\n  );\n});\n\nconst ActionIcon = createSlot(({ children, ...props }: ActionIconProps) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        if (isValidElement<ActionIconProps>(child)) {\n          return cloneElement(child, { ...props, color: child.props.color ?? token('colors.brand.base') });\n        }\n        return null;\n      })}\n    </Flex>\n  );\n});\n\nconst ActionButton = createSlot(Button);\nconst Prefix = createSlot(Text);\nconst Suffix = createSlot(Text);\n\nconst Component = forwardRef<HTMLInputElement, TextInputProps>((props, forwardedRef) => {\n  const {\n    label,\n    disabled,\n    size = 'md',\n    alignText = 'left',\n    attr,\n    description,\n    autoFocus,\n    className = '',\n    errorMessage,\n    required,\n  } = props;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { labelProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors } = useTextField(\n    { ...props, isDisabled: disabled ?? false, isInvalid: !!errorMessage },\n    ref as RefObject<HTMLInputElement>,\n  );\n\n  const { focusProps } = useFocusRing({\n    autoFocus: autoFocus ?? false,\n  });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  return createHost(props.children, slots => {\n    const typeIcon = slots.get(TypeIcon);\n    const actionIcon = slots.get(ActionIcon);\n    const actionButtonProps = slots.getProps(ActionButton);\n    const prefixProps = slots.getProps(Prefix);\n    const suffixProps = slots.getProps(Suffix);\n\n    const classes = textInput({\n      size,\n      alignText,\n      disabled,\n      isError: isInvalid,\n    });\n\n    return (\n      <VStack className={cx(classes.container, className)}>\n        {label && (\n          <label className={classes.label} {...labelProps}>\n            {label} {required && <span className={css({ color: 'negative.darker' })}>*</span>}\n          </label>\n        )}\n        <HStack className={classes.inputContainer}>\n          {typeIcon && {\n            ...typeIcon,\n            props: { ...typeIcon.props, className: classes.typeIcon, width: iconSize, height: iconSize },\n          }}\n          {prefixProps && <Text {...prefixProps} fontColor=\"text.tertiary\" />}\n          <input ref={ref} className={classes.input} {...mergeProps(inputProps, focusProps, hoverProps)} {...attr} />\n          {suffixProps && <Text {...suffixProps} fontColor=\"text.tertiary\" />}\n          {actionIcon && {\n            ...actionIcon,\n            props: { ...actionIcon.props, className: classes.actionIcon, width: iconSize, height: iconSize },\n          }}\n          {actionButtonProps && (\n            <Flex alignItems=\"center\" justifyContent=\"center\" className={classes.actionButton}>\n              <Button {...actionButtonProps} variant=\"text\" size={size} />\n            </Flex>\n          )}\n        </HStack>\n        {description && (\n          <div className={classes.description} {...descriptionProps}>\n            {description}\n          </div>\n        )}\n        {isInvalid && (\n          <Text variant=\"error\" {...errorMessageProps} size={'sm'} fontWeight=\"normal\">\n            {validationErrors.length > 0 ? validationErrors.join(' ') : errorMessage}\n          </Text>\n        )}\n      </VStack>\n    );\n  });\n});\n\nconst Char = forwardRef<HTMLInputElement, CharProps>((props, forwardedRef) => {\n  const { disabled, autoFocus, className = '', attr } = props;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { inputProps } = useTextField({ ...props, isDisabled: disabled ?? false }, ref as RefObject<HTMLInputElement>);\n\n  const { focusProps } = useFocusRing({ autoFocus: autoFocus ?? false });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  const classes = textInput({ char: true, disabled });\n\n  return (\n    <div className={cx(classes.container, classes.inputContainer, className)}>\n      <input\n        ref={ref}\n        className={classes.input}\n        {...mergeProps(inputProps, focusProps, hoverProps)}\n        size={1}\n        {...attr}\n      />\n    </div>\n  );\n});\n\nexport const TextInput = Object.assign(Component, {\n  TypeIcon,\n  ActionIcon,\n  ActionButton,\n  Char,\n  Prefix,\n  Suffix,\n});\n\nComponent.displayName = 'TextInput';\nChar.displayName = 'TextInputChar';\n"],"names":["TypeIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","_a","token","ActionIcon","isValidElement","ActionButton","Button","Prefix","Text","Suffix","Component","forwardRef","forwardedRef","label","disabled","size","alignText","attr","description","autoFocus","className","errorMessage","required","iconSize","internalRef","useRef","ref","labelProps","inputProps","descriptionProps","errorMessageProps","isInvalid","validationErrors","useTextField","focusProps","useFocusRing","hoverProps","useHover","createHost","slots","typeIcon","actionIcon","actionButtonProps","prefixProps","suffixProps","classes","textInput","_jsxs","VStack","cx","css","HStack","mergeProps","Char","TextInput"],"mappings":"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"}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, useCallback, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n  name: string;\n  fiatBalanceWithSymbol: string;\n  tokenBalanceWithSymbol: string;\n  logoUrl?: string;\n  onPress?: () => void;\n}\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\" color=\"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,MAAM,iBAAiB,OAAQ,CAAE,WAAY,QAAQ,EAClE,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"}
+{"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/dropdown-selector.js

@@ -1,2 +1,2 @@
-"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:i,label:a,size:d="lg",isFocused:y})=>{const{selectedOption:h,setSelectedOption:p}=r.useContext(A),s=h?.value===i,o=E[d],k=r.useCallback(()=>{p({value:i,label:a})},[p,i,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:o.width,paddingRight:o.width},children:[t.jsx(m.Box,{style:{width:o.width},children:s&&t.jsx(M.default,{width:o.check,height:o.check,color:C.token("colors.text.quaternary")})}),t.jsx(j.default,{size:d,fontWeight:"medium",color:s?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:a})]})},R=({children:i,onSelect:a,label:d,placeholder:y="Select one",selectedValue:h,size:p="lg",tooltipContent:s,disabled:o,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(i).find(n=>n.props.value===h);return e?e.props.label:y},[h,i]),{buttonProps:L}=g.useButton({...F,isDisabled:o,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(i);switch(e.key){case"ArrowUp":e.preventDefault(),l===null?f(r.Children.count(i)-1):(w=l>0?l-1:r.Children.count(i)-1,f(w));break;case"ArrowDown":e.preventDefault(),l===null?f(0):(w=l<r.Children.count(i)-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:o?.3:"",transition:"all linear 120ms",children:[d&&t.jsx(j.default,{size:"sm",fontWeight:"medium",children:d}),s&&t.jsx(U.default,{isDisabled:o,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,color: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(i,(e,n)=>r.cloneElement(e,{isFocused:n===l,size:p}))})]})]})})};P.displayName="DropdownOption",R.displayName="DropdownSelector",exports.DropdownOption=P,exports.DropdownSelector=R;
+"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.text.quaternary')} />\n        )}\n      </Box>\n      <Text\n        size={size}\n        fontWeight=\"medium\"\n        color={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} color={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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"}
+{"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/text.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("react/jsx-runtime"),S=require("../../recipes/text.js"),o=require("@styled/css"),d=require("react");const i="text.primary",x=d.forwardRef(({children:e,styles:s={},scale:r,color:t=i,...a},l)=>c.jsx("h1",{ref:l,className:o.css({textStyle:r?"h1-scaled":"h1",color:t,...a}),style:s,children:e})),y=d.forwardRef(({children:e,styles:s={},scale:r,color:t=i,...a},l)=>c.jsx("h2",{ref:l,className:o.css({textStyle:r?"h2-scaled":"h2",color:t,...a}),style:s,children:e})),f=d.forwardRef(({children:e,styles:s={},scale:r,color:t=i,...a},l)=>c.jsx("h3",{ref:l,className:o.css({textStyle:r?"h3-scaled":"h3",color:t,...a}),style:s,children:e})),m=d.forwardRef(({children:e,styles:s={},scale:r,color:t=i,...a},l)=>c.jsx("h4",{ref:l,className:o.css({textStyle:r?"h4-scaled":"h4",color:t,...a}),style:s,children:e})),N=d.forwardRef(({children:e,styles:s={},scale:r,color:t=i,...a},l)=>c.jsx("h5",{ref:l,className:o.css({textStyle:r?"h5-scaled":"h5",color:t,...a}),style:s,children:e})),u=d.forwardRef(({children:e,styles:s={},scale:r,color:t="text.secondary",...a},l)=>c.jsx("h6",{ref:l,className:o.css({textStyle:r?"h6-scaled":"h6",color:t,...a}),style:s,children:e})),n=d.forwardRef(({children:e,styles:s={},scale:r,inline:t=!1,mono:a=!1,variant:l="text",size:H="md",truncate:j=!1,fontWeight:R,...T},w)=>{const v=S.text({mono:a,variant:l,size:H,scale:r}),h={ref:w,className:o.cx(v,o.css({truncate:j,fontWeight:R??(l!=="text"?"medium":"normal"),...T})),style:s};return t?c.jsx("span",{...h,children:e}):c.jsx("p",{...h,children:e})}),p=d.forwardRef((e,s)=>c.jsx(n,{ref:s,mono:!0,...e})),q=Object.assign(n,{H1:x,H2:y,H3:f,H4:m,H5:N,H6:u,Mono:p});n.displayName="Text",x.displayName="Text.H1",y.displayName="Text.H2",f.displayName="Text.H3",m.displayName="Text.H4",N.displayName="Text.H5",u.displayName="Text.H6",p.displayName="Text.Mono",exports.default=q;
+"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, 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  color?: '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, 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, 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, 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, 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, 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, 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      ...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, ...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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"}
+{"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":"sLAgCMA,MAAAA,EAAe,eAEfC,EAASC,aACb,CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,GAAI,MAAAC,EAAO,UAAWC,EAAQN,EAAc,GAAGO,CAAO,EAAEC,IAC5EC,EAAAA,IAAA,KAAA,CAAI,IAAKD,EAAK,UAAWE,EAAI,IAAA,CAAE,UAAWL,EAAQ,YAAc,KAAM,MAAAC,EAAO,GAAGC,CAAK,CAAE,EAAG,MAAOH,EAC9F,SAAAD,CACE,CAAA,CACN,EAGGQ,EAAST,EAAAA,WACb,CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,GAAI,MAAAC,EAAO,UAAWC,EAAQN,EAAc,GAAGO,CAAO,EAAEC,IAC5EC,MAAA,KAAA,CAAI,IAAKD,EAAK,UAAWE,MAAI,CAAE,UAAWL,EAAQ,YAAc,KAAM,MAAAC,EAAO,GAAGC,CAAK,CAAE,EAAG,MAAOH,EAC9F,SAAAD,CACE,CAAA,CACN,EAGGS,EAASV,EAAAA,WACb,CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,CAAA,EAAI,MAAAC,EAAO,UAAWC,EAAQN,EAAc,GAAGO,CAAO,EAAEC,IAC5EC,MAAA,KAAA,CAAI,IAAKD,EAAK,UAAWE,EAAAA,IAAI,CAAE,UAAWL,EAAQ,YAAc,KAAM,MAAAC,EAAO,GAAGC,CAAK,CAAE,EAAG,MAAOH,EAC9F,SAAAD,CACE,CAAA,CACN,EAGGU,EAASX,EACb,WAAA,CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,CAAE,EAAE,MAAAC,EAAO,UAAWC,EAAQN,EAAc,GAAGO,CAAO,EAAEC,IAC5EC,EAAAA,IAAA,KAAA,CAAI,IAAKD,EAAK,UAAWE,EAAAA,IAAI,CAAE,UAAWL,EAAQ,YAAc,KAAM,MAAAC,EAAO,GAAGC,CAAK,CAAE,EAAG,MAAOH,EAC9F,SAAAD,CACE,CAAA,CACN,EAGGW,EAASZ,aACb,CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,GAAI,MAAAC,EAAO,UAAWC,EAAQN,EAAc,GAAGO,CAAO,EAAEC,IAC5EC,MAAA,KAAA,CAAI,IAAKD,EAAK,UAAWE,MAAI,CAAE,UAAWL,EAAQ,YAAc,KAAM,MAAAC,EAAO,GAAGC,CAAK,CAAE,EAAG,MAAOH,EAC9F,SAAAD,CACE,CAAA,CACN,EAGGY,EAASb,EACb,WAAA,CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,CAAE,EAAE,MAAAC,EAAO,UAAWC,EAAQ,iBAAkB,GAAGC,CAAO,EAAEC,IAChFC,EAAAA,IAAA,KAAA,CAAI,IAAKD,EAAK,UAAWE,EAAAA,IAAI,CAAE,UAAWL,EAAQ,YAAc,KAAM,MAAAC,EAAO,GAAGC,CAAK,CAAE,EAAG,MAAOH,EAC9F,SAAAD,CACE,CAAA,CACN,EAGGa,EAAOd,aACX,CACE,CACE,SAAAC,EACA,OAAAC,EAAS,CACT,EAAA,MAAAC,EACA,OAAAY,EAAS,GACT,KAAAC,EAAO,GACP,QAAAC,EAAU,OACV,KAAAC,EAAO,KACP,SAAAC,EAAW,GACX,WAAAC,EACA,UAAWhB,EACX,GAAGC,CACJ,EACDC,IACE,CACF,MAAMe,EAAcC,OAAK,CAAE,KAAAN,EAAM,QAAAC,EAAS,KAAAC,EAAM,MAAAf,CAAK,CAAE,EAEjDoB,EAAY,CAChB,IAAAjB,EACA,UAAWkB,EAAGH,GAAAA,EAAab,MAAI,CAAE,SAAAW,EAAU,WAHrBC,IAAeH,IAAY,OAAS,SAAW,UAGG,MAAAb,EAAO,GAAGC,CAAK,CAAE,CAAC,EAC1F,MAAOH,GAGT,OAAIa,EACKR,MAAU,OAAA,CAAA,GAAAgB,EAAY,SAAAtB,IAGxBM,MAAO,IAAA,CAAA,GAAAgB,EAAY,SAAAtB,GAC5B,CAAC,EAGGwB,EAAWzB,EAA4C,WAAA,CAACK,EAAOC,IAC5DC,EAAAA,IAACO,EAAI,CAAC,IAAKR,EAAK,KAAI,GAAA,GAAKD,CAAK,CAAA,CACtC,EAEKqB,EAAO,OAAO,OAAOZ,EAAM,CAC/B,GAAIf,EACJ,GAAIU,EACJ,GAAIC,EACJ,GAAIC,EACJ,GAAIC,EACJ,GAAIC,EACJ,KAAMY,CACP,CAAA,EAEDX,EAAK,YAAc,OACnBf,EAAO,YAAc,UACrBU,EAAO,YAAc,UACrBC,EAAO,YAAc,UACrBC,EAAO,YAAc,UACrBC,EAAO,YAAc,UACrBC,EAAO,YAAc,UACrBY,EAAS,YAAc"}

package/dist/es/components/feedback/toast-provider.js

@@ -1,2 +1,2 @@
-import{jsx as i,jsxs as v}from"react/jsx-runtime";import"@styled/tokens";import k from"../icons/ico-dismiss.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import C from"../primitives/text.js";import S from"../primitives/portal.js";import g from"../utils/animate.js";import{ToastContext as j}from"../../hooks/useToast.js";import{toast as h}from"../../recipes/toast.js";import{HStack as y,VStack as H}from"@styled/jsx";import{useState as P,useRef as R,useReducer as $,useCallback as N,useMemo as q}from"react";import{StatusIcon as w}from"./status-icon.js";let B=0;const T=o=>{const{dismissible:c,lifespan:a,message:l="",variant:t="branded"}=o,e=h({variant:t}),s=o.id,n=o.removeToast,[p,m]=P(!0);return a&&setTimeout(()=>{m(!1)},a),i(g,{"aria-live":["error"].includes(t||"")?"assertive":"polite",show:p,type:"slide",onHidden:()=>{s&&n(s)},children:v(y,{className:e.toast,children:[o.icon&&i(w,{className:e.icon,variant:t}),i(C,{color:"text.quaternary",children:l}),c&&i("button",{className:e.dismiss,onClick:()=>m(!1),"aria-label":"dismiss toast",children:i(k,{className:e.icon})})]})})},I=({icon:o=!1,lifespan:c=0,position:a="top-right",children:l})=>{const t=R([]),e=$(r=>r+1,0)[1],s=N(r=>{t.current=t.current.filter(d=>d.id!==r),e()},[]),n=N(r=>{const{icon:d=r.icon||o,lifespan:x=r.lifespan||c,...b}=r,f=++B;return t.current.push({icon:d,lifespan:x,id:f,...b}),e(),f},[]),p=q(()=>({createToast:n,removeToast:s}),[n,s]),m=(a?.startsWith("top")?[...t.current]:[...t.current].reverse()).map(r=>i(T,{...r,removeToast:s},r.id)),u=h({position:a});return v(j.Provider,{value:p,children:[l,i(S,{children:i("div",{className:u.portal,children:i(H,{className:u.container,children:m})})})]})};export{T as Toast,I as ToastProvider};
+import{jsx as i,jsxs as v}from"react/jsx-runtime";import"@styled/tokens";import C from"../icons/ico-dismiss.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import k from"../primitives/text.js";import S from"../primitives/portal.js";import g from"../utils/animate.js";import{ToastContext as j}from"../../hooks/useToast.js";import{toast as h}from"../../recipes/toast.js";import{HStack as y,VStack as H}from"@styled/jsx";import{useState as P,useRef as R,useReducer as $,useCallback as N,useMemo as q}from"react";import{StatusIcon as w}from"./status-icon.js";let B=0;const T=e=>{const{dismissible:c,lifespan:a,message:l="",variant:t="branded"}=e,o=h({variant:t}),s=e.id,n=e.removeToast,[p,m]=P(!0);return a&&setTimeout(()=>{m(!1)},a),i(g,{"aria-live":["error"].includes(t||"")?"assertive":"polite",show:p,type:"slide",onHidden:()=>{s&&n(s)},children:v(y,{className:o.toast,children:[e.icon&&i(w,{className:o.icon,variant:t}),i(k,{fontColor:"text.quaternary",children:l}),c&&i("button",{className:o.dismiss,onClick:()=>m(!1),"aria-label":"dismiss toast",children:i(C,{className:o.icon})})]})})},I=({icon:e=!1,lifespan:c=0,position:a="top-right",children:l})=>{const t=R([]),o=$(r=>r+1,0)[1],s=N(r=>{t.current=t.current.filter(d=>d.id!==r),o()},[]),n=N(r=>{const{icon:d=r.icon||e,lifespan:x=r.lifespan||c,...b}=r,f=++B;return t.current.push({icon:d,lifespan:x,id:f,...b}),o(),f},[]),p=q(()=>({createToast:n,removeToast:s}),[n,s]),m=(a?.startsWith("top")?[...t.current]:[...t.current].reverse()).map(r=>i(T,{...r,removeToast:s},r.id)),u=h({position:a});return v(j.Provider,{value:p,children:[l,i(S,{children:i("div",{className:u.portal,children:i(H,{className:u.container,children:m})})})]})};export{T as Toast,I as ToastProvider};
 //# sourceMappingURL=toast-provider.js.map