npm - @magiclabs/ui-components - Versions diffs - 1.49.3 → 1.50.0 - Mend

@magiclabs/ui-components 1.49.3 → 1.50.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

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

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

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

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

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

@@ -1,2 +1,2 @@
-"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:u,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:u},()=>"")),c=f.useRef(Array(u).fill(null));f.useEffect(()=>{x(e=>u<e.length?e.slice(0,u):u>e.length?[...e,...Array(u-e.length).fill("")]:e)},[u]),f.useEffect(()=>{var e;C&&c.current[0]&&((e=c.current[0])===null||e===void 0||e.focus())},[C,u]);const d=(e,t)=>{var r;x(t),m(t);const n=t.join("");n.length===u&&((r=c.current[e])===null||r===void 0||r.blur(),j(n))},I=f.useCallback((e,t)=>{const r=[...o];t.replace(g,"").split("").forEach(n=>{var a,s;e>=u||(r[e]=n,e++,(s=(a=c?.current)===null||a===void 0?void 0:a[e])===null||s===void 0||s.focus())}),d(e,r)},[o,d]),q=f.useCallback(e=>{var t,r;const n=parseInt(e.currentTarget.dataset.id||"",10),a=e.target.value.replace(g,"");if(a.length>1)return I(n,a);const s=[...o];s[n]=a,a.length&&((r=(t=c?.current)===null||t===void 0?void 0:t[n+1])===null||r===void 0||r.focus()),d(n,s)},[d]),A=f.useCallback(e=>{var t,r,n,a,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);(t=c?.current[l>=0?l:0])===null||t===void 0||t.focus()}return}case"ArrowLeft":{const l=i?i-1:u-1;(r=c?.current[l])===null||r===void 0||r.focus();return}case"ArrowRight":{const l=i===u-1?0:i+1;(n=c?.current[l])===null||n===void 0||n.focus();return}default:{const l=e.key.replace(g,"");y&&l.length&&l!==e.currentTarget.value&&(p[i]=l,d(i,p),(s=(a=c?.current)===null||a===void 0?void 0:a[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,t)=>b.jsx(E.TextInput.Char,{id:v?`${v}-${t}`:void 0,"aria-label":`one time password input ${t+1}`,"data-id":t,name:`one time password input ${t+1}`,value:o[t]||"",className:N.cx(k.css({caretColor:"transparent",rounded:"0.5rem"}),w),attr:{onChange:q,onKeyUp:A,autoComplete:t===0?"one-time-code":"off",inputMode:"numeric"},ref:r=>{c?.current&&(c.current[t]=r)}},`${v||void 0}-${t}`))})};exports.PinCodeInput=$,exports.default=$;
+"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 h=/\D/g,$=({pinLength:n,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:n},()=>"")),c=f.useRef(Array(n).fill(null));f.useEffect(()=>{x(e=>n<e.length?e.slice(0,n):n>e.length?[...e,...Array(n-e.length).fill("")]:e)},[n]),f.useEffect(()=>{var e;C&&c.current[0]&&((e=c.current[0])===null||e===void 0||e.focus())},[C,n]);const d=(e,r)=>{var t;x(r),m(r);const u=r.join("");u.length===n&&((t=c.current[e])===null||t===void 0||t.blur(),j(u))},I=f.useCallback((e,r)=>{const t=[...o];r.replace(h,"").split("").forEach(u=>{var a,l;e>=n||(t[e]=u,e++,(l=(a=c?.current)===null||a===void 0?void 0:a[e])===null||l===void 0||l.focus())}),d(e,t)},[o,d]),q=f.useCallback(e=>{var r,t;const u=parseInt(e.currentTarget.dataset.id||"",10),a=e.target.value.replace(h,"");if(a.length>1)return I(u,a);const l=[...o];l[u]=a,a.length&&((t=(r=c?.current)===null||r===void 0?void 0:r[u+1])===null||t===void 0||t.focus()),d(u,l)},[d]),A=f.useCallback(e=>{var r,t,u,a,l;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 s=p.reduceRight((g,R,T)=>g!==-1?g:R!==""?T:g,-1);(r=c?.current[s>=0?s:0])===null||r===void 0||r.focus()}return}case"ArrowLeft":{const s=i?i-1:n-1;(t=c?.current[s])===null||t===void 0||t.focus();return}case"ArrowRight":{const s=i===n-1?0:i+1;(u=c?.current[s])===null||u===void 0||u.focus();return}default:{const s=e.key.replace(h,"");y&&s.length&&s!==e.currentTarget.value&&(p[i]=s,d(i,p),(l=(a=c?.current)===null||a===void 0?void 0:a[i+1])===null||l===void 0||l.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",rounded:"0.5rem",marginRight:n===6&&r===2?4:0}),w),attr:{onChange:q,onKeyUp:A,autoComplete:r===0?"one-time-code":"off",inputMode:"numeric"},ref:t=>{c?.current&&(c.current[r]=t)}},`${v||void 0}-${r}`))})};exports.PinCodeInput=$,exports.default=$;
 //# sourceMappingURL=pincode-input.js.map

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

	@@ -1 +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 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', rounded: '0.5rem' }), 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","value","onKeyUp","inputHasValue","lastIndexWithDigit","acc","current","index","newIndex","_c","_e","_d","_jsx","css","_","i","TextInput","cx","el"],"mappings":"4MAgBA,MAAMA,EAAuB,MAEhBC,EAAe,CAAC,CAC3B,UAAAC,EACA,WAAAC,EAAaC,GAAQA,EACrB,SAAAC,EAAWD,GAAQA,EACnB,GAAAE,EAAK,iBACL,UAAAC,EAAY,GACZ,UAAAC,CAAS,IACa,CACtB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAAS,IAAM,MAAM,KAAK,CAAE,OAAQT,CAAW,EAAE,IAAM,EAAE,CAAC,EACxFU,EAAYC,EAAAA,OAAoC,MAAMX,CAAS,EAAE,KAAK,IAAI,CAAC,EAEjFY,~~EAAU~~,~~UAAA~~,IAAK,CACbJ,EAAcK,GACRb,EAAYa,EAAe,OACtBA,EAAe,MAAM,EAAGb,CAAS,EAC/BA,EAAYa,EAAe,OAC7B,CAAC,GAAGA,EAAgB,GAAG,MAAMb,EAAYa,EAAe,MAAM,EAAE,KAAK,EAAE,CAAC,EAE1EA,CACR,CACH,EAAG,CAACb,CAAS,CAAC,EAEdY,EAAU,UAAA,IAAK,OACTP,GAAaK,EAAU,QAAQ,CAAC,KAClCI,EAAAJ,EAAU,QAAQ,CAAC,KAAC,MAAAI,IAAA,QAAAA,EAAE,~~MAAK~~,~~EAE/B~~,EAAG,CAACT,EAAWL,CAAS,CAAC,EAEzB,MAAMe,EAAgB,CAACC,EAAsBd,IAAkB,OAC7DM,EAAcN,CAAI,EAClBC,EAASD,CAAI,EAEb,MAAMe,EAASf,EAAK,KAAK,EAAE,EAEvBe,EAAO,SAAWjB,KACpBc,EAAAJ,EAAU,QAAQM,CAAY,KAAC,MAAAF,IAAA,QAAAA,EAAE,~~KAAI~~,~~EACrCb~~,EAAWgB,CAAM,EAErB,EAEMC,EAAoBC,EAAAA,YACxB,CAACH,EAAsBI,IAAgB,CACrC,MAAMC,EAAU,CAAC,GAAGd,CAAU,EAC9Ba,EACG,QAAQtB,EAAsB,EAAE,EAChC,MAAM,EAAE,EACR,QAAQwB,GAAO,SACVN,GAAgBhB,IAGpBqB,EAAQL,CAAY,EAAIM,EACxBN,KACAO,GAAAT,EAAAJ,GAAW,WAAO,MAAAI,IAAA,OAAA,OAAAA,EAAGE,CAAY,KAAG,MAAAO,IAAA,QAAAA,EAAA,MACtC,EAAA,CAAC,EAEHR,EAAcC,EAAcK,CAAO,CACrC,EACA,CAACd,EAAYQ,CAAa,CAAC,EAGvBS,EAAeL,~~cAClB~~,GAA0C,SACzC,~~MAAMH~~,EAAe,~~SAAS~~,EAAE,cAAc,QAAQ,IAAM,GAAI,EAAE,~~EAC5DS~~,~~EAAQ~~,EAAE,OAAO,MAAM,QAAQ3B,EAAsB,EAAE,EAG7D,~~GAAI2B~~,EAAM,OAAS,EACjB,~~OAAOP~~,EAAkBF,~~EAAcS~~,CAAK,EAE9C,~~MAAMJ~~,EAAU,CAAC,GAAGd,CAAU,EAE9Bc,EAAQL,CAAY,~~EAAIS~~,EAEpBA,EAAM,~~UACRF~~,KAAAb,GAAW,WAAU,MAAAI,IAAA,OAAA,OAAAA,EAAAE,EAAe,CAAC,KAAG,MAAAO,IAAA,QAAAA,EAAA,~~MAG1CR~~,~~GAAAA,~~EAAcC,EAAcK,CAAO,CACrC,EACA,CAACN,CAAa,CAAC,~~EAGXW~~,~~EAAUP~~,EAAAA,~~YACb~~,GAA4C,eAC3C,~~MAAMQ~~,~~EAAgB~~,EAAE,cAAc,MAAM,~~OACtCX~~,EAAe,~~SAAS~~,EAAE,cAAc,QAAQ,IAAM,GAAI,EAAE,~~EAC5DK~~,EAAU,CAAC,GAAGd,CAAU,EAE9B,~~OAAQ~~,EAAE,~~IACR~~,~~CAAA~~,IAAK,YAAa,CAQhB,~~GANIoB~~,~~IACFN~~,EAAQL,CAAY,EAAI,GACxBD,EAAcC,EAAcK,CAAO,GAIjCL,EAAc,CAChB,~~MAAMY~~,~~EAAqBP~~,EAAQ,YAAY,~~CAACQ~~,EAAKC,EAASC,IACxDF,IAAQ,GAAWA,EACnBC,IAAY,GAAWC,EACpBF,EACN,EAAE,~~GAELf~~,EAAAJ,GAAW,~~QAAQkB~~,GAAsB,EAAIA,EAAqB,CAAC,KAAC,~~MAAAd~~,IAAA,QAAAA,EAAE,~~MAAK~~,~~CAC7E~~,CACA,MACF,CAEA,IAAK,YAAa,CAEhB,~~MAAMkB~~,~~EAAWhB~~,EAAeA,EAAe,EAAIhB,EAAY,GAC/DuB,EAAAb,GAAW,~~QAAQsB~~,CAAQ,KAAG,~~MAAAT~~,IAAA,QAAAA,EAAA,~~QAC9B~~,MACF,CAEA,IAAK,aAAc,CAEjB,~~MAAMS~~,~~EAAWhB~~,IAAiBhB,EAAY,EAAI,EAAIgB,EAAe,~~GACrEiB~~,~~EAAAvB~~,GAAW,~~QAAQsB~~,CAAQ,KAAG,MAAAC,IAAA,QAAAA,EAAA,MAAA,EAC9B,MACF,CAEA,QAAS,CAEP,MAAMR,~~EAAQ~~,EAAE,IAAI,QAAQ3B,EAAsB,EAAE,~~EAEhD6B~~,GAAiBF,EAAM,QAAUA,~~IAAU~~,EAAE,cAAc,QAC7DJ,EAAQL,CAAY,~~EAAIS~~,~~EACxBV~~,EAAcC,EAAcK,CAAO,~~GACnCa~~,~~KAAAxB~~,GAAW,WAAU,~~MAAAyB~~,IAAA,OAAA,OAAAA,~~EAAAnB~~,EAAe,CAAC,KAAG,~~MAAAkB~~,IAAA,QAAAA,EAAA,QAE5C,CACF,CACF,EACA,~~CAAC/B~~,EAAUY,CAAa,CAAC,EAG3B,~~OACEqB~~,EAAAA,YACE,~~GAAIhC~~,EACJ,~~UAAWiC~~,EAAAA,IAAI,CACb,OAAQ,EACR,SAAU,EACV,QAAS,OACT,MAAO,OACP,eAAgB,gBAChB,SAAU,QACV,IAAK,CACN,CAAA,~~WAEA9B~~,EAAW,IAAI,~~CAAC+B~~,EAAGC,IAClBH,EAAAA,IAACI,~~YAAU~~,KACT,CAAA,~~GAAIpC~~,EAAK,GAAGA,CAAE,~~IAAImC~~,CAAC,GAAK,OAAS,aACrB,2BAA2BA,EAAI,CAAC,GAAE,UACrCA,EAET,KAAM,2BAA2BA,EAAI,CAAC,GACtC,~~MAAOhC~~,~~EAAWgC~~,CAAC,GAAK,GACxB,UAAWE,EAAAA,~~GAAGJ~~,EAAAA,IAAI,~~CAAE~~,WAAY,~~cAAe~~,QAAS,~~SAAU~~,~~EAAG~~/B,CAAS,~~EAC9E~~,KAAM,CACJ,SAAUkB,EACV,~~QAAAE~~,EACA,aAAca,IAAM,EAAI,gBAAkB,MAC1C,UAAW,SACZ,EACD,IAAKG,GAAK,~~CACJhC~~,GAAW,UACbA,EAAU,~~QAAQ6B~~,CAAC,EAAIG,EAE3B,~~CAdK~~,EAAA,~~GAAGtC~~,GAAM,MAAS,~~IAAImC~~,CAAC,EAAE,~~CAgBjC~~,CAAC,CAAA,CAGR"}
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 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(\n css({\n caretColor: 'transparent',\n rounded: '0.5rem',\n marginRight: pinLength === 6 && i === 2 ? 4 : 0,\n }),\n className,\n )}\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/components/inputs/phone-input.js CHANGED Viewed

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

package/dist/es/components/inputs/phone-input.js.map CHANGED Viewed

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

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

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

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

	@@ -1 +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 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', rounded: '0.5rem' }), 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":"uOAgBA,MAAMA,EAAuB,MAEhBC,EAAe,CAAC,CAC3B,UAAAC,EACA,WAAAC,EAAaC,GAAQA,EACrB,SAAAC,EAAWD,GAAQA,EACnB,GAAAE,EAAK,iBACL,UAAAC,EAAY,GACZ,UAAAC,CAAS,IACa,CACtB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAS,IAAM,MAAM,KAAK,CAAE,OAAQT,CAAW,EAAE,IAAM,EAAE,CAAC,EACxFU,EAAYC,EAAoC,MAAMX,CAAS,EAAE,KAAK,IAAI,CAAC,EAEjFY,EAAU,IAAK,CACbJ,EAAcK,GACRb,EAAYa,EAAe,OACtBA,EAAe,MAAM,EAAGb,CAAS,EAC/BA,EAAYa,EAAe,OAC7B,CAAC,GAAGA,EAAgB,GAAG,MAAMb,EAAYa,EAAe,MAAM,EAAE,KAAK,EAAE,CAAC,EAE1EA,CACR,CACH,EAAG,CAACb,CAAS,CAAC,EAEdY,EAAU,IAAK,OACTP,GAAaK,EAAU,QAAQ,CAAC,KAClCI,EAAAJ,EAAU,QAAQ,CAAC,KAAC,MAAAI,IAAA,QAAAA,EAAE,~~MAAK~~,~~EAE/B~~,EAAG,CAACT,EAAWL,CAAS,CAAC,EAEzB,MAAMe,EAAgB,CAACC,EAAsBd,IAAkB,OAC7DM,EAAcN,CAAI,EAClBC,EAASD,CAAI,EAEb,MAAMe,EAASf,EAAK,KAAK,EAAE,EAEvBe,EAAO,SAAWjB,KACpBc,EAAAJ,EAAU,QAAQM,CAAY,KAAC,MAAAF,IAAA,QAAAA,EAAE,~~KAAI~~,~~EACrCb~~,EAAWgB,CAAM,EAErB,EAEMC,EAAoBC,EACxB,CAACH,EAAsBI,IAAgB,CACrC,MAAMC,EAAU,CAAC,GAAGd,CAAU,EAC9Ba,EACG,QAAQtB,EAAsB,EAAE,EAChC,MAAM,EAAE,EACR,QAAQwB,GAAO,SACVN,GAAgBhB,IAGpBqB,EAAQL,CAAY,EAAIM,EACxBN,KACAO,GAAAT,EAAAJ,GAAW,WAAO,MAAAI,IAAA,OAAA,OAAAA,EAAGE,CAAY,KAAG,MAAAO,IAAA,QAAAA,EAAA,MACtC,EAAA,CAAC,EAEHR,EAAcC,EAAcK,CAAO,CACrC,EACA,CAACd,EAAYQ,CAAa,CAAC,EAGvBS,EAAeL,EAClBM,GAA0C,SACzC,MAAMT,EAAe,SAASS,EAAE,cAAc,QAAQ,IAAM,GAAI,EAAE,EAC5DC,EAAQD,EAAE,OAAO,MAAM,QAAQ3B,EAAsB,EAAE,EAG7D,GAAI4B,EAAM,OAAS,EACjB,OAAOR,EAAkBF,EAAcU,CAAK,EAE9C,MAAML,EAAU,CAAC,GAAGd,CAAU,EAE9Bc,EAAQL,CAAY,EAAIU,EAEpBA,EAAM,UACRH,KAAAb,GAAW,WAAU,MAAAI,IAAA,OAAA,OAAAA,EAAAE,EAAe,CAAC,KAAG,MAAAO,IAAA,QAAAA,EAAA,~~MAG1CR~~,~~GAAAA,~~EAAcC,EAAcK,CAAO,CACrC,EACA,CAACN,CAAa,CAAC,EAGXY,EAAUR,EACbM,GAA4C,eAC3C,MAAMG,EAAgBH,EAAE,cAAc,MAAM,OACtCT,EAAe,SAASS,EAAE,cAAc,QAAQ,IAAM,GAAI,EAAE,EAC5DJ,EAAU,CAAC,GAAGd,CAAU,EAE9B,OAAQkB,EAAE,~~IACR~~,~~CAAA~~,IAAK,YAAa,CAQhB,GANIG,IACFP,EAAQL,CAAY,EAAI,GACxBD,EAAcC,EAAcK,CAAO,GAIjCL,EAAc,CAChB,MAAMa,EAAqBR,EAAQ,YAAY,CAACS,EAAKC,EAASC,IACxDF,IAAQ,GAAWA,EACnBC,IAAY,GAAWC,EACpBF,EACN,EAAE,GAELhB,EAAAJ,GAAW,QAAQmB,GAAsB,EAAIA,EAAqB,CAAC,KAAC,MAAAf,IAAA,QAAAA,EAAE,~~MAAK~~,~~CAC7E~~,CACA,MACF,CAEA,IAAK,YAAa,CAEhB,MAAMmB,EAAWjB,EAAeA,EAAe,EAAIhB,EAAY,GAC/DuB,EAAAb,GAAW,QAAQuB,CAAQ,KAAG,MAAAV,IAAA,QAAAA,EAAA,~~QAC9B~~,MACF,CAEA,IAAK,aAAc,CAEjB,MAAMU,EAAWjB,IAAiBhB,EAAY,EAAI,EAAIgB,EAAe,GACrEkB,EAAAxB,GAAW,QAAQuB,CAAQ,KAAG,MAAAC,IAAA,QAAAA,EAAA,MAAA,EAC9B,MACF,CAEA,QAAS,CAEP,MAAMR,EAAQD,EAAE,IAAI,QAAQ3B,EAAsB,EAAE,EAEhD8B,GAAiBF,EAAM,QAAUA,IAAUD,EAAE,cAAc,QAC7DJ,EAAQL,CAAY,EAAIU,EACxBX,EAAcC,EAAcK,CAAO,GACnCc,KAAAzB,GAAW,WAAU,MAAA0B,IAAA,OAAA,OAAAA,EAAApB,EAAe,CAAC,KAAG,MAAAmB,IAAA,QAAAA,EAAA,QAE5C,CACF,CACF,EACA,CAAChC,EAAUY,CAAa,CAAC,EAG3B,OACEsB,UACE,GAAIjC,EACJ,UAAWkC,EAAI,CACb,OAAQ,EACR,SAAU,EACV,QAAS,OACT,MAAO,OACP,eAAgB,gBAChB,SAAU,QACV,IAAK,CACN,CAAA,~~WAEA~~/B,EAAW,IAAI,CAACgC,EAAGC,IAClBH,EAACI,EAAU,KACT,CAAA,GAAIrC,EAAK,GAAGA,CAAE,IAAIoC,CAAC,GAAK,OAAS,aACrB,2BAA2BA,EAAI,CAAC,GAAE,UACrCA,EAET,KAAM,2BAA2BA,EAAI,CAAC,GACtC,MAAOjC,EAAWiC,CAAC,GAAK,GACxB,UAAWE,~~EAAGJ~~,EAAI,~~CAAE~~,WAAY,~~cAAe~~,QAAS,~~SAAU~~,~~EAAGhC~~,CAAS,~~EAC9E~~,KAAM,CACJ,SAAUkB,EACV,QAAAG,EACA,aAAca,IAAM,EAAI,gBAAkB,MAC1C,UAAW,SACZ,EACD,IAAKG,GAAK,CACJjC,GAAW,UACbA,EAAU,QAAQ8B,CAAC,EAAIG,EAE3B,~~CAdK~~,EAAA,GAAGvC,GAAM,MAAS,IAAIoC,CAAC,EAAE,~~CAgBjC~~,CAAC,CAAA,CAGR"}
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 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(\n css({\n caretColor: 'transparent',\n rounded: '0.5rem',\n marginRight: pinLength === 6 && i === 2 ? 4 : 0,\n }),\n className,\n )}\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/panda.buildinfo.json CHANGED Viewed

	@@ -1 +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","height]___[value:auto","top]___[value:0]___[cond:@media (min-width: 48rem)","animationName]___[value:scaleIn","animationDuration]___[value:250ms","height]___[value:100dvh]___[cond:@media only screen and (max-width: 767px)","maxWidth]___[value:25rem","marginInline]___[value:auto","borderRadius]___[value:container","borderWidth]___[value:1]___[cond:_dark","borderBlock]___[value:solid]___[cond:_dark","borderColor]___[value:neutral.secondary]___[cond:_dark","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","borderColor]___[value:ink.70]___[cond:_dark","borderColor]___[value:ink.50]___[cond:_dark<___>_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","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","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":{}}}
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","height]___[value:auto","top]___[value:0]___[cond:@media (min-width: 48rem)","animationName]___[value:scaleIn","animationDuration]___[value:250ms","height]___[value:100dvh]___[cond:@media only screen and (max-width: 767px)","maxWidth]___[value:25rem","marginInline]___[value:auto","borderRadius]___[value:container","borderWidth]___[value:1]___[cond:_dark","borderBlock]___[value:solid]___[cond:_dark","borderColor]___[value:neutral.secondary]___[cond:_dark","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","borderColor]___[value:ink.70]___[cond:_dark","borderColor]___[value:ink.50]___[cond:_dark<___>_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","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","paddingLeft]___[value:4","paddingRight]___[value:2","paddingLeft]___[value:0","borderRadius]___[value:0","paddingRight]___[value:4","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","marginRight]___[value:4","marginRight]___[value:0","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","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/phone-input.d.ts CHANGED Viewed

@@ -1,7 +1,13 @@
+/// <reference types="react" />
+import { type CountryIso2 } from 'react-international-phone';
 export interface PhoneInputProps {
     onChange: (phone: string) => void;
+    onSubmit?: () => void;
     autoFocus?: boolean;
     errorMessage?: string;
+    containerStyles?: React.CSSProperties;
+    disableSubmit?: (value: string, countryIso2: CountryIso2) => boolean;
+    showPlaceholder?: boolean;
 }
 declare const PhoneInput: {
     (props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/inputs/phone-input.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"phone-input.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/phone-input.tsx"],"names":[],"mappings":"~~AASA~~,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;~~CACvB~~;AAuBD,QAAA,MAAM,UAAU;YAAW,eAAe;;~~CA0RzC~~,CAAC;AAGF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"phone-input.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/phone-input.tsx"],"names":[],"mappings":";AAOA,OAAO,EAA8C,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAEzG,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,KAAK,OAAO,CAAC;IACrE,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAuBD,QAAA,MAAM,UAAU;YAAW,eAAe;;CAqVzC,CAAC;AAGF,eAAe,UAAU,CAAC"}

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

	@@ -1 +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,mEAOtB,iBAAiB,~~4CAwKnB~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
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,mEAOtB,iBAAiB,4CA+KnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@magiclabs/ui-components",
-  "version": "1.49.3",
+  "version": "1.50.0",
   "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0",
   "description": "💅 A theme-able library of reusable UI components",
   "author": "Magic Labs <open-source@magic.link>",
@@ -35,7 +35,7 @@
     "commit": "git add --all && git-cz",
     "generate:icons": "tsx ./scripts/generateIcons.ts",
     "preinstall": "npx only-allow pnpm",
-    "prepare": "panda codegen && husky",
+    "prepare": "panda codegen",
     "lib:dev": "rimraf dist && rollup -w -c rollup.config.mjs && pnpm lib:buildinfo",
     "lib:build": "rimraf dist && rollup -c rollup.config.mjs && pnpm lib:buildinfo",
     "lib:buildinfo": "panda ship --outfile dist/panda.buildinfo.json",
@@ -113,7 +113,6 @@
     "eslint-plugin-storybook": "^0.8.0",
     "figma-api": "^1.11.0",
     "http-server": "^14.1.1",
-    "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.5",