npm - @magiclabs/ui-components - Versions diffs - 1.52.0 → 2.0.0 - Mend

@magiclabs/ui-components 1.52.0 → 2.0.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 (1475) hide show

package/dist/es/components/icons/ico-wallet-fill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ico-wallet-fill.js","sources":["../../../../src/components/icons/ico-wallet-fill.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\~~nimport { token } from '@styled/tokens';\~~ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {\n /*\n Configures icon color on monochrome svgs.\n */\n color?: string;\n}\nconst IcoWalletFill = ({ color: customColor, title, titleId, ...props }: Props) => {\n // Utilize dynamic primary text color by default\n const color = customColor \|\| ~~token~~(~~'colors.~~text.primary');\n return (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n color={color}\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M16.4977 1.09429C15.9723 0.947752 15.4266 0.973122 14.9168 1.16268L3.22913 5.51079C2.50441 5.78031 1.93771 6.34542 1.56387 7.02437C1.18891 7.70537 0.999897 8.50968 1 9.31378V10V18C1 20.7614 3.23858 23 6 23H18C20.7614 23 23 20.7614 23 18V10C23 7.7789 21.5518 5.89605 19.5481 5.24426L18.6451 3.27558C18.4619 2.77404 18.1921 2.31076 17.8382 1.93149C17.4727 1.53976 17.0181 1.23945 16.4977 1.09429ZM17.2357 5L16.7907 4.02971L16.7756 3.98707C16.671 3.69089 16.5279 3.45882 16.3759 3.29586C16.2248 3.134 16.0786 3.05374 15.9604 3.02076C15.8472 2.98918 15.7335 2.99284 15.614 3.03723L10.3381 5H17.2357ZM16.5 16C16.1022 16 15.7206 15.842 15.4393 15.5607C15.158 15.2794 15 14.8978 15 14.5C15 14.1022 15.158 13.7206 15.4393 13.4393C15.7206 13.158 16.1022 13 16.5 13C16.8978 13 17.2794 13.158 17.5607 13.4393C17.842 13.7206 18 14.1022 18 14.5C18 14.8978 17.842 15.2794 17.5607 15.5607C17.2794 15.842 16.8978 16 16.5 16Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default IcoWalletFill;\n"],"names":["IcoWalletFill","customColor","title","titleId","props","~~color","token","~~_jsxs","_jsx"],"mappings":"~~yFAYA~~,MAAMA,EAAgB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,~~IAAa~~,~~CAEhF,MAAMC,EAAQJ,GAAeK,EAAM,qBAAqB,EACxD,OACEC,~~EAAA,MAAA,CACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,~~MAAOF~~,~~EACU~~,~~kBAAAF~~,EACb,GAAAC,YAEHF,~~EAAQM~~,EAAO,QAAA,CAAA,~~GAAIL~~,EAAU,SAAAD,CAAc,CAAA,EAAG,KAC/CM,UACE,SAAS,UACT,SAAS,UACT,EAAE,+4BACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA~~,CAGR~~"}
1	+ {"version":3,"file":"ico-wallet-fill.js","sources":["../../../../src/components/icons/ico-wallet-fill.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {\n /*\n Configures icon color on monochrome svgs.\n */\n color?: string;\n}\nconst IcoWalletFill = ({ color: customColor, title, titleId, ...props }: Props) => {\n // Utilize dynamic primary text color by default\n const color = customColor \|\| 'var(--color-text-primary)';\n return (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n color={color}\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M16.4977 1.09429C15.9723 0.947752 15.4266 0.973122 14.9168 1.16268L3.22913 5.51079C2.50441 5.78031 1.93771 6.34542 1.56387 7.02437C1.18891 7.70537 0.999897 8.50968 1 9.31378V10V18C1 20.7614 3.23858 23 6 23H18C20.7614 23 23 20.7614 23 18V10C23 7.7789 21.5518 5.89605 19.5481 5.24426L18.6451 3.27558C18.4619 2.77404 18.1921 2.31076 17.8382 1.93149C17.4727 1.53976 17.0181 1.23945 16.4977 1.09429ZM17.2357 5L16.7907 4.02971L16.7756 3.98707C16.671 3.69089 16.5279 3.45882 16.3759 3.29586C16.2248 3.134 16.0786 3.05374 15.9604 3.02076C15.8472 2.98918 15.7335 2.99284 15.614 3.03723L10.3381 5H17.2357ZM16.5 16C16.1022 16 15.7206 15.842 15.4393 15.5607C15.158 15.2794 15 14.8978 15 14.5C15 14.1022 15.158 13.7206 15.4393 13.4393C15.7206 13.158 16.1022 13 16.5 13C16.8978 13 17.2794 13.158 17.5607 13.4393C17.842 13.7206 18 14.1022 18 14.5C18 14.8978 17.842 15.2794 17.5607 15.5607C17.2794 15.842 16.8978 16 16.5 16Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default IcoWalletFill;\n"],"names":["IcoWalletFill","customColor","title","titleId","props","_jsxs","_jsx"],"mappings":"kDAWA,MAAMA,EAAgB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAIjEC,EAAA,MAAA,CACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MARUJ,GAAe,4BASR,kBAAAE,EACb,GAAAC,YAEHF,EAAQI,EAAO,QAAA,CAAA,GAAIH,EAAU,SAAAD,CAAc,CAAA,EAAG,KAC/CI,UACE,SAAS,UACT,SAAS,UACT,EAAE,+4BACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA"}

package/dist/es/components/icons/ico-wallet.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as t}from"react/jsx-runtime";import{token as n}from"@styled/tokens";const d=({color:e,title:l,titleId:C,...o})=>{const r=e||n("colors.text.primary");return i("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:r,"aria-labelledby":C,...o,children:[l?t("title",{id:C,children:l}):null,t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14.9168 1.16268C15.4266 0.973122 15.9723 0.947752 16.4977 1.09429C17.0181 1.23945 17.4727 1.53976 17.8382 1.93149C18.1921 2.31076 18.4619 2.77404 18.6451 3.27558L19.5481 5.24427C21.5518 5.89605 23 7.7789 23 10V18C23 20.7614 20.7614 23 18 23H6C3.23858 23 1 20.7614 1 18V10V9.31378V9.31362C0.999897 8.50952 1.18891 7.70537 1.56387 7.02437C1.93771 6.34542 2.50441 5.78031 3.22913 5.51079L3.22931 5.51073L14.9166 1.16274L14.9168 1.16268ZM19 7.44803H4.42205C3.56851 7.97692 3 8.92207 3 10V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V10C21 8.92207 20.4315 7.97692 19.578 7.44803H19ZM16.8095 4.07082L17.2357 5H10.3381L15.6138 3.03729L15.614 3.03723C15.7335 2.99284 15.8472 2.98918 15.9604 3.02076C16.0786 3.05374 16.2248 3.134 16.3759 3.29586C16.5279 3.45882 16.671 3.69089 16.7756 3.98707L16.7907 4.02971L16.8095 4.07082ZM15.4393 15.5607C15.7206 15.842 16.1022 16 16.5 16C16.8978 16 17.2794 15.842 17.5607 15.5607C17.842 15.2794 18 14.8978 18 14.5C18 14.1022 17.842 13.7206 17.5607 13.4393C17.2794 13.158 16.8978 13 16.5 13C16.1022 13 15.7206 13.158 15.4393 13.4393C15.158 13.7206 15 14.1022 15 14.5C15 14.8978 15.158 15.2794 15.4393 15.5607Z",fill:"currentColor"})]})};export{d as default};
+import{jsxs as i,jsx as e}from"react/jsx-runtime";const r=({color:t,title:l,titleId:C,...o})=>i("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:t||"var(--color-text-primary)","aria-labelledby":C,...o,children:[l?e("title",{id:C,children:l}):null,e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14.9168 1.16268C15.4266 0.973122 15.9723 0.947752 16.4977 1.09429C17.0181 1.23945 17.4727 1.53976 17.8382 1.93149C18.1921 2.31076 18.4619 2.77404 18.6451 3.27558L19.5481 5.24427C21.5518 5.89605 23 7.7789 23 10V18C23 20.7614 20.7614 23 18 23H6C3.23858 23 1 20.7614 1 18V10V9.31378V9.31362C0.999897 8.50952 1.18891 7.70537 1.56387 7.02437C1.93771 6.34542 2.50441 5.78031 3.22913 5.51079L3.22931 5.51073L14.9166 1.16274L14.9168 1.16268ZM19 7.44803H4.42205C3.56851 7.97692 3 8.92207 3 10V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V10C21 8.92207 20.4315 7.97692 19.578 7.44803H19ZM16.8095 4.07082L17.2357 5H10.3381L15.6138 3.03729L15.614 3.03723C15.7335 2.99284 15.8472 2.98918 15.9604 3.02076C16.0786 3.05374 16.2248 3.134 16.3759 3.29586C16.5279 3.45882 16.671 3.69089 16.7756 3.98707L16.7907 4.02971L16.8095 4.07082ZM15.4393 15.5607C15.7206 15.842 16.1022 16 16.5 16C16.8978 16 17.2794 15.842 17.5607 15.5607C17.842 15.2794 18 14.8978 18 14.5C18 14.1022 17.842 13.7206 17.5607 13.4393C17.2794 13.158 16.8978 13 16.5 13C16.1022 13 15.7206 13.158 15.4393 13.4393C15.158 13.7206 15 14.1022 15 14.5C15 14.8978 15.158 15.2794 15.4393 15.5607Z",fill:"currentColor"})]});export{r as default};
 //# sourceMappingURL=ico-wallet.js.map

package/dist/es/components/icons/ico-wallet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ico-wallet.js","sources":["../../../../src/components/icons/ico-wallet.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\~~nimport { token } from '@styled/tokens';\~~ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {\n /*\n Configures icon color on monochrome svgs.\n */\n color?: string;\n}\nconst IcoWallet = ({ color: customColor, title, titleId, ...props }: Props) => {\n // Utilize dynamic primary text color by default\n const color = customColor \|\| ~~token~~(~~'colors.~~text.primary');\n return (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n color={color}\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M14.9168 1.16268C15.4266 0.973122 15.9723 0.947752 16.4977 1.09429C17.0181 1.23945 17.4727 1.53976 17.8382 1.93149C18.1921 2.31076 18.4619 2.77404 18.6451 3.27558L19.5481 5.24427C21.5518 5.89605 23 7.7789 23 10V18C23 20.7614 20.7614 23 18 23H6C3.23858 23 1 20.7614 1 18V10V9.31378V9.31362C0.999897 8.50952 1.18891 7.70537 1.56387 7.02437C1.93771 6.34542 2.50441 5.78031 3.22913 5.51079L3.22931 5.51073L14.9166 1.16274L14.9168 1.16268ZM19 7.44803H4.42205C3.56851 7.97692 3 8.92207 3 10V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V10C21 8.92207 20.4315 7.97692 19.578 7.44803H19ZM16.8095 4.07082L17.2357 5H10.3381L15.6138 3.03729L15.614 3.03723C15.7335 2.99284 15.8472 2.98918 15.9604 3.02076C16.0786 3.05374 16.2248 3.134 16.3759 3.29586C16.5279 3.45882 16.671 3.69089 16.7756 3.98707L16.7907 4.02971L16.8095 4.07082ZM15.4393 15.5607C15.7206 15.842 16.1022 16 16.5 16C16.8978 16 17.2794 15.842 17.5607 15.5607C17.842 15.2794 18 14.8978 18 14.5C18 14.1022 17.842 13.7206 17.5607 13.4393C17.2794 13.158 16.8978 13 16.5 13C16.1022 13 15.7206 13.158 15.4393 13.4393C15.158 13.7206 15 14.1022 15 14.5C15 14.8978 15.158 15.2794 15.4393 15.5607Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default IcoWallet;\n"],"names":["IcoWallet","customColor","title","titleId","props","~~color","token","~~_jsxs","_jsx"],"mappings":"~~yFAYA~~,MAAMA,EAAY,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,~~IAAa~~,~~CAE5E,MAAMC,EAAQJ,GAAeK,EAAM,qBAAqB,EACxD,OACEC,~~EAAA,MAAA,CACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,~~MAAOF~~,~~EACU~~,~~kBAAAF~~,EACb,GAAAC,YAEHF,~~EAAQM~~,EAAO,QAAA,CAAA,~~GAAIL~~,EAAU,SAAAD,CAAc,CAAA,EAAG,KAC/CM,UACE,SAAS,UACT,SAAS,UACT,EAAE,ooCACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA~~,CAGR~~"}
1	+ {"version":3,"file":"ico-wallet.js","sources":["../../../../src/components/icons/ico-wallet.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {\n /*\n Configures icon color on monochrome svgs.\n */\n color?: string;\n}\nconst IcoWallet = ({ color: customColor, title, titleId, ...props }: Props) => {\n // Utilize dynamic primary text color by default\n const color = customColor \|\| 'var(--color-text-primary)';\n return (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n color={color}\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M14.9168 1.16268C15.4266 0.973122 15.9723 0.947752 16.4977 1.09429C17.0181 1.23945 17.4727 1.53976 17.8382 1.93149C18.1921 2.31076 18.4619 2.77404 18.6451 3.27558L19.5481 5.24427C21.5518 5.89605 23 7.7789 23 10V18C23 20.7614 20.7614 23 18 23H6C3.23858 23 1 20.7614 1 18V10V9.31378V9.31362C0.999897 8.50952 1.18891 7.70537 1.56387 7.02437C1.93771 6.34542 2.50441 5.78031 3.22913 5.51079L3.22931 5.51073L14.9166 1.16274L14.9168 1.16268ZM19 7.44803H4.42205C3.56851 7.97692 3 8.92207 3 10V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V10C21 8.92207 20.4315 7.97692 19.578 7.44803H19ZM16.8095 4.07082L17.2357 5H10.3381L15.6138 3.03729L15.614 3.03723C15.7335 2.99284 15.8472 2.98918 15.9604 3.02076C16.0786 3.05374 16.2248 3.134 16.3759 3.29586C16.5279 3.45882 16.671 3.69089 16.7756 3.98707L16.7907 4.02971L16.8095 4.07082ZM15.4393 15.5607C15.7206 15.842 16.1022 16 16.5 16C16.8978 16 17.2794 15.842 17.5607 15.5607C17.842 15.2794 18 14.8978 18 14.5C18 14.1022 17.842 13.7206 17.5607 13.4393C17.2794 13.158 16.8978 13 16.5 13C16.1022 13 15.7206 13.158 15.4393 13.4393C15.158 13.7206 15 14.1022 15 14.5C15 14.8978 15.158 15.2794 15.4393 15.5607Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default IcoWallet;\n"],"names":["IcoWallet","customColor","title","titleId","props","_jsxs","_jsx"],"mappings":"kDAWA,MAAMA,EAAY,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAI7DC,EAAA,MAAA,CACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MARUJ,GAAe,4BASR,kBAAAE,EACb,GAAAC,YAEHF,EAAQI,EAAO,QAAA,CAAA,GAAIH,EAAU,SAAAD,CAAc,CAAA,EAAG,KAC/CI,UACE,SAAS,UACT,SAAS,UACT,EAAE,ooCACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA"}

package/dist/es/components/icons/ico-wand.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as r,jsx as l}from"react/jsx-runtime";import{token as i}from"@styled/tokens";const d=({color:L,title:C,titleId:e,...o})=>{const t=L||i("colors.text.primary");return r("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:t,"aria-labelledby":e,...o,children:[C?l("title",{id:e,children:C}):null,l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8.14075 0.520228C7.9653 0.468762 7.77575 0.51717 7.64646 0.646459C7.51717 0.775748 7.46876 0.965299 7.52023 1.14075L7.91895 2.50001L7.52023 3.85928C7.46876 4.03473 7.51717 4.22428 7.64646 4.35357C7.77575 4.48286 7.9653 4.53126 8.14075 4.4798L9.50001 4.08108L10.8593 4.4798C11.0347 4.53126 11.2243 4.48286 11.3536 4.35357C11.4829 4.22428 11.5313 4.03473 11.4798 3.85928L11.0811 2.50001L11.4798 1.14075C11.5313 0.965299 11.4829 0.775748 11.3536 0.646459C11.2243 0.51717 11.0347 0.468762 10.8593 0.520228L9.50001 0.918945L8.14075 0.520228ZM2.14075 7.52023C1.9653 7.46876 1.77575 7.51717 1.64646 7.64646C1.51717 7.77575 1.46876 7.9653 1.52023 8.14075L1.91895 9.50001L1.52023 10.8593C1.46876 11.0347 1.51717 11.2243 1.64646 11.3536C1.77575 11.4829 1.9653 11.5313 2.14075 11.4798L3.50001 11.0811L4.85928 11.4798C5.03473 11.5313 5.22428 11.4829 5.35357 11.3536C5.48286 11.2243 5.53126 11.0347 5.4798 10.8593L5.08108 9.50001L5.4798 8.14075C5.53126 7.9653 5.48286 7.77575 5.35357 7.64646C5.22428 7.51717 5.03473 7.46876 4.85928 7.52023L3.50001 7.91894L2.14075 7.52023ZM19.1407 14.5202C18.9653 14.4688 18.7757 14.5172 18.6465 14.6465C18.5172 14.7757 18.4688 14.9653 18.5202 15.1407L18.9189 16.5L18.5202 17.8593C18.4688 18.0347 18.5172 18.2243 18.6465 18.3536C18.7757 18.4829 18.9653 18.5313 19.1407 18.4798L20.5 18.0811L21.8593 18.4798C22.0347 18.5313 22.2243 18.4829 22.3536 18.3536C22.4829 18.2243 22.5313 18.0347 22.4798 17.8593L22.0811 16.5L22.4798 15.1407C22.5313 14.9653 22.4829 14.7757 22.3536 14.6465C22.2243 14.5172 22.0347 14.4688 21.8593 14.5202L20.5 14.9189L19.1407 14.5202Z",fill:"currentColor"}),l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M22.1892 1.81085C20.9604 0.582011 18.968 0.582012 17.7392 1.81085L1.80704 17.743C0.578196 18.9718 0.578198 20.9642 1.80704 22.193C3.03587 23.4219 5.02822 23.4219 6.25705 22.193L22.1892 6.26087C23.418 5.03203 23.418 3.03969 22.1892 1.81085ZM19.1534 3.22506C19.6012 2.77727 20.3272 2.77727 20.775 3.22506C21.2228 3.67285 21.2228 4.39886 20.775 4.84665L18.0179 7.60373L16.3963 5.98214L19.1534 3.22506Z",fill:"currentColor"})]})};export{d as default};
+import{jsxs as t,jsx as l}from"react/jsx-runtime";const i=({color:e,title:C,titleId:L,...o})=>t("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:e||"var(--color-text-primary)","aria-labelledby":L,...o,children:[C?l("title",{id:L,children:C}):null,l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8.14075 0.520228C7.9653 0.468762 7.77575 0.51717 7.64646 0.646459C7.51717 0.775748 7.46876 0.965299 7.52023 1.14075L7.91895 2.50001L7.52023 3.85928C7.46876 4.03473 7.51717 4.22428 7.64646 4.35357C7.77575 4.48286 7.9653 4.53126 8.14075 4.4798L9.50001 4.08108L10.8593 4.4798C11.0347 4.53126 11.2243 4.48286 11.3536 4.35357C11.4829 4.22428 11.5313 4.03473 11.4798 3.85928L11.0811 2.50001L11.4798 1.14075C11.5313 0.965299 11.4829 0.775748 11.3536 0.646459C11.2243 0.51717 11.0347 0.468762 10.8593 0.520228L9.50001 0.918945L8.14075 0.520228ZM2.14075 7.52023C1.9653 7.46876 1.77575 7.51717 1.64646 7.64646C1.51717 7.77575 1.46876 7.9653 1.52023 8.14075L1.91895 9.50001L1.52023 10.8593C1.46876 11.0347 1.51717 11.2243 1.64646 11.3536C1.77575 11.4829 1.9653 11.5313 2.14075 11.4798L3.50001 11.0811L4.85928 11.4798C5.03473 11.5313 5.22428 11.4829 5.35357 11.3536C5.48286 11.2243 5.53126 11.0347 5.4798 10.8593L5.08108 9.50001L5.4798 8.14075C5.53126 7.9653 5.48286 7.77575 5.35357 7.64646C5.22428 7.51717 5.03473 7.46876 4.85928 7.52023L3.50001 7.91894L2.14075 7.52023ZM19.1407 14.5202C18.9653 14.4688 18.7757 14.5172 18.6465 14.6465C18.5172 14.7757 18.4688 14.9653 18.5202 15.1407L18.9189 16.5L18.5202 17.8593C18.4688 18.0347 18.5172 18.2243 18.6465 18.3536C18.7757 18.4829 18.9653 18.5313 19.1407 18.4798L20.5 18.0811L21.8593 18.4798C22.0347 18.5313 22.2243 18.4829 22.3536 18.3536C22.4829 18.2243 22.5313 18.0347 22.4798 17.8593L22.0811 16.5L22.4798 15.1407C22.5313 14.9653 22.4829 14.7757 22.3536 14.6465C22.2243 14.5172 22.0347 14.4688 21.8593 14.5202L20.5 14.9189L19.1407 14.5202Z",fill:"currentColor"}),l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M22.1892 1.81085C20.9604 0.582011 18.968 0.582012 17.7392 1.81085L1.80704 17.743C0.578196 18.9718 0.578198 20.9642 1.80704 22.193C3.03587 23.4219 5.02822 23.4219 6.25705 22.193L22.1892 6.26087C23.418 5.03203 23.418 3.03969 22.1892 1.81085ZM19.1534 3.22506C19.6012 2.77727 20.3272 2.77727 20.775 3.22506C21.2228 3.67285 21.2228 4.39886 20.775 4.84665L18.0179 7.60373L16.3963 5.98214L19.1534 3.22506Z",fill:"currentColor"})]});export{i as default};
 //# sourceMappingURL=ico-wand.js.map

package/dist/es/components/icons/ico-wand.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ico-wand.js","sources":["../../../../src/components/icons/ico-wand.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\~~nimport { token } from '@styled/tokens';\~~ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {\n /*\n Configures icon color on monochrome svgs.\n */\n color?: string;\n}\nconst IcoWand = ({ color: customColor, title, titleId, ...props }: Props) => {\n // Utilize dynamic primary text color by default\n const color = customColor \|\| ~~token~~(~~'colors.~~text.primary');\n return (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n color={color}\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M8.14075 0.520228C7.9653 0.468762 7.77575 0.51717 7.64646 0.646459C7.51717 0.775748 7.46876 0.965299 7.52023 1.14075L7.91895 2.50001L7.52023 3.85928C7.46876 4.03473 7.51717 4.22428 7.64646 4.35357C7.77575 4.48286 7.9653 4.53126 8.14075 4.4798L9.50001 4.08108L10.8593 4.4798C11.0347 4.53126 11.2243 4.48286 11.3536 4.35357C11.4829 4.22428 11.5313 4.03473 11.4798 3.85928L11.0811 2.50001L11.4798 1.14075C11.5313 0.965299 11.4829 0.775748 11.3536 0.646459C11.2243 0.51717 11.0347 0.468762 10.8593 0.520228L9.50001 0.918945L8.14075 0.520228ZM2.14075 7.52023C1.9653 7.46876 1.77575 7.51717 1.64646 7.64646C1.51717 7.77575 1.46876 7.9653 1.52023 8.14075L1.91895 9.50001L1.52023 10.8593C1.46876 11.0347 1.51717 11.2243 1.64646 11.3536C1.77575 11.4829 1.9653 11.5313 2.14075 11.4798L3.50001 11.0811L4.85928 11.4798C5.03473 11.5313 5.22428 11.4829 5.35357 11.3536C5.48286 11.2243 5.53126 11.0347 5.4798 10.8593L5.08108 9.50001L5.4798 8.14075C5.53126 7.9653 5.48286 7.77575 5.35357 7.64646C5.22428 7.51717 5.03473 7.46876 4.85928 7.52023L3.50001 7.91894L2.14075 7.52023ZM19.1407 14.5202C18.9653 14.4688 18.7757 14.5172 18.6465 14.6465C18.5172 14.7757 18.4688 14.9653 18.5202 15.1407L18.9189 16.5L18.5202 17.8593C18.4688 18.0347 18.5172 18.2243 18.6465 18.3536C18.7757 18.4829 18.9653 18.5313 19.1407 18.4798L20.5 18.0811L21.8593 18.4798C22.0347 18.5313 22.2243 18.4829 22.3536 18.3536C22.4829 18.2243 22.5313 18.0347 22.4798 17.8593L22.0811 16.5L22.4798 15.1407C22.5313 14.9653 22.4829 14.7757 22.3536 14.6465C22.2243 14.5172 22.0347 14.4688 21.8593 14.5202L20.5 14.9189L19.1407 14.5202Z\"\n fill=\"currentColor\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M22.1892 1.81085C20.9604 0.582011 18.968 0.582012 17.7392 1.81085L1.80704 17.743C0.578196 18.9718 0.578198 20.9642 1.80704 22.193C3.03587 23.4219 5.02822 23.4219 6.25705 22.193L22.1892 6.26087C23.418 5.03203 23.418 3.03969 22.1892 1.81085ZM19.1534 3.22506C19.6012 2.77727 20.3272 2.77727 20.775 3.22506C21.2228 3.67285 21.2228 4.39886 20.775 4.84665L18.0179 7.60373L16.3963 5.98214L19.1534 3.22506Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default IcoWand;\n"],"names":["IcoWand","customColor","title","titleId","props","~~color","token","~~_jsxs","_jsx"],"mappings":"~~yFAYA~~,~~MAAMA,~~EAAU,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,~~IAAa~~,~~CAE1E,MAAMC,EAAQJ,GAAeK,EAAM,qBAAqB,EACxD,OACEC,~~EACE,MAAA,CAAA,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,~~MAAOF~~,~~EACU~~,~~kBAAAF~~,KACbC,EAAK,SAAA,CAERF,~~EAAQM~~,EAAA,QAAA,CAAO,~~GAAIL~~,WAAUD,CAAK,CAAA,EAAY,KAC/CM,UACE,SAAS,UACT,SAAS,UACT,EAAE,4iDACF,KAAK,cAAc,CAAA,EAErBA,EAAA,OAAA,CACE,SAAS,UACT,SAAS,UACT,EAAE,iZACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA~~,CAGR~~"}
1	+ {"version":3,"file":"ico-wand.js","sources":["../../../../src/components/icons/ico-wand.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {\n /*\n Configures icon color on monochrome svgs.\n */\n color?: string;\n}\nconst IcoWand = ({ color: customColor, title, titleId, ...props }: Props) => {\n // Utilize dynamic primary text color by default\n const color = customColor \|\| 'var(--color-text-primary)';\n return (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n color={color}\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M8.14075 0.520228C7.9653 0.468762 7.77575 0.51717 7.64646 0.646459C7.51717 0.775748 7.46876 0.965299 7.52023 1.14075L7.91895 2.50001L7.52023 3.85928C7.46876 4.03473 7.51717 4.22428 7.64646 4.35357C7.77575 4.48286 7.9653 4.53126 8.14075 4.4798L9.50001 4.08108L10.8593 4.4798C11.0347 4.53126 11.2243 4.48286 11.3536 4.35357C11.4829 4.22428 11.5313 4.03473 11.4798 3.85928L11.0811 2.50001L11.4798 1.14075C11.5313 0.965299 11.4829 0.775748 11.3536 0.646459C11.2243 0.51717 11.0347 0.468762 10.8593 0.520228L9.50001 0.918945L8.14075 0.520228ZM2.14075 7.52023C1.9653 7.46876 1.77575 7.51717 1.64646 7.64646C1.51717 7.77575 1.46876 7.9653 1.52023 8.14075L1.91895 9.50001L1.52023 10.8593C1.46876 11.0347 1.51717 11.2243 1.64646 11.3536C1.77575 11.4829 1.9653 11.5313 2.14075 11.4798L3.50001 11.0811L4.85928 11.4798C5.03473 11.5313 5.22428 11.4829 5.35357 11.3536C5.48286 11.2243 5.53126 11.0347 5.4798 10.8593L5.08108 9.50001L5.4798 8.14075C5.53126 7.9653 5.48286 7.77575 5.35357 7.64646C5.22428 7.51717 5.03473 7.46876 4.85928 7.52023L3.50001 7.91894L2.14075 7.52023ZM19.1407 14.5202C18.9653 14.4688 18.7757 14.5172 18.6465 14.6465C18.5172 14.7757 18.4688 14.9653 18.5202 15.1407L18.9189 16.5L18.5202 17.8593C18.4688 18.0347 18.5172 18.2243 18.6465 18.3536C18.7757 18.4829 18.9653 18.5313 19.1407 18.4798L20.5 18.0811L21.8593 18.4798C22.0347 18.5313 22.2243 18.4829 22.3536 18.3536C22.4829 18.2243 22.5313 18.0347 22.4798 17.8593L22.0811 16.5L22.4798 15.1407C22.5313 14.9653 22.4829 14.7757 22.3536 14.6465C22.2243 14.5172 22.0347 14.4688 21.8593 14.5202L20.5 14.9189L19.1407 14.5202Z\"\n fill=\"currentColor\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M22.1892 1.81085C20.9604 0.582011 18.968 0.582012 17.7392 1.81085L1.80704 17.743C0.578196 18.9718 0.578198 20.9642 1.80704 22.193C3.03587 23.4219 5.02822 23.4219 6.25705 22.193L22.1892 6.26087C23.418 5.03203 23.418 3.03969 22.1892 1.81085ZM19.1534 3.22506C19.6012 2.77727 20.3272 2.77727 20.775 3.22506C21.2228 3.67285 21.2228 4.39886 20.775 4.84665L18.0179 7.60373L16.3963 5.98214L19.1534 3.22506Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default IcoWand;\n"],"names":["IcoWand","customColor","title","titleId","props","_jsxs","_jsx"],"mappings":"wDAWMA,EAAU,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAI3DC,EACE,MAAA,CAAA,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MARUJ,GAAe,4BASR,kBAAAE,KACbC,EAAK,SAAA,CAERF,EAAQI,EAAA,QAAA,CAAO,GAAIH,WAAUD,CAAK,CAAA,EAAY,KAC/CI,UACE,SAAS,UACT,SAAS,UACT,EAAE,4iDACF,KAAK,cAAc,CAAA,EAErBA,EAAA,OAAA,CACE,SAAS,UACT,SAAS,UACT,EAAE,iZACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA"}

package/dist/es/components/icons/ico-warning-fill.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as n,jsx as t}from"react/jsx-runtime";import{token as C}from"@styled/tokens";const d=({color:o,title:l,titleId:e,...r})=>{const i=o||C("colors.text.primary");return n("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:i,"aria-labelledby":e,...r,children:[l?t("title",{id:e,children:l}):null,t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.36635 3.74008C10.5034 1.65549 13.4967 1.65548 14.6337 3.74008L23.2646 19.5634C24.355 21.5626 22.9081 24 20.6309 24H3.36909C1.09191 24 -0.355028 21.5625 0.735407 19.5634L9.36635 3.74008L10.2442 4.21893L9.36635 3.74008ZM12 9C12.5523 9 13 9.44772 13 10V14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14V10C11 9.44772 11.4477 9 12 9ZM10.4946 19C10.4946 18.1716 11.1662 17.5 11.9946 17.5H12.0036C12.832 17.5 13.5036 18.1716 13.5036 19C13.5036 19.8284 12.832 20.5 12.0036 20.5H11.9946C11.1662 20.5 10.4946 19.8284 10.4946 19Z",fill:"currentColor"})]})};export{d as default};
+import{jsxs as r,jsx as t}from"react/jsx-runtime";const d=({color:i,title:l,titleId:e,...o})=>r("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:i||"var(--color-text-primary)","aria-labelledby":e,...o,children:[l?t("title",{id:e,children:l}):null,t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.36635 3.74008C10.5034 1.65549 13.4967 1.65548 14.6337 3.74008L23.2646 19.5634C24.355 21.5626 22.9081 24 20.6309 24H3.36909C1.09191 24 -0.355028 21.5625 0.735407 19.5634L9.36635 3.74008L10.2442 4.21893L9.36635 3.74008ZM12 9C12.5523 9 13 9.44772 13 10V14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14V10C11 9.44772 11.4477 9 12 9ZM10.4946 19C10.4946 18.1716 11.1662 17.5 11.9946 17.5H12.0036C12.832 17.5 13.5036 18.1716 13.5036 19C13.5036 19.8284 12.832 20.5 12.0036 20.5H11.9946C11.1662 20.5 10.4946 19.8284 10.4946 19Z",fill:"currentColor"})]});export{d as default};
 //# sourceMappingURL=ico-warning-fill.js.map

package/dist/es/components/icons/ico-warning-fill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ico-warning-fill.js","sources":["../../../../src/components/icons/ico-warning-fill.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\~~nimport { token } from '@styled/tokens';\~~ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {\n /*\n Configures icon color on monochrome svgs.\n */\n color?: string;\n}\nconst IcoWarningFill = ({ color: customColor, title, titleId, ...props }: Props) => {\n // Utilize dynamic primary text color by default\n const color = customColor \|\| ~~token~~(~~'colors.~~text.primary');\n return (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n color={color}\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M9.36635 3.74008C10.5034 1.65549 13.4967 1.65548 14.6337 3.74008L23.2646 19.5634C24.355 21.5626 22.9081 24 20.6309 24H3.36909C1.09191 24 -0.355028 21.5625 0.735407 19.5634L9.36635 3.74008L10.2442 4.21893L9.36635 3.74008ZM12 9C12.5523 9 13 9.44772 13 10V14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14V10C11 9.44772 11.4477 9 12 9ZM10.4946 19C10.4946 18.1716 11.1662 17.5 11.9946 17.5H12.0036C12.832 17.5 13.5036 18.1716 13.5036 19C13.5036 19.8284 12.832 20.5 12.0036 20.5H11.9946C11.1662 20.5 10.4946 19.8284 10.4946 19Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default IcoWarningFill;\n"],"names":["IcoWarningFill","customColor","title","titleId","props","~~color","token","~~_jsxs","_jsx"],"mappings":"~~yFAYA~~,MAAMA,EAAiB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,~~IAAa~~,~~CAEjF,MAAMC,EAAQJ,GAAeK,EAAM,qBAAqB,EACxD,OACEC,~~EAAA,MAAA,CACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,~~MAAOF~~,~~EACU~~,~~kBAAAF~~,EACb,GAAAC,YAEHF,~~EAAQM~~,EAAO,QAAA,CAAA,~~GAAIL~~,EAAU,SAAAD,CAAc,CAAA,EAAG,KAC/CM,UACE,SAAS,UACT,SAAS,UACT,EAAE,shBACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA~~,CAGR~~"}
1	+ {"version":3,"file":"ico-warning-fill.js","sources":["../../../../src/components/icons/ico-warning-fill.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {\n /*\n Configures icon color on monochrome svgs.\n */\n color?: string;\n}\nconst IcoWarningFill = ({ color: customColor, title, titleId, ...props }: Props) => {\n // Utilize dynamic primary text color by default\n const color = customColor \|\| 'var(--color-text-primary)';\n return (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n color={color}\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M9.36635 3.74008C10.5034 1.65549 13.4967 1.65548 14.6337 3.74008L23.2646 19.5634C24.355 21.5626 22.9081 24 20.6309 24H3.36909C1.09191 24 -0.355028 21.5625 0.735407 19.5634L9.36635 3.74008L10.2442 4.21893L9.36635 3.74008ZM12 9C12.5523 9 13 9.44772 13 10V14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14V10C11 9.44772 11.4477 9 12 9ZM10.4946 19C10.4946 18.1716 11.1662 17.5 11.9946 17.5H12.0036C12.832 17.5 13.5036 18.1716 13.5036 19C13.5036 19.8284 12.832 20.5 12.0036 20.5H11.9946C11.1662 20.5 10.4946 19.8284 10.4946 19Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default IcoWarningFill;\n"],"names":["IcoWarningFill","customColor","title","titleId","props","_jsxs","_jsx"],"mappings":"kDAWA,MAAMA,EAAiB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAIlEC,EAAA,MAAA,CACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MARUJ,GAAe,4BASR,kBAAAE,EACb,GAAAC,YAEHF,EAAQI,EAAO,QAAA,CAAA,GAAIH,EAAU,SAAAD,CAAc,CAAA,EAAG,KAC/CI,UACE,SAAS,UACT,SAAS,UACT,EAAE,shBACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA"}

package/dist/es/components/icons/ico-warning.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as C,jsx as l}from"react/jsx-runtime";import{token as n}from"@styled/tokens";const d=({color:o,title:t,titleId:e,...r})=>{const i=o||n("colors.text.primary");return C("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:i,"aria-labelledby":e,...r,children:[t?l("title",{id:e,children:t}):null,l("path",{d:"M12 9C12.5523 9 13 9.44772 13 10V14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14V10C11 9.44772 11.4477 9 12 9Z",fill:"currentColor"}),l("path",{d:"M11.9946 16.75C11.3043 16.75 10.7446 17.3096 10.7446 18C10.7446 18.6904 11.3043 19.25 11.9946 19.25H12.0036C12.694 19.25 13.2536 18.6904 13.2536 18C13.2536 17.3096 12.694 16.75 12.0036 16.75H11.9946Z",fill:"currentColor"}),l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.36633 3.74008C10.5034 1.65549 13.4967 1.65548 14.6337 3.74008L23.2646 19.5634C24.355 21.5626 22.9081 24 20.6309 24H3.36908C1.0919 24 -0.355043 21.5625 0.735391 19.5634L9.36633 3.74008ZM12.8779 4.69778C12.4989 4.00292 11.5011 4.00292 11.1221 4.69778L2.49118 20.5211C2.1277 21.1875 2.61002 22 3.36908 22H20.6309C21.39 22 21.8723 21.1875 21.5088 20.5211L12.8779 4.69778Z",fill:"currentColor"})]})};export{d as default};
+import{jsxs as i,jsx as l}from"react/jsx-runtime";const C=({color:r,title:t,titleId:e,...o})=>i("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:r||"var(--color-text-primary)","aria-labelledby":e,...o,children:[t?l("title",{id:e,children:t}):null,l("path",{d:"M12 9C12.5523 9 13 9.44772 13 10V14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14V10C11 9.44772 11.4477 9 12 9Z",fill:"currentColor"}),l("path",{d:"M11.9946 16.75C11.3043 16.75 10.7446 17.3096 10.7446 18C10.7446 18.6904 11.3043 19.25 11.9946 19.25H12.0036C12.694 19.25 13.2536 18.6904 13.2536 18C13.2536 17.3096 12.694 16.75 12.0036 16.75H11.9946Z",fill:"currentColor"}),l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.36633 3.74008C10.5034 1.65549 13.4967 1.65548 14.6337 3.74008L23.2646 19.5634C24.355 21.5626 22.9081 24 20.6309 24H3.36908C1.0919 24 -0.355043 21.5625 0.735391 19.5634L9.36633 3.74008ZM12.8779 4.69778C12.4989 4.00292 11.5011 4.00292 11.1221 4.69778L2.49118 20.5211C2.1277 21.1875 2.61002 22 3.36908 22H20.6309C21.39 22 21.8723 21.1875 21.5088 20.5211L12.8779 4.69778Z",fill:"currentColor"})]});export{C as default};
 //# sourceMappingURL=ico-warning.js.map

package/dist/es/components/icons/ico-warning.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ico-warning.js","sources":["../../../../src/components/icons/ico-warning.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\~~nimport { token } from '@styled/tokens';\~~ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {\n /*\n Configures icon color on monochrome svgs.\n */\n color?: string;\n}\nconst IcoWarning = ({ color: customColor, title, titleId, ...props }: Props) => {\n // Utilize dynamic primary text color by default\n const color = customColor \|\| ~~token~~(~~'colors.~~text.primary');\n return (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n color={color}\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n d=\"M12 9C12.5523 9 13 9.44772 13 10V14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14V10C11 9.44772 11.4477 9 12 9Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M11.9946 16.75C11.3043 16.75 10.7446 17.3096 10.7446 18C10.7446 18.6904 11.3043 19.25 11.9946 19.25H12.0036C12.694 19.25 13.2536 18.6904 13.2536 18C13.2536 17.3096 12.694 16.75 12.0036 16.75H11.9946Z\"\n fill=\"currentColor\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M9.36633 3.74008C10.5034 1.65549 13.4967 1.65548 14.6337 3.74008L23.2646 19.5634C24.355 21.5626 22.9081 24 20.6309 24H3.36908C1.0919 24 -0.355043 21.5625 0.735391 19.5634L9.36633 3.74008ZM12.8779 4.69778C12.4989 4.00292 11.5011 4.00292 11.1221 4.69778L2.49118 20.5211C2.1277 21.1875 2.61002 22 3.36908 22H20.6309C21.39 22 21.8723 21.1875 21.5088 20.5211L12.8779 4.69778Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default IcoWarning;\n"],"names":["IcoWarning","customColor","title","titleId","props","~~color","token","~~_jsxs","_jsx"],"mappings":"~~yFAYA~~,MAAMA,EAAa,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,~~IAAa~~,~~CAE7E,MAAMC,EAAQJ,GAAeK,EAAM,qBAAqB,EACxD,OACEC,~~EACE,MAAA,CAAA,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,~~MAAOF~~,~~oBACUF~~,EAAO,GACpBC,EAEH,SAAA,CAAAF,~~EAAQM~~,EAAO,QAAA,CAAA,~~GAAIL~~,EAAO,SAAGD,CAAc,CAAA,EAAG,KAC/CM,EAAA,OAAA,CACE,EAAE,4HACF,KAAK,cAAc,CAAA,EAErBA,EACE,OAAA,CAAA,EAAE,0MACF,KAAK,cACL,CAAA,EACFA,UACE,SAAS,UACT,SAAS,UACT,EAAE,qXACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA~~,CAGR~~"}
1	+ {"version":3,"file":"ico-warning.js","sources":["../../../../src/components/icons/ico-warning.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {\n /*\n Configures icon color on monochrome svgs.\n */\n color?: string;\n}\nconst IcoWarning = ({ color: customColor, title, titleId, ...props }: Props) => {\n // Utilize dynamic primary text color by default\n const color = customColor \|\| 'var(--color-text-primary)';\n return (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n color={color}\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n d=\"M12 9C12.5523 9 13 9.44772 13 10V14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14V10C11 9.44772 11.4477 9 12 9Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M11.9946 16.75C11.3043 16.75 10.7446 17.3096 10.7446 18C10.7446 18.6904 11.3043 19.25 11.9946 19.25H12.0036C12.694 19.25 13.2536 18.6904 13.2536 18C13.2536 17.3096 12.694 16.75 12.0036 16.75H11.9946Z\"\n fill=\"currentColor\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M9.36633 3.74008C10.5034 1.65549 13.4967 1.65548 14.6337 3.74008L23.2646 19.5634C24.355 21.5626 22.9081 24 20.6309 24H3.36908C1.0919 24 -0.355043 21.5625 0.735391 19.5634L9.36633 3.74008ZM12.8779 4.69778C12.4989 4.00292 11.5011 4.00292 11.1221 4.69778L2.49118 20.5211C2.1277 21.1875 2.61002 22 3.36908 22H20.6309C21.39 22 21.8723 21.1875 21.5088 20.5211L12.8779 4.69778Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default IcoWarning;\n"],"names":["IcoWarning","customColor","title","titleId","props","_jsxs","_jsx"],"mappings":"kDAWA,MAAMA,EAAa,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAI9DC,EACE,MAAA,CAAA,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MARUJ,GAAe,8CASRE,EAAO,GACpBC,EAEH,SAAA,CAAAF,EAAQI,EAAO,QAAA,CAAA,GAAIH,EAAO,SAAGD,CAAc,CAAA,EAAG,KAC/CI,EAAA,OAAA,CACE,EAAE,4HACF,KAAK,cAAc,CAAA,EAErBA,EACE,OAAA,CAAA,EAAE,0MACF,KAAK,cACL,CAAA,EACFA,UACE,SAAS,UACT,SAAS,UACT,EAAE,qXACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA"}

package/dist/es/components/info/copy-button.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{token as p}from"@styled/tokens";import f from"../icons/ico-checkmark.js";import u from"../icons/ico-copy.js";import{useState as d,useEffect as x,useCallback as y}from"react";import n from"../primitives/button.js";const m=({value:t,showText:c,color:l,onCopy:s})=>{const e=l||p("colors.text.primary"),[o,i]=d(!1);x(()=>{o&&setTimeout(()=>{i(!1)},2500)},[o]);const a=y(()=>{s(t),i(!0)},[t]);return r(n,{label:c?o?"Copied!":"Copy":void 0,variant:"text",onPress:a,iconSize:o?12:16,children:r(n.LeadingIcon,{children:o?r(f,{color:e}):r(u,{color:e})})})};m.displayName="CopyButton";export{m as default};
+import{jsx as r}from"react/jsx-runtime";import s from"../icons/ico-checkmark.js";import f from"../icons/ico-copy.js";import{useState as u,useEffect as d,useCallback as x}from"react";import c from"../primitives/button.js";const a=({value:t,showText:n,color:l,onCopy:m})=>{const e=l||"var(--color-text-primary)",[o,i]=u(!1);d(()=>{o&&setTimeout(()=>{i(!1)},2500)},[o]);const p=x(()=>{m(t),i(!0)},[t]);return r(c,{label:n?o?"Copied!":"Copy":void 0,variant:"text",onPress:p,iconSize:o?12:16,children:r(c.LeadingIcon,{children:o?r(s,{color:e}):r(f,{color:e})})})};a.displayName="CopyButton";export{a as default};
 //# sourceMappingURL=copy-button.js.map

package/dist/es/components/info/copy-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"copy-button.js","sources":["../../../../src/components/info/copy-button.tsx"],"sourcesContent":["import { IcoCheckmark, IcoCopy } from '@components/icons';\nimport { ~~token } from '@styled/tokens';\nimport {~~ useEffect, useState, useCallback } from 'react';\nimport Button from '../primitives/button';\n\nexport interface CopyButtonProps {\n value: string;\n showText: boolean;\n color?: string;\n onCopy: (value: string) => void;\n}\n\nconst CopyButton = ({ value, showText, color: customColor, onCopy }: CopyButtonProps) => {\n const color = customColor \|\| ~~token~~(~~'colors.~~text.primary');\n\n const [isCopied, setIsCopied] = useState(false);\n\n useEffect(() => {\n if (isCopied) {\n setTimeout(() => {\n setIsCopied(false);\n }, 2500);\n }\n }, [isCopied]);\n\n const handleOnCopy = useCallback(() => {\n onCopy(value);\n setIsCopied(true);\n }, [value]);\n\n const text = showText ? (!isCopied ? 'Copy' : 'Copied!') : undefined;\n\n return (\n <Button label={text} variant=\"text\" onPress={handleOnCopy} iconSize={!isCopied ? 16 : 12}>\n <Button.LeadingIcon>{!isCopied ? <IcoCopy color={color} /> : <IcoCheckmark color={color} />}</Button.LeadingIcon>\n </Button>\n );\n};\n\nCopyButton.displayName = 'CopyButton';\n\nexport default CopyButton;\n"],"names":["CopyButton","value","showText","customColor","onCopy","color","~~token","~~isCopied","setIsCopied","useState","useEffect","handleOnCopy","useCallback","_jsx","Button","IcoCheckmark","IcoCopy"],"mappings":"~~oQAYA~~,~~MAAMA~~,EAAa,CAAC,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAOC,EAAa,OAAAC,CAAM,IAAuB,CACtF,MAAMC,EAAQF,~~GAAeG~~,~~EAAM~~,~~qBAAqB~~,~~EAElD,CAACC,~~EAAUC,CAAW,EAAIC,EAAS,EAAK,EAE9CC,EAAU,IAAK,CACTH,GACF,WAAW,IAAK,CACdC,EAAY,EAAK,CACnB,EAAG,IAAI,CAEX,EAAG,CAACD,CAAQ,CAAC,EAEb,MAAMI,EAAeC,EAAY,IAAK,~~CACpCR~~,EAAOH,CAAK,~~EACZO~~,EAAY,EAAI,CAClB,EAAG,~~CAACP~~,CAAK,CAAC,EAIV,~~OACEY~~,EAACC,EAAO,CAAA,~~MAHGZ~~,~~EAAaK~~,EAAoB,UAAT,OAAsB,OAGpC,QAAQ,OAAO,QAASI,EAAc,SAAWJ,EAAgB,GAAL,GAAO,SACtFM,EAACC,EAAO,YAAa,CAAA,SAACP,EAAuCM,EAACE,EAAa,CAAA,~~MAAOV~~,CAAS,CAAA,~~EAA1DQ~~,EAACG,EAAQ,CAAA,~~MAAOX~~,CAAS,CAAA,CAAiC,CAAA,CACpF,CAAA,CAEb,EAEAL,EAAW,YAAc"}
1	+ {"version":3,"file":"copy-button.js","sources":["../../../../src/components/info/copy-button.tsx"],"sourcesContent":["import { IcoCheckmark, IcoCopy } from '@components/icons';\nimport { useEffect, useState, useCallback } from 'react';\nimport Button from '../primitives/button';\n\nexport interface CopyButtonProps {\n value: string;\n showText: boolean;\n color?: string;\n onCopy: (value: string) => void;\n}\n\nconst CopyButton = ({ value, showText, color: customColor, onCopy }: CopyButtonProps) => {\n const color = customColor \|\| 'var(--color-text-primary)';\n\n const [isCopied, setIsCopied] = useState(false);\n\n useEffect(() => {\n if (isCopied) {\n setTimeout(() => {\n setIsCopied(false);\n }, 2500);\n }\n }, [isCopied]);\n\n const handleOnCopy = useCallback(() => {\n onCopy(value);\n setIsCopied(true);\n }, [value]);\n\n const text = showText ? (!isCopied ? 'Copy' : 'Copied!') : undefined;\n\n return (\n <Button label={text} variant=\"text\" onPress={handleOnCopy} iconSize={!isCopied ? 16 : 12}>\n <Button.LeadingIcon>{!isCopied ? <IcoCopy color={color} /> : <IcoCheckmark color={color} />}</Button.LeadingIcon>\n </Button>\n );\n};\n\nCopyButton.displayName = 'CopyButton';\n\nexport default CopyButton;\n"],"names":["CopyButton","value","showText","customColor","onCopy","color","isCopied","setIsCopied","useState","useEffect","handleOnCopy","useCallback","_jsx","Button","IcoCheckmark","IcoCopy"],"mappings":"6NAWMA,MAAAA,EAAa,CAAC,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAOC,EAAa,OAAAC,CAAM,IAAuB,CACtF,MAAMC,EAAQF,GAAe,4BAEvB,CAACG,EAAUC,CAAW,EAAIC,EAAS,EAAK,EAE9CC,EAAU,IAAK,CACTH,GACF,WAAW,IAAK,CACdC,EAAY,EAAK,CACnB,EAAG,IAAI,CAEX,EAAG,CAACD,CAAQ,CAAC,EAEb,MAAMI,EAAeC,EAAY,IAAK,CACpCP,EAAOH,CAAK,EACZM,EAAY,EAAI,CAClB,EAAG,CAACN,CAAK,CAAC,EAIV,OACEW,EAACC,EAAO,CAAA,MAHGX,EAAaI,EAAoB,UAAT,OAAsB,OAGpC,QAAQ,OAAO,QAASI,EAAc,SAAWJ,EAAgB,GAAL,GAAO,SACtFM,EAACC,EAAO,YAAa,CAAA,SAACP,EAAuCM,EAACE,EAAa,CAAA,MAAOT,CAAS,CAAA,EAA1DO,EAACG,EAAQ,CAAA,MAAOV,CAAS,CAAA,CAAiC,CAAA,CACpF,CAAA,CAEb,EAEAL,EAAW,YAAc"}

package/dist/es/components/info/email-wbr.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as o,jsx as e}from"react/jsx-runtime";import{css as t}from"@styled/css";const s=({email:a})=>{const r=a.split("@");return o("span",{className:t({overflowWrap:"break-word",wordBreak:"break-word",fontWeight:600}),children:[r[0],e("wbr",{}),"@",r[1]]})};s.displayName="EmailWbr";export{s as default};
+import{jsxs as e,jsx as l}from"react/jsx-runtime";const a=({email:r})=>{const s=r.split("@");return e("span",{className:"break-words font-semibold",children:[s[0],l("wbr",{}),"@",s[1]]})};a.displayName="EmailWbr";export{a as default};
 //# sourceMappingURL=email-wbr.js.map

package/dist/es/components/info/email-wbr.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"email-wbr.js","sources":["../../../../src/components/info/email-wbr.tsx"],"sourcesContent":["~~import~~ ~~{ css } from '@styled/css';\n\nexport~~ interface EmailWbrProps {\n email: string;\n}\n\nconst EmailWbr = ({ email }: EmailWbrProps) => {\n const emailSplit = email.split('@');\n return (\n <span className~~={css({ overflowWrap: '~~break-~~word',~~ ~~wordBreak: 'break~~-~~word', fontWeight: 600 })}~~>\n {emailSplit[0]}\n <wbr />@{emailSplit[1]}\n </span>\n );\n};\n\nEmailWbr.displayName = 'EmailWbr';\n\nexport default EmailWbr;\n"],"names":["EmailWbr","email","emailSplit","_jsxs","~~css","~~_jsx"],"mappings":"~~oFAMMA~~,MAAAA,EAAW,CAAC,CAAE,MAAAC,CAAK,IAAqB,CAC5C,MAAMC,EAAaD,EAAM,MAAM,GAAG,EAClC,OACEE,~~EAAA~~,OAAA,~~CAAM~~,~~UAAWC~~,~~EAAI~~,~~CAAE,aAAc,aAAc,UAAW,aAAc,WAAY,GAAG,CAAE,EAAC,~~SAAA,~~CAC3FF~~,EAAW,CAAC,~~EACbG~~,~~EAAO~~,MAAA,CAAA,CAAA,~~EAAA~~,~~IAAEH,~~EAAW,CAAC,CAAC,CAAA,CAAA,CAG5B,EAEAF,EAAS,YAAc"}
1	+ {"version":3,"file":"email-wbr.js","sources":["../../../../src/components/info/email-wbr.tsx"],"sourcesContent":["export interface EmailWbrProps {\n email: string;\n}\n\nconst EmailWbr = ({ email }: EmailWbrProps) => {\n const emailSplit = email.split('@');\n return (\n <span className=\"break-words font-semibold\">\n {emailSplit[0]}\n <wbr />@{emailSplit[1]}\n </span>\n );\n};\n\nEmailWbr.displayName = 'EmailWbr';\n\nexport default EmailWbr;\n"],"names":["EmailWbr","email","emailSplit","_jsxs","_jsx"],"mappings":"kDAIMA,MAAAA,EAAW,CAAC,CAAE,MAAAC,CAAK,IAAqB,CAC5C,MAAMC,EAAaD,EAAM,MAAM,GAAG,EAClC,OACEE,EAAM,OAAA,CAAA,UAAU,4BAA2B,SAAA,CACxCD,EAAW,CAAC,EACbE,EAAA,MAAA,CAAA,CAAA,MAASF,EAAW,CAAC,CAAC,CAAA,CAAA,CAG5B,EAEAF,EAAS,YAAc"}

package/dist/es/components/info/security-otp.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as p,jsx as t}from"react/jsx-runtime";import m from"./copy-button.js";import"./email-wbr.js";import"./text-box.js";import"./wallet-address.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 l from"../primitives/text.js";import{HStack as o,Box as a}from"@styled/jsx";const i=({otp:r,color:e,onCopy:n})=>p(o,{bg:"neutral.quaternary",p:3,rounded:"lg",minWidth:"15rem",justifyContent:"space-around",alignItems:"center",width:"full",children:[t(o,{width:"40%",justifyContent:"space-around",children:t(l.Mono,{styles:{fontSize:"24px",lineHeight:"27px"},children:r})}),t(a,{borderLeft:"thin solid",borderColor:"neutral.tertiary",height:8}),t(o,{width:"40%",justifyContent:"space-around",children:t(m,{value:r,showText:!0,color:e,onCopy:n})})]});i.displayName="SecurityOtp";export{i as default};
+import{jsxs as l,jsx as r}from"react/jsx-runtime";import m from"./copy-button.js";import"./email-wbr.js";import"./text-box.js";import"./wallet-address.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 s from"../primitives/text.js";const o=({otp:e,color:t,onCopy:i})=>l("div",{className:"flex flex-row items-center bg-neutral-quaternary p-3 rounded-lg min-w-[15rem] justify-around w-full",children:[r("div",{className:"flex flex-row items-center w-[40%] justify-around",children:r(s.Mono,{styles:{fontSize:"24px",lineHeight:"27px"},children:e})}),r("div",{className:"border-l border-solid border-neutral-tertiary h-8"}),r("div",{className:"flex flex-row items-center w-[40%] justify-around",children:r(m,{value:e,showText:!0,color:t,onCopy:i})})]});o.displayName="SecurityOtp";export{o as default};
 //# sourceMappingURL=security-otp.js.map

package/dist/es/components/info/security-otp.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"security-otp.js","sources":["../../../../src/components/info/security-otp.tsx"],"sourcesContent":["import { CopyButton } from '@components/info';\nimport { Text } from '@components/primitives';\~~nimport { Box, HStack } from '@styled/jsx';\~~n\nexport interface SecurityOtpProps {\n otp: string \| number;\n color: string;\n onCopy: (value: string) => void;\n}\n\nconst SecurityOtp = ({ otp, color, onCopy }: SecurityOtpProps) => {\n return (\n <~~HStack\n bg~~=\"neutral.quaternary~~\"\n~~ p={3~~}\n~~ rounded~~=\"~~lg~~\"\n minWidth=\"~~15rem~~\"\n justifyContent=\"space~~-around~~\"\n alignItems=\"center\"\n width=\"~~full\"\n >\n <~~HStack~~ ~~width~~=\"40~~%\"~~ ~~justifyContent=\"space~~-around\">\n <Text.Mono styles={{ fontSize: '24px', lineHeight: '27px' }}>{otp}</Text.Mono>\n </~~HStack~~>\n <~~Box~~ ~~borderLeft~~=\"~~thin~~ solid\" ~~borderColor=\"~~neutral.tertiary\" ~~height={8}~~ />\n <~~HStack~~ ~~width~~=\"40~~%\"~~ ~~justifyContent=\"space~~-around\">\n <CopyButton value={otp as string} showText={true} color={color} onCopy={onCopy} />\n </~~HStack~~>\n </~~HStack~~>\n );\n};\n\nSecurityOtp.displayName = 'SecurityOtp';\n\nexport default SecurityOtp;\n"],"names":["SecurityOtp","otp","color","onCopy","_jsxs","~~HStack","~~_jsx","Text","~~Box","~~CopyButton"],"mappings":"~~seAUMA~~,MAAAA,EAAc,CAAC,CAAE,IAAAC,EAAK,MAAAC,EAAO,OAAAC,CAA0B,IAEzDC,~~EAACC~~,~~EACC~~,~~CAAA~~,~~GAAG~~,~~qBACH~~,~~EAAG,EACH,QAAQ,KACR,SAAS,QACT,eAAe,eACf,WAAW,SACX,MAAM,OAAM,~~SAAA,~~CAEZC~~,~~EAACD~~,~~GAAO~~,~~MAAM~~,~~MAAM~~,~~eAAe~~,~~eACjC~~,~~SAAAC,~~EAACC,EAAK,~~KAAI~~,~~CAAC~~,OAAQ,CAAE,SAAU,OAAQ,WAAY,MAAM,EAAK,~~SAAAN~~,~~CAAgB~~,CAAA,~~CAAA~~,~~CAAA~~,~~EAEhFK~~,~~EAACE,EAAI,~~CAAA,~~WAAW~~,~~aAAa~~,~~YAAY~~,~~mBAAmB~~,~~OAAQ~~,~~CAAC~~,CAAA,~~EACrEF~~,~~EAACD~~,~~EAAM~~,~~CAAC~~,~~MAAM,MAAM,eAAe,eACjC,SAAAC,EAACG,~~EAAU,CAAC,~~MAAOR~~,EAAe,SAAU,GAAM,MAAOC,EAAO,OAAQC,~~CAAU~~,CAAA,CAAA,CAAA,~~CAC3E~~,~~CACF,~~CAAA,~~EAIbH~~,EAAY,YAAc"}
1	+ {"version":3,"file":"security-otp.js","sources":["../../../../src/components/info/security-otp.tsx"],"sourcesContent":["import { CopyButton } from '@components/info';\nimport { Text } from '@components/primitives';\n\nexport interface SecurityOtpProps {\n otp: string \| number;\n color: string;\n onCopy: (value: string) => void;\n}\n\nconst SecurityOtp = ({ otp, color, onCopy }: SecurityOtpProps) => {\n return (\n <div className=\"flex flex-row items-center bg-neutral-quaternary p-3 rounded-lg min-w-[15rem] justify-around w-full\">\n <div className=\"flex flex-row items-center w-[40%] justify-around\">\n <Text.Mono styles={{ fontSize: '24px', lineHeight: '27px' }}>{otp}</Text.Mono>\n </div>\n <div className=\"border-l border-solid border-neutral-tertiary h-8\" />\n <div className=\"flex flex-row items-center w-[40%] justify-around\">\n <CopyButton value={otp as string} showText={true} color={color} onCopy={onCopy} />\n </div>\n </div>\n );\n};\n\nSecurityOtp.displayName = 'SecurityOtp';\n\nexport default SecurityOtp;\n"],"names":["SecurityOtp","otp","color","onCopy","_jsxs","_jsx","Text","CopyButton"],"mappings":"wbASMA,MAAAA,EAAc,CAAC,CAAE,IAAAC,EAAK,MAAAC,EAAO,OAAAC,CAA0B,IAEzDC,EAAA,MAAA,CAAK,UAAU,sGAAqG,SAAA,CAClHC,EAAK,MAAA,CAAA,UAAU,oDACb,SAAAA,EAACC,EAAK,KAAK,CAAA,OAAQ,CAAE,SAAU,OAAQ,WAAY,MAAM,EAAK,SAAAL,GAC1D,CAAA,EACNI,EAAK,MAAA,CAAA,UAAU,mDAAsD,CAAA,EACrEA,EAAK,MAAA,CAAA,UAAU,oDACb,SAAAA,EAACE,EAAU,CAAC,MAAON,EAAe,SAAU,GAAM,MAAOC,EAAO,OAAQC,CAAM,CAAA,CAC1E,CAAA,CAAA,CAAA,CAAA,EAKZH,EAAY,YAAc"}

package/dist/es/components/info/text-box.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as l,jsx as o,Fragment as y}from"react/jsx-runtime";import{ButtonContainer as p}from"../containers/button.js";import"../containers/card.js";import"@styled/css";import{HStack as s,Box as B}from"@styled/jsx";import{token as i}from"@styled/tokens";import C from"../icons/ico-checkmark.js";import $ from"../icons/ico-copy.js";import j from"../icons/ico-eye-closed.js";import k from"../icons/ico-eye-opened.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 d from"../primitives/text.js";import{useState as h,useEffect as f,useCallback as P}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";const u=b=>{const{content:r,onCopy:n,showHideButton:t,mono:w}=b,[e,m]=h(!!t),[a,c]=h(!1);f(()=>{if(a){const g=setTimeout(()=>{c(!1)},1500);return()=>clearTimeout(g)}},[a]),f(()=>{m(!!t)},[t]);const x=P(()=>{n&&(n(r),c(!0))},[r]);return l(s,{w:"full",px:4,py:3,rounded:10,bg:"surface.secondary",justifyContent:"space-between",position:"relative",children:[o(B,{textWrap:"nowrap",overflow:"hidden",userSelect:e?"none":"auto",filter:e?"blur(10px)":"",children:w?o(d.Mono,{truncate:!0,children:r}):o(d,{truncate:!0,children:r})}),l(s,{gap:3,children:[e&&o(p,{onPress:()=>m(!1),"aria-label":"show",children:o(j,{width:22,height:22,color:i("colors.brand.base")})}),t&&!e&&o(p,{onPress:()=>m(!0),"aria-label":"hide",children:o(k,{width:22,height:22,color:i("colors.brand.base")})}),n&&o(y,{children:a?o(C,{width:22,height:22,color:i("colors.brand.base")}):o(p,{onPress:x,"aria-label":"copy",children:o($,{width:22,height:22,color:i("colors.brand.base")})})})]})]})};u.displayName="TextBox";export{u as default};
+import{jsxs as c,jsx as r,Fragment as w}from"react/jsx-runtime";import{ButtonContainer as l}from"../containers/button.js";import"../containers/card.js";import{cn as v}from"../../lib/cn.js";import g from"../icons/ico-checkmark.js";import y from"../icons/ico-copy.js";import N from"../icons/ico-eye-closed.js";import j from"../icons/ico-eye-opened.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 s from"../primitives/text.js";import{useState as p,useEffect as d,useCallback as B}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";const h=f=>{const{content:o,onCopy:t,showHideButton:e,mono:u}=f,[i,a]=p(!!e),[n,m]=p(!1);d(()=>{if(n){const x=setTimeout(()=>{m(!1)},1500);return()=>clearTimeout(x)}},[n]),d(()=>{a(!!e)},[e]);const b=B(()=>{t&&(t(o),m(!0))},[o]);return c("div",{className:"flex flex-row items-center w-full px-4 py-3 rounded-[10px] bg-surface-secondary justify-between relative",children:[r("div",{className:v("text-nowrap overflow-hidden",i?"select-none blur-[10px]":"select-auto"),children:u?r(s.Mono,{truncate:!0,children:o}):r(s,{truncate:!0,children:o})}),c("div",{className:"flex flex-row items-center gap-3",children:[i&&r(l,{onPress:()=>a(!1),"aria-label":"show",children:r(N,{width:22,height:22,color:"var(--color-brand-base)"})}),e&&!i&&r(l,{onPress:()=>a(!0),"aria-label":"hide",children:r(j,{width:22,height:22,color:"var(--color-brand-base)"})}),t&&r(w,{children:n?r(g,{width:22,height:22,color:"var(--color-brand-base)"}):r(l,{onPress:b,"aria-label":"copy",children:r(y,{width:22,height:22,color:"var(--color-brand-base)"})})})]})]})};h.displayName="TextBox";export{h as default};
 //# sourceMappingURL=text-box.js.map

package/dist/es/components/info/text-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-box.js","sources":["../../../../src/components/info/text-box.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { IcoCheckmark, IcoCopy, IcoEyeClosed, IcoEyeOpened } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { ~~Box,~~ ~~HStack~~ } from '@~~styled~~/~~jsx~~';\nimport { ~~token } from '@styled/tokens';\nimport {~~ useCallback, useEffect, useState } from 'react';\n\nexport interface TextBoxProps {\n content: string;\n onCopy?: (content: string) => void;\n showHideButton?: boolean;\n mono?: boolean;\n}\n\nconst TextBox = (props: TextBoxProps) => {\n const { content, onCopy, showHideButton, mono } = props;\n const [isHidden, setIsHidden] = useState(Boolean(showHideButton));\n const [isCopied, setIsCopied] = useState(false);\n\n useEffect(() => {\n if (isCopied) {\n const timeoutId = setTimeout(() => {\n setIsCopied(false);\n }, 1500);\n\n return () => clearTimeout(timeoutId);\n }\n }, [isCopied]);\n\n useEffect(() => {\n if (showHideButton) {\n setIsHidden(true);\n } else {\n setIsHidden(false);\n }\n }, [showHideButton]);\n\n const handleOnCopy = useCallback(() => {\n if (!onCopy) return;\n onCopy(content);\n setIsCopied(true);\n }, [content]);\n\n return (\n <~~HStack\n w~~=\"full~~\"\n~~ px={4~~}\n~~ py={3~~}\n~~ rounded~~={10}\n~~ bg~~=\"~~surface.secondary~~\"\n justifyContent=\"space~~-between~~\"\n position=\"~~relative\"\n >\n <~~Box\n textWrap=\"~~nowrap~~\"\n~~ overflow~~=\"~~hidden~~\"\n userSelect={~~isHidden ? 'none' ~~: 'auto'}\n filter={isHidden ? '~~blur(10px)' : ''}\n >\n {mono ? <Text.Mono truncate>{content}</Text.Mono> : <Text truncate>{content}</Text>}\n </~~Box~~>\n\n <~~HStack~~ gap={3}>\n {isHidden && (\n <ButtonContainer onPress={() => setIsHidden(false)} aria-label=\"show\">\n <IcoEyeClosed width={22} height={22} color={~~token~~(~~'colors.~~brand.base')} />\n </ButtonContainer>\n )}\n {showHideButton && !isHidden && (\n <ButtonContainer onPress={() => setIsHidden(true)} aria-label=\"hide\">\n <IcoEyeOpened width={22} height={22} color={~~token~~(~~'colors.~~brand.base')} />\n </ButtonContainer>\n )}\n {onCopy && (\n <>\n {isCopied ? (\n <IcoCheckmark width={22} height={22} color={~~token~~(~~'colors.~~brand.base')} />\n ) : (\n <ButtonContainer onPress={handleOnCopy} aria-label=\"copy\">\n <IcoCopy width={22} height={22} color={~~token~~(~~'colors.~~brand.base')} />\n </ButtonContainer>\n )}\n </>\n )}\n </~~HStack~~>\n </~~HStack~~>\n );\n};\n\nTextBox.displayName = 'TextBox';\n\nexport default TextBox;\n"],"names":["TextBox","props","content","onCopy","showHideButton","mono","isHidden","setIsHidden","useState","isCopied","setIsCopied","useEffect","timeoutId","handleOnCopy","useCallback","_jsxs","~~HStack","~~_jsx","~~Box~~","Text","ButtonContainer","IcoEyeClosed","~~token","~~IcoEyeOpened","_Fragment","IcoCheckmark","IcoCopy"],"mappings":"m+~~BAcMA~~,~~MAAAA~~,EAAWC,GAAuB,CACtC,KAAM,CAAE,QAAAC,EAAS,OAAAC,EAAQ,eAAAC,EAAgB,KAAAC,CAAI,EAAKJ,EAC5C,CAACK,EAAUC,CAAW,EAAIC,EAAS,~~CAAA,~~CAAQJ,CAAe,EAC1D,CAACK,EAAUC,CAAW,EAAIF,EAAS,EAAK,EAE9CG,EAAU,IAAK,CACb,GAAIF,EAAU,CACZ,MAAMG,EAAY,WAAW,IAAK,CAChCF,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaE,CAAS,CACrC,CACF,EAAG,CAACH,CAAQ,CAAC,EAEbE,EAAU,IAAK,CAEXJ,EADE,~~EAAAH~~,CACc,CAIpB,EAAG,CAACA,CAAc,CAAC,EAEnB,MAAMS,EAAeC,EAAY,IAAK,CAC/BX,IACLA,EAAOD,CAAO,EACdQ,EAAY,EAAI,EAClB,EAAG,CAACR,CAAO,CAAC,EAEZ,OACEa,~~EAACC~~,~~EACC~~,~~CAAA~~,~~EAAE,OACF,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,GAAG,oBACH,eAAe,gBACf,SAAS,WAAU,~~SAAA,~~CAEnBC~~,~~EAACC~~,~~EACC~~,~~CAAA~~,~~SAAS~~,~~SACT~~,~~SAAS~~,~~SACT,WAAYZ,~~EAAW,~~OAAS~~,~~OAChC~~,~~OAAQA~~,~~EAAW~~,~~aAAe~~,~~GAAE,SAEnCD,EAAOY,~~EAACE,EAAK,KAAK,CAAA,~~SAAU~~,~~GAAA~~,~~SAAAjB,CAAoB,~~CAAA,~~EAAGe~~,EAACE,~~EAAK~~,~~CAAA~~,SAAU,GAAA,~~SAAAjB~~,~~CAAe~~,CAAA,~~CAAA~~,~~CAAA~~,~~EAGrFa~~,~~EAACC~~,~~EAAM,CAAC,IAAK,EAAC,~~SAAA,~~CACXV~~,~~GACCW~~,EAACG,~~EAAe~~,~~CAAC~~,QAAS,~~IAAMb~~,EAAY,EAAK,EAAC,aAAa,~~OAAM~~,~~SACnEU~~,EAACI,EAAa,CAAA,MAAO,GAAI,OAAQ,GAAI,~~MAAOC~~,~~EAAM~~,~~mBAAmB,CAAK,~~CAAA,CAAA,CAAA,~~EAG7ElB~~,GAAkB,CAACE,~~GAClBW~~,EAACG,EAAgB,CAAA,QAAS,~~IAAMb~~,EAAY,EAAI,EAAC,aAAa,~~OAAM~~,~~SAClEU~~,~~EAACM~~,EAAa,CAAA,MAAO,GAAI,OAAQ,GAAI,~~MAAOD~~,~~EAAM~~,~~mBAAmB~~,~~CAAC,~~CAAA,~~CACtD,~~CAAA,~~EAEnBnB~~,~~GACCc~~,~~EACGO~~,EAAA,CAAA,~~SAAAf~~,~~EACCQ~~,~~EAACQ~~,~~EAAY~~,~~CAAC~~,MAAO,GAAI,OAAQ,GAAI,~~MAAOH~~,~~EAAM~~,~~mBAAmB,CAAK,~~CAAA,~~EAE1EL~~,EAACG,~~EAAgB~~,~~CAAA~~,~~QAASP,~~EAAyB,aAAA,~~OACjD~~,~~SAAAI~~,~~EAACS~~,~~EAAO,CAAC,~~MAAO,GAAI,OAAQ,GAAI,~~MAAOJ~~,~~EAAM~~,~~mBAAmB,CAAK,~~CAAA,~~CAAA~~,CAAA,~~CAExE,~~CAAA,~~CAEJ~~,~~CAAA,CAAA,CACM,~~CACF,CAAA,~~CAEb~~,~~EAEAtB~~,EAAQ,YAAc"}
1	+ {"version":3,"file":"text-box.js","sources":["../../../../src/components/info/text-box.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { IcoCheckmark, IcoCopy, IcoEyeClosed, IcoEyeOpened } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { cn } from '@lib/cn';\nimport { useCallback, useEffect, useState } from 'react';\n\nexport interface TextBoxProps {\n content: string;\n onCopy?: (content: string) => void;\n showHideButton?: boolean;\n mono?: boolean;\n}\n\nconst TextBox = (props: TextBoxProps) => {\n const { content, onCopy, showHideButton, mono } = props;\n const [isHidden, setIsHidden] = useState(Boolean(showHideButton));\n const [isCopied, setIsCopied] = useState(false);\n\n useEffect(() => {\n if (isCopied) {\n const timeoutId = setTimeout(() => {\n setIsCopied(false);\n }, 1500);\n\n return () => clearTimeout(timeoutId);\n }\n }, [isCopied]);\n\n useEffect(() => {\n if (showHideButton) {\n setIsHidden(true);\n } else {\n setIsHidden(false);\n }\n }, [showHideButton]);\n\n const handleOnCopy = useCallback(() => {\n if (!onCopy) return;\n onCopy(content);\n setIsCopied(true);\n }, [content]);\n\n return (\n <div className=\"flex flex-row items-center w-full px-4 py-3 rounded-[10px] bg-surface-secondary justify-between relative\">\n <div className={cn('text-nowrap overflow-hidden', isHidden ? 'select-none blur-[10px]' : 'select-auto')}>\n {mono ? <Text.Mono truncate>{content}</Text.Mono> : <Text truncate>{content}</Text>}\n </div>\n\n <div className=\"flex flex-row items-center gap-3\">\n {isHidden && (\n <ButtonContainer onPress={() => setIsHidden(false)} aria-label=\"show\">\n <IcoEyeClosed width={22} height={22} color={'var(--color-brand-base)'} />\n </ButtonContainer>\n )}\n {showHideButton && !isHidden && (\n <ButtonContainer onPress={() => setIsHidden(true)} aria-label=\"hide\">\n <IcoEyeOpened width={22} height={22} color={'var(--color-brand-base)'} />\n </ButtonContainer>\n )}\n {onCopy && (\n <>\n {isCopied ? (\n <IcoCheckmark width={22} height={22} color={'var(--color-brand-base)'} />\n ) : (\n <ButtonContainer onPress={handleOnCopy} aria-label=\"copy\">\n <IcoCopy width={22} height={22} color={'var(--color-brand-base)'} />\n </ButtonContainer>\n )}\n </>\n )}\n </div>\n </div>\n );\n};\n\nTextBox.displayName = 'TextBox';\n\nexport default TextBox;\n"],"names":["TextBox","props","content","onCopy","showHideButton","mono","isHidden","setIsHidden","useState","isCopied","setIsCopied","useEffect","timeoutId","handleOnCopy","useCallback","_jsxs","_jsx","cn","Text","ButtonContainer","IcoEyeClosed","IcoEyeOpened","_Fragment","IcoCheckmark","IcoCopy"],"mappings":"+5BAaA,MAAMA,EAAWC,GAAuB,CACtC,KAAM,CAAE,QAAAC,EAAS,OAAAC,EAAQ,eAAAC,EAAgB,KAAAC,CAAI,EAAKJ,EAC5C,CAACK,EAAUC,CAAW,EAAIC,EAAS,CAAQJ,CAAAA,CAAe,EAC1D,CAACK,EAAUC,CAAW,EAAIF,EAAS,EAAK,EAE9CG,EAAU,IAAK,CACb,GAAIF,EAAU,CACZ,MAAMG,EAAY,WAAW,IAAK,CAChCF,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaE,CAAS,CACrC,CACF,EAAG,CAACH,CAAQ,CAAC,EAEbE,EAAU,IAAK,CAEXJ,EADE,CAAAH,CAAAA,CACc,CAIpB,EAAG,CAACA,CAAc,CAAC,EAEnB,MAAMS,EAAeC,EAAY,IAAK,CAC/BX,IACLA,EAAOD,CAAO,EACdQ,EAAY,EAAI,EAClB,EAAG,CAACR,CAAO,CAAC,EAEZ,OACEa,SAAK,UAAU,2GACb,SAAA,CAAAC,EAAA,MAAA,CAAK,UAAWC,EAAG,8BAA+BX,EAAW,0BAA4B,aAAa,EACnG,SAAAD,EAAOW,EAACE,EAAK,KAAK,CAAA,qBAAUhB,CAAO,CAAA,EAAgBc,EAACE,EAAI,CAAC,SAAU,GAAA,SAAAhB,GAChE,CAAA,EAENa,SAAK,UAAU,mCACZ,SAAA,CAAAT,GACCU,EAACG,EAAgB,CAAA,QAAS,IAAMZ,EAAY,EAAK,EAAC,aAAa,OAC7D,SAAAS,EAACI,EAAa,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAO,yBAA6B,CAAA,CAAA,CAAA,EAG5EhB,GAAkB,CAACE,GAClBU,EAACG,EAAgB,CAAA,QAAS,IAAMZ,EAAY,EAAI,EAAC,aAAa,OAC5D,SAAAS,EAACK,EAAa,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAO,yBAA6B,CAAA,CAAA,CAAA,EAG5ElB,GACCa,EAAAM,EAAA,CAAA,SACGb,EACCO,EAACO,EAAa,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAO,yBAA6B,CAAA,EAEzEP,EAACG,GAAgB,QAASN,EAAyB,aAAA,gBACjDG,EAACQ,GAAQ,MAAO,GAAI,OAAQ,GAAI,MAAO,2BACvB,CAAA,GAGvB,CAAA,CAAA,CACG,CACF,CAAA,CAEV,EAEAxB,EAAQ,YAAc"}

package/dist/es/components/info/wallet-address.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as C,Fragment as b}from"react/jsx-runtime";import{ButtonContainer as F}from"../containers/button.js";import"../containers/card.js";import{css as f}from"@styled/css";import{HStack as S}from"@styled/jsx";import{token as d}from"@styled/tokens";import W from"../icons/ico-checkmark.js";import $ from"../icons/ico-copy.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"../primitives/text.js";import{forwardRef as k,useState as w,useCallback as z,useEffect as N}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";const u=k((h,g)=>{const{address:r,onCopy:e,size:m="md",icon:n,fontColor:s="text.tertiary",fontWeight:a="normal",fontFamily:p="inherit"}=h,[o,l]=w(!1),c=`${r.slice(0,6)}...${r?.slice(-4)}`,i=m==="sm"?16:20,x=z(()=>{e&&e(r),l(!0)},[r]);return N(()=>{if(o){const y=setTimeout(()=>{l(!1)},1500);return()=>clearTimeout(y)}},[o]),e?t(F,{className:f({fontSize:m,color:o?"positive.base":s,fontWeight:o?"medium":a,rounded:"button",fontVariant:"no-contextual",transition:"none",fontFamily:p}),onPress:x,ref:g,children:C(S,{gap:2,children:[o?n?"Copied":"Copied!":c,n&&t(b,{children:o?t(W,{width:i,height:i,color:d("colors.positive.base")}):t($,{width:i,height:i,color:d("colors.text.tertiary")})})]})}):t("span",{className:f({fontSize:m,color:s,fontWeight:a,fontVariant:"no-contextual",fontFamily:p}),children:c})});u.displayName="WalletAddress";export{u as default};
+import{jsx as o,jsxs as b,Fragment as w}from"react/jsx-runtime";import{ButtonContainer as F}from"../containers/button.js";import"../containers/card.js";import{cn as a}from"../../lib/cn.js";import N from"../icons/ico-checkmark.js";import $ from"../icons/ico-copy.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"../primitives/text.js";import{forwardRef as j,useState as T,useCallback as W,useEffect as k}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";const f={sm:"text-sm",md:"text-base"},x={"text.primary":"text-text-primary","text.secondary":"text-text-secondary","text.tertiary":"text-text-tertiary"},u={normal:"font-normal",medium:"font-medium"},y=j((h,v)=>{const{address:e,onCopy:i,size:m="md",icon:n,fontColor:s="text.tertiary",fontWeight:l="normal",fontFamily:p="inherit"}=h,[t,c]=T(!1),d=`${e.slice(0,6)}...${e?.slice(-4)}`,r=m==="sm"?16:20,g=W(()=>{i&&i(e),c(!0)},[e]);return k(()=>{if(t){const C=setTimeout(()=>{c(!1)},1500);return()=>clearTimeout(C)}},[t]),i?o(F,{className:a(f[m],t?"text-positive-base font-medium":a(x[s],u[l]),"rounded-button [font-variant:no-contextual] transition-none"),style:{fontFamily:p},onPress:g,ref:v,children:b("div",{className:"flex flex-row items-center gap-2",children:[t?n?"Copied":"Copied!":d,n&&o(w,{children:t?o(N,{width:r,height:r,color:"var(--color-positive-base)"}):o($,{width:r,height:r,color:"var(--color-text-tertiary)"})})]})}):o("span",{className:a(f[m],x[s],u[l],"[font-variant:no-contextual]"),style:{fontFamily:p},children:d})});y.displayName="WalletAddress";export{y as default};
 //# sourceMappingURL=wallet-address.js.map

package/dist/es/components/info/wallet-address.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wallet-address.js","sources":["../../../../src/components/info/wallet-address.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { IcoCheckmark, IcoCopy } from '@components/icons';\nimport { ~~css~~ } from '@~~styled~~/~~css~~';\nimport { ~~HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {~~ forwardRef, useCallback, useEffect, useState } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface WalletAddressProps extends AriaButtonProps {\n address: string;\n onCopy?: (address: string) => void;\n size?: 'sm' \| 'md';\n icon?: boolean;\n fontColor?: 'text.primary' \| 'text.secondary' \| 'text.tertiary';\n fontWeight?: 'normal' \| 'medium';\n fontFamily?: string;\n}\n\nconst WalletAddress = forwardRef<HTMLButtonElement, WalletAddressProps>((props, forwardedRef) => {\n const {\n address,\n onCopy,\n size = 'md',\n icon,\n fontColor = 'text.tertiary',\n fontWeight = 'normal',\n fontFamily = 'inherit',\n } = props;\n const [isCopied, setIsCopied] = useState(false);\n const truncatedAddress = `${address.slice(0, 6)}...${address?.slice(-4)}`;\n const iconSize = size === 'sm' ? 16 : 20;\n\n const handleOnCopy = useCallback(() => {\n if (onCopy) {\n onCopy(address);\n }\n setIsCopied(true);\n }, [address]);\n\n useEffect(() => {\n if (isCopied) {\n const timeoutId = setTimeout(() => {\n setIsCopied(false);\n }, 1500);\n\n return () => clearTimeout(timeoutId);\n }\n }, [isCopied]);\n\n if (!onCopy) {\n return (\n <span\n className={~~css~~({\n ~~fontSize:~~ size,\n ~~color:~~ fontColor,\n fontWeight,\n ~~fontVariant~~: 'no-contextual',\n ~~fontFamily,\~~n })}\n >\n {truncatedAddress}\n </span>\n );\n }\n\n return (\n <ButtonContainer\n className={~~css~~({\n ~~fontSize:~~ size,\n ~~color:~~ isCopied ? 'positive.base' : fontColor~~,\n fontWeight:~~ ~~isCopied ? 'medium' :~~ fontWeight,\n rounded: ~~'button',\n fontVariant~~: 'no-contextual~~',\n~~ transition~~: '~~none',\n ~~fontFamily,\~~n })}\n onPress={handleOnCopy}\n ref={forwardedRef}\n >\n <~~HStack~~ gap={2}>\n {isCopied ? (icon ? 'Copied' : 'Copied!') : truncatedAddress}\n {icon && (\n <>\n {isCopied ? (\n <IcoCheckmark width={iconSize} height={iconSize} color={~~token~~(~~'colors.~~positive.base')} />\n ) : (\n <IcoCopy width={iconSize} height={iconSize} color={~~token~~(~~'colors.~~text.tertiary')} />\n )}\n </>\n )}\n </~~HStack~~>\n </ButtonContainer>\n );\n});\n\nWalletAddress.displayName = 'WalletAddress';\n\nexport default WalletAddress;\n"],"names":["WalletAddress","forwardRef","props","forwardedRef","address","onCopy","size","icon","fontColor","fontWeight","fontFamily","isCopied","setIsCopied","useState","truncatedAddress","iconSize","handleOnCopy","useCallback","useEffect","timeoutId","_jsx","ButtonContainer","~~css~~","_jsxs","~~HStack","~~_Fragment","IcoCheckmark","~~token","~~IcoCopy"],"mappings":"~~65BAkBMA~~,MAAAA,EAAgBC,EAAkD,CAACC,EAAOC,IAAgB,CAC9F,KAAM,CACJ,QAAAC,EACA,OAAAC,EACA,KAAAC,EAAO,KACP,KAAAC,EACA,UAAAC,EAAY,gBACZ,WAAAC,EAAa,SACb,WAAAC,EAAa,SAAS,EACpBR,EACE,CAACS,EAAUC,CAAW,EAAIC,EAAS,EAAK,EACxCC,EAAmB,GAAGV,EAAQ,MAAM,EAAG,CAAC,CAAC,MAAMA,GAAS,MAAM,EAAE,CAAC,GACjEW,EAAWT,IAAS,KAAO,GAAK,GAEhCU,EAAeC,EAAY,IAAK,CAChCZ,GACFA,EAAOD,CAAO,EAEhBQ,EAAY,EAAI,CAClB,EAAG,CAACR,CAAO,CAAC,EAYZ,OAVAc,EAAU,IAAK,CACb,GAAIP,EAAU,CACZ,MAAMQ,EAAY,WAAW,IAAK,CAChCP,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaO,CAAS,CACrC,CACF,EAAG,CAACR,CAAQ,CAAC,EAERN,EAiBHe,EAACC,~~GACC~~,UAAWC,~~EAAI~~,~~CACb~~,~~SAAUhB~~,~~EACV~~,~~MAAOK,~~EAAW,~~gBAAkBH~~,~~EACpC~~,~~WAAYG~~,~~EAAW~~,~~SAAWF~~,~~EAClC~~,~~QAAS~~,~~SACT~~,~~YAAa~~,~~gBACb~~,~~WAAY~~,~~OACZ~~,WAAAC,~~EACD~~,~~EACD~~,QAASM,EACT,IAAKb,EAEL,SAAAoB,~~EAACC~~,~~EAAO~~,~~CAAA~~,~~IAAK~~,~~EAAC~~,SAAA,~~CACXb~~,EAAYJ,EAAO,SAAW,UAAaO,EAC3CP,GACCa,~~EAAAK~~,EAAA,CAAA,~~SACGd~~,EACCS,~~EAACM~~,EAAa,CAAA,~~MAAOX~~,EAAU,OAAQA,EAAU,~~MAAOY~~,~~EAAM~~,~~sBAAsB~~,~~CAAK~~,~~CAAA~~,~~EAEzFP~~,~~EAACQ~~,~~GAAQ~~,~~MAAOb,~~EAAU,OAAQA,EAAU,~~MAAOY~~,~~EAAM~~,~~sBAAsB~~,~~GAChF~~,CAAA,~~CAEJ~~,~~CACM~~,CAAA,CAAA,CAAA,~~EAvCTP~~,EAAA,OAAA,CACE,UAAWE,~~EAAI~~,~~CACb~~,~~SAAUhB~~,~~EACV~~,~~MAAOE~~,~~EACP~~,~~WAAAC~~,~~EACA~~,~~YAAa~~,~~gBACb~~,WAAAC,~~CACD~~,~~CAAA~~,~~EAEA~~,~~SAAAI~~,~~CACI,~~CAAA,~~CAgCb~~,CAAC,EAEDd,EAAc,YAAc"}
1	+ {"version":3,"file":"wallet-address.js","sources":["../../../../src/components/info/wallet-address.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { IcoCheckmark, IcoCopy } from '@components/icons';\nimport { cn } from '@lib/cn';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface WalletAddressProps extends AriaButtonProps {\n address: string;\n onCopy?: (address: string) => void;\n size?: 'sm' \| 'md';\n icon?: boolean;\n fontColor?: 'text.primary' \| 'text.secondary' \| 'text.tertiary';\n fontWeight?: 'normal' \| 'medium';\n fontFamily?: string;\n}\n\nconst sizeClasses = {\n sm: 'text-sm',\n md: 'text-base',\n};\n\nconst fontColorClasses = {\n 'text.primary': 'text-text-primary',\n 'text.secondary': 'text-text-secondary',\n 'text.tertiary': 'text-text-tertiary',\n};\n\nconst fontWeightClasses = {\n normal: 'font-normal',\n medium: 'font-medium',\n};\n\nconst WalletAddress = forwardRef<HTMLButtonElement, WalletAddressProps>((props, forwardedRef) => {\n const {\n address,\n onCopy,\n size = 'md',\n icon,\n fontColor = 'text.tertiary',\n fontWeight = 'normal',\n fontFamily = 'inherit',\n } = props;\n const [isCopied, setIsCopied] = useState(false);\n const truncatedAddress = `${address.slice(0, 6)}...${address?.slice(-4)}`;\n const iconSize = size === 'sm' ? 16 : 20;\n\n const handleOnCopy = useCallback(() => {\n if (onCopy) {\n onCopy(address);\n }\n setIsCopied(true);\n }, [address]);\n\n useEffect(() => {\n if (isCopied) {\n const timeoutId = setTimeout(() => {\n setIsCopied(false);\n }, 1500);\n\n return () => clearTimeout(timeoutId);\n }\n }, [isCopied]);\n\n if (!onCopy) {\n return (\n <span\n className={cn(\n sizeClasses[size],\n fontColorClasses[fontColor],\n fontWeightClasses[fontWeight],\n '[font-variant:no-contextual]',\n )}\n style={{ fontFamily }}\n >\n {truncatedAddress}\n </span>\n );\n }\n\n return (\n <ButtonContainer\n className={cn(\n sizeClasses[size],\n isCopied ? 'text-positive-base font-medium' : cn(fontColorClasses[fontColor], fontWeightClasses[fontWeight]),\n 'rounded-button [font-variant:no-contextual] transition-none',\n )}\n style={{ fontFamily }}\n onPress={handleOnCopy}\n ref={forwardedRef}\n >\n <div className=\"flex flex-row items-center gap-2\">\n {isCopied ? (icon ? 'Copied' : 'Copied!') : truncatedAddress}\n {icon && (\n <>\n {isCopied ? (\n <IcoCheckmark width={iconSize} height={iconSize} color={'var(--color-positive-base)'} />\n ) : (\n <IcoCopy width={iconSize} height={iconSize} color={'var(--color-text-tertiary)'} />\n )}\n </>\n )}\n </div>\n </ButtonContainer>\n );\n});\n\nWalletAddress.displayName = 'WalletAddress';\n\nexport default WalletAddress;\n"],"names":["sizeClasses","fontColorClasses","fontWeightClasses","WalletAddress","forwardRef","props","forwardedRef","address","onCopy","size","icon","fontColor","fontWeight","fontFamily","isCopied","setIsCopied","useState","truncatedAddress","iconSize","handleOnCopy","useCallback","useEffect","timeoutId","_jsx","ButtonContainer","cn","_jsxs","_Fragment","IcoCheckmark","IcoCopy"],"mappings":"o1BAgBMA,MAAAA,EAAc,CAClB,GAAI,UACJ,GAAI,aAGAC,EAAmB,CACvB,eAAgB,oBAChB,iBAAkB,sBAClB,gBAAiB,sBAGbC,EAAoB,CACxB,OAAQ,cACR,OAAQ,eAGJC,EAAgBC,EAAkD,CAACC,EAAOC,IAAgB,CAC9F,KAAM,CACJ,QAAAC,EACA,OAAAC,EACA,KAAAC,EAAO,KACP,KAAAC,EACA,UAAAC,EAAY,gBACZ,WAAAC,EAAa,SACb,WAAAC,EAAa,SAAS,EACpBR,EACE,CAACS,EAAUC,CAAW,EAAIC,EAAS,EAAK,EACxCC,EAAmB,GAAGV,EAAQ,MAAM,EAAG,CAAC,CAAC,MAAMA,GAAS,MAAM,EAAE,CAAC,GACjEW,EAAWT,IAAS,KAAO,GAAK,GAEhCU,EAAeC,EAAY,IAAK,CAChCZ,GACFA,EAAOD,CAAO,EAEhBQ,EAAY,EAAI,CAClB,EAAG,CAACR,CAAO,CAAC,EAYZ,OAVAc,EAAU,IAAK,CACb,GAAIP,EAAU,CACZ,MAAMQ,EAAY,WAAW,IAAK,CAChCP,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaO,CAAS,CACrC,CACF,EAAG,CAACR,CAAQ,CAAC,EAERN,EAiBHe,EAACC,EAAe,CACd,UAAWC,EACTzB,EAAYS,CAAI,EAChBK,EAAW,iCAAmCW,EAAGxB,EAAiBU,CAAS,EAAGT,EAAkBU,CAAU,CAAC,EAC3G,6DAA6D,EAE/D,MAAO,CAAE,WAAAC,CAAU,EACnB,QAASM,EACT,IAAKb,EAEL,SAAAoB,EAAA,MAAA,CAAK,UAAU,mCAAkC,SAAA,CAC9CZ,EAAYJ,EAAO,SAAW,UAAaO,EAC3CP,GACCa,EACGI,EAAA,CAAA,SAAAb,EACCS,EAACK,EAAa,CAAA,MAAOV,EAAU,OAAQA,EAAU,MAAO,4BAAgC,CAAA,EAExFK,EAACM,EAAQ,CAAA,MAAOX,EAAU,OAAQA,EAAU,MAAO,4BAAgC,CAAA,CAEpF,CAAA,CACJ,CACG,CAAA,CAAA,CAAA,EApCNK,EAAA,OAAA,CACE,UAAWE,EACTzB,EAAYS,CAAI,EAChBR,EAAiBU,CAAS,EAC1BT,EAAkBU,CAAU,EAC5B,8BAA8B,EAEhC,MAAO,CAAE,WAAAC,CAAY,EAAA,SAEpBI,CAAgB,CAAA,CA8BzB,CAAC,EAEDd,EAAc,YAAc"}

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 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};
+import{jsxs as l,jsx as o}from"react/jsx-runtime";import le from"../icons/ico-arrow-right.js";import ae from"../icons/ico-caret-down.js";import se from"../icons/ico-checkmark-circle-fill.js";import T 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 P from"../primitives/text.js";import{cn as E}from"../../lib/cn.js";import{useState as d,useRef as m,useMemo as C,useCallback as _,useEffect as L}from"react";import{useButton as ue,useFocusRing as ce,useKeyboard as de,mergeProps as z}from"react-aria";import{usePhoneInput as me,defaultCountries as f,FlagImage as fe}from"react-international-phone";const B=({iso2:c})=>o("div",{className:"flex w-[1.125rem] h-[1.125rem] rounded-full border border-neutral-primary overflow-hidden items-center",children:o(fe,{src:`https://flagcdn.com/${c}.svg`,iso2:c,size:16,className:"object-cover"})}),M=c=>{const{onChange:W,onSubmit:p,autoFocus:U=!0,errorMessage:j,disableSubmit:G,showPlaceholder:h}=c,[F,H]=d(""),[J,N]=d(!1),[s,b]=d(!1),[a,v]=d(0),[D,S]=d(""),O=m(null),Q=m(null),x=m(null),y=m([]),V=m(void 0),{country:n,setCountry:K,inputRef:g,handlePhoneValueChange:X,inputValue:Y}=me({defaultCountry:"us",value:F,onChange:e=>{H(e.phone),W(e.phone)},disableDialCodeAndPrefix:h}),R=G?.(F,n.iso2),Z=C(()=>{const e=f.find(([,r])=>r===n.iso2);return e?e[2]:"1"},[n.iso2]),ee=C(()=>{const e=f.find(([,t])=>t===n.iso2),r=e&&typeof e[3]=="string"?e[3]:null;return r?r.replace(/\./g,"5"):"(555) 555-5555"},[n.iso2]),i=C(()=>{const e=f.filter(([,t])=>t!==n.iso2),r=f.find(([,t])=>t===n.iso2);return r?[r,...e]:[...f]},[n.iso2]),$=C(()=>i.filter(([,e])=>e!==n.iso2),[n.iso2]),I=_(e=>{var r;K(e),b(!1),(r=g.current)===null||r===void 0||r.focus()},[K]),re=_(()=>{b(!s),s||(v(0),setTimeout(()=>{var e;return(e=x.current)===null||e===void 0?void 0:e.focus()}))},[s]),{buttonProps:te}=ue({onPress:re},O),{focusProps:q,isFocusVisible:A}=ce(),{keyboardProps:oe}=de({onKeyDown:e=>{var r;if(s)switch(e.key){case"ArrowDown":e.preventDefault(),v(t=>(t+1)%i.length);break;case"ArrowUp":e.preventDefault(),v(t=>(t-1+i.length)%i.length);break;case"Enter":if(e.preventDefault(),a>=0){const[,t]=i[a];I(t)}break;case"Escape":b(!1),(r=g.current)===null||r===void 0||r.focus();break;default:(e.key===" "||e.key.match(/[\w]/i))&&(e.preventDefault(),clearTimeout(V.current),S(t=>t+e.key),V.current=window.setTimeout(()=>{S("")},1e3));break}}});L(()=>{var e;U&&((e=g.current)===null||e===void 0||e.focus());const r=t=>{x.current&&!x.current.contains(t.target)&&(b(!1),N(!1))};return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[]),L(()=>{var e;if(D!==""){const r=$.findIndex(([t])=>t.toLowerCase().startsWith(D.toLowerCase()));if(r!==-1){const t=i.findIndex(([w])=>w===$[r][0]);v(t),(e=y.current[t])===null||e===void 0||e.scrollIntoView({behavior:"smooth",block:"nearest"})}}},[D,i,n.iso2]),L(()=>{var e;a>=0&&y.current[a]&&((e=y.current[a])===null||e===void 0||e.scrollIntoView({behavior:"smooth",block:"nearest"}))},[a]);const ne=()=>{N(!0)},ie=()=>{N(!1)};return l("div",{className:"flex flex-col gap-2 items-center",style:c.containerStyles,children:[l("div",{...z(oe,q),ref:Q,className:E("flex h-fit w-full items-center justify-center border border-neutral-secondary rounded-input transition-all duration-[120ms] linear outline-offset-[0.125rem] relative hover:border-neutral-primary",J&&!A?"outline outline-brand-base outline-thick":"outline-none"),onFocus:ne,onBlur:ie,children:[o("button",{...z(te,q),className:E("flex justify-center items-center rounded-l-input h-12 w-20 px-3 cursor-pointer transition-all duration-[120ms] linear hover:bg-surface-tertiary",A?"outline outline-brand-base outline-thick outline-offset-[0.125rem]":"outline-none"),children:l("div",{className:"flex flex-row items-center gap-2",children:[o(B,{iso2:n.iso2}),o(ae,{width:14,height:14,transform:s?"rotate(180)":""})]})}),s&&o("div",{ref:x,tabIndex:-1,className:"bg-surface-primary absolute w-full rounded-input top-[55px] shadow-[4px_8px_20px_0px_rgba(0,0,0,0.15)] max-h-[17.5rem] overflow-y-auto outline-none",children:i.map(([e,r,t],w)=>{const u=n.iso2===r;return l("div",{className:E("flex flex-row items-center cursor-pointer gap-2 p-4 justify-between",u?"bg-brand-base":a===w?"bg-brand-lightest":"",!u&&"hover:bg-brand-lightest"),role:"option",tabIndex:0,"aria-selected":u,ref:k=>y.current[w]=k,onClick:()=>I(r),onKeyDown:k=>{(k.key==="Enter"||k.key===" ")&&I(r)},children:[l("div",{className:"flex flex-row items-center gap-4",children:[u?o(se,{width:18,height:18,color:"var(--color-surface-primary)"}):o(B,{iso2:r}),o(P,{fontColor:u?"text.quaternary":"text.primary",children:e})]}),l(P,{fontColor:u?"text.quaternary":"text.tertiary",children:["+",t]})]},r)})}),l("div",{className:"flex flex-row items-center gap-0 flex-1",style:{borderLeftWidth:"thin",borderColor:"var(--color-neutral-secondary)"},children:[h?l("span",{className:"text-text-primary font-medium text-md pl-4 pr-2 select-none",children:["+",Z]}):null,o("input",{type:"tel",inputMode:"tel",onChange:X,value:Y,ref:g,placeholder:h?ee:"",onKeyDown:e=>{e.key==="Enter"&&p&&!R&&(e.preventDefault(),p())},className:"transition-all duration-[120ms] linear w-full box-border rounded-none m-0 min-w-10 font-medium bg-transparent text-text-primary h-12 text-md py-3 pr-4 text-left outline-none placeholder:text-text-tertiary",style:{paddingLeft:h?0:"1rem"}})]}),p&&o("div",{style:{paddingRight:"16px"},children:o(T,{"aria-label":"Submit phone number",variant:"text",textStyle:"neutral",onPress:p,disabled:R,children:o(T.LeadingIcon,{color:"var(--color-text-tertiary)",children:o(le,{})})})})]}),j&&o(P,{variant:"error",size:"sm",fontWeight:"normal",children:j})]})};M.displayName="PhoneInput";export{M 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 { 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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"}
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 { cn } from '@lib/cn';\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 <div className=\"flex w-[1.125rem] h-[1.125rem] rounded-full border border-neutral-primary overflow-hidden items-center\">\n <FlagImage src={`https://flagcdn.com/${iso2}.svg`} iso2={iso2} size={16} className=\"object-cover\" />\n </div>\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 <div className=\"flex flex-col gap-2 items-center\" style={props.containerStyles}>\n <div\n {...mergeProps(keyboardProps, focusProps)}\n ref={containerRef}\n className={cn(\n 'flex h-fit w-full items-center justify-center border border-neutral-secondary rounded-input transition-all duration-[120ms] linear outline-offset-[0.125rem] relative hover:border-neutral-primary',\n isFocused && !isButtonFocused ? 'outline outline-brand-base outline-thick' : 'outline-none',\n )}\n onFocus={handleFocus}\n onBlur={handleBlur}\n >\n <button\n {...mergeProps(buttonProps, focusProps)}\n className={cn(\n 'flex justify-center items-center rounded-l-input h-12 w-20 px-3 cursor-pointer transition-all duration-[120ms] linear hover:bg-surface-tertiary',\n isButtonFocused ? 'outline outline-brand-base outline-thick outline-offset-[0.125rem]' : 'outline-none',\n )}\n >\n <div className=\"flex flex-row items-center gap-2\">\n <FlagContainer iso2={country.iso2} />\n <IcoCaretDown width={14} height={14} transform={showDropdown ? 'rotate(180)' : ''} />\n </div>\n </button>\n\n {showDropdown && (\n <div\n ref={dropdownRef}\n tabIndex={-1}\n className=\"bg-surface-primary absolute w-full rounded-input top-[55px] shadow-[4px_8px_20px_0px_rgba(0,0,0,0.15)] max-h-[17.5rem] overflow-y-auto 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 <div\n className={cn(\n 'flex flex-row items-center cursor-pointer gap-2 p-4 justify-between',\n isSelectedCountry ? 'bg-brand-base' : isFocusedCountry ? 'bg-brand-lightest' : '',\n !isSelectedCountry && 'hover:bg-brand-lightest',\n )}\n key={iso2}\n role=\"option\"\n tabIndex={0}\n aria-selected={isSelectedCountry}\n ref={el => (itemRefs.current[index] = el)}\n onClick={() => handleSelect(iso2)}\n onKeyDown={e => {\n if (e.key === 'Enter' \|\| e.key === ' ') handleSelect(iso2);\n }}\n >\n <div className=\"flex flex-row items-center gap-4\">\n {isSelectedCountry ? (\n <IcoCheckmarkCircleFill width={18} height={18} color={'var(--color-surface-primary)'} />\n ) : (\n <FlagContainer iso2={iso2} />\n )}\n <Text fontColor={isSelectedCountry ? 'text.quaternary' : 'text.primary'}>{name}</Text>\n </div>\n <Text fontColor={isSelectedCountry ? 'text.quaternary' : 'text.tertiary'}>+{countryCode}</Text>\n </div>\n );\n })}\n </div>\n )}\n <div\n className=\"flex flex-row items-center gap-0 flex-1\"\n style={{ borderLeftWidth: 'thin', borderColor: 'var(--color-neutral-secondary)' }}\n >\n {showPlaceholder ? (\n <span className=\"text-text-primary font-medium text-md pl-4 pr-2 select-none\">+{currentCountryCode}</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=\"transition-all duration-[120ms] linear w-full box-border rounded-none m-0 min-w-10 font-medium bg-transparent text-text-primary h-12 text-md py-3 pr-4 text-left outline-none placeholder:text-text-tertiary\"\n style={{ paddingLeft: showPlaceholder ? 0 : '1rem' }}\n />\n </div>\n\n {onSubmit && (\n <div 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={'var(--color-text-tertiary)'}>\n <IcoArrowRight />\n </Button.LeadingIcon>\n </Button>\n </div>\n )}\n </div>\n {errorMessage && (\n <Text variant=\"error\" size=\"sm\" fontWeight=\"normal\">\n {errorMessage}\n </Text>\n )}\n </div>\n );\n};\n\nPhoneInput.displayName = 'PhoneInput';\nexport default PhoneInput;\n"],"names":["FlagContainer","iso2","_jsx","FlagImage","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","mergeProps","cn","IcoCaretDown","countryCode","index","isSelectedCountry","el","e","IcoCheckmarkCircleFill","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 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};
+import{jsx as $}from"react/jsx-runtime";import{TextInput as E}from"./text-input.js";import{cn as L}from"../../lib/cn.js";import{useState as B,useRef as D,useEffect as x,useCallback as v}from"react";const g=/\D/g,b=({pinLength:o,onComplete:A=l=>l,onChange:h=l=>l,id:p="pin-code-input",autoFocus:w=!0,className:T})=>{const[l,y]=B(()=>Array.from({length:o},()=>"")),a=D(Array(o).fill(null));x(()=>{y(r=>o<r.length?r.slice(0,o):o>r.length?[...r,...Array(o-r.length).fill("")]:r)},[o]),x(()=>{var r;w&&a.current[0]&&((r=a.current[0])===null||r===void 0||r.focus())},[w,o]);const d=(r,e)=>{var t;y(e),h(e);const n=e.join("");n.length===o&&((t=a.current[r])===null||t===void 0||t.blur(),A(n))},k=v((r,e)=>{const t=[...l];e.replace(g,"").split("").forEach(n=>{var u,c;r>=o||(t[r]=n,r++,(c=(u=a?.current)===null||u===void 0?void 0:u[r])===null||c===void 0||c.focus())}),d(r,t)},[l,d]),I=v(r=>{var e,t;const n=parseInt(r.currentTarget.dataset.id||"",10),u=r.target.value.replace(g,"");if(u.length>1)return k(n,u);const c=[...l];c[n]=u,u.length&&((t=(e=a?.current)===null||e===void 0?void 0:e[n+1])===null||t===void 0||t.focus()),d(n,c)},[d]),j=v(r=>{var e,t,n,u,c;const C=r.currentTarget.value.length,i=parseInt(r.currentTarget.dataset.id||"",10),f=[...l];switch(r.key){case"Backspace":{if(C&&(f[i]="",d(i,f)),i){const s=f.reduceRight((m,N,R)=>m!==-1?m:N!==""?R:m,-1);(e=a?.current[s>=0?s:0])===null||e===void 0||e.focus()}return}case"ArrowLeft":{const s=i?i-1:o-1;(t=a?.current[s])===null||t===void 0||t.focus();return}case"ArrowRight":{const s=i===o-1?0:i+1;(n=a?.current[s])===null||n===void 0||n.focus();return}default:{const s=r.key.replace(g,"");C&&s.length&&s!==r.currentTarget.value&&(f[i]=s,d(i,f),(c=(u=a?.current)===null||u===void 0?void 0:u[i+1])===null||c===void 0||c.focus())}}},[h,d]);return $("form",{id:p,className:"m-0 min-w-0 flex w-full justify-between max-w-[30rem] gap-2",children:l.map((r,e)=>$(E.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:l[e]||"",className:L("caret-transparent rounded-[0.5rem]",o===6&&e===2?"mr-4":"mr-0",T),attr:{onChange:I,onKeyUp:j,autoComplete:e===0?"one-time-code":"off",inputMode:"numeric"},ref:t=>{a?.current&&(a.current[e]=t)}},`${p||void 0}-${e}`))})};export{b as PinCodeInput,b 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(~~\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":"~~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,~~MAE1B~~,~~EAAA~~,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,~~KACjCb~~,~~EAAAA~~,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,~~SAG1CR~~,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,~~IAAA~~,~~CACR~~,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,~~MAAA~~,~~CACxE,~~CACA,MACF,CAEA,IAAK,YAAa,CAEhB,MAAMmB,EAAWjB,EAAeA,EAAe,EAAIhB,EAAY,GAC/DuB,EAAAb,GAAW,QAAQuB,CAAQ,KAAG,MAAAV,IAAA,QAAAA,EAAA,~~MAAA~~,~~EAC9B~~,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,EAEA,SAAA/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,~~EACTJ~~,~~EAAI~~,~~CACF,WAAY,cACZ,QAAS,SACT,YAAatC,~~IAAc,~~GAAKwC~~,IAAM,EAAI,~~EAAI~~,~~CAC/C~~,~~CAAA,EACDlC,~~CAAS,~~EAEX~~,KAAM,CACJ,SAAUkB,EACV,QAAAG,EACA,~~aAAca~~,IAAM,EAAI,gBAAkB,MAC1C,UAAW,SACZ,EACD,IAAKG,GAAK,~~CACJjC~~,GAAW,UACbA,EAAU,~~QAAQ8B~~,CAAC,EAAIG,EAE3B,~~CArBK~~,EAAA,~~GAAGvC~~,GAAM,MAAS,~~IAAIoC~~,CAAC,EAAE,~~CAuBjC~~,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 { cn } from '@lib/cn';\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 id={id} className=\"m-0 min-w-0 flex w-full justify-between max-w-[30rem] gap-2\">\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={cn('caret-transparent rounded-[0.5rem]', pinLength === 6 && i === 2 ? 'mr-4' : 'mr-0', 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","_","i","TextInput","cn","el"],"mappings":"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"}