@magiclabs/ui-components 1.48.0 → 1.48.2

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var k=require("react/jsx-runtime"),P=require("./text-input.js"),I=require("@styled/css"),_=require("@styled/css/cx"),f=require("react");const h=/\D/g,j=({pinLength:u,onComplete:w=o=>o,onChange:m=o=>o,originName:C,id:v="pin-code-input",autoFocus:x=!0,className:T})=>{const[o,y]=f.useState(()=>Array.from({length:u},()=>"")),c=f.useRef(Array(u).fill(null));f.useEffect(()=>{y(e=>u<e.length?e.slice(0,u):u>e.length?[...e,...Array(u-e.length).fill("")]:e)},[u]),f.useEffect(()=>{var e;x&&c.current[0]&&((e=c.current[0])===null||e===void 0||e.focus())},[x,u]);const d=(e,r)=>{var n;y(r),m(r);const t=r.join("");t.length===u&&((n=c.current[e])===null||n===void 0||n.blur(),w(t))},q=f.useCallback((e,r)=>{const n=[...o];r.replace(h,"").split("").forEach(t=>{var a,i;e>=u||(n[e]=t,e++,(i=(a=c?.current)===null||a===void 0?void 0:a[e])===null||i===void 0||i.focus())}),d(e,n)},[o,d]),A=f.useCallback(e=>{var r,n;const t=parseInt(e.currentTarget.dataset.id||"",10),a=e.target.value.replace(h,"");if(a.length>1)return q(t,a);const i=[...o];i[t]=a,a.length&&((n=(r=c?.current)===null||r===void 0?void 0:r[t+1])===null||n===void 0||n.focus()),d(t,i)},[d]),N=f.useCallback(e=>{var r,n,t,a,i;const b=e.currentTarget.value.length,s=parseInt(e.currentTarget.dataset.id||"",10),p=[...o];switch(e.key){case"Backspace":{if(b&&(p[s]="",d(s,p)),s){const l=p.reduceRight((g,R,E)=>g!==-1?g:R!==""?E:g,-1);(r=c?.current[l>=0?l:0])===null||r===void 0||r.focus()}return}case"ArrowLeft":{const l=s?s-1:u-1;(n=c?.current[l])===null||n===void 0||n.focus();return}case"ArrowRight":{const l=s===u-1?0:s+1;(t=c?.current[l])===null||t===void 0||t.focus();return}default:{const l=e.key.replace(h,"");b&&l.length&&l!==e.currentTarget.value&&(p[s]=l,d(s,p),(i=(a=c?.current)===null||a===void 0?void 0:a[s+1])===null||i===void 0||i.focus())}}},[m,d]),$=C?`${C} `:"";return k.jsx("form",{id:v,className:I.css({margin:0,minWidth:0,display:"flex",width:"100%",justifyContent:"space-between",maxWidth:"30rem",gap:2}),children:o.map((e,r)=>k.jsx(P.TextInput.Char,{id:v?`${v}-${r}`:void 0,"aria-label":`${$}one time password input ${r+1}`,"data-id":r,name:`${$}one time password input ${r+1}`,value:o[r]||"",className:_.cx(I.css({caretColor:"transparent"}),T),attr:{onChange:A,onKeyUp:N,autoComplete:r===0?"one-time-code":"off",inputMode:"numeric"},ref:n=>{c?.current&&(c.current[r]=n)}},`${v||void 0}-${r}`))})};exports.PinCodeInput=j,exports.default=j;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var b=require("react/jsx-runtime"),E=require("./text-input.js"),k=require("@styled/css"),N=require("@styled/css/cx"),f=require("react");const g=/\D/g,$=({pinLength:a,onComplete:j=o=>o,onChange:m=o=>o,id:v="pin-code-input",autoFocus:C=!0,className:w})=>{const[o,x]=f.useState(()=>Array.from({length:a},()=>"")),c=f.useRef(Array(a).fill(null));f.useEffect(()=>{x(e=>a<e.length?e.slice(0,a):a>e.length?[...e,...Array(a-e.length).fill("")]:e)},[a]),f.useEffect(()=>{var e;C&&c.current[0]&&((e=c.current[0])===null||e===void 0||e.focus())},[C,a]);const d=(e,r)=>{var n;x(r),m(r);const t=r.join("");t.length===a&&((n=c.current[e])===null||n===void 0||n.blur(),j(t))},I=f.useCallback((e,r)=>{const n=[...o];r.replace(g,"").split("").forEach(t=>{var u,s;e>=a||(n[e]=t,e++,(s=(u=c?.current)===null||u===void 0?void 0:u[e])===null||s===void 0||s.focus())}),d(e,n)},[o,d]),q=f.useCallback(e=>{var r,n;const t=parseInt(e.currentTarget.dataset.id||"",10),u=e.target.value.replace(g,"");if(u.length>1)return I(t,u);const s=[...o];s[t]=u,u.length&&((n=(r=c?.current)===null||r===void 0?void 0:r[t+1])===null||n===void 0||n.focus()),d(t,s)},[d]),A=f.useCallback(e=>{var r,n,t,u,s;const y=e.currentTarget.value.length,i=parseInt(e.currentTarget.dataset.id||"",10),p=[...o];switch(e.key){case"Backspace":{if(y&&(p[i]="",d(i,p)),i){const l=p.reduceRight((h,T,R)=>h!==-1?h:T!==""?R:h,-1);(r=c?.current[l>=0?l:0])===null||r===void 0||r.focus()}return}case"ArrowLeft":{const l=i?i-1:a-1;(n=c?.current[l])===null||n===void 0||n.focus();return}case"ArrowRight":{const l=i===a-1?0:i+1;(t=c?.current[l])===null||t===void 0||t.focus();return}default:{const l=e.key.replace(g,"");y&&l.length&&l!==e.currentTarget.value&&(p[i]=l,d(i,p),(s=(u=c?.current)===null||u===void 0?void 0:u[i+1])===null||s===void 0||s.focus())}}},[m,d]);return b.jsx("form",{id:v,className:k.css({margin:0,minWidth:0,display:"flex",width:"100%",justifyContent:"space-between",maxWidth:"30rem",gap:2}),children:o.map((e,r)=>b.jsx(E.TextInput.Char,{id:v?`${v}-${r}`:void 0,"aria-label":`one time password input ${r+1}`,"data-id":r,name:`one time password input ${r+1}`,value:o[r]||"",className:N.cx(k.css({caretColor:"transparent"}),w),attr:{onChange:q,onKeyUp:A,autoComplete:r===0?"one-time-code":"off",inputMode:"numeric"},ref:n=>{c?.current&&(c.current[r]=n)}},`${v||void 0}-${r}`))})};exports.PinCodeInput=$,exports.default=$;
 //# sourceMappingURL=pincode-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pincode-input.js","sources":["../../../../src/components/inputs/pincode-input.tsx"],"sourcesContent":["import { TextInput } from '@components/inputs/text-input';\nimport { css } from '@styled/css';\nimport { cx } from '@styled/css/cx';\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nexport type PinCodeInputProps = {\n  pinLength: 3 | 6;\n  onComplete: (pins: string) => void;\n  onChange: (pins: Array<string>) => void;\n  id?: string;\n  originName?: string;\n  autoFocus?: boolean;\n  className?: string;\n};\n\nconst REGEX_NUMBER_CLEANER = /\\D/g;\n\nexport const PinCodeInput = ({\n  pinLength,\n  onComplete = pins => pins,\n  onChange = pins => pins,\n  originName,\n  id = 'pin-code-input',\n  autoFocus = true,\n  className,\n}: PinCodeInputProps) => {\n  const [pinNumbers, setPinNumbers] = useState(() => Array.from({ length: pinLength }, () => ''));\n  const inputRefs = useRef<(HTMLInputElement | null)[]>(Array(pinLength).fill(null));\n\n  useEffect(() => {\n    setPinNumbers(prevPinNumbers => {\n      if (pinLength < prevPinNumbers.length) {\n        return prevPinNumbers.slice(0, pinLength);\n      } else if (pinLength > prevPinNumbers.length) {\n        return [...prevPinNumbers, ...Array(pinLength - prevPinNumbers.length).fill('')];\n      }\n      return prevPinNumbers;\n    });\n  }, [pinLength]);\n\n  useEffect(() => {\n    if (autoFocus && inputRefs.current[0]) {\n      inputRefs.current[0]?.focus();\n    }\n  }, [autoFocus, pinLength]);\n\n  const updatePincode = (currentIndex: number, pins: string[]) => {\n    setPinNumbers(pins);\n    onChange(pins);\n\n    const strPin = pins.join('');\n\n    if (strPin.length === pinLength) {\n      inputRefs.current[currentIndex]?.blur();\n      onComplete(strPin);\n    }\n  };\n\n  const bulkUpdatePincode = useCallback(\n    (currentIndex: number, text: string) => {\n      const newPins = [...pinNumbers];\n      text\n        .replace(REGEX_NUMBER_CLEANER, '')\n        .split('')\n        .forEach(code => {\n          if (currentIndex >= pinLength) {\n            return;\n          }\n          newPins[currentIndex] = code;\n          currentIndex++;\n          inputRefs?.current?.[currentIndex]?.focus();\n        });\n\n      updatePincode(currentIndex, newPins);\n    },\n    [pinNumbers, updatePincode],\n  );\n\n  const onChangeProp = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const currentIndex = parseInt(e.currentTarget.dataset.id || '', 10);\n      const value = e.target.value.replace(REGEX_NUMBER_CLEANER, '');\n\n      // handle cases when user pastes multiple characters\n      if (value.length > 1) {\n        return bulkUpdatePincode(currentIndex, value);\n      }\n      const newPins = [...pinNumbers];\n\n      newPins[currentIndex] = value;\n\n      if (value.length) {\n        inputRefs?.current?.[currentIndex + 1]?.focus();\n      }\n\n      updatePincode(currentIndex, newPins);\n    },\n    [updatePincode],\n  );\n\n  const onKeyUp = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      const inputHasValue = e.currentTarget.value.length;\n      const currentIndex = parseInt(e.currentTarget.dataset.id || '', 10);\n      const newPins = [...pinNumbers];\n\n      switch (e.key) {\n        case 'Backspace': {\n          // Always delete value of selected input\n          if (inputHasValue) {\n            newPins[currentIndex] = '';\n            updatePincode(currentIndex, newPins);\n          }\n\n          // Select the last input with a value\n          if (currentIndex) {\n            const lastIndexWithDigit = newPins.reduceRight((acc, current, index) => {\n              if (acc !== -1) return acc;\n              if (current !== '') return index;\n              return acc;\n            }, -1);\n\n            inputRefs?.current[lastIndexWithDigit >= 0 ? lastIndexWithDigit : 0]?.focus();\n          }\n          return;\n        }\n\n        case 'ArrowLeft': {\n          // Navigate left in a loop\n          const newIndex = currentIndex ? currentIndex - 1 : pinLength - 1;\n          inputRefs?.current[newIndex]?.focus();\n          return;\n        }\n\n        case 'ArrowRight': {\n          // Navigate right in a loop\n          const newIndex = currentIndex === pinLength - 1 ? 0 : currentIndex + 1;\n          inputRefs?.current[newIndex]?.focus();\n          return;\n        }\n\n        default: {\n          // Overwrite existing value if a new number value is pressed\n          const value = e.key.replace(REGEX_NUMBER_CLEANER, '');\n\n          if (inputHasValue && value.length && value !== e.currentTarget.value) {\n            newPins[currentIndex] = value;\n            updatePincode(currentIndex, newPins);\n            inputRefs?.current?.[currentIndex + 1]?.focus();\n          }\n        }\n      }\n    },\n    [onChange, updatePincode],\n  );\n\n  const formattedOriginName = originName ? `${originName} ` : '';\n\n  return (\n    <form\n      id={id}\n      className={css({\n        margin: 0,\n        minWidth: 0,\n        display: 'flex',\n        width: '100%',\n        justifyContent: 'space-between',\n        maxWidth: '30rem',\n        gap: 2,\n      })}\n    >\n      {pinNumbers.map((_, i) => (\n        <TextInput.Char\n          id={id ? `${id}-${i}` : undefined}\n          aria-label={`${formattedOriginName}one time password input ${i + 1}`}\n          data-id={i}\n          key={`${id || undefined}-${i}`}\n          name={`${formattedOriginName}one time password input ${i + 1}`}\n          value={pinNumbers[i] || ''}\n          className={cx(css({ caretColor: 'transparent' }), className)}\n          attr={{\n            onChange: onChangeProp,\n            onKeyUp,\n            autoComplete: i === 0 ? 'one-time-code' : 'off',\n            inputMode: 'numeric',\n          }}\n          ref={el => {\n            if (inputRefs?.current) {\n              inputRefs.current[i] = el;\n            }\n          }}\n        />\n      ))}\n    </form>\n  );\n};\n\nexport default PinCodeInput;\n"],"names":["REGEX_NUMBER_CLEANER","PinCodeInput","pinLength","onComplete","pins","onChange","originName","id","autoFocus","className","pinNumbers","setPinNumbers","useState","inputRefs","useRef","useEffect","prevPinNumbers","_a","updatePincode","currentIndex","strPin","bulkUpdatePincode","useCallback","text","newPins","code","_b","onChangeProp","e","value","onKeyUp","inputHasValue","lastIndexWithDigit","acc","current","index","newIndex","_c","_e","_d","formattedOriginName","_jsx","css","_","i","TextInput","cx","el"],"mappings":"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"}
+{"version":3,"file":"pincode-input.js","sources":["../../../../src/components/inputs/pincode-input.tsx"],"sourcesContent":["import { TextInput } from '@components/inputs/text-input';\nimport { css } from '@styled/css';\nimport { cx } from '@styled/css/cx';\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nexport type PinCodeInputProps = {\n  pinLength: 3 | 6;\n  onComplete: (pins: string) => void;\n  onChange: (pins: Array<string>) => void;\n  id?: string;\n  originName?: string;\n  autoFocus?: boolean;\n  className?: string;\n};\n\nconst REGEX_NUMBER_CLEANER = /\\D/g;\n\nexport const PinCodeInput = ({\n  pinLength,\n  onComplete = pins => pins,\n  onChange = pins => pins,\n  id = 'pin-code-input',\n  autoFocus = true,\n  className,\n}: PinCodeInputProps) => {\n  const [pinNumbers, setPinNumbers] = useState(() => Array.from({ length: pinLength }, () => ''));\n  const inputRefs = useRef<(HTMLInputElement | null)[]>(Array(pinLength).fill(null));\n\n  useEffect(() => {\n    setPinNumbers(prevPinNumbers => {\n      if (pinLength < prevPinNumbers.length) {\n        return prevPinNumbers.slice(0, pinLength);\n      } else if (pinLength > prevPinNumbers.length) {\n        return [...prevPinNumbers, ...Array(pinLength - prevPinNumbers.length).fill('')];\n      }\n      return prevPinNumbers;\n    });\n  }, [pinLength]);\n\n  useEffect(() => {\n    if (autoFocus && inputRefs.current[0]) {\n      inputRefs.current[0]?.focus();\n    }\n  }, [autoFocus, pinLength]);\n\n  const updatePincode = (currentIndex: number, pins: string[]) => {\n    setPinNumbers(pins);\n    onChange(pins);\n\n    const strPin = pins.join('');\n\n    if (strPin.length === pinLength) {\n      inputRefs.current[currentIndex]?.blur();\n      onComplete(strPin);\n    }\n  };\n\n  const bulkUpdatePincode = useCallback(\n    (currentIndex: number, text: string) => {\n      const newPins = [...pinNumbers];\n      text\n        .replace(REGEX_NUMBER_CLEANER, '')\n        .split('')\n        .forEach(code => {\n          if (currentIndex >= pinLength) {\n            return;\n          }\n          newPins[currentIndex] = code;\n          currentIndex++;\n          inputRefs?.current?.[currentIndex]?.focus();\n        });\n\n      updatePincode(currentIndex, newPins);\n    },\n    [pinNumbers, updatePincode],\n  );\n\n  const onChangeProp = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const currentIndex = parseInt(e.currentTarget.dataset.id || '', 10);\n      const value = e.target.value.replace(REGEX_NUMBER_CLEANER, '');\n\n      // handle cases when user pastes multiple characters\n      if (value.length > 1) {\n        return bulkUpdatePincode(currentIndex, value);\n      }\n      const newPins = [...pinNumbers];\n\n      newPins[currentIndex] = value;\n\n      if (value.length) {\n        inputRefs?.current?.[currentIndex + 1]?.focus();\n      }\n\n      updatePincode(currentIndex, newPins);\n    },\n    [updatePincode],\n  );\n\n  const onKeyUp = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      const inputHasValue = e.currentTarget.value.length;\n      const currentIndex = parseInt(e.currentTarget.dataset.id || '', 10);\n      const newPins = [...pinNumbers];\n\n      switch (e.key) {\n        case 'Backspace': {\n          // Always delete value of selected input\n          if (inputHasValue) {\n            newPins[currentIndex] = '';\n            updatePincode(currentIndex, newPins);\n          }\n\n          // Select the last input with a value\n          if (currentIndex) {\n            const lastIndexWithDigit = newPins.reduceRight((acc, current, index) => {\n              if (acc !== -1) return acc;\n              if (current !== '') return index;\n              return acc;\n            }, -1);\n\n            inputRefs?.current[lastIndexWithDigit >= 0 ? lastIndexWithDigit : 0]?.focus();\n          }\n          return;\n        }\n\n        case 'ArrowLeft': {\n          // Navigate left in a loop\n          const newIndex = currentIndex ? currentIndex - 1 : pinLength - 1;\n          inputRefs?.current[newIndex]?.focus();\n          return;\n        }\n\n        case 'ArrowRight': {\n          // Navigate right in a loop\n          const newIndex = currentIndex === pinLength - 1 ? 0 : currentIndex + 1;\n          inputRefs?.current[newIndex]?.focus();\n          return;\n        }\n\n        default: {\n          // Overwrite existing value if a new number value is pressed\n          const value = e.key.replace(REGEX_NUMBER_CLEANER, '');\n\n          if (inputHasValue && value.length && value !== e.currentTarget.value) {\n            newPins[currentIndex] = value;\n            updatePincode(currentIndex, newPins);\n            inputRefs?.current?.[currentIndex + 1]?.focus();\n          }\n        }\n      }\n    },\n    [onChange, updatePincode],\n  );\n\n  return (\n    <form\n      id={id}\n      className={css({\n        margin: 0,\n        minWidth: 0,\n        display: 'flex',\n        width: '100%',\n        justifyContent: 'space-between',\n        maxWidth: '30rem',\n        gap: 2,\n      })}\n    >\n      {pinNumbers.map((_, i) => (\n        <TextInput.Char\n          id={id ? `${id}-${i}` : undefined}\n          aria-label={`one time password input ${i + 1}`}\n          data-id={i}\n          key={`${id || undefined}-${i}`}\n          name={`one time password input ${i + 1}`}\n          value={pinNumbers[i] || ''}\n          className={cx(css({ caretColor: 'transparent' }), className)}\n          attr={{\n            onChange: onChangeProp,\n            onKeyUp,\n            autoComplete: i === 0 ? 'one-time-code' : 'off',\n            inputMode: 'numeric',\n          }}\n          ref={el => {\n            if (inputRefs?.current) {\n              inputRefs.current[i] = el;\n            }\n          }}\n        />\n      ))}\n    </form>\n  );\n};\n\nexport default PinCodeInput;\n"],"names":["REGEX_NUMBER_CLEANER","PinCodeInput","pinLength","onComplete","pins","onChange","id","autoFocus","className","pinNumbers","setPinNumbers","useState","inputRefs","useRef","useEffect","prevPinNumbers","_a","updatePincode","currentIndex","strPin","bulkUpdatePincode","useCallback","text","newPins","code","_b","onChangeProp","e","value","onKeyUp","inputHasValue","lastIndexWithDigit","acc","current","index","newIndex","_c","_e","_d","_jsx","css","_","i","TextInput","cx","el"],"mappings":"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"}

package/dist/cjs/recipes/overlay.js

@@ -1,2 +1,2 @@
-"use strict";var a=require("@styled/css");const i=a.sva({slots:["bg","container"],base:{bg:{height:"full",width:"full",pointerEvents:"all",position:"fixed",top:0,left:0},container:{height:"100vh",width:"100vw",maxWidth:"100rem",position:"relative",margin:"0 auto","@media (min-width: 48rem)":{height:"fit-content"}}},variants:{fullscreen:{true:{container:{maxWidth:"none"}}},animate:{false:{bg:{animationName:"none"}}},backgroundType:{blurred:{bg:{backdropBlur:"0.375rem",backdropFilter:"auto",backgroundColor:"surface.primary/70"}},solid:{bg:{backgroundColor:"surface.tertiary"}},transparent:{},none:{}},hide:{false:{}}},compoundVariants:[{animate:!0,hide:!1,css:{bg:{animationFillMode:"forwards",animationName:"fadeIn",animationDuration:"400ms"}}},{animate:!0,hide:!0,css:{bg:{animationFillMode:"forwards",animationName:"fadeOut",animationDuration:"400ms"}}}],defaultVariants:{animate:!0,backgroundType:"none",hide:!1}});exports.overlay=i;
+"use strict";var a=require("@styled/css");const i=a.sva({slots:["bg","container"],base:{bg:{height:"full",width:"full",pointerEvents:"all",position:"fixed",top:0,left:0},container:{height:"100vh",width:"100vw",maxWidth:"100rem",position:"relative",margin:"0 auto","@media (min-width: 48rem)":{height:"fit-content"}}},variants:{fullscreen:{true:{container:{maxWidth:"none"}}},animate:{false:{bg:{animationName:"none"}}},backgroundType:{blurred:{bg:{backdropBlur:"0.375rem",backdropFilter:"auto"}},solid:{bg:{backgroundColor:"surface.tertiary"}},transparent:{},none:{}},hide:{false:{}}},compoundVariants:[{animate:!0,hide:!1,css:{bg:{animationFillMode:"forwards",animationName:"fadeIn",animationDuration:"400ms"}}},{animate:!0,hide:!0,css:{bg:{animationFillMode:"forwards",animationName:"fadeOut",animationDuration:"400ms"}}}],defaultVariants:{animate:!0,backgroundType:"none",hide:!1}});exports.overlay=i;
 //# sourceMappingURL=overlay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../src/recipes/overlay.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const overlay = sva({\n  slots: ['bg', 'container'],\n  base: {\n    bg: {\n      height: 'full',\n      width: 'full',\n      pointerEvents: 'all',\n      position: 'fixed',\n      top: 0,\n      left: 0,\n    },\n    container: {\n      height: '100vh',\n      width: '100vw',\n      maxWidth: '100rem',\n      position: 'relative',\n      margin: '0 auto',\n\n      '@media (min-width: 48rem)': {\n        height: 'fit-content',\n      },\n    },\n  },\n  variants: {\n    fullscreen: {\n      true: {\n        container: {\n          maxWidth: 'none',\n        },\n      },\n    },\n    animate: {\n      false: {\n        bg: {\n          animationName: 'none',\n        },\n      },\n    },\n    backgroundType: {\n      blurred: {\n        bg: {\n          backdropBlur: '0.375rem',\n          backdropFilter: 'auto',\n          backgroundColor: 'surface.primary/70',\n        },\n      },\n      solid: {\n        bg: {\n          backgroundColor: 'surface.tertiary',\n        },\n      },\n      transparent: {},\n      none: {},\n    },\n    hide: { false: {} },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      hide: false,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeIn',\n          animationDuration: '400ms',\n        },\n      },\n    },\n    {\n      animate: true,\n      hide: true,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeOut',\n          animationDuration: '400ms',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    backgroundType: 'none',\n    hide: false,\n  },\n});\n\nexport type OverlayVariants = RecipeVariantProps<typeof overlay>;\n"],"names":["overlay","sva"],"mappings":"0CAEa,MAAAA,EAAUC,EAAAA,IAAI,CACzB,MAAO,CAAC,KAAM,WAAW,EACzB,KAAM,CACJ,GAAI,CACF,OAAQ,OACR,MAAO,OACP,cAAe,MACf,SAAU,QACV,IAAK,EACL,KAAM,CACP,EACD,UAAW,CACT,OAAQ,QACR,MAAO,QACP,SAAU,SACV,SAAU,WACV,OAAQ,SAER,4BAA6B,CAC3B,OAAQ,aACT,CACF,CACF,EACD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,UAAW,CACT,SAAU,MACX,CACF,CACF,EACD,QAAS,CACP,MAAO,CACL,GAAI,CACF,cAAe,MAChB,CACF,CACF,EACD,eAAgB,CACd,QAAS,CACP,GAAI,CACF,aAAc,WACd,eAAgB,OAChB,gBAAiB,oBAClB,CACF,EACD,MAAO,CACL,GAAI,CACF,gBAAiB,kBAClB,CACF,EACD,YAAa,CAAA,EACb,KAAM,CAAA,CACP,EACD,KAAM,CAAE,MAAO,CAAA,CAAI,CACpB,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,SACf,kBAAmB,OACpB,CACF,CACF,EACD,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,UACf,kBAAmB,OACpB,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,eAAgB,OAChB,KAAM,EACP,CACF,CAAA"}
+{"version":3,"file":"overlay.js","sources":["../../../src/recipes/overlay.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const overlay = sva({\n  slots: ['bg', 'container'],\n  base: {\n    bg: {\n      height: 'full',\n      width: 'full',\n      pointerEvents: 'all',\n      position: 'fixed',\n      top: 0,\n      left: 0,\n    },\n    container: {\n      height: '100vh',\n      width: '100vw',\n      maxWidth: '100rem',\n      position: 'relative',\n      margin: '0 auto',\n\n      '@media (min-width: 48rem)': {\n        height: 'fit-content',\n      },\n    },\n  },\n  variants: {\n    fullscreen: {\n      true: {\n        container: {\n          maxWidth: 'none',\n        },\n      },\n    },\n    animate: {\n      false: {\n        bg: {\n          animationName: 'none',\n        },\n      },\n    },\n    backgroundType: {\n      blurred: {\n        bg: {\n          backdropBlur: '0.375rem',\n          backdropFilter: 'auto',\n        },\n      },\n      solid: {\n        bg: {\n          backgroundColor: 'surface.tertiary',\n        },\n      },\n      transparent: {},\n      none: {},\n    },\n    hide: { false: {} },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      hide: false,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeIn',\n          animationDuration: '400ms',\n        },\n      },\n    },\n    {\n      animate: true,\n      hide: true,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeOut',\n          animationDuration: '400ms',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    backgroundType: 'none',\n    hide: false,\n  },\n});\n\nexport type OverlayVariants = RecipeVariantProps<typeof overlay>;\n"],"names":["overlay","sva"],"mappings":"0CAEO,MAAMA,EAAUC,EAAAA,IAAI,CACzB,MAAO,CAAC,KAAM,WAAW,EACzB,KAAM,CACJ,GAAI,CACF,OAAQ,OACR,MAAO,OACP,cAAe,MACf,SAAU,QACV,IAAK,EACL,KAAM,CACP,EACD,UAAW,CACT,OAAQ,QACR,MAAO,QACP,SAAU,SACV,SAAU,WACV,OAAQ,SAER,4BAA6B,CAC3B,OAAQ,aACT,CACF,CACF,EACD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,UAAW,CACT,SAAU,MACX,CACF,CACF,EACD,QAAS,CACP,MAAO,CACL,GAAI,CACF,cAAe,MAChB,CACF,CACF,EACD,eAAgB,CACd,QAAS,CACP,GAAI,CACF,aAAc,WACd,eAAgB,MACjB,CACF,EACD,MAAO,CACL,GAAI,CACF,gBAAiB,kBAClB,CACF,EACD,YAAa,CAAA,EACb,KAAM,CAAA,CACP,EACD,KAAM,CAAE,MAAO,CAAI,CAAA,CACpB,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,SACf,kBAAmB,OACpB,CACF,CACF,EACD,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,UACf,kBAAmB,OACpB,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,eAAgB,OAChB,KAAM,EACP,CACF,CAAA"}

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

@@ -1,2 +1,2 @@
-import{jsx as T}from"react/jsx-runtime";import{TextInput as B}from"./text-input.js";import{css as k}from"@styled/css";import{cx as D}from"@styled/css/cx";import{useState as F,useRef as K,useEffect as A,useCallback as g}from"react";const v=/\D/g,I=({pinLength:o,onComplete:b=u=>u,onChange:h=u=>u,originName:$,id:p="pin-code-input",autoFocus:y=!0,className:N})=>{const[u,C]=F(()=>Array.from({length:o},()=>"")),c=K(Array(o).fill(null));A(()=>{C(e=>o<e.length?e.slice(0,o):o>e.length?[...e,...Array(o-e.length).fill("")]:e)},[o]),A(()=>{var e;y&&c.current[0]&&((e=c.current[0])===null||e===void 0||e.focus())},[y,o]);const d=(e,n)=>{var r;C(n),h(n);const t=n.join("");t.length===o&&((r=c.current[e])===null||r===void 0||r.blur(),b(t))},j=g((e,n)=>{const r=[...u];n.replace(v,"").split("").forEach(t=>{var a,i;e>=o||(r[e]=t,e++,(i=(a=c?.current)===null||a===void 0?void 0:a[e])===null||i===void 0||i.focus())}),d(e,r)},[u,d]),R=g(e=>{var n,r;const t=parseInt(e.currentTarget.dataset.id||"",10),a=e.target.value.replace(v,"");if(a.length>1)return j(t,a);const i=[...u];i[t]=a,a.length&&((r=(n=c?.current)===null||n===void 0?void 0:n[t+1])===null||r===void 0||r.focus()),d(t,i)},[d]),E=g(e=>{var n,r,t,a,i;const w=e.currentTarget.value.length,s=parseInt(e.currentTarget.dataset.id||"",10),f=[...u];switch(e.key){case"Backspace":{if(w&&(f[s]="",d(s,f)),s){const l=f.reduceRight((m,L,W)=>m!==-1?m:L!==""?W:m,-1);(n=c?.current[l>=0?l:0])===null||n===void 0||n.focus()}return}case"ArrowLeft":{const l=s?s-1:o-1;(r=c?.current[l])===null||r===void 0||r.focus();return}case"ArrowRight":{const l=s===o-1?0:s+1;(t=c?.current[l])===null||t===void 0||t.focus();return}default:{const l=e.key.replace(v,"");w&&l.length&&l!==e.currentTarget.value&&(f[s]=l,d(s,f),(i=(a=c?.current)===null||a===void 0?void 0:a[s+1])===null||i===void 0||i.focus())}}},[h,d]),x=$?`${$} `:"";return T("form",{id:p,className:k({margin:0,minWidth:0,display:"flex",width:"100%",justifyContent:"space-between",maxWidth:"30rem",gap:2}),children:u.map((e,n)=>T(B.Char,{id:p?`${p}-${n}`:void 0,"aria-label":`${x}one time password input ${n+1}`,"data-id":n,name:`${x}one time password input ${n+1}`,value:u[n]||"",className:D(k({caretColor:"transparent"}),N),attr:{onChange:R,onKeyUp:E,autoComplete:n===0?"one-time-code":"off",inputMode:"numeric"},ref:r=>{c?.current&&(c.current[n]=r)}},`${p||void 0}-${n}`))})};export{I as PinCodeInput,I as default};
+import{jsx as $}from"react/jsx-runtime";import{TextInput as L}from"./text-input.js";import{css as w}from"@styled/css";import{cx as W}from"@styled/css/cx";import{useState as B,useRef as D,useEffect as b,useCallback as h}from"react";const v=/\D/g,k=({pinLength:o,onComplete:A=u=>u,onChange:g=u=>u,id:p="pin-code-input",autoFocus:C=!0,className:T})=>{const[u,y]=B(()=>Array.from({length:o},()=>"")),c=D(Array(o).fill(null));b(()=>{y(e=>o<e.length?e.slice(0,o):o>e.length?[...e,...Array(o-e.length).fill("")]:e)},[o]),b(()=>{var e;C&&c.current[0]&&((e=c.current[0])===null||e===void 0||e.focus())},[C,o]);const d=(e,n)=>{var r;y(n),g(n);const t=n.join("");t.length===o&&((r=c.current[e])===null||r===void 0||r.blur(),A(t))},I=h((e,n)=>{const r=[...u];n.replace(v,"").split("").forEach(t=>{var a,i;e>=o||(r[e]=t,e++,(i=(a=c?.current)===null||a===void 0?void 0:a[e])===null||i===void 0||i.focus())}),d(e,r)},[u,d]),j=h(e=>{var n,r;const t=parseInt(e.currentTarget.dataset.id||"",10),a=e.target.value.replace(v,"");if(a.length>1)return I(t,a);const i=[...u];i[t]=a,a.length&&((r=(n=c?.current)===null||n===void 0?void 0:n[t+1])===null||r===void 0||r.focus()),d(t,i)},[d]),N=h(e=>{var n,r,t,a,i;const x=e.currentTarget.value.length,s=parseInt(e.currentTarget.dataset.id||"",10),f=[...u];switch(e.key){case"Backspace":{if(x&&(f[s]="",d(s,f)),s){const l=f.reduceRight((m,R,E)=>m!==-1?m:R!==""?E:m,-1);(n=c?.current[l>=0?l:0])===null||n===void 0||n.focus()}return}case"ArrowLeft":{const l=s?s-1:o-1;(r=c?.current[l])===null||r===void 0||r.focus();return}case"ArrowRight":{const l=s===o-1?0:s+1;(t=c?.current[l])===null||t===void 0||t.focus();return}default:{const l=e.key.replace(v,"");x&&l.length&&l!==e.currentTarget.value&&(f[s]=l,d(s,f),(i=(a=c?.current)===null||a===void 0?void 0:a[s+1])===null||i===void 0||i.focus())}}},[g,d]);return $("form",{id:p,className:w({margin:0,minWidth:0,display:"flex",width:"100%",justifyContent:"space-between",maxWidth:"30rem",gap:2}),children:u.map((e,n)=>$(L.Char,{id:p?`${p}-${n}`:void 0,"aria-label":`one time password input ${n+1}`,"data-id":n,name:`one time password input ${n+1}`,value:u[n]||"",className:W(w({caretColor:"transparent"}),T),attr:{onChange:j,onKeyUp:N,autoComplete:n===0?"one-time-code":"off",inputMode:"numeric"},ref:r=>{c?.current&&(c.current[n]=r)}},`${p||void 0}-${n}`))})};export{k as PinCodeInput,k as default};
 //# sourceMappingURL=pincode-input.js.map

package/dist/es/components/inputs/pincode-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"pincode-input.js","sources":["../../../../src/components/inputs/pincode-input.tsx"],"sourcesContent":["import { TextInput } from '@components/inputs/text-input';\nimport { css } from '@styled/css';\nimport { cx } from '@styled/css/cx';\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nexport type PinCodeInputProps = {\n  pinLength: 3 | 6;\n  onComplete: (pins: string) => void;\n  onChange: (pins: Array<string>) => void;\n  id?: string;\n  originName?: string;\n  autoFocus?: boolean;\n  className?: string;\n};\n\nconst REGEX_NUMBER_CLEANER = /\\D/g;\n\nexport const PinCodeInput = ({\n  pinLength,\n  onComplete = pins => pins,\n  onChange = pins => pins,\n  originName,\n  id = 'pin-code-input',\n  autoFocus = true,\n  className,\n}: PinCodeInputProps) => {\n  const [pinNumbers, setPinNumbers] = useState(() => Array.from({ length: pinLength }, () => ''));\n  const inputRefs = useRef<(HTMLInputElement | null)[]>(Array(pinLength).fill(null));\n\n  useEffect(() => {\n    setPinNumbers(prevPinNumbers => {\n      if (pinLength < prevPinNumbers.length) {\n        return prevPinNumbers.slice(0, pinLength);\n      } else if (pinLength > prevPinNumbers.length) {\n        return [...prevPinNumbers, ...Array(pinLength - prevPinNumbers.length).fill('')];\n      }\n      return prevPinNumbers;\n    });\n  }, [pinLength]);\n\n  useEffect(() => {\n    if (autoFocus && inputRefs.current[0]) {\n      inputRefs.current[0]?.focus();\n    }\n  }, [autoFocus, pinLength]);\n\n  const updatePincode = (currentIndex: number, pins: string[]) => {\n    setPinNumbers(pins);\n    onChange(pins);\n\n    const strPin = pins.join('');\n\n    if (strPin.length === pinLength) {\n      inputRefs.current[currentIndex]?.blur();\n      onComplete(strPin);\n    }\n  };\n\n  const bulkUpdatePincode = useCallback(\n    (currentIndex: number, text: string) => {\n      const newPins = [...pinNumbers];\n      text\n        .replace(REGEX_NUMBER_CLEANER, '')\n        .split('')\n        .forEach(code => {\n          if (currentIndex >= pinLength) {\n            return;\n          }\n          newPins[currentIndex] = code;\n          currentIndex++;\n          inputRefs?.current?.[currentIndex]?.focus();\n        });\n\n      updatePincode(currentIndex, newPins);\n    },\n    [pinNumbers, updatePincode],\n  );\n\n  const onChangeProp = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const currentIndex = parseInt(e.currentTarget.dataset.id || '', 10);\n      const value = e.target.value.replace(REGEX_NUMBER_CLEANER, '');\n\n      // handle cases when user pastes multiple characters\n      if (value.length > 1) {\n        return bulkUpdatePincode(currentIndex, value);\n      }\n      const newPins = [...pinNumbers];\n\n      newPins[currentIndex] = value;\n\n      if (value.length) {\n        inputRefs?.current?.[currentIndex + 1]?.focus();\n      }\n\n      updatePincode(currentIndex, newPins);\n    },\n    [updatePincode],\n  );\n\n  const onKeyUp = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      const inputHasValue = e.currentTarget.value.length;\n      const currentIndex = parseInt(e.currentTarget.dataset.id || '', 10);\n      const newPins = [...pinNumbers];\n\n      switch (e.key) {\n        case 'Backspace': {\n          // Always delete value of selected input\n          if (inputHasValue) {\n            newPins[currentIndex] = '';\n            updatePincode(currentIndex, newPins);\n          }\n\n          // Select the last input with a value\n          if (currentIndex) {\n            const lastIndexWithDigit = newPins.reduceRight((acc, current, index) => {\n              if (acc !== -1) return acc;\n              if (current !== '') return index;\n              return acc;\n            }, -1);\n\n            inputRefs?.current[lastIndexWithDigit >= 0 ? lastIndexWithDigit : 0]?.focus();\n          }\n          return;\n        }\n\n        case 'ArrowLeft': {\n          // Navigate left in a loop\n          const newIndex = currentIndex ? currentIndex - 1 : pinLength - 1;\n          inputRefs?.current[newIndex]?.focus();\n          return;\n        }\n\n        case 'ArrowRight': {\n          // Navigate right in a loop\n          const newIndex = currentIndex === pinLength - 1 ? 0 : currentIndex + 1;\n          inputRefs?.current[newIndex]?.focus();\n          return;\n        }\n\n        default: {\n          // Overwrite existing value if a new number value is pressed\n          const value = e.key.replace(REGEX_NUMBER_CLEANER, '');\n\n          if (inputHasValue && value.length && value !== e.currentTarget.value) {\n            newPins[currentIndex] = value;\n            updatePincode(currentIndex, newPins);\n            inputRefs?.current?.[currentIndex + 1]?.focus();\n          }\n        }\n      }\n    },\n    [onChange, updatePincode],\n  );\n\n  const formattedOriginName = originName ? `${originName} ` : '';\n\n  return (\n    <form\n      id={id}\n      className={css({\n        margin: 0,\n        minWidth: 0,\n        display: 'flex',\n        width: '100%',\n        justifyContent: 'space-between',\n        maxWidth: '30rem',\n        gap: 2,\n      })}\n    >\n      {pinNumbers.map((_, i) => (\n        <TextInput.Char\n          id={id ? `${id}-${i}` : undefined}\n          aria-label={`${formattedOriginName}one time password input ${i + 1}`}\n          data-id={i}\n          key={`${id || undefined}-${i}`}\n          name={`${formattedOriginName}one time password input ${i + 1}`}\n          value={pinNumbers[i] || ''}\n          className={cx(css({ caretColor: 'transparent' }), className)}\n          attr={{\n            onChange: onChangeProp,\n            onKeyUp,\n            autoComplete: i === 0 ? 'one-time-code' : 'off',\n            inputMode: 'numeric',\n          }}\n          ref={el => {\n            if (inputRefs?.current) {\n              inputRefs.current[i] = el;\n            }\n          }}\n        />\n      ))}\n    </form>\n  );\n};\n\nexport default PinCodeInput;\n"],"names":["REGEX_NUMBER_CLEANER","PinCodeInput","pinLength","onComplete","pins","onChange","originName","id","autoFocus","className","pinNumbers","setPinNumbers","useState","inputRefs","useRef","useEffect","prevPinNumbers","_a","updatePincode","currentIndex","strPin","bulkUpdatePincode","useCallback","text","newPins","code","_b","onChangeProp","e","value","onKeyUp","inputHasValue","lastIndexWithDigit","acc","current","index","newIndex","_c","_e","_d","formattedOriginName","_jsx","css","_","i","TextInput","cx","el"],"mappings":"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"}
+{"version":3,"file":"pincode-input.js","sources":["../../../../src/components/inputs/pincode-input.tsx"],"sourcesContent":["import { TextInput } from '@components/inputs/text-input';\nimport { css } from '@styled/css';\nimport { cx } from '@styled/css/cx';\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nexport type PinCodeInputProps = {\n  pinLength: 3 | 6;\n  onComplete: (pins: string) => void;\n  onChange: (pins: Array<string>) => void;\n  id?: string;\n  originName?: string;\n  autoFocus?: boolean;\n  className?: string;\n};\n\nconst REGEX_NUMBER_CLEANER = /\\D/g;\n\nexport const PinCodeInput = ({\n  pinLength,\n  onComplete = pins => pins,\n  onChange = pins => pins,\n  id = 'pin-code-input',\n  autoFocus = true,\n  className,\n}: PinCodeInputProps) => {\n  const [pinNumbers, setPinNumbers] = useState(() => Array.from({ length: pinLength }, () => ''));\n  const inputRefs = useRef<(HTMLInputElement | null)[]>(Array(pinLength).fill(null));\n\n  useEffect(() => {\n    setPinNumbers(prevPinNumbers => {\n      if (pinLength < prevPinNumbers.length) {\n        return prevPinNumbers.slice(0, pinLength);\n      } else if (pinLength > prevPinNumbers.length) {\n        return [...prevPinNumbers, ...Array(pinLength - prevPinNumbers.length).fill('')];\n      }\n      return prevPinNumbers;\n    });\n  }, [pinLength]);\n\n  useEffect(() => {\n    if (autoFocus && inputRefs.current[0]) {\n      inputRefs.current[0]?.focus();\n    }\n  }, [autoFocus, pinLength]);\n\n  const updatePincode = (currentIndex: number, pins: string[]) => {\n    setPinNumbers(pins);\n    onChange(pins);\n\n    const strPin = pins.join('');\n\n    if (strPin.length === pinLength) {\n      inputRefs.current[currentIndex]?.blur();\n      onComplete(strPin);\n    }\n  };\n\n  const bulkUpdatePincode = useCallback(\n    (currentIndex: number, text: string) => {\n      const newPins = [...pinNumbers];\n      text\n        .replace(REGEX_NUMBER_CLEANER, '')\n        .split('')\n        .forEach(code => {\n          if (currentIndex >= pinLength) {\n            return;\n          }\n          newPins[currentIndex] = code;\n          currentIndex++;\n          inputRefs?.current?.[currentIndex]?.focus();\n        });\n\n      updatePincode(currentIndex, newPins);\n    },\n    [pinNumbers, updatePincode],\n  );\n\n  const onChangeProp = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const currentIndex = parseInt(e.currentTarget.dataset.id || '', 10);\n      const value = e.target.value.replace(REGEX_NUMBER_CLEANER, '');\n\n      // handle cases when user pastes multiple characters\n      if (value.length > 1) {\n        return bulkUpdatePincode(currentIndex, value);\n      }\n      const newPins = [...pinNumbers];\n\n      newPins[currentIndex] = value;\n\n      if (value.length) {\n        inputRefs?.current?.[currentIndex + 1]?.focus();\n      }\n\n      updatePincode(currentIndex, newPins);\n    },\n    [updatePincode],\n  );\n\n  const onKeyUp = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      const inputHasValue = e.currentTarget.value.length;\n      const currentIndex = parseInt(e.currentTarget.dataset.id || '', 10);\n      const newPins = [...pinNumbers];\n\n      switch (e.key) {\n        case 'Backspace': {\n          // Always delete value of selected input\n          if (inputHasValue) {\n            newPins[currentIndex] = '';\n            updatePincode(currentIndex, newPins);\n          }\n\n          // Select the last input with a value\n          if (currentIndex) {\n            const lastIndexWithDigit = newPins.reduceRight((acc, current, index) => {\n              if (acc !== -1) return acc;\n              if (current !== '') return index;\n              return acc;\n            }, -1);\n\n            inputRefs?.current[lastIndexWithDigit >= 0 ? lastIndexWithDigit : 0]?.focus();\n          }\n          return;\n        }\n\n        case 'ArrowLeft': {\n          // Navigate left in a loop\n          const newIndex = currentIndex ? currentIndex - 1 : pinLength - 1;\n          inputRefs?.current[newIndex]?.focus();\n          return;\n        }\n\n        case 'ArrowRight': {\n          // Navigate right in a loop\n          const newIndex = currentIndex === pinLength - 1 ? 0 : currentIndex + 1;\n          inputRefs?.current[newIndex]?.focus();\n          return;\n        }\n\n        default: {\n          // Overwrite existing value if a new number value is pressed\n          const value = e.key.replace(REGEX_NUMBER_CLEANER, '');\n\n          if (inputHasValue && value.length && value !== e.currentTarget.value) {\n            newPins[currentIndex] = value;\n            updatePincode(currentIndex, newPins);\n            inputRefs?.current?.[currentIndex + 1]?.focus();\n          }\n        }\n      }\n    },\n    [onChange, updatePincode],\n  );\n\n  return (\n    <form\n      id={id}\n      className={css({\n        margin: 0,\n        minWidth: 0,\n        display: 'flex',\n        width: '100%',\n        justifyContent: 'space-between',\n        maxWidth: '30rem',\n        gap: 2,\n      })}\n    >\n      {pinNumbers.map((_, i) => (\n        <TextInput.Char\n          id={id ? `${id}-${i}` : undefined}\n          aria-label={`one time password input ${i + 1}`}\n          data-id={i}\n          key={`${id || undefined}-${i}`}\n          name={`one time password input ${i + 1}`}\n          value={pinNumbers[i] || ''}\n          className={cx(css({ caretColor: 'transparent' }), className)}\n          attr={{\n            onChange: onChangeProp,\n            onKeyUp,\n            autoComplete: i === 0 ? 'one-time-code' : 'off',\n            inputMode: 'numeric',\n          }}\n          ref={el => {\n            if (inputRefs?.current) {\n              inputRefs.current[i] = el;\n            }\n          }}\n        />\n      ))}\n    </form>\n  );\n};\n\nexport default PinCodeInput;\n"],"names":["REGEX_NUMBER_CLEANER","PinCodeInput","pinLength","onComplete","pins","onChange","id","autoFocus","className","pinNumbers","setPinNumbers","useState","inputRefs","useRef","useEffect","prevPinNumbers","_a","updatePincode","currentIndex","strPin","bulkUpdatePincode","useCallback","text","newPins","code","_b","onChangeProp","e","value","onKeyUp","inputHasValue","lastIndexWithDigit","acc","current","index","newIndex","_c","_e","_d","_jsx","css","_","i","TextInput","cx","el"],"mappings":"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"}

package/dist/es/recipes/overlay.js

@@ -1,2 +1,2 @@
-import{sva as a}from"@styled/css";const i=a({slots:["bg","container"],base:{bg:{height:"full",width:"full",pointerEvents:"all",position:"fixed",top:0,left:0},container:{height:"100vh",width:"100vw",maxWidth:"100rem",position:"relative",margin:"0 auto","@media (min-width: 48rem)":{height:"fit-content"}}},variants:{fullscreen:{true:{container:{maxWidth:"none"}}},animate:{false:{bg:{animationName:"none"}}},backgroundType:{blurred:{bg:{backdropBlur:"0.375rem",backdropFilter:"auto",backgroundColor:"surface.primary/70"}},solid:{bg:{backgroundColor:"surface.tertiary"}},transparent:{},none:{}},hide:{false:{}}},compoundVariants:[{animate:!0,hide:!1,css:{bg:{animationFillMode:"forwards",animationName:"fadeIn",animationDuration:"400ms"}}},{animate:!0,hide:!0,css:{bg:{animationFillMode:"forwards",animationName:"fadeOut",animationDuration:"400ms"}}}],defaultVariants:{animate:!0,backgroundType:"none",hide:!1}});export{i as overlay};
+import{sva as a}from"@styled/css";const i=a({slots:["bg","container"],base:{bg:{height:"full",width:"full",pointerEvents:"all",position:"fixed",top:0,left:0},container:{height:"100vh",width:"100vw",maxWidth:"100rem",position:"relative",margin:"0 auto","@media (min-width: 48rem)":{height:"fit-content"}}},variants:{fullscreen:{true:{container:{maxWidth:"none"}}},animate:{false:{bg:{animationName:"none"}}},backgroundType:{blurred:{bg:{backdropBlur:"0.375rem",backdropFilter:"auto"}},solid:{bg:{backgroundColor:"surface.tertiary"}},transparent:{},none:{}},hide:{false:{}}},compoundVariants:[{animate:!0,hide:!1,css:{bg:{animationFillMode:"forwards",animationName:"fadeIn",animationDuration:"400ms"}}},{animate:!0,hide:!0,css:{bg:{animationFillMode:"forwards",animationName:"fadeOut",animationDuration:"400ms"}}}],defaultVariants:{animate:!0,backgroundType:"none",hide:!1}});export{i as overlay};
 //# sourceMappingURL=overlay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../src/recipes/overlay.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const overlay = sva({\n  slots: ['bg', 'container'],\n  base: {\n    bg: {\n      height: 'full',\n      width: 'full',\n      pointerEvents: 'all',\n      position: 'fixed',\n      top: 0,\n      left: 0,\n    },\n    container: {\n      height: '100vh',\n      width: '100vw',\n      maxWidth: '100rem',\n      position: 'relative',\n      margin: '0 auto',\n\n      '@media (min-width: 48rem)': {\n        height: 'fit-content',\n      },\n    },\n  },\n  variants: {\n    fullscreen: {\n      true: {\n        container: {\n          maxWidth: 'none',\n        },\n      },\n    },\n    animate: {\n      false: {\n        bg: {\n          animationName: 'none',\n        },\n      },\n    },\n    backgroundType: {\n      blurred: {\n        bg: {\n          backdropBlur: '0.375rem',\n          backdropFilter: 'auto',\n          backgroundColor: 'surface.primary/70',\n        },\n      },\n      solid: {\n        bg: {\n          backgroundColor: 'surface.tertiary',\n        },\n      },\n      transparent: {},\n      none: {},\n    },\n    hide: { false: {} },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      hide: false,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeIn',\n          animationDuration: '400ms',\n        },\n      },\n    },\n    {\n      animate: true,\n      hide: true,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeOut',\n          animationDuration: '400ms',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    backgroundType: 'none',\n    hide: false,\n  },\n});\n\nexport type OverlayVariants = RecipeVariantProps<typeof overlay>;\n"],"names":["overlay","sva"],"mappings":"kCAEa,MAAAA,EAAUC,EAAI,CACzB,MAAO,CAAC,KAAM,WAAW,EACzB,KAAM,CACJ,GAAI,CACF,OAAQ,OACR,MAAO,OACP,cAAe,MACf,SAAU,QACV,IAAK,EACL,KAAM,CACP,EACD,UAAW,CACT,OAAQ,QACR,MAAO,QACP,SAAU,SACV,SAAU,WACV,OAAQ,SAER,4BAA6B,CAC3B,OAAQ,aACT,CACF,CACF,EACD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,UAAW,CACT,SAAU,MACX,CACF,CACF,EACD,QAAS,CACP,MAAO,CACL,GAAI,CACF,cAAe,MAChB,CACF,CACF,EACD,eAAgB,CACd,QAAS,CACP,GAAI,CACF,aAAc,WACd,eAAgB,OAChB,gBAAiB,oBAClB,CACF,EACD,MAAO,CACL,GAAI,CACF,gBAAiB,kBAClB,CACF,EACD,YAAa,CAAA,EACb,KAAM,CAAA,CACP,EACD,KAAM,CAAE,MAAO,CAAA,CAAI,CACpB,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,SACf,kBAAmB,OACpB,CACF,CACF,EACD,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,UACf,kBAAmB,OACpB,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,eAAgB,OAChB,KAAM,EACP,CACF,CAAA"}
+{"version":3,"file":"overlay.js","sources":["../../../src/recipes/overlay.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const overlay = sva({\n  slots: ['bg', 'container'],\n  base: {\n    bg: {\n      height: 'full',\n      width: 'full',\n      pointerEvents: 'all',\n      position: 'fixed',\n      top: 0,\n      left: 0,\n    },\n    container: {\n      height: '100vh',\n      width: '100vw',\n      maxWidth: '100rem',\n      position: 'relative',\n      margin: '0 auto',\n\n      '@media (min-width: 48rem)': {\n        height: 'fit-content',\n      },\n    },\n  },\n  variants: {\n    fullscreen: {\n      true: {\n        container: {\n          maxWidth: 'none',\n        },\n      },\n    },\n    animate: {\n      false: {\n        bg: {\n          animationName: 'none',\n        },\n      },\n    },\n    backgroundType: {\n      blurred: {\n        bg: {\n          backdropBlur: '0.375rem',\n          backdropFilter: 'auto',\n        },\n      },\n      solid: {\n        bg: {\n          backgroundColor: 'surface.tertiary',\n        },\n      },\n      transparent: {},\n      none: {},\n    },\n    hide: { false: {} },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      hide: false,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeIn',\n          animationDuration: '400ms',\n        },\n      },\n    },\n    {\n      animate: true,\n      hide: true,\n      css: {\n        bg: {\n          animationFillMode: 'forwards',\n          animationName: 'fadeOut',\n          animationDuration: '400ms',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    backgroundType: 'none',\n    hide: false,\n  },\n});\n\nexport type OverlayVariants = RecipeVariantProps<typeof overlay>;\n"],"names":["overlay","sva"],"mappings":"kCAEO,MAAMA,EAAUC,EAAI,CACzB,MAAO,CAAC,KAAM,WAAW,EACzB,KAAM,CACJ,GAAI,CACF,OAAQ,OACR,MAAO,OACP,cAAe,MACf,SAAU,QACV,IAAK,EACL,KAAM,CACP,EACD,UAAW,CACT,OAAQ,QACR,MAAO,QACP,SAAU,SACV,SAAU,WACV,OAAQ,SAER,4BAA6B,CAC3B,OAAQ,aACT,CACF,CACF,EACD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,UAAW,CACT,SAAU,MACX,CACF,CACF,EACD,QAAS,CACP,MAAO,CACL,GAAI,CACF,cAAe,MAChB,CACF,CACF,EACD,eAAgB,CACd,QAAS,CACP,GAAI,CACF,aAAc,WACd,eAAgB,MACjB,CACF,EACD,MAAO,CACL,GAAI,CACF,gBAAiB,kBAClB,CACF,EACD,YAAa,CAAA,EACb,KAAM,CAAA,CACP,EACD,KAAM,CAAE,MAAO,CAAI,CAAA,CACpB,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,SACf,kBAAmB,OACpB,CACF,CACF,EACD,CACE,QAAS,GACT,KAAM,GACN,IAAK,CACH,GAAI,CACF,kBAAmB,WACnB,cAAe,UACf,kBAAmB,OACpB,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,eAAgB,OAChB,KAAM,EACP,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.1s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.1s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:positive.darker","background]___[value:negative.darker","background]___[value:neutral.tertiary","mixBlendMode]___[value:multiply]___[cond:_light","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","background]___[value:ink.90","background]___[value:paper]___[cond:_dark","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before<___>_dark","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.lighter]___[cond:_groupHover<___>_dark","color]___[value:chalk","color]___[value:ink.90]___[cond:_dark","color]___[value:positive.base","color]___[value:positive.darker]___[cond:_groupHover","color]___[value:positive.darker]___[cond:_groupHover<___>_dark","color]___[value:negative.darker","color]___[value:negative.base]___[cond:_dark","color]___[value:negative.darkest]___[cond:_groupHover","color]___[value:negative.lighter]___[cond:_groupHover<___>_dark","color]___[value:text.secondary]___[cond:_groupHover","color]___[value:text.secondary]___[cond:_groupHover<___>_dark","color]___[value:text.tertiary","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","width]___[value:fit-content","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","textAlign]___[value:left","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","backgroundColor]___[value:surface.primary","borderRadius]___[value:1rem","cursor]___[value:default","height]___[value:10.75rem","width]___[value:10.75rem","alignItems]___[value:flex-start","alignItems]___[value:flex-end","overflow]___[value:hidden","overflow]___[value:visible","gap]___[value:0","gap]___[value:4","gap]___[value:5","gap]___[value:6","boxShadow]___[value:0px 1px 2px rgba(189, 189, 189, 0.3)","boxShadow]___[value:8px 8px 48px rgba(16, 15, 17, 0.14)","paddingInline]___[value:8","paddingBlock]___[value:6","padding]___[value:12","flex]___[value:1","maxWidth]___[value:29.125rem","maxWidth]___[value:full]___[cond:mdDown","opacity]___[value:0.3","backgroundColor]___[value:surface.tertiary","filter]___[value:brightness(0.9)]___[cond:_hover","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","height]___[value:100vh","width]___[value:100vw","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","height]___[value:100dvh]___[cond:@media only screen and (max-width: 767px)","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","maxWidth]___[value:100rem","margin]___[value:0 auto","maxWidth]___[value:none","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:wrap","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","width]___[value:auto","width]___[value:max","maxWidth]___[value:72","background]___[value:surface.tertiary]___[cond:_dark","position]___[value:absolute","paddingInline]___[value:3","borderRadius]___[value:xl","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","display]___[value:none","display]___[value:block","top]___[value:0%","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","right]___[value:100%","transform]___[value:translateX(10%) translateY(calc(-100% - 0.75rem))","left]___[value:100%","transform]___[value:translateX(-10%) translateY(calc(-100% - 0.75rem))","top]___[value:50%","left]___[value:0%","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-50%)","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-75%)","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-25%)","right]___[value:0%","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-50%)","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-75%)","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-25%)","bottom]___[value:0%","transform]___[value:translateX(-50%) translateY(calc(100% + 0.75rem))","transform]___[value:translateX(10%) translateY(calc(100% + 0.75rem))","transform]___[value:translateX(-10%) translateY(calc(100% + 0.75rem))","width]___[value:72","height]___[value:4","bottom]___[value:0","transform]___[value:translateX(-50%) translateY(0.75rem)","transform]___[value:translateX(-50%) translateY(-0.75rem)","width]___[value:4","height]___[value:48","right]___[value:-6","transform]___[value:translateX(-0.75rem) translateY(-50%)","left]___[value:-6","transform]___[value:translateX(0.75rem) translateY(-50%)","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","gap]___[value:10px","flexDirection]___[value:row","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","flexDirection]___[value:column","fill]___[value:white","truncate]___[value:true","opacity]___[value:0.8]___[cond:_disabled","height]___[value:auto","flexShrink]___[value:0","paddingTop]___[value:6","right]___[value:0","background]___[value:text.primary/20","background]___[value:rgba(0, 0, 0, .7)]___[cond:_dark","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","background]___[value:surface.secondary]___[cond:_dark","borderTopRadius]___[value:3xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","zIndex]___[value:10","paddingBottom]___[value:6","justifyContent]___[value:space-between","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","textStyle]___[value:neutral","transform]___[value:translateX(-100%)","transform]___[value:translateX(100%)","transform]___[value:translateX(0)","width]___[value:80","borderRightRadius]___[value:2xl","borderLeftRadius]___[value:2xl","--thickness]___[value:1px","borderBlockEndWidth]___[value:var(--thickness)","borderColor]___[value:surface.quaternary","gap]___[value:2.5","boxShadow]___[value:true","background]___[value:#ffc439","outlineColor]___[value:#ffc439","border]___[value:1px solid transparent","paddingBlock]___[value:2.5","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","flex]___[value:0 0 auto","borderRadius]___[value:9999px","animation]___[value:popIn 150ms","animation]___[value:popOut 150ms","animation]___[value:spin 1.5s linear infinite","stroke]___[value:text.primary","transformOrigin]___[value:center center","gap]___[value:1.5","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","borderRadius]___[value:2rem","borderWidth]___[value:thick","borderColor]___[value:surface.primary","background]___[value:surface.primary]___[cond:_dark","left]___[value:-50%","transform]___[value:skewX(-20deg)","backgroundImage]___[value:linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)","backgroundImage]___[value:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)]___[cond:_dark","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","background]___[value:neutral.quaternary","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","gap]___[value:3","userSelect]___[value:none","userSelect]___[value:auto","filter]___[value:blur(10px)","textWrap]___[value:nowrap","width]___[value:22","height]___[value:22","fontVariant]___[value:no-contextual","fontFamily]___[value:inherit","transition]___[value:none","gap]___[value:2","width]___[value:16","width]___[value:20","height]___[value:16","height]___[value:20","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","marginTop]___[value:8","marginTop]___[value:4","textStyle]___[value:subtle","height]___[value:24","width]___[value:24","flexGrow]___[value:0","padding]___[value:6","maxWidth]___[value:393","paddingTop]___[value:3","borderBottomColor]___[value:neutral.primary","borderBottomWidth]___[value:1px","width]___[value:6","flexDirection]___[value:column-reverse","borderRadius]___[value:60","height]___[value:11","width]___[value:11","width]___[value:10","left]___[value:9","top]___[value:11","height]___[value:7","width]___[value:7","borderRadius]___[value:30","borderWidth]___[value:2","width]___[value:5","height]___[value:5","borderRadius]___[value:0.375rem","borderRadius]___[value:md","backgroundColor]___[value:neutral.secondary]___[cond:_hover","backgroundColor]___[value:neutral.tertiary","fontWeight]___[value:bold","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","alignItems]___[value:start","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","opacity]___[value:0.5","opacity]___[value:1","width]___[value:40","height]___[value:40","width]___[value:6rem","width]___[value:4rem","minHeight]___[value:16","borderRadius]___[value:0.75rem","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","srOnly]___[value:true","marginLeft]___[value:3","caret]___[value:18","check]___[value:16","height]___[value:3rem","mult]___[value:2.5","display]___[value:inline-block","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:10","transition]___[value:border-color 0.2s ease","height]___[value:6","width]___[value:3","height]___[value:3","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","marginBlock]___[value:3","pointerEvents]___[value:initial","height]___[value:76px","maxWidth]___[value:115px","height]___[value:100%","minWidth]___[value:20","paddingInline]___[value:10","width]___[value:max-content","border]___[value:thin solid transparent","color]___[value:text.primary]___[cond:_groupHover","height]___[value:6.25rem","background]___[value:text.primary/6","borderColor]___[value:text.primary/10","borderWidth]___[value:medium","borderRadius]___[value:52","backdropFilter]___[value:blur(24px)","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","backgroundColor]___[value:text.primary/1","backgroundColor]___[value:text.primary/5","backdropFilter]___[value:blur(8px)","borderColor]___[value:text.primary/6","paddingBlock]___[value:5","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","padding]___[value:10","overflow]___[value:scroll","width]___[value:200px","maxWidth]___[value:200px","display]___[value:none]___[cond:@media (max-width: 370px)","minWidth]___[value:88px","textStyle]___[value:negative","minWidth]___[value:fit-content","minHeight]___[value:fit-content","transition]___[value:transform 0.1s","width]___[value:114px","height]___[value:48px","width]___[value:7px","height]___[value:7px","background]___[value:positive.base","bottom]___[value:-1px","right]___[value:-1px","translateX]___[value:6","translateY]___[value:6","translateX]___[value:3","translateY]___[value:3","minHeight]___[value:18px","minWidth]___[value:18px","alignItems]___[value:baseline","margin]___[value:1","backgroundColor]___[value:neutral.secondary","backgroundColor]___[value:negative.lighter","gridTemplateColumns]___[value:2","gap]___[value:8"],"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.1s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.1s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:positive.darker","background]___[value:negative.darker","background]___[value:neutral.tertiary","mixBlendMode]___[value:multiply]___[cond:_light","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","background]___[value:ink.90","background]___[value:paper]___[cond:_dark","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before<___>_dark","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.lighter]___[cond:_groupHover<___>_dark","color]___[value:chalk","color]___[value:ink.90]___[cond:_dark","color]___[value:positive.base","color]___[value:positive.darker]___[cond:_groupHover","color]___[value:positive.darker]___[cond:_groupHover<___>_dark","color]___[value:negative.darker","color]___[value:negative.base]___[cond:_dark","color]___[value:negative.darkest]___[cond:_groupHover","color]___[value:negative.lighter]___[cond:_groupHover<___>_dark","color]___[value:text.secondary]___[cond:_groupHover","color]___[value:text.secondary]___[cond:_groupHover<___>_dark","color]___[value:text.tertiary","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","width]___[value:fit-content","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","textAlign]___[value:left","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","backgroundColor]___[value:surface.primary","borderRadius]___[value:1rem","cursor]___[value:default","height]___[value:10.75rem","width]___[value:10.75rem","alignItems]___[value:flex-start","alignItems]___[value:flex-end","overflow]___[value:hidden","overflow]___[value:visible","gap]___[value:0","gap]___[value:4","gap]___[value:5","gap]___[value:6","boxShadow]___[value:0px 1px 2px rgba(189, 189, 189, 0.3)","boxShadow]___[value:8px 8px 48px rgba(16, 15, 17, 0.14)","paddingInline]___[value:8","paddingBlock]___[value:6","padding]___[value:12","flex]___[value:1","maxWidth]___[value:29.125rem","maxWidth]___[value:full]___[cond:mdDown","opacity]___[value:0.3","backgroundColor]___[value:surface.tertiary","filter]___[value:brightness(0.9)]___[cond:_hover","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","height]___[value:100vh","width]___[value:100vw","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","height]___[value:100dvh]___[cond:@media only screen and (max-width: 767px)","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","maxWidth]___[value:100rem","margin]___[value:0 auto","maxWidth]___[value:none","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:wrap","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","width]___[value:auto","width]___[value:max","maxWidth]___[value:72","background]___[value:surface.tertiary]___[cond:_dark","position]___[value:absolute","paddingInline]___[value:3","borderRadius]___[value:xl","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","display]___[value:none","display]___[value:block","top]___[value:0%","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","right]___[value:100%","transform]___[value:translateX(10%) translateY(calc(-100% - 0.75rem))","left]___[value:100%","transform]___[value:translateX(-10%) translateY(calc(-100% - 0.75rem))","top]___[value:50%","left]___[value:0%","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-50%)","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-75%)","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-25%)","right]___[value:0%","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-50%)","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-75%)","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-25%)","bottom]___[value:0%","transform]___[value:translateX(-50%) translateY(calc(100% + 0.75rem))","transform]___[value:translateX(10%) translateY(calc(100% + 0.75rem))","transform]___[value:translateX(-10%) translateY(calc(100% + 0.75rem))","width]___[value:72","height]___[value:4","bottom]___[value:0","transform]___[value:translateX(-50%) translateY(0.75rem)","transform]___[value:translateX(-50%) translateY(-0.75rem)","width]___[value:4","height]___[value:48","right]___[value:-6","transform]___[value:translateX(-0.75rem) translateY(-50%)","left]___[value:-6","transform]___[value:translateX(0.75rem) translateY(-50%)","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","gap]___[value:10px","flexDirection]___[value:row","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","flexDirection]___[value:column","fill]___[value:white","truncate]___[value:true","opacity]___[value:0.8]___[cond:_disabled","height]___[value:auto","flexShrink]___[value:0","paddingTop]___[value:6","right]___[value:0","background]___[value:text.primary/20","background]___[value:rgba(0, 0, 0, .7)]___[cond:_dark","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","background]___[value:surface.secondary]___[cond:_dark","borderTopRadius]___[value:3xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","zIndex]___[value:10","paddingBottom]___[value:6","justifyContent]___[value:space-between","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","textStyle]___[value:neutral","transform]___[value:translateX(-100%)","transform]___[value:translateX(100%)","transform]___[value:translateX(0)","width]___[value:80","borderRightRadius]___[value:2xl","borderLeftRadius]___[value:2xl","--thickness]___[value:1px","borderBlockEndWidth]___[value:var(--thickness)","borderColor]___[value:surface.quaternary","gap]___[value:2.5","boxShadow]___[value:true","background]___[value:#ffc439","outlineColor]___[value:#ffc439","border]___[value:1px solid transparent","paddingBlock]___[value:2.5","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","flex]___[value:0 0 auto","borderRadius]___[value:9999px","animation]___[value:popIn 150ms","animation]___[value:popOut 150ms","animation]___[value:spin 1.5s linear infinite","stroke]___[value:text.primary","transformOrigin]___[value:center center","gap]___[value:1.5","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","borderRadius]___[value:2rem","borderWidth]___[value:thick","borderColor]___[value:surface.primary","background]___[value:surface.primary]___[cond:_dark","left]___[value:-50%","transform]___[value:skewX(-20deg)","backgroundImage]___[value:linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)","backgroundImage]___[value:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)]___[cond:_dark","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","background]___[value:neutral.quaternary","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","gap]___[value:3","userSelect]___[value:none","userSelect]___[value:auto","filter]___[value:blur(10px)","textWrap]___[value:nowrap","width]___[value:22","height]___[value:22","fontVariant]___[value:no-contextual","fontFamily]___[value:inherit","transition]___[value:none","gap]___[value:2","width]___[value:16","width]___[value:20","height]___[value:16","height]___[value:20","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","marginTop]___[value:8","marginTop]___[value:4","textStyle]___[value:subtle","height]___[value:24","width]___[value:24","flexGrow]___[value:0","padding]___[value:6","maxWidth]___[value:393","paddingTop]___[value:3","borderBottomColor]___[value:neutral.primary","borderBottomWidth]___[value:1px","width]___[value:6","flexDirection]___[value:column-reverse","borderRadius]___[value:60","height]___[value:11","width]___[value:11","width]___[value:10","left]___[value:9","top]___[value:11","height]___[value:7","width]___[value:7","borderRadius]___[value:30","borderWidth]___[value:2","width]___[value:5","height]___[value:5","borderRadius]___[value:0.375rem","borderRadius]___[value:md","backgroundColor]___[value:neutral.secondary]___[cond:_hover","backgroundColor]___[value:neutral.tertiary","fontWeight]___[value:bold","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","alignItems]___[value:start","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","opacity]___[value:0.5","opacity]___[value:1","width]___[value:40","height]___[value:40","width]___[value:6rem","width]___[value:4rem","minHeight]___[value:16","borderRadius]___[value:0.75rem","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","srOnly]___[value:true","marginLeft]___[value:3","caret]___[value:18","check]___[value:16","height]___[value:3rem","mult]___[value:2.5","display]___[value:inline-block","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:10","transition]___[value:border-color 0.2s ease","height]___[value:6","width]___[value:3","height]___[value:3","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","marginBlock]___[value:3","pointerEvents]___[value:initial","height]___[value:76px","maxWidth]___[value:115px","height]___[value:100%","minWidth]___[value:20","paddingInline]___[value:10","width]___[value:max-content","border]___[value:thin solid transparent","color]___[value:text.primary]___[cond:_groupHover","height]___[value:6.25rem","background]___[value:text.primary/6","borderColor]___[value:text.primary/10","borderWidth]___[value:medium","borderRadius]___[value:52","backdropFilter]___[value:blur(24px)","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","backgroundColor]___[value:text.primary/1","backgroundColor]___[value:text.primary/5","backdropFilter]___[value:blur(8px)","borderColor]___[value:text.primary/6","paddingBlock]___[value:5","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","padding]___[value:10","overflow]___[value:scroll","width]___[value:200px","maxWidth]___[value:200px","display]___[value:none]___[cond:@media (max-width: 370px)","minWidth]___[value:88px","textStyle]___[value:negative","minWidth]___[value:fit-content","minHeight]___[value:fit-content","transition]___[value:transform 0.1s","width]___[value:114px","height]___[value:48px","width]___[value:7px","height]___[value:7px","background]___[value:positive.base","bottom]___[value:-1px","right]___[value:-1px","translateX]___[value:6","translateY]___[value:6","translateX]___[value:3","translateY]___[value:3","minHeight]___[value:18px","minWidth]___[value:18px","alignItems]___[value:baseline","margin]___[value:1","backgroundColor]___[value:neutral.secondary","backgroundColor]___[value:negative.lighter","gridTemplateColumns]___[value:2","gap]___[value:8"],"recipes":{}}}

package/dist/types/components/inputs/pincode-input.d.ts

@@ -7,6 +7,6 @@ export type PinCodeInputProps = {
     autoFocus?: boolean;
     className?: string;
 };
-export declare const PinCodeInput: ({ pinLength, onComplete, onChange, originName, id, autoFocus, className, }: PinCodeInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PinCodeInput: ({ pinLength, onComplete, onChange, id, autoFocus, className, }: PinCodeInputProps) => import("react/jsx-runtime").JSX.Element;
 export default PinCodeInput;
 //# sourceMappingURL=pincode-input.d.ts.map

package/dist/types/components/inputs/pincode-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pincode-input.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/pincode-input.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC;IACjB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,YAAY,+EAQtB,iBAAiB,4CA0KnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"pincode-input.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/pincode-input.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC;IACjB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,YAAY,mEAOtB,iBAAiB,4CAwKnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -19,7 +19,6 @@ export declare const overlay: import("../../styled-system/types").SlotRecipeRunt
             bg: {
                 backdropBlur: "0.375rem";
                 backdropFilter: "auto";
-                backgroundColor: "surface.primary/70";
             };
         };
         solid: {

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

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

package/package.json

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