@magiclabs/ui-components 1.16.2 → 1.16.4

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),T=require("@styled/tokens"),f=require("../icons/ico-dismiss.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var k=require("../primitives/text.js"),b=require("../primitives/portal.js"),N=require("../utils/animate.js"),C=require("../../hooks/useToast.js"),q=require("../../recipes/toast.js"),x=require("@styled/jsx"),n=require("react"),S=require("./status-icon.js");let P=0;const h=r=>{const{lifespan:c=0,message:i,variant:o="branded"}=r,a=q.toast({variant:o}),s=r.dismissible&&r.id,l=r.removeToast,[d,u]=n.useState(!0);return c&&s&&setTimeout(()=>{u(!1)},c),e.jsx(N.default,{"aria-live":["error"].includes(o||"")?"assertive":"polite",show:d,type:"slide",onHidden:()=>{s&&l(s)},children:e.jsxs(x.HStack,{className:a.toast,children:[r.icon&&e.jsx(S.StatusIcon,{className:a.icon,variant:o}),e.jsx(k.default,{styles:{color:T.token("colors.chalk")},children:i}),s&&e.jsx("button",{className:a.dismiss,onClick:()=>u(!1),"aria-label":`dismiss toast ${s}`,children:e.jsx(f.default,{className:a.icon})})]})})},R=({position:r,children:c})=>{const i=n.useRef([]),o=n.useReducer(t=>t+1,0)[1],a=n.useCallback(t=>{i.current=i.current.filter(v=>v.id!==t),o()},[]),s=n.useCallback(t=>{const{lifespan:v=0,variant:j="branded",...p}=t,m=++P;return i.current.push({lifespan:v,variant:j,id:m,...p}),o(),m},[]),l=n.useMemo(()=>({createToast:s,removeToast:a}),[s,a]),d=(r?.startsWith("top")?[...i.current]:[...i.current].reverse()).map(t=>e.jsx(h,{...t,removeToast:a},t.id)),u=q.toast({position:r});return e.jsxs(C.ToastContext.Provider,{value:l,children:[c,e.jsx(b.default,{children:e.jsx("div",{className:u.portal,children:e.jsx(x.VStack,{className:u.container,children:d})})})]})};exports.Toast=h,exports.ToastProvider=R;
+"use strict";var e=require("react/jsx-runtime"),T=require("@styled/tokens"),f=require("../icons/ico-dismiss.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var b=require("../primitives/text.js"),k=require("../primitives/portal.js"),N=require("../utils/animate.js"),C=require("../../hooks/useToast.js"),q=require("../../recipes/toast.js"),x=require("@styled/jsx"),n=require("react"),S=require("./status-icon.js");let y=0;const j=r=>{const{lifespan:c=0,message:i,variant:o="branded"}=r,a=q.toast({variant:o}),s=r.dismissible&&r.id,l=r.removeToast,[d,u]=n.useState(!0);return c&&s&&setTimeout(()=>{u(!1)},c),e.jsx(N.default,{"aria-live":["error"].includes(o||"")?"assertive":"polite",show:d,type:"slide",onHidden:()=>{s&&l(s)},children:e.jsxs(x.HStack,{className:a.toast,children:[r.icon&&e.jsx(S.StatusIcon,{className:a.icon,variant:o}),e.jsx(b.default,{styles:{color:T.token("colors.surface.primary")},children:i}),s&&e.jsx("button",{className:a.dismiss,onClick:()=>u(!1),"aria-label":`dismiss toast ${s}`,children:e.jsx(f.default,{className:a.icon})})]})})},P=({position:r,children:c})=>{const i=n.useRef([]),o=n.useReducer(t=>t+1,0)[1],a=n.useCallback(t=>{i.current=i.current.filter(v=>v.id!==t),o()},[]),s=n.useCallback(t=>{const{lifespan:v=0,variant:p="branded",...h}=t,m=++y;return i.current.push({lifespan:v,variant:p,id:m,...h}),o(),m},[]),l=n.useMemo(()=>({createToast:s,removeToast:a}),[s,a]),d=(r?.startsWith("top")?[...i.current]:[...i.current].reverse()).map(t=>e.jsx(j,{...t,removeToast:a},t.id)),u=q.toast({position:r});return e.jsxs(C.ToastContext.Provider,{value:l,children:[c,e.jsx(k.default,{children:e.jsx("div",{className:u.portal,children:e.jsx(x.VStack,{className:u.container,children:d})})})]})};exports.Toast=j,exports.ToastProvider=P;
 //# 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 { token } from '@styled/tokens';\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  position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';\n}\n\nexport const Toast = (props: ToastProps | InternalToast) => {\n  const { lifespan = 0, message, variant = 'branded' } = props;\n  const toastClasses = classes({ variant });\n  const dismissId = props.dismissible && (props as InternalToast).id;\n  const removeToast = (props as InternalToast).removeToast;\n  const [show, setShow] = useState(true);\n\n  if (lifespan && dismissId) {\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 styles={{ color: token('colors.chalk') }}>{message}</Text>\n        {dismissId && (\n          <button\n            className={toastClasses.dismiss}\n            onClick={() => setShow(false)}\n            aria-label={`dismiss toast ${dismissId}`}\n          >\n            <IcoDismiss className={toastClasses.icon} />\n          </button>\n        )}\n      </HStack>\n    </Animate>\n  );\n};\n\nexport const ToastProvider = ({ position, children }: 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 { lifespan = 0, variant = 'branded', ...props } = options;\n    const id = ++toastID;\n\n    toastsRef.current.push({ lifespan, variant, 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","lifespan","message","variant","toastClasses","classes","dismissId","removeToast","show","setShow","useState","_jsx","Animate","_jsxs","HStack","StatusIcon","Text","token","IcoDismiss","ToastProvider","position","children","toastsRef","useRef","forceUpdate","useReducer","x","useCallback","id","toast","createToast","options","toastCtx","useMemo","activeToasts","providerClasses","ToastContext","Portal","VStack"],"mappings":"glBAWA,IAAIA,EAAU,QAWDC,EAASC,GAAqC,CACzD,KAAM,CAAE,SAAAC,EAAW,EAAG,QAAAC,EAAS,QAAAC,EAAU,SAAW,EAAGH,EACjDI,EAAeC,EAAAA,MAAQ,CAAE,QAAAF,CAAO,CAAE,EAClCG,EAAYN,EAAM,aAAgBA,EAAwB,GAC1DO,EAAeP,EAAwB,YACvC,CAACQ,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAI,EAErC,OAAIT,GAAYK,GACd,WAAW,IAAK,CACdG,EAAQ,EAAK,CACf,EAAGR,CAAQ,EAIXU,EAAAA,IAACC,EAAAA,QAAO,CAAA,YACK,CAAC,OAAO,EAAE,SAAST,GAAW,EAAE,EAAI,YAAc,SAC7D,KAAMK,EACN,KAAK,QACL,SAAU,IAAK,CACTF,GACFC,EAAYD,CAAS,CAEzB,WAEAO,EAAAA,KAACC,EAAAA,OAAO,CAAA,UAAWV,EAAa,MAAK,SAAA,CAClCJ,EAAM,MAAQW,EAAAA,IAACI,EAAAA,YAAW,UAAWX,EAAa,KAAM,QAASD,CAAO,CAAA,EACzEQ,EAAAA,IAACK,EAAAA,QAAK,CAAA,OAAQ,CAAE,MAAOC,EAAAA,MAAM,cAAc,CAAC,EAAK,SAAAf,IAChDI,GACCK,EAAAA,IAAA,SAAA,CACE,UAAWP,EAAa,QACxB,QAAS,IAAMK,EAAQ,EAAK,EAAC,aACjB,iBAAiBH,CAAS,YAEtCK,EAAAA,IAACO,EAAAA,SAAW,UAAWd,EAAa,IAAQ,CAAA,CAAA,CAAA,CAE/C,CACM,CAAA,CAAA,CAAA,CAGf,EAEae,EAAgB,CAAC,CAAE,SAAAC,EAAU,SAAAC,CAA8B,IAAI,CAC1E,MAAMC,EAAYC,EAAAA,OAA0B,CAAA,CAAE,EACxCC,EAAcC,aAAYC,GAAcA,EAAI,EAAG,CAAC,EAAE,CAAC,EAEnDnB,EAA2CoB,cAAaC,GAAc,CAC1EN,EAAU,QAAUA,EAAU,QAAQ,OAAOO,GAASA,EAAM,KAAOD,CAAE,EACrEJ,EACF,CAAA,EAAG,CAAA,CAAE,EAECM,EAA2CH,cAAYI,GAAU,CACrE,KAAM,CAAE,SAAA9B,EAAW,EAAG,QAAAE,EAAU,UAAW,GAAGH,CAAO,EAAG+B,EAClDH,EAAK,EAAE9B,EAEb,OAAAwB,EAAU,QAAQ,KAAK,CAAE,SAAArB,EAAU,QAAAE,EAAS,GAAAyB,EAAI,GAAG5B,CAAK,CAAE,EAC1DwB,EAEOI,EAAAA,CACT,EAAG,CAAA,CAAE,EAECI,EAAWC,UAAQ,KAAO,CAAE,YAAAH,EAAa,YAAAvB,CAAW,GAAK,CAACuB,EAAavB,CAAW,CAAC,EAEnF2B,GADSd,GAAU,WAAW,KAAK,EAAI,CAAC,GAAGE,EAAU,OAAO,EAAI,CAAC,GAAGA,EAAU,OAAO,EAAE,WACjE,IAAIO,GACvBlB,EAAAA,IAACZ,EAAyB,CAAA,GAAA8B,EAAO,YAAatB,CAAlC,EAAAsB,EAAM,EAAE,CAC5B,EAEKM,EAAkB9B,EAAAA,MAAQ,CAAE,SAAAe,CAAQ,CAAE,EAE5C,OACEP,EAACuB,KAAAA,EAAAA,aAAa,UAAS,MAAOJ,EAAQ,SAAA,CACnCX,EACDV,EAAC0B,IAAAA,EAAAA,QAAM,CAAA,SACL1B,EAAAA,WAAK,UAAWwB,EAAgB,OAC9B,SAAAxB,EAAAA,IAAC2B,EAAAA,OAAM,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 { token } from '@styled/tokens';\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  position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';\n}\n\nexport const Toast = (props: ToastProps | InternalToast) => {\n  const { lifespan = 0, message, variant = 'branded' } = props;\n  const toastClasses = classes({ variant });\n  const dismissId = props.dismissible && (props as InternalToast).id;\n  const removeToast = (props as InternalToast).removeToast;\n  const [show, setShow] = useState(true);\n\n  if (lifespan && dismissId) {\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 styles={{ color: token('colors.surface.primary') }}>{message}</Text>\n        {dismissId && (\n          <button\n            className={toastClasses.dismiss}\n            onClick={() => setShow(false)}\n            aria-label={`dismiss toast ${dismissId}`}\n          >\n            <IcoDismiss className={toastClasses.icon} />\n          </button>\n        )}\n      </HStack>\n    </Animate>\n  );\n};\n\nexport const ToastProvider = ({ position, children }: 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 { lifespan = 0, variant = 'branded', ...props } = options;\n    const id = ++toastID;\n\n    toastsRef.current.push({ lifespan, variant, 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","lifespan","message","variant","toastClasses","classes","dismissId","removeToast","show","setShow","useState","_jsx","Animate","_jsxs","HStack","StatusIcon","Text","token","IcoDismiss","ToastProvider","position","children","toastsRef","useRef","forceUpdate","useReducer","x","useCallback","id","toast","createToast","options","toastCtx","useMemo","activeToasts","providerClasses","ToastContext","Portal","VStack"],"mappings":"glBAWA,IAAIA,EAAU,QAWDC,EAASC,GAAqC,CACzD,KAAM,CAAE,SAAAC,EAAW,EAAG,QAAAC,EAAS,QAAAC,EAAU,SAAW,EAAGH,EACjDI,EAAeC,EAAAA,MAAQ,CAAE,QAAAF,CAAO,CAAE,EAClCG,EAAYN,EAAM,aAAgBA,EAAwB,GAC1DO,EAAeP,EAAwB,YACvC,CAACQ,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAI,EAErC,OAAIT,GAAYK,GACd,WAAW,IAAK,CACdG,EAAQ,EAAK,CACf,EAAGR,CAAQ,EAIXU,EAAAA,IAACC,EAAAA,QAAO,CAAA,YACK,CAAC,OAAO,EAAE,SAAST,GAAW,EAAE,EAAI,YAAc,SAC7D,KAAMK,EACN,KAAK,QACL,SAAU,IAAK,CACTF,GACFC,EAAYD,CAAS,CAEzB,WAEAO,EAAAA,KAACC,EAAAA,OAAO,CAAA,UAAWV,EAAa,MAAK,SAAA,CAClCJ,EAAM,MAAQW,EAAAA,IAACI,EAAAA,YAAW,UAAWX,EAAa,KAAM,QAASD,CAAO,CAAA,EACzEQ,EAAAA,IAACK,EAAAA,QAAK,CAAA,OAAQ,CAAE,MAAOC,EAAAA,MAAM,wBAAwB,CAAC,EAAK,SAAAf,IAC1DI,GACCK,EAAAA,IAAA,SAAA,CACE,UAAWP,EAAa,QACxB,QAAS,IAAMK,EAAQ,EAAK,EAAC,aACjB,iBAAiBH,CAAS,YAEtCK,EAAAA,IAACO,EAAAA,SAAW,UAAWd,EAAa,IAAQ,CAAA,CAAA,CAAA,CAE/C,CACM,CAAA,CAAA,CAAA,CAGf,EAEae,EAAgB,CAAC,CAAE,SAAAC,EAAU,SAAAC,CAA8B,IAAI,CAC1E,MAAMC,EAAYC,EAAAA,OAA0B,CAAA,CAAE,EACxCC,EAAcC,aAAYC,GAAcA,EAAI,EAAG,CAAC,EAAE,CAAC,EAEnDnB,EAA2CoB,cAAaC,GAAc,CAC1EN,EAAU,QAAUA,EAAU,QAAQ,OAAOO,GAASA,EAAM,KAAOD,CAAE,EACrEJ,EACF,CAAA,EAAG,CAAA,CAAE,EAECM,EAA2CH,cAAYI,GAAU,CACrE,KAAM,CAAE,SAAA9B,EAAW,EAAG,QAAAE,EAAU,UAAW,GAAGH,CAAO,EAAG+B,EAClDH,EAAK,EAAE9B,EAEb,OAAAwB,EAAU,QAAQ,KAAK,CAAE,SAAArB,EAAU,QAAAE,EAAS,GAAAyB,EAAI,GAAG5B,CAAK,CAAE,EAC1DwB,EAEOI,EAAAA,CACT,EAAG,CAAA,CAAE,EAECI,EAAWC,UAAQ,KAAO,CAAE,YAAAH,EAAa,YAAAvB,CAAW,GAAK,CAACuB,EAAavB,CAAW,CAAC,EAEnF2B,GADSd,GAAU,WAAW,KAAK,EAAI,CAAC,GAAGE,EAAU,OAAO,EAAI,CAAC,GAAGA,EAAU,OAAO,EAAE,WACjE,IAAIO,GACvBlB,EAAAA,IAACZ,EAAyB,CAAA,GAAA8B,EAAO,YAAatB,CAAlC,EAAAsB,EAAM,EAAE,CAC5B,EAEKM,EAAkB9B,EAAAA,MAAQ,CAAE,SAAAe,CAAQ,CAAE,EAE5C,OACEP,EAACuB,KAAAA,EAAAA,aAAa,UAAS,MAAOJ,EAAQ,SAAA,CACnCX,EACDV,EAAC0B,IAAAA,EAAAA,QAAM,CAAA,SACL1B,EAAAA,WAAK,UAAWwB,EAAgB,OAC9B,SAAAxB,EAAAA,IAAC2B,EAAAA,OAAM,CAAC,UAAWH,EAAgB,mBAAYD,CAAY,CAAA,GAEtD,CAAA,CAAA,CAAA,CAAA,CAGf"}

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

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

package/dist/cjs/recipes/text-input.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("@styled/css");const n=t.sva({slots:["container","label","inputContainer","input","description","typeIcon","actionIcon","actionButton"],base:{container:{display:"flex",flexDirection:"column",gap:2},label:{fontSize:"sm",fontWeight:"medium",color:"text.primary"},inputContainer:{backgroundColor:"transparent",borderStyle:"solid",borderWidth:"thin",borderColor:"neutral.secondary",borderRadius:"input",boxSizing:"border-box",transition:"all linear 120ms",width:"100%",_hover:{borderColor:"neutral.primary"},_focusWithin:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}},input:{transition:"all linear 120ms",width:"100%",boxSizing:"border-box",m:0,p:0,outline:"none",minWidth:10,fontWeight:"normal",backgroundColor:"transparent",color:"text.primary",_placeholder:{color:"text.tertiary"},_groupHover:{borderColor:"neutral.primary"}},description:{fontSize:"sm",color:"text.primary"},typeIcon:{transition:"opacity linear 120ms"},actionIcon:{transition:"opacity linear 120ms",cursor:"pointer"},actionButton:{transition:"opacity linear 120ms"}},variants:{size:{sm:{input:{fontSize:"sm",textAlign:"left"},inputContainer:{height:10,p:3}},md:{input:{fontSize:"md",textAlign:"left"},inputContainer:{height:12,p:3}},lg:{input:{fontSize:"lg",textAlign:"left"},inputContainer:{height:15,padding:4}}},alignText:{left:{input:{textAlign:"left"}},center:{input:{textAlign:"center"}},right:{input:{textAlign:"right"}}},isError:{true:{inputContainer:{borderColor:"negative.base"}}},char:{true:{input:{fontSize:"xl",textAlign:"center"},inputContainer:{height:12,py:2}}},disabled:{true:{container:{opacity:.3,pointerEvents:"none"},inputContainer:{_hover:{borderColor:"neutral.secondary"}}}}}});exports.textInput=n;
+"use strict";var t=require("@styled/css");const n=t.sva({slots:["container","label","inputContainer","input","description","typeIcon","actionIcon","actionButton"],base:{label:{fontSize:"sm",fontWeight:"medium",color:"text.primary"},inputContainer:{backgroundColor:"transparent",borderStyle:"solid",borderWidth:"thin",borderColor:"neutral.secondary",borderRadius:"input",boxSizing:"border-box",transition:"all linear 120ms",width:"100%",_hover:{borderColor:"neutral.primary"},_focusWithin:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}},input:{transition:"all linear 120ms",width:"100%",boxSizing:"border-box",m:0,p:0,outline:"none",minWidth:10,fontWeight:"normal",backgroundColor:"transparent",color:"text.primary",_placeholder:{color:"text.tertiary"},_groupHover:{borderColor:"neutral.primary"}},description:{fontSize:"sm",color:"text.primary"},typeIcon:{transition:"opacity linear 120ms"},actionIcon:{transition:"opacity linear 120ms",cursor:"pointer"},actionButton:{transition:"opacity linear 120ms"}},variants:{size:{sm:{input:{fontSize:"sm",textAlign:"left"},inputContainer:{height:10,p:3}},md:{input:{fontSize:"md",textAlign:"left"},inputContainer:{height:12,p:3}},lg:{input:{fontSize:"lg",textAlign:"left"},inputContainer:{height:15,padding:4}}},alignText:{left:{input:{textAlign:"left"}},center:{input:{textAlign:"center"}},right:{input:{textAlign:"right"}}},isError:{true:{inputContainer:{borderColor:"negative.base"}}},char:{true:{input:{fontSize:"xl",textAlign:"center"},inputContainer:{height:12,py:2}}},disabled:{true:{container:{opacity:.3,pointerEvents:"none"},inputContainer:{_hover:{borderColor:"neutral.secondary"}}}}}});exports.textInput=n;
 //# sourceMappingURL=text-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sources":["../../../src/recipes/text-input.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const textInput = sva({\n  slots: ['container', 'label', 'inputContainer', 'input', 'description', 'typeIcon', 'actionIcon', 'actionButton'],\n  base: {\n    container: { display: 'flex', flexDirection: 'column', gap: 2 },\n    label: {\n      fontSize: 'sm',\n      fontWeight: 'medium',\n      color: 'text.primary',\n    },\n    inputContainer: {\n      backgroundColor: 'transparent',\n      borderStyle: 'solid',\n      borderWidth: 'thin',\n      borderColor: 'neutral.secondary',\n      borderRadius: 'input',\n      boxSizing: 'border-box',\n      transition: 'all linear 120ms',\n      width: '100%',\n\n      _hover: {\n        borderColor: 'neutral.primary',\n      },\n\n      _focusWithin: {\n        outlineColor: 'brand.base',\n        outlineStyle: 'solid',\n        outlineWidth: 'thick',\n        outlineOffset: 0.5,\n      },\n    },\n    input: {\n      transition: 'all linear 120ms',\n      width: '100%',\n      boxSizing: 'border-box',\n      m: 0,\n      p: 0,\n      outline: 'none',\n      minWidth: 10,\n      fontWeight: 'normal',\n      backgroundColor: 'transparent',\n      color: 'text.primary',\n      _placeholder: {\n        color: 'text.tertiary',\n      },\n\n      _groupHover: {\n        borderColor: 'neutral.primary',\n      },\n    },\n    description: {\n      fontSize: 'sm',\n      color: 'text.primary',\n    },\n    typeIcon: {\n      transition: 'opacity linear 120ms',\n    },\n    actionIcon: {\n      transition: 'opacity linear 120ms',\n      cursor: 'pointer',\n    },\n    actionButton: {\n      transition: 'opacity linear 120ms',\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        input: {\n          fontSize: 'sm',\n          textAlign: 'left',\n        },\n        inputContainer: {\n          height: 10,\n          p: 3,\n        },\n      },\n      md: {\n        input: {\n          fontSize: 'md',\n          textAlign: 'left',\n        },\n        inputContainer: {\n          height: 12,\n          p: 3,\n        },\n      },\n      lg: {\n        input: {\n          fontSize: 'lg',\n          textAlign: 'left',\n        },\n        inputContainer: {\n          height: 15,\n          padding: 4,\n        },\n      },\n    },\n    alignText: {\n      left: {\n        input: {\n          textAlign: 'left',\n        },\n      },\n      center: {\n        input: {\n          textAlign: 'center',\n        },\n      },\n      right: {\n        input: {\n          textAlign: 'right',\n        },\n      },\n    },\n    isError: {\n      true: {\n        inputContainer: {\n          borderColor: 'negative.base',\n        },\n      },\n    },\n    char: {\n      true: {\n        input: {\n          fontSize: 'xl',\n          textAlign: 'center',\n        },\n        inputContainer: {\n          height: 12,\n          py: 2,\n        },\n      },\n    },\n    disabled: {\n      true: {\n        container: {\n          opacity: 0.3,\n          pointerEvents: 'none',\n        },\n        inputContainer: {\n          _hover: {\n            borderColor: 'neutral.secondary',\n          },\n        },\n      },\n    },\n  },\n});\n"],"names":["textInput","sva"],"mappings":"0CAEO,MAAMA,EAAYC,EAAAA,IAAI,CAC3B,MAAO,CAAC,YAAa,QAAS,iBAAkB,QAAS,cAAe,WAAY,aAAc,cAAc,EAChH,KAAM,CACJ,UAAW,CAAE,QAAS,OAAQ,cAAe,SAAU,IAAK,CAAG,EAC/D,MAAO,CACL,SAAU,KACV,WAAY,SACZ,MAAO,cACR,EACD,eAAgB,CACd,gBAAiB,cACjB,YAAa,QACb,YAAa,OACb,YAAa,oBACb,aAAc,QACd,UAAW,aACX,WAAY,mBACZ,MAAO,OAEP,OAAQ,CACN,YAAa,iBACd,EAED,aAAc,CACZ,aAAc,aACd,aAAc,QACd,aAAc,QACd,cAAe,EAChB,CACF,EACD,MAAO,CACL,WAAY,mBACZ,MAAO,OACP,UAAW,aACX,EAAG,EACH,EAAG,EACH,QAAS,OACT,SAAU,GACV,WAAY,SACZ,gBAAiB,cACjB,MAAO,eACP,aAAc,CACZ,MAAO,eACR,EAED,YAAa,CACX,YAAa,iBACd,CACF,EACD,YAAa,CACX,SAAU,KACV,MAAO,cACR,EACD,SAAU,CACR,WAAY,sBACb,EACD,WAAY,CACV,WAAY,uBACZ,OAAQ,SACT,EACD,aAAc,CACZ,WAAY,sBACb,CACF,EACD,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,CACL,SAAU,KACV,UAAW,MACZ,EACD,eAAgB,CACd,OAAQ,GACR,EAAG,CACJ,CACF,EACD,GAAI,CACF,MAAO,CACL,SAAU,KACV,UAAW,MACZ,EACD,eAAgB,CACd,OAAQ,GACR,EAAG,CACJ,CACF,EACD,GAAI,CACF,MAAO,CACL,SAAU,KACV,UAAW,MACZ,EACD,eAAgB,CACd,OAAQ,GACR,QAAS,CACV,CACF,CACF,EACD,UAAW,CACT,KAAM,CACJ,MAAO,CACL,UAAW,MACZ,CACF,EACD,OAAQ,CACN,MAAO,CACL,UAAW,QACZ,CACF,EACD,MAAO,CACL,MAAO,CACL,UAAW,OACZ,CACF,CACF,EACD,QAAS,CACP,KAAM,CACJ,eAAgB,CACd,YAAa,eACd,CACF,CACF,EACD,KAAM,CACJ,KAAM,CACJ,MAAO,CACL,SAAU,KACV,UAAW,QACZ,EACD,eAAgB,CACd,OAAQ,GACR,GAAI,CACL,CACF,CACF,EACD,SAAU,CACR,KAAM,CACJ,UAAW,CACT,QAAS,GACT,cAAe,MAChB,EACD,eAAgB,CACd,OAAQ,CACN,YAAa,mBACd,CACF,CACF,CACF,CACF,CACF,CAAA"}
+{"version":3,"file":"text-input.js","sources":["../../../src/recipes/text-input.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const textInput = sva({\n  slots: ['container', 'label', 'inputContainer', 'input', 'description', 'typeIcon', 'actionIcon', 'actionButton'],\n  base: {\n    label: {\n      fontSize: 'sm',\n      fontWeight: 'medium',\n      color: 'text.primary',\n    },\n    inputContainer: {\n      backgroundColor: 'transparent',\n      borderStyle: 'solid',\n      borderWidth: 'thin',\n      borderColor: 'neutral.secondary',\n      borderRadius: 'input',\n      boxSizing: 'border-box',\n      transition: 'all linear 120ms',\n      width: '100%',\n\n      _hover: {\n        borderColor: 'neutral.primary',\n      },\n\n      _focusWithin: {\n        outlineColor: 'brand.base',\n        outlineStyle: 'solid',\n        outlineWidth: 'thick',\n        outlineOffset: 0.5,\n      },\n    },\n    input: {\n      transition: 'all linear 120ms',\n      width: '100%',\n      boxSizing: 'border-box',\n      m: 0,\n      p: 0,\n      outline: 'none',\n      minWidth: 10,\n      fontWeight: 'normal',\n      backgroundColor: 'transparent',\n      color: 'text.primary',\n      _placeholder: {\n        color: 'text.tertiary',\n      },\n\n      _groupHover: {\n        borderColor: 'neutral.primary',\n      },\n    },\n    description: {\n      fontSize: 'sm',\n      color: 'text.primary',\n    },\n    typeIcon: {\n      transition: 'opacity linear 120ms',\n    },\n    actionIcon: {\n      transition: 'opacity linear 120ms',\n      cursor: 'pointer',\n    },\n    actionButton: {\n      transition: 'opacity linear 120ms',\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        input: {\n          fontSize: 'sm',\n          textAlign: 'left',\n        },\n        inputContainer: {\n          height: 10,\n          p: 3,\n        },\n      },\n      md: {\n        input: {\n          fontSize: 'md',\n          textAlign: 'left',\n        },\n        inputContainer: {\n          height: 12,\n          p: 3,\n        },\n      },\n      lg: {\n        input: {\n          fontSize: 'lg',\n          textAlign: 'left',\n        },\n        inputContainer: {\n          height: 15,\n          padding: 4,\n        },\n      },\n    },\n    alignText: {\n      left: {\n        input: {\n          textAlign: 'left',\n        },\n      },\n      center: {\n        input: {\n          textAlign: 'center',\n        },\n      },\n      right: {\n        input: {\n          textAlign: 'right',\n        },\n      },\n    },\n    isError: {\n      true: {\n        inputContainer: {\n          borderColor: 'negative.base',\n        },\n      },\n    },\n    char: {\n      true: {\n        input: {\n          fontSize: 'xl',\n          textAlign: 'center',\n        },\n        inputContainer: {\n          height: 12,\n          py: 2,\n        },\n      },\n    },\n    disabled: {\n      true: {\n        container: {\n          opacity: 0.3,\n          pointerEvents: 'none',\n        },\n        inputContainer: {\n          _hover: {\n            borderColor: 'neutral.secondary',\n          },\n        },\n      },\n    },\n  },\n});\n"],"names":["textInput","sva"],"mappings":"0CAEO,MAAMA,EAAYC,EAAAA,IAAI,CAC3B,MAAO,CAAC,YAAa,QAAS,iBAAkB,QAAS,cAAe,WAAY,aAAc,cAAc,EAChH,KAAM,CACJ,MAAO,CACL,SAAU,KACV,WAAY,SACZ,MAAO,cACR,EACD,eAAgB,CACd,gBAAiB,cACjB,YAAa,QACb,YAAa,OACb,YAAa,oBACb,aAAc,QACd,UAAW,aACX,WAAY,mBACZ,MAAO,OAEP,OAAQ,CACN,YAAa,iBACd,EAED,aAAc,CACZ,aAAc,aACd,aAAc,QACd,aAAc,QACd,cAAe,EAChB,CACF,EACD,MAAO,CACL,WAAY,mBACZ,MAAO,OACP,UAAW,aACX,EAAG,EACH,EAAG,EACH,QAAS,OACT,SAAU,GACV,WAAY,SACZ,gBAAiB,cACjB,MAAO,eACP,aAAc,CACZ,MAAO,eACR,EAED,YAAa,CACX,YAAa,iBACd,CACF,EACD,YAAa,CACX,SAAU,KACV,MAAO,cACR,EACD,SAAU,CACR,WAAY,sBACb,EACD,WAAY,CACV,WAAY,uBACZ,OAAQ,SACT,EACD,aAAc,CACZ,WAAY,sBACb,CACF,EACD,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,CACL,SAAU,KACV,UAAW,MACZ,EACD,eAAgB,CACd,OAAQ,GACR,EAAG,CACJ,CACF,EACD,GAAI,CACF,MAAO,CACL,SAAU,KACV,UAAW,MACZ,EACD,eAAgB,CACd,OAAQ,GACR,EAAG,CACJ,CACF,EACD,GAAI,CACF,MAAO,CACL,SAAU,KACV,UAAW,MACZ,EACD,eAAgB,CACd,OAAQ,GACR,QAAS,CACV,CACF,CACF,EACD,UAAW,CACT,KAAM,CACJ,MAAO,CACL,UAAW,MACZ,CACF,EACD,OAAQ,CACN,MAAO,CACL,UAAW,QACZ,CACF,EACD,MAAO,CACL,MAAO,CACL,UAAW,OACZ,CACF,CACF,EACD,QAAS,CACP,KAAM,CACJ,eAAgB,CACd,YAAa,eACd,CACF,CACF,EACD,KAAM,CACJ,KAAM,CACJ,MAAO,CACL,SAAU,KACV,UAAW,QACZ,EACD,eAAgB,CACd,OAAQ,GACR,GAAI,CACL,CACF,CACF,EACD,SAAU,CACR,KAAM,CACJ,UAAW,CACT,QAAS,GACT,cAAe,MAChB,EACD,eAAgB,CACd,OAAQ,CACN,YAAa,mBACd,CACF,CACF,CACF,CACF,CACF,CAAA"}

package/dist/cjs/recipes/toast.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("@styled/css");const e=t.sva({slots:["container","portal","toast","icon","dismiss"],base:{portal:{boxSizing:"border-box",position:"fixed",zIndex:"max",top:0,left:0,height:"100vh",width:"100vw",pointerEvents:"none"},container:{height:"full",width:"full",p:"20px"},toast:{py:2,px:4,rounded:10,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)"},dismiss:{cursor:"pointer",pointerEvents:"all"},icon:{color:"chalk",height:"1rem",width:"1rem"}},variants:{variant:{branded:{toast:{backgroundColor:"brand.base"}},success:{toast:{backgroundColor:"positive.darker"}},warning:{toast:{backgroundColor:"warning.darker"}},error:{toast:{backgroundColor:"negative.darker"}},neutral:{toast:{backgroundColor:"text.tertiary"}}},position:{top:{container:{alignItems:"center",justifyContent:"flex-start"}},"top-left":{container:{alignItems:"flex-start",justifyContent:"flex-start"}},"top-right":{container:{alignItems:"flex-end",justifyContent:"flex-start"}},bottom:{container:{alignItems:"center",justifyContent:"flex-end"}},"bottom-left":{container:{alignItems:"flex-start",justifyContent:"flex-end"}},"bottom-right":{container:{alignItems:"flex-end",justifyContent:"flex-end"}}}},defaultVariants:{position:"top-right",variant:"branded"}});exports.toast=e;
+"use strict";var t=require("@styled/css");const o=t.sva({slots:["container","portal","toast","icon","dismiss"],base:{portal:{boxSizing:"border-box",position:"fixed",zIndex:"max",top:0,left:0,height:"100vh",width:"100vw",pointerEvents:"none"},container:{height:"full",width:"full",p:"20px"},toast:{py:2,px:4,rounded:10,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)"},dismiss:{cursor:"pointer",pointerEvents:"all"},icon:{color:"surface.primary",height:"1rem",width:"1rem"}},variants:{variant:{branded:{toast:{backgroundColor:"brand.base"}},success:{toast:{backgroundColor:"positive.darker"}},warning:{toast:{backgroundColor:"warning.darker"}},error:{toast:{backgroundColor:"negative.darker"}},neutral:{toast:{backgroundColor:"text.tertiary",_dark:{backgroundColor:"text.secondary"}}}},position:{top:{container:{alignItems:"center",justifyContent:"flex-start"}},"top-left":{container:{alignItems:"flex-start",justifyContent:"flex-start"}},"top-right":{container:{alignItems:"flex-end",justifyContent:"flex-start"}},bottom:{container:{alignItems:"center",justifyContent:"flex-end"}},"bottom-left":{container:{alignItems:"flex-start",justifyContent:"flex-end"}},"bottom-right":{container:{alignItems:"flex-end",justifyContent:"flex-end"}}}},defaultVariants:{position:"top-right",variant:"branded"}});exports.toast=o;
 //# sourceMappingURL=toast.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../../src/recipes/toast.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const toast = sva({\n  slots: ['container', 'portal', 'toast', 'icon', 'dismiss'],\n  base: {\n    portal: {\n      boxSizing: 'border-box',\n      position: 'fixed',\n      zIndex: 'max',\n      top: 0,\n      left: 0,\n      height: '100vh',\n      width: '100vw',\n      pointerEvents: 'none',\n    },\n    container: {\n      height: 'full',\n      width: 'full',\n      p: '20px',\n    },\n    toast: {\n      py: 2,\n      px: 4,\n      rounded: 10,\n      boxShadow: '4px 8px 20px 0px rgba(0, 0, 0, 0.15)',\n    },\n    dismiss: {\n      cursor: 'pointer',\n      pointerEvents: 'all',\n    },\n    icon: {\n      color: 'chalk',\n      height: '1rem',\n      width: '1rem',\n    },\n  },\n  variants: {\n    variant: {\n      branded: {\n        toast: {\n          backgroundColor: 'brand.base',\n        },\n      },\n      success: {\n        toast: {\n          backgroundColor: 'positive.darker',\n        },\n      },\n      warning: {\n        toast: {\n          backgroundColor: 'warning.darker',\n        },\n      },\n      error: {\n        toast: {\n          backgroundColor: 'negative.darker',\n        },\n      },\n      neutral: {\n        toast: {\n          backgroundColor: 'text.tertiary',\n        },\n      },\n    },\n    position: {\n      top: {\n        container: {\n          alignItems: 'center',\n          justifyContent: 'flex-start',\n        },\n      },\n      'top-left': {\n        container: {\n          alignItems: 'flex-start',\n          justifyContent: 'flex-start',\n        },\n      },\n      'top-right': {\n        container: {\n          alignItems: 'flex-end',\n          justifyContent: 'flex-start',\n        },\n      },\n      bottom: {\n        container: {\n          alignItems: 'center',\n          justifyContent: 'flex-end',\n        },\n      },\n      'bottom-left': {\n        container: {\n          alignItems: 'flex-start',\n          justifyContent: 'flex-end',\n        },\n      },\n      'bottom-right': {\n        container: {\n          alignItems: 'flex-end',\n          justifyContent: 'flex-end',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'top-right',\n    variant: 'branded',\n  },\n});\n\nexport type ToastVariants = RecipeVariantProps<typeof toast>;\n"],"names":["toast","sva"],"mappings":"0CAEO,MAAMA,EAAQC,EAAI,IAAA,CACvB,MAAO,CAAC,YAAa,SAAU,QAAS,OAAQ,SAAS,EACzD,KAAM,CACJ,OAAQ,CACN,UAAW,aACX,SAAU,QACV,OAAQ,MACR,IAAK,EACL,KAAM,EACN,OAAQ,QACR,MAAO,QACP,cAAe,MAChB,EACD,UAAW,CACT,OAAQ,OACR,MAAO,OACP,EAAG,MACJ,EACD,MAAO,CACL,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,UAAW,sCACZ,EACD,QAAS,CACP,OAAQ,UACR,cAAe,KAChB,EACD,KAAM,CACJ,MAAO,QACP,OAAQ,OACR,MAAO,MACR,CACF,EACD,SAAU,CACR,QAAS,CACP,QAAS,CACP,MAAO,CACL,gBAAiB,YAClB,CACF,EACD,QAAS,CACP,MAAO,CACL,gBAAiB,iBAClB,CACF,EACD,QAAS,CACP,MAAO,CACL,gBAAiB,gBAClB,CACF,EACD,MAAO,CACL,MAAO,CACL,gBAAiB,iBAClB,CACF,EACD,QAAS,CACP,MAAO,CACL,gBAAiB,eAClB,CACF,CACF,EACD,SAAU,CACR,IAAK,CACH,UAAW,CACT,WAAY,SACZ,eAAgB,YACjB,CACF,EACD,WAAY,CACV,UAAW,CACT,WAAY,aACZ,eAAgB,YACjB,CACF,EACD,YAAa,CACX,UAAW,CACT,WAAY,WACZ,eAAgB,YACjB,CACF,EACD,OAAQ,CACN,UAAW,CACT,WAAY,SACZ,eAAgB,UACjB,CACF,EACD,cAAe,CACb,UAAW,CACT,WAAY,aACZ,eAAgB,UACjB,CACF,EACD,eAAgB,CACd,UAAW,CACT,WAAY,WACZ,eAAgB,UACjB,CACF,CACF,CACF,EACD,gBAAiB,CACf,SAAU,YACV,QAAS,SACV,CACF,CAAA"}
+{"version":3,"file":"toast.js","sources":["../../../src/recipes/toast.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const toast = sva({\n  slots: ['container', 'portal', 'toast', 'icon', 'dismiss'],\n  base: {\n    portal: {\n      boxSizing: 'border-box',\n      position: 'fixed',\n      zIndex: 'max',\n      top: 0,\n      left: 0,\n      height: '100vh',\n      width: '100vw',\n      pointerEvents: 'none',\n    },\n    container: {\n      height: 'full',\n      width: 'full',\n      p: '20px',\n    },\n    toast: {\n      py: 2,\n      px: 4,\n      rounded: 10,\n      boxShadow: '4px 8px 20px 0px rgba(0, 0, 0, 0.15)',\n    },\n    dismiss: {\n      cursor: 'pointer',\n      pointerEvents: 'all',\n    },\n    icon: {\n      color: 'surface.primary',\n      height: '1rem',\n      width: '1rem',\n    },\n  },\n  variants: {\n    variant: {\n      branded: {\n        toast: {\n          backgroundColor: 'brand.base',\n        },\n      },\n      success: {\n        toast: {\n          backgroundColor: 'positive.darker',\n        },\n      },\n      warning: {\n        toast: {\n          backgroundColor: 'warning.darker',\n        },\n      },\n      error: {\n        toast: {\n          backgroundColor: 'negative.darker',\n        },\n      },\n      neutral: {\n        toast: {\n          backgroundColor: 'text.tertiary',\n          _dark: {\n            backgroundColor: 'text.secondary',\n          },\n        },\n      },\n    },\n    position: {\n      top: {\n        container: {\n          alignItems: 'center',\n          justifyContent: 'flex-start',\n        },\n      },\n      'top-left': {\n        container: {\n          alignItems: 'flex-start',\n          justifyContent: 'flex-start',\n        },\n      },\n      'top-right': {\n        container: {\n          alignItems: 'flex-end',\n          justifyContent: 'flex-start',\n        },\n      },\n      bottom: {\n        container: {\n          alignItems: 'center',\n          justifyContent: 'flex-end',\n        },\n      },\n      'bottom-left': {\n        container: {\n          alignItems: 'flex-start',\n          justifyContent: 'flex-end',\n        },\n      },\n      'bottom-right': {\n        container: {\n          alignItems: 'flex-end',\n          justifyContent: 'flex-end',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'top-right',\n    variant: 'branded',\n  },\n});\n\nexport type ToastVariants = RecipeVariantProps<typeof toast>;\n"],"names":["toast","sva"],"mappings":"0CAEO,MAAMA,EAAQC,EAAI,IAAA,CACvB,MAAO,CAAC,YAAa,SAAU,QAAS,OAAQ,SAAS,EACzD,KAAM,CACJ,OAAQ,CACN,UAAW,aACX,SAAU,QACV,OAAQ,MACR,IAAK,EACL,KAAM,EACN,OAAQ,QACR,MAAO,QACP,cAAe,MAChB,EACD,UAAW,CACT,OAAQ,OACR,MAAO,OACP,EAAG,MACJ,EACD,MAAO,CACL,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,UAAW,sCACZ,EACD,QAAS,CACP,OAAQ,UACR,cAAe,KAChB,EACD,KAAM,CACJ,MAAO,kBACP,OAAQ,OACR,MAAO,MACR,CACF,EACD,SAAU,CACR,QAAS,CACP,QAAS,CACP,MAAO,CACL,gBAAiB,YAClB,CACF,EACD,QAAS,CACP,MAAO,CACL,gBAAiB,iBAClB,CACF,EACD,QAAS,CACP,MAAO,CACL,gBAAiB,gBAClB,CACF,EACD,MAAO,CACL,MAAO,CACL,gBAAiB,iBAClB,CACF,EACD,QAAS,CACP,MAAO,CACL,gBAAiB,gBACjB,MAAO,CACL,gBAAiB,gBAClB,CACF,CACF,CACF,EACD,SAAU,CACR,IAAK,CACH,UAAW,CACT,WAAY,SACZ,eAAgB,YACjB,CACF,EACD,WAAY,CACV,UAAW,CACT,WAAY,aACZ,eAAgB,YACjB,CACF,EACD,YAAa,CACX,UAAW,CACT,WAAY,WACZ,eAAgB,YACjB,CACF,EACD,OAAQ,CACN,UAAW,CACT,WAAY,SACZ,eAAgB,UACjB,CACF,EACD,cAAe,CACb,UAAW,CACT,WAAY,aACZ,eAAgB,UACjB,CACF,EACD,eAAgB,CACd,UAAW,CACT,WAAY,WACZ,eAAgB,UACjB,CACF,CACF,CACF,EACD,gBAAiB,CACf,SAAU,YACV,QAAS,SACV,CACF,CAAA"}

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

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

package/dist/es/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 { token } from '@styled/tokens';\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  position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';\n}\n\nexport const Toast = (props: ToastProps | InternalToast) => {\n  const { lifespan = 0, message, variant = 'branded' } = props;\n  const toastClasses = classes({ variant });\n  const dismissId = props.dismissible && (props as InternalToast).id;\n  const removeToast = (props as InternalToast).removeToast;\n  const [show, setShow] = useState(true);\n\n  if (lifespan && dismissId) {\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 styles={{ color: token('colors.chalk') }}>{message}</Text>\n        {dismissId && (\n          <button\n            className={toastClasses.dismiss}\n            onClick={() => setShow(false)}\n            aria-label={`dismiss toast ${dismissId}`}\n          >\n            <IcoDismiss className={toastClasses.icon} />\n          </button>\n        )}\n      </HStack>\n    </Animate>\n  );\n};\n\nexport const ToastProvider = ({ position, children }: 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 { lifespan = 0, variant = 'branded', ...props } = options;\n    const id = ++toastID;\n\n    toastsRef.current.push({ lifespan, variant, 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","lifespan","message","variant","toastClasses","classes","dismissId","removeToast","show","setShow","useState","_jsx","Animate","_jsxs","HStack","StatusIcon","Text","token","IcoDismiss","ToastProvider","position","children","toastsRef","useRef","forceUpdate","useReducer","x","useCallback","id","toast","createToast","options","toastCtx","useMemo","activeToasts","providerClasses","ToastContext","Portal","VStack"],"mappings":"4tBAWA,IAAIA,EAAU,QAWDC,EAASC,GAAqC,CACzD,KAAM,CAAE,SAAAC,EAAW,EAAG,QAAAC,EAAS,QAAAC,EAAU,SAAW,EAAGH,EACjDI,EAAeC,EAAQ,CAAE,QAAAF,CAAO,CAAE,EAClCG,EAAYN,EAAM,aAAgBA,EAAwB,GAC1DO,EAAeP,EAAwB,YACvC,CAACQ,EAAMC,CAAO,EAAIC,EAAS,EAAI,EAErC,OAAIT,GAAYK,GACd,WAAW,IAAK,CACdG,EAAQ,EAAK,CACf,EAAGR,CAAQ,EAIXU,EAACC,EAAO,CAAA,YACK,CAAC,OAAO,EAAE,SAAST,GAAW,EAAE,EAAI,YAAc,SAC7D,KAAMK,EACN,KAAK,QACL,SAAU,IAAK,CACTF,GACFC,EAAYD,CAAS,CAEzB,WAEAO,EAACC,EAAO,CAAA,UAAWV,EAAa,MAAK,SAAA,CAClCJ,EAAM,MAAQW,EAACI,GAAW,UAAWX,EAAa,KAAM,QAASD,CAAO,CAAA,EACzEQ,EAACK,EAAK,CAAA,OAAQ,CAAE,MAAOC,EAAM,cAAc,CAAC,EAAK,SAAAf,IAChDI,GACCK,EAAA,SAAA,CACE,UAAWP,EAAa,QACxB,QAAS,IAAMK,EAAQ,EAAK,EAAC,aACjB,iBAAiBH,CAAS,YAEtCK,EAACO,GAAW,UAAWd,EAAa,IAAQ,CAAA,CAAA,CAAA,CAE/C,CACM,CAAA,CAAA,CAAA,CAGf,EAEae,EAAgB,CAAC,CAAE,SAAAC,EAAU,SAAAC,CAA8B,IAAI,CAC1E,MAAMC,EAAYC,EAA0B,CAAA,CAAE,EACxCC,EAAcC,EAAYC,GAAcA,EAAI,EAAG,CAAC,EAAE,CAAC,EAEnDnB,EAA2CoB,EAAaC,GAAc,CAC1EN,EAAU,QAAUA,EAAU,QAAQ,OAAOO,GAASA,EAAM,KAAOD,CAAE,EACrEJ,EACF,CAAA,EAAG,CAAA,CAAE,EAECM,EAA2CH,EAAYI,GAAU,CACrE,KAAM,CAAE,SAAA9B,EAAW,EAAG,QAAAE,EAAU,UAAW,GAAGH,CAAO,EAAG+B,EAClDH,EAAK,EAAE9B,EAEb,OAAAwB,EAAU,QAAQ,KAAK,CAAE,SAAArB,EAAU,QAAAE,EAAS,GAAAyB,EAAI,GAAG5B,CAAK,CAAE,EAC1DwB,EAEOI,EAAAA,CACT,EAAG,CAAA,CAAE,EAECI,EAAWC,EAAQ,KAAO,CAAE,YAAAH,EAAa,YAAAvB,CAAW,GAAK,CAACuB,EAAavB,CAAW,CAAC,EAEnF2B,GADSd,GAAU,WAAW,KAAK,EAAI,CAAC,GAAGE,EAAU,OAAO,EAAI,CAAC,GAAGA,EAAU,OAAO,EAAE,WACjE,IAAIO,GACvBlB,EAACZ,EAAyB,CAAA,GAAA8B,EAAO,YAAatB,CAAlC,EAAAsB,EAAM,EAAE,CAC5B,EAEKM,EAAkB9B,EAAQ,CAAE,SAAAe,CAAQ,CAAE,EAE5C,OACEP,EAACuB,EAAa,UAAS,MAAOJ,EAAQ,SAAA,CACnCX,EACDV,EAAC0B,EAAM,CAAA,SACL1B,SAAK,UAAWwB,EAAgB,OAC9B,SAAAxB,EAAC2B,EAAM,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 { token } from '@styled/tokens';\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  position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';\n}\n\nexport const Toast = (props: ToastProps | InternalToast) => {\n  const { lifespan = 0, message, variant = 'branded' } = props;\n  const toastClasses = classes({ variant });\n  const dismissId = props.dismissible && (props as InternalToast).id;\n  const removeToast = (props as InternalToast).removeToast;\n  const [show, setShow] = useState(true);\n\n  if (lifespan && dismissId) {\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 styles={{ color: token('colors.surface.primary') }}>{message}</Text>\n        {dismissId && (\n          <button\n            className={toastClasses.dismiss}\n            onClick={() => setShow(false)}\n            aria-label={`dismiss toast ${dismissId}`}\n          >\n            <IcoDismiss className={toastClasses.icon} />\n          </button>\n        )}\n      </HStack>\n    </Animate>\n  );\n};\n\nexport const ToastProvider = ({ position, children }: 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 { lifespan = 0, variant = 'branded', ...props } = options;\n    const id = ++toastID;\n\n    toastsRef.current.push({ lifespan, variant, 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","lifespan","message","variant","toastClasses","classes","dismissId","removeToast","show","setShow","useState","_jsx","Animate","_jsxs","HStack","StatusIcon","Text","token","IcoDismiss","ToastProvider","position","children","toastsRef","useRef","forceUpdate","useReducer","x","useCallback","id","toast","createToast","options","toastCtx","useMemo","activeToasts","providerClasses","ToastContext","Portal","VStack"],"mappings":"4tBAWA,IAAIA,EAAU,QAWDC,EAASC,GAAqC,CACzD,KAAM,CAAE,SAAAC,EAAW,EAAG,QAAAC,EAAS,QAAAC,EAAU,SAAW,EAAGH,EACjDI,EAAeC,EAAQ,CAAE,QAAAF,CAAO,CAAE,EAClCG,EAAYN,EAAM,aAAgBA,EAAwB,GAC1DO,EAAeP,EAAwB,YACvC,CAACQ,EAAMC,CAAO,EAAIC,EAAS,EAAI,EAErC,OAAIT,GAAYK,GACd,WAAW,IAAK,CACdG,EAAQ,EAAK,CACf,EAAGR,CAAQ,EAIXU,EAACC,EAAO,CAAA,YACK,CAAC,OAAO,EAAE,SAAST,GAAW,EAAE,EAAI,YAAc,SAC7D,KAAMK,EACN,KAAK,QACL,SAAU,IAAK,CACTF,GACFC,EAAYD,CAAS,CAEzB,WAEAO,EAACC,EAAO,CAAA,UAAWV,EAAa,MAAK,SAAA,CAClCJ,EAAM,MAAQW,EAACI,GAAW,UAAWX,EAAa,KAAM,QAASD,CAAO,CAAA,EACzEQ,EAACK,EAAK,CAAA,OAAQ,CAAE,MAAOC,EAAM,wBAAwB,CAAC,EAAK,SAAAf,IAC1DI,GACCK,EAAA,SAAA,CACE,UAAWP,EAAa,QACxB,QAAS,IAAMK,EAAQ,EAAK,EAAC,aACjB,iBAAiBH,CAAS,YAEtCK,EAACO,GAAW,UAAWd,EAAa,IAAQ,CAAA,CAAA,CAAA,CAE/C,CACM,CAAA,CAAA,CAAA,CAGf,EAEae,EAAgB,CAAC,CAAE,SAAAC,EAAU,SAAAC,CAA8B,IAAI,CAC1E,MAAMC,EAAYC,EAA0B,CAAA,CAAE,EACxCC,EAAcC,EAAYC,GAAcA,EAAI,EAAG,CAAC,EAAE,CAAC,EAEnDnB,EAA2CoB,EAAaC,GAAc,CAC1EN,EAAU,QAAUA,EAAU,QAAQ,OAAOO,GAASA,EAAM,KAAOD,CAAE,EACrEJ,EACF,CAAA,EAAG,CAAA,CAAE,EAECM,EAA2CH,EAAYI,GAAU,CACrE,KAAM,CAAE,SAAA9B,EAAW,EAAG,QAAAE,EAAU,UAAW,GAAGH,CAAO,EAAG+B,EAClDH,EAAK,EAAE9B,EAEb,OAAAwB,EAAU,QAAQ,KAAK,CAAE,SAAArB,EAAU,QAAAE,EAAS,GAAAyB,EAAI,GAAG5B,CAAK,CAAE,EAC1DwB,EAEOI,EAAAA,CACT,EAAG,CAAA,CAAE,EAECI,EAAWC,EAAQ,KAAO,CAAE,YAAAH,EAAa,YAAAvB,CAAW,GAAK,CAACuB,EAAavB,CAAW,CAAC,EAEnF2B,GADSd,GAAU,WAAW,KAAK,EAAI,CAAC,GAAGE,EAAU,OAAO,EAAI,CAAC,GAAGA,EAAU,OAAO,EAAE,WACjE,IAAIO,GACvBlB,EAACZ,EAAyB,CAAA,GAAA8B,EAAO,YAAatB,CAAlC,EAAAsB,EAAM,EAAE,CAC5B,EAEKM,EAAkB9B,EAAQ,CAAE,SAAAe,CAAQ,CAAE,EAE5C,OACEP,EAACuB,EAAa,UAAS,MAAOJ,EAAQ,SAAA,CACnCX,EACDV,EAAC0B,EAAM,CAAA,SACL1B,SAAK,UAAWwB,EAAgB,OAC9B,SAAAxB,EAAC2B,EAAM,CAAC,UAAWH,EAAgB,mBAAYD,CAAY,CAAA,GAEtD,CAAA,CAAA,CAAA,CAAA,CAGf"}

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

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

package/dist/es/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 { cx } from '@styled/css';\nimport { Flex, HStack } 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};\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  } = 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      <div className={cx(classes.container, className)}>\n        <label className={classes.label} {...labelProps}>\n          {label}\n        </label>\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} styles={{ color: token('colors.text.tertiary') }} />}\n          <input ref={ref} className={classes.input} {...mergeProps(inputProps, focusProps, hoverProps)} {...attr} />\n          {suffixProps && <Text {...suffixProps} styles={{ color: token('colors.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'} styles={{ fontWeight: '400' }}>\n            {validationErrors.length > 0 ? validationErrors.join(' ') : errorMessage}\n          </Text>\n        )}\n      </div>\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, className)}>\n      <div className={classes.inputContainer}>\n        <input\n          ref={ref}\n          className={classes.input}\n          {...mergeProps(inputProps, focusProps, hoverProps)}\n          size={1}\n          {...attr}\n        />\n      </div>\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","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","cx","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 { 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};\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  } = 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}\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} styles={{ color: token('colors.text.tertiary') }} />}\n          <input ref={ref} className={classes.input} {...mergeProps(inputProps, focusProps, hoverProps)} {...attr} />\n          {suffixProps && <Text {...suffixProps} styles={{ color: token('colors.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'} styles={{ fontWeight: '400' }}>\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","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","HStack","mergeProps","Char","TextInput"],"mappings":"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"}

package/dist/es/recipes/text-input.js

@@ -1,2 +1,2 @@
-import{sva as t}from"@styled/css";const n=t({slots:["container","label","inputContainer","input","description","typeIcon","actionIcon","actionButton"],base:{container:{display:"flex",flexDirection:"column",gap:2},label:{fontSize:"sm",fontWeight:"medium",color:"text.primary"},inputContainer:{backgroundColor:"transparent",borderStyle:"solid",borderWidth:"thin",borderColor:"neutral.secondary",borderRadius:"input",boxSizing:"border-box",transition:"all linear 120ms",width:"100%",_hover:{borderColor:"neutral.primary"},_focusWithin:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}},input:{transition:"all linear 120ms",width:"100%",boxSizing:"border-box",m:0,p:0,outline:"none",minWidth:10,fontWeight:"normal",backgroundColor:"transparent",color:"text.primary",_placeholder:{color:"text.tertiary"},_groupHover:{borderColor:"neutral.primary"}},description:{fontSize:"sm",color:"text.primary"},typeIcon:{transition:"opacity linear 120ms"},actionIcon:{transition:"opacity linear 120ms",cursor:"pointer"},actionButton:{transition:"opacity linear 120ms"}},variants:{size:{sm:{input:{fontSize:"sm",textAlign:"left"},inputContainer:{height:10,p:3}},md:{input:{fontSize:"md",textAlign:"left"},inputContainer:{height:12,p:3}},lg:{input:{fontSize:"lg",textAlign:"left"},inputContainer:{height:15,padding:4}}},alignText:{left:{input:{textAlign:"left"}},center:{input:{textAlign:"center"}},right:{input:{textAlign:"right"}}},isError:{true:{inputContainer:{borderColor:"negative.base"}}},char:{true:{input:{fontSize:"xl",textAlign:"center"},inputContainer:{height:12,py:2}}},disabled:{true:{container:{opacity:.3,pointerEvents:"none"},inputContainer:{_hover:{borderColor:"neutral.secondary"}}}}}});export{n as textInput};
+import{sva as t}from"@styled/css";const n=t({slots:["container","label","inputContainer","input","description","typeIcon","actionIcon","actionButton"],base:{label:{fontSize:"sm",fontWeight:"medium",color:"text.primary"},inputContainer:{backgroundColor:"transparent",borderStyle:"solid",borderWidth:"thin",borderColor:"neutral.secondary",borderRadius:"input",boxSizing:"border-box",transition:"all linear 120ms",width:"100%",_hover:{borderColor:"neutral.primary"},_focusWithin:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}},input:{transition:"all linear 120ms",width:"100%",boxSizing:"border-box",m:0,p:0,outline:"none",minWidth:10,fontWeight:"normal",backgroundColor:"transparent",color:"text.primary",_placeholder:{color:"text.tertiary"},_groupHover:{borderColor:"neutral.primary"}},description:{fontSize:"sm",color:"text.primary"},typeIcon:{transition:"opacity linear 120ms"},actionIcon:{transition:"opacity linear 120ms",cursor:"pointer"},actionButton:{transition:"opacity linear 120ms"}},variants:{size:{sm:{input:{fontSize:"sm",textAlign:"left"},inputContainer:{height:10,p:3}},md:{input:{fontSize:"md",textAlign:"left"},inputContainer:{height:12,p:3}},lg:{input:{fontSize:"lg",textAlign:"left"},inputContainer:{height:15,padding:4}}},alignText:{left:{input:{textAlign:"left"}},center:{input:{textAlign:"center"}},right:{input:{textAlign:"right"}}},isError:{true:{inputContainer:{borderColor:"negative.base"}}},char:{true:{input:{fontSize:"xl",textAlign:"center"},inputContainer:{height:12,py:2}}},disabled:{true:{container:{opacity:.3,pointerEvents:"none"},inputContainer:{_hover:{borderColor:"neutral.secondary"}}}}}});export{n as textInput};
 //# sourceMappingURL=text-input.js.map

package/dist/es/recipes/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sources":["../../../src/recipes/text-input.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const textInput = sva({\n  slots: ['container', 'label', 'inputContainer', 'input', 'description', 'typeIcon', 'actionIcon', 'actionButton'],\n  base: {\n    container: { display: 'flex', flexDirection: 'column', gap: 2 },\n    label: {\n      fontSize: 'sm',\n      fontWeight: 'medium',\n      color: 'text.primary',\n    },\n    inputContainer: {\n      backgroundColor: 'transparent',\n      borderStyle: 'solid',\n      borderWidth: 'thin',\n      borderColor: 'neutral.secondary',\n      borderRadius: 'input',\n      boxSizing: 'border-box',\n      transition: 'all linear 120ms',\n      width: '100%',\n\n      _hover: {\n        borderColor: 'neutral.primary',\n      },\n\n      _focusWithin: {\n        outlineColor: 'brand.base',\n        outlineStyle: 'solid',\n        outlineWidth: 'thick',\n        outlineOffset: 0.5,\n      },\n    },\n    input: {\n      transition: 'all linear 120ms',\n      width: '100%',\n      boxSizing: 'border-box',\n      m: 0,\n      p: 0,\n      outline: 'none',\n      minWidth: 10,\n      fontWeight: 'normal',\n      backgroundColor: 'transparent',\n      color: 'text.primary',\n      _placeholder: {\n        color: 'text.tertiary',\n      },\n\n      _groupHover: {\n        borderColor: 'neutral.primary',\n      },\n    },\n    description: {\n      fontSize: 'sm',\n      color: 'text.primary',\n    },\n    typeIcon: {\n      transition: 'opacity linear 120ms',\n    },\n    actionIcon: {\n      transition: 'opacity linear 120ms',\n      cursor: 'pointer',\n    },\n    actionButton: {\n      transition: 'opacity linear 120ms',\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        input: {\n          fontSize: 'sm',\n          textAlign: 'left',\n        },\n        inputContainer: {\n          height: 10,\n          p: 3,\n        },\n      },\n      md: {\n        input: {\n          fontSize: 'md',\n          textAlign: 'left',\n        },\n        inputContainer: {\n          height: 12,\n          p: 3,\n        },\n      },\n      lg: {\n        input: {\n          fontSize: 'lg',\n          textAlign: 'left',\n        },\n        inputContainer: {\n          height: 15,\n          padding: 4,\n        },\n      },\n    },\n    alignText: {\n      left: {\n        input: {\n          textAlign: 'left',\n        },\n      },\n      center: {\n        input: {\n          textAlign: 'center',\n        },\n      },\n      right: {\n        input: {\n          textAlign: 'right',\n        },\n      },\n    },\n    isError: {\n      true: {\n        inputContainer: {\n          borderColor: 'negative.base',\n        },\n      },\n    },\n    char: {\n      true: {\n        input: {\n          fontSize: 'xl',\n          textAlign: 'center',\n        },\n        inputContainer: {\n          height: 12,\n          py: 2,\n        },\n      },\n    },\n    disabled: {\n      true: {\n        container: {\n          opacity: 0.3,\n          pointerEvents: 'none',\n        },\n        inputContainer: {\n          _hover: {\n            borderColor: 'neutral.secondary',\n          },\n        },\n      },\n    },\n  },\n});\n"],"names":["textInput","sva"],"mappings":"kCAEO,MAAMA,EAAYC,EAAI,CAC3B,MAAO,CAAC,YAAa,QAAS,iBAAkB,QAAS,cAAe,WAAY,aAAc,cAAc,EAChH,KAAM,CACJ,UAAW,CAAE,QAAS,OAAQ,cAAe,SAAU,IAAK,CAAG,EAC/D,MAAO,CACL,SAAU,KACV,WAAY,SACZ,MAAO,cACR,EACD,eAAgB,CACd,gBAAiB,cACjB,YAAa,QACb,YAAa,OACb,YAAa,oBACb,aAAc,QACd,UAAW,aACX,WAAY,mBACZ,MAAO,OAEP,OAAQ,CACN,YAAa,iBACd,EAED,aAAc,CACZ,aAAc,aACd,aAAc,QACd,aAAc,QACd,cAAe,EAChB,CACF,EACD,MAAO,CACL,WAAY,mBACZ,MAAO,OACP,UAAW,aACX,EAAG,EACH,EAAG,EACH,QAAS,OACT,SAAU,GACV,WAAY,SACZ,gBAAiB,cACjB,MAAO,eACP,aAAc,CACZ,MAAO,eACR,EAED,YAAa,CACX,YAAa,iBACd,CACF,EACD,YAAa,CACX,SAAU,KACV,MAAO,cACR,EACD,SAAU,CACR,WAAY,sBACb,EACD,WAAY,CACV,WAAY,uBACZ,OAAQ,SACT,EACD,aAAc,CACZ,WAAY,sBACb,CACF,EACD,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,CACL,SAAU,KACV,UAAW,MACZ,EACD,eAAgB,CACd,OAAQ,GACR,EAAG,CACJ,CACF,EACD,GAAI,CACF,MAAO,CACL,SAAU,KACV,UAAW,MACZ,EACD,eAAgB,CACd,OAAQ,GACR,EAAG,CACJ,CACF,EACD,GAAI,CACF,MAAO,CACL,SAAU,KACV,UAAW,MACZ,EACD,eAAgB,CACd,OAAQ,GACR,QAAS,CACV,CACF,CACF,EACD,UAAW,CACT,KAAM,CACJ,MAAO,CACL,UAAW,MACZ,CACF,EACD,OAAQ,CACN,MAAO,CACL,UAAW,QACZ,CACF,EACD,MAAO,CACL,MAAO,CACL,UAAW,OACZ,CACF,CACF,EACD,QAAS,CACP,KAAM,CACJ,eAAgB,CACd,YAAa,eACd,CACF,CACF,EACD,KAAM,CACJ,KAAM,CACJ,MAAO,CACL,SAAU,KACV,UAAW,QACZ,EACD,eAAgB,CACd,OAAQ,GACR,GAAI,CACL,CACF,CACF,EACD,SAAU,CACR,KAAM,CACJ,UAAW,CACT,QAAS,GACT,cAAe,MAChB,EACD,eAAgB,CACd,OAAQ,CACN,YAAa,mBACd,CACF,CACF,CACF,CACF,CACF,CAAA"}
+{"version":3,"file":"text-input.js","sources":["../../../src/recipes/text-input.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const textInput = sva({\n  slots: ['container', 'label', 'inputContainer', 'input', 'description', 'typeIcon', 'actionIcon', 'actionButton'],\n  base: {\n    label: {\n      fontSize: 'sm',\n      fontWeight: 'medium',\n      color: 'text.primary',\n    },\n    inputContainer: {\n      backgroundColor: 'transparent',\n      borderStyle: 'solid',\n      borderWidth: 'thin',\n      borderColor: 'neutral.secondary',\n      borderRadius: 'input',\n      boxSizing: 'border-box',\n      transition: 'all linear 120ms',\n      width: '100%',\n\n      _hover: {\n        borderColor: 'neutral.primary',\n      },\n\n      _focusWithin: {\n        outlineColor: 'brand.base',\n        outlineStyle: 'solid',\n        outlineWidth: 'thick',\n        outlineOffset: 0.5,\n      },\n    },\n    input: {\n      transition: 'all linear 120ms',\n      width: '100%',\n      boxSizing: 'border-box',\n      m: 0,\n      p: 0,\n      outline: 'none',\n      minWidth: 10,\n      fontWeight: 'normal',\n      backgroundColor: 'transparent',\n      color: 'text.primary',\n      _placeholder: {\n        color: 'text.tertiary',\n      },\n\n      _groupHover: {\n        borderColor: 'neutral.primary',\n      },\n    },\n    description: {\n      fontSize: 'sm',\n      color: 'text.primary',\n    },\n    typeIcon: {\n      transition: 'opacity linear 120ms',\n    },\n    actionIcon: {\n      transition: 'opacity linear 120ms',\n      cursor: 'pointer',\n    },\n    actionButton: {\n      transition: 'opacity linear 120ms',\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        input: {\n          fontSize: 'sm',\n          textAlign: 'left',\n        },\n        inputContainer: {\n          height: 10,\n          p: 3,\n        },\n      },\n      md: {\n        input: {\n          fontSize: 'md',\n          textAlign: 'left',\n        },\n        inputContainer: {\n          height: 12,\n          p: 3,\n        },\n      },\n      lg: {\n        input: {\n          fontSize: 'lg',\n          textAlign: 'left',\n        },\n        inputContainer: {\n          height: 15,\n          padding: 4,\n        },\n      },\n    },\n    alignText: {\n      left: {\n        input: {\n          textAlign: 'left',\n        },\n      },\n      center: {\n        input: {\n          textAlign: 'center',\n        },\n      },\n      right: {\n        input: {\n          textAlign: 'right',\n        },\n      },\n    },\n    isError: {\n      true: {\n        inputContainer: {\n          borderColor: 'negative.base',\n        },\n      },\n    },\n    char: {\n      true: {\n        input: {\n          fontSize: 'xl',\n          textAlign: 'center',\n        },\n        inputContainer: {\n          height: 12,\n          py: 2,\n        },\n      },\n    },\n    disabled: {\n      true: {\n        container: {\n          opacity: 0.3,\n          pointerEvents: 'none',\n        },\n        inputContainer: {\n          _hover: {\n            borderColor: 'neutral.secondary',\n          },\n        },\n      },\n    },\n  },\n});\n"],"names":["textInput","sva"],"mappings":"kCAEO,MAAMA,EAAYC,EAAI,CAC3B,MAAO,CAAC,YAAa,QAAS,iBAAkB,QAAS,cAAe,WAAY,aAAc,cAAc,EAChH,KAAM,CACJ,MAAO,CACL,SAAU,KACV,WAAY,SACZ,MAAO,cACR,EACD,eAAgB,CACd,gBAAiB,cACjB,YAAa,QACb,YAAa,OACb,YAAa,oBACb,aAAc,QACd,UAAW,aACX,WAAY,mBACZ,MAAO,OAEP,OAAQ,CACN,YAAa,iBACd,EAED,aAAc,CACZ,aAAc,aACd,aAAc,QACd,aAAc,QACd,cAAe,EAChB,CACF,EACD,MAAO,CACL,WAAY,mBACZ,MAAO,OACP,UAAW,aACX,EAAG,EACH,EAAG,EACH,QAAS,OACT,SAAU,GACV,WAAY,SACZ,gBAAiB,cACjB,MAAO,eACP,aAAc,CACZ,MAAO,eACR,EAED,YAAa,CACX,YAAa,iBACd,CACF,EACD,YAAa,CACX,SAAU,KACV,MAAO,cACR,EACD,SAAU,CACR,WAAY,sBACb,EACD,WAAY,CACV,WAAY,uBACZ,OAAQ,SACT,EACD,aAAc,CACZ,WAAY,sBACb,CACF,EACD,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,CACL,SAAU,KACV,UAAW,MACZ,EACD,eAAgB,CACd,OAAQ,GACR,EAAG,CACJ,CACF,EACD,GAAI,CACF,MAAO,CACL,SAAU,KACV,UAAW,MACZ,EACD,eAAgB,CACd,OAAQ,GACR,EAAG,CACJ,CACF,EACD,GAAI,CACF,MAAO,CACL,SAAU,KACV,UAAW,MACZ,EACD,eAAgB,CACd,OAAQ,GACR,QAAS,CACV,CACF,CACF,EACD,UAAW,CACT,KAAM,CACJ,MAAO,CACL,UAAW,MACZ,CACF,EACD,OAAQ,CACN,MAAO,CACL,UAAW,QACZ,CACF,EACD,MAAO,CACL,MAAO,CACL,UAAW,OACZ,CACF,CACF,EACD,QAAS,CACP,KAAM,CACJ,eAAgB,CACd,YAAa,eACd,CACF,CACF,EACD,KAAM,CACJ,KAAM,CACJ,MAAO,CACL,SAAU,KACV,UAAW,QACZ,EACD,eAAgB,CACd,OAAQ,GACR,GAAI,CACL,CACF,CACF,EACD,SAAU,CACR,KAAM,CACJ,UAAW,CACT,QAAS,GACT,cAAe,MAChB,EACD,eAAgB,CACd,OAAQ,CACN,YAAa,mBACd,CACF,CACF,CACF,CACF,CACF,CAAA"}

package/dist/es/recipes/toast.js

@@ -1,2 +1,2 @@
-import{sva as t}from"@styled/css";const o=t({slots:["container","portal","toast","icon","dismiss"],base:{portal:{boxSizing:"border-box",position:"fixed",zIndex:"max",top:0,left:0,height:"100vh",width:"100vw",pointerEvents:"none"},container:{height:"full",width:"full",p:"20px"},toast:{py:2,px:4,rounded:10,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)"},dismiss:{cursor:"pointer",pointerEvents:"all"},icon:{color:"chalk",height:"1rem",width:"1rem"}},variants:{variant:{branded:{toast:{backgroundColor:"brand.base"}},success:{toast:{backgroundColor:"positive.darker"}},warning:{toast:{backgroundColor:"warning.darker"}},error:{toast:{backgroundColor:"negative.darker"}},neutral:{toast:{backgroundColor:"text.tertiary"}}},position:{top:{container:{alignItems:"center",justifyContent:"flex-start"}},"top-left":{container:{alignItems:"flex-start",justifyContent:"flex-start"}},"top-right":{container:{alignItems:"flex-end",justifyContent:"flex-start"}},bottom:{container:{alignItems:"center",justifyContent:"flex-end"}},"bottom-left":{container:{alignItems:"flex-start",justifyContent:"flex-end"}},"bottom-right":{container:{alignItems:"flex-end",justifyContent:"flex-end"}}}},defaultVariants:{position:"top-right",variant:"branded"}});export{o as toast};
+import{sva as t}from"@styled/css";const o=t({slots:["container","portal","toast","icon","dismiss"],base:{portal:{boxSizing:"border-box",position:"fixed",zIndex:"max",top:0,left:0,height:"100vh",width:"100vw",pointerEvents:"none"},container:{height:"full",width:"full",p:"20px"},toast:{py:2,px:4,rounded:10,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)"},dismiss:{cursor:"pointer",pointerEvents:"all"},icon:{color:"surface.primary",height:"1rem",width:"1rem"}},variants:{variant:{branded:{toast:{backgroundColor:"brand.base"}},success:{toast:{backgroundColor:"positive.darker"}},warning:{toast:{backgroundColor:"warning.darker"}},error:{toast:{backgroundColor:"negative.darker"}},neutral:{toast:{backgroundColor:"text.tertiary",_dark:{backgroundColor:"text.secondary"}}}},position:{top:{container:{alignItems:"center",justifyContent:"flex-start"}},"top-left":{container:{alignItems:"flex-start",justifyContent:"flex-start"}},"top-right":{container:{alignItems:"flex-end",justifyContent:"flex-start"}},bottom:{container:{alignItems:"center",justifyContent:"flex-end"}},"bottom-left":{container:{alignItems:"flex-start",justifyContent:"flex-end"}},"bottom-right":{container:{alignItems:"flex-end",justifyContent:"flex-end"}}}},defaultVariants:{position:"top-right",variant:"branded"}});export{o as toast};
 //# sourceMappingURL=toast.js.map

package/dist/es/recipes/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../../src/recipes/toast.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const toast = sva({\n  slots: ['container', 'portal', 'toast', 'icon', 'dismiss'],\n  base: {\n    portal: {\n      boxSizing: 'border-box',\n      position: 'fixed',\n      zIndex: 'max',\n      top: 0,\n      left: 0,\n      height: '100vh',\n      width: '100vw',\n      pointerEvents: 'none',\n    },\n    container: {\n      height: 'full',\n      width: 'full',\n      p: '20px',\n    },\n    toast: {\n      py: 2,\n      px: 4,\n      rounded: 10,\n      boxShadow: '4px 8px 20px 0px rgba(0, 0, 0, 0.15)',\n    },\n    dismiss: {\n      cursor: 'pointer',\n      pointerEvents: 'all',\n    },\n    icon: {\n      color: 'chalk',\n      height: '1rem',\n      width: '1rem',\n    },\n  },\n  variants: {\n    variant: {\n      branded: {\n        toast: {\n          backgroundColor: 'brand.base',\n        },\n      },\n      success: {\n        toast: {\n          backgroundColor: 'positive.darker',\n        },\n      },\n      warning: {\n        toast: {\n          backgroundColor: 'warning.darker',\n        },\n      },\n      error: {\n        toast: {\n          backgroundColor: 'negative.darker',\n        },\n      },\n      neutral: {\n        toast: {\n          backgroundColor: 'text.tertiary',\n        },\n      },\n    },\n    position: {\n      top: {\n        container: {\n          alignItems: 'center',\n          justifyContent: 'flex-start',\n        },\n      },\n      'top-left': {\n        container: {\n          alignItems: 'flex-start',\n          justifyContent: 'flex-start',\n        },\n      },\n      'top-right': {\n        container: {\n          alignItems: 'flex-end',\n          justifyContent: 'flex-start',\n        },\n      },\n      bottom: {\n        container: {\n          alignItems: 'center',\n          justifyContent: 'flex-end',\n        },\n      },\n      'bottom-left': {\n        container: {\n          alignItems: 'flex-start',\n          justifyContent: 'flex-end',\n        },\n      },\n      'bottom-right': {\n        container: {\n          alignItems: 'flex-end',\n          justifyContent: 'flex-end',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'top-right',\n    variant: 'branded',\n  },\n});\n\nexport type ToastVariants = RecipeVariantProps<typeof toast>;\n"],"names":["toast","sva"],"mappings":"kCAEO,MAAMA,EAAQC,EAAI,CACvB,MAAO,CAAC,YAAa,SAAU,QAAS,OAAQ,SAAS,EACzD,KAAM,CACJ,OAAQ,CACN,UAAW,aACX,SAAU,QACV,OAAQ,MACR,IAAK,EACL,KAAM,EACN,OAAQ,QACR,MAAO,QACP,cAAe,MAChB,EACD,UAAW,CACT,OAAQ,OACR,MAAO,OACP,EAAG,MACJ,EACD,MAAO,CACL,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,UAAW,sCACZ,EACD,QAAS,CACP,OAAQ,UACR,cAAe,KAChB,EACD,KAAM,CACJ,MAAO,QACP,OAAQ,OACR,MAAO,MACR,CACF,EACD,SAAU,CACR,QAAS,CACP,QAAS,CACP,MAAO,CACL,gBAAiB,YAClB,CACF,EACD,QAAS,CACP,MAAO,CACL,gBAAiB,iBAClB,CACF,EACD,QAAS,CACP,MAAO,CACL,gBAAiB,gBAClB,CACF,EACD,MAAO,CACL,MAAO,CACL,gBAAiB,iBAClB,CACF,EACD,QAAS,CACP,MAAO,CACL,gBAAiB,eAClB,CACF,CACF,EACD,SAAU,CACR,IAAK,CACH,UAAW,CACT,WAAY,SACZ,eAAgB,YACjB,CACF,EACD,WAAY,CACV,UAAW,CACT,WAAY,aACZ,eAAgB,YACjB,CACF,EACD,YAAa,CACX,UAAW,CACT,WAAY,WACZ,eAAgB,YACjB,CACF,EACD,OAAQ,CACN,UAAW,CACT,WAAY,SACZ,eAAgB,UACjB,CACF,EACD,cAAe,CACb,UAAW,CACT,WAAY,aACZ,eAAgB,UACjB,CACF,EACD,eAAgB,CACd,UAAW,CACT,WAAY,WACZ,eAAgB,UACjB,CACF,CACF,CACF,EACD,gBAAiB,CACf,SAAU,YACV,QAAS,SACV,CACF,CAAA"}
+{"version":3,"file":"toast.js","sources":["../../../src/recipes/toast.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const toast = sva({\n  slots: ['container', 'portal', 'toast', 'icon', 'dismiss'],\n  base: {\n    portal: {\n      boxSizing: 'border-box',\n      position: 'fixed',\n      zIndex: 'max',\n      top: 0,\n      left: 0,\n      height: '100vh',\n      width: '100vw',\n      pointerEvents: 'none',\n    },\n    container: {\n      height: 'full',\n      width: 'full',\n      p: '20px',\n    },\n    toast: {\n      py: 2,\n      px: 4,\n      rounded: 10,\n      boxShadow: '4px 8px 20px 0px rgba(0, 0, 0, 0.15)',\n    },\n    dismiss: {\n      cursor: 'pointer',\n      pointerEvents: 'all',\n    },\n    icon: {\n      color: 'surface.primary',\n      height: '1rem',\n      width: '1rem',\n    },\n  },\n  variants: {\n    variant: {\n      branded: {\n        toast: {\n          backgroundColor: 'brand.base',\n        },\n      },\n      success: {\n        toast: {\n          backgroundColor: 'positive.darker',\n        },\n      },\n      warning: {\n        toast: {\n          backgroundColor: 'warning.darker',\n        },\n      },\n      error: {\n        toast: {\n          backgroundColor: 'negative.darker',\n        },\n      },\n      neutral: {\n        toast: {\n          backgroundColor: 'text.tertiary',\n          _dark: {\n            backgroundColor: 'text.secondary',\n          },\n        },\n      },\n    },\n    position: {\n      top: {\n        container: {\n          alignItems: 'center',\n          justifyContent: 'flex-start',\n        },\n      },\n      'top-left': {\n        container: {\n          alignItems: 'flex-start',\n          justifyContent: 'flex-start',\n        },\n      },\n      'top-right': {\n        container: {\n          alignItems: 'flex-end',\n          justifyContent: 'flex-start',\n        },\n      },\n      bottom: {\n        container: {\n          alignItems: 'center',\n          justifyContent: 'flex-end',\n        },\n      },\n      'bottom-left': {\n        container: {\n          alignItems: 'flex-start',\n          justifyContent: 'flex-end',\n        },\n      },\n      'bottom-right': {\n        container: {\n          alignItems: 'flex-end',\n          justifyContent: 'flex-end',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'top-right',\n    variant: 'branded',\n  },\n});\n\nexport type ToastVariants = RecipeVariantProps<typeof toast>;\n"],"names":["toast","sva"],"mappings":"kCAEO,MAAMA,EAAQC,EAAI,CACvB,MAAO,CAAC,YAAa,SAAU,QAAS,OAAQ,SAAS,EACzD,KAAM,CACJ,OAAQ,CACN,UAAW,aACX,SAAU,QACV,OAAQ,MACR,IAAK,EACL,KAAM,EACN,OAAQ,QACR,MAAO,QACP,cAAe,MAChB,EACD,UAAW,CACT,OAAQ,OACR,MAAO,OACP,EAAG,MACJ,EACD,MAAO,CACL,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,UAAW,sCACZ,EACD,QAAS,CACP,OAAQ,UACR,cAAe,KAChB,EACD,KAAM,CACJ,MAAO,kBACP,OAAQ,OACR,MAAO,MACR,CACF,EACD,SAAU,CACR,QAAS,CACP,QAAS,CACP,MAAO,CACL,gBAAiB,YAClB,CACF,EACD,QAAS,CACP,MAAO,CACL,gBAAiB,iBAClB,CACF,EACD,QAAS,CACP,MAAO,CACL,gBAAiB,gBAClB,CACF,EACD,MAAO,CACL,MAAO,CACL,gBAAiB,iBAClB,CACF,EACD,QAAS,CACP,MAAO,CACL,gBAAiB,gBACjB,MAAO,CACL,gBAAiB,gBAClB,CACF,CACF,CACF,EACD,SAAU,CACR,IAAK,CACH,UAAW,CACT,WAAY,SACZ,eAAgB,YACjB,CACF,EACD,WAAY,CACV,UAAW,CACT,WAAY,aACZ,eAAgB,YACjB,CACF,EACD,YAAa,CACX,UAAW,CACT,WAAY,WACZ,eAAgB,YACjB,CACF,EACD,OAAQ,CACN,UAAW,CACT,WAAY,SACZ,eAAgB,UACjB,CACF,EACD,cAAe,CACb,UAAW,CACT,WAAY,aACZ,eAAgB,UACjB,CACF,EACD,eAAgB,CACd,UAAW,CACT,WAAY,WACZ,eAAgB,UACjB,CACF,CACF,CACF,EACD,gBAAiB,CACf,SAAU,YACV,QAAS,SACV,CACF,CAAA"}

package/dist/panda.buildinfo.json

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

package/dist/types/recipes/text-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../../src/recipes/text-input.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmJpB,CAAC"}
+{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../../src/recipes/text-input.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkJpB,CAAC"}

package/dist/types/recipes/toast.d.ts

@@ -24,6 +24,9 @@ export declare const toast: import("../../styled-system/types").SlotRecipeRuntim
         neutral: {
             toast: {
                 backgroundColor: "text.tertiary";
+                _dark: {
+                    backgroundColor: "text.secondary";
+                };
             };
         };
     };

package/dist/types/recipes/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/recipes/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE3D,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyGhB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/recipes/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE3D,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GhB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC"}

package/package.json

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