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

@magiclabs/ui-components 1.52.1 → 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 (1474) hide show

package/dist/es/components/logos/logo-wallet-connect-mono.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as L,jsx as C}from"react/jsx-runtime";import{token as i}from"@styled/tokens";const n=({color:r,title:t,titleId:l,...o})=>{const e=r||i("colors.text.primary");return L("svg",{width:25,height:24,viewBox:"0 0 25 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:e,"aria-labelledby":l,...o,children:[t?C("title",{id:l,children:t}):null,C("path",{d:"M4.91675 7.51605C8.83338 3.68134 15.1835 3.68134 19.1001 7.51605L19.5715 7.97756C19.7673 8.16929 19.7673 8.48016 19.5715 8.6719L17.959 10.2506C17.8611 10.3465 17.7024 10.3465 17.6044 10.2506L16.9558 9.61554C14.2234 6.94035 9.79343 6.94035 7.06109 9.61554L6.36643 10.2957C6.26851 10.3915 6.10976 10.3915 6.01184 10.2957L4.39937 8.71693C4.20354 8.5252 4.20354 8.21433 4.39937 8.0226L4.91675 7.51605ZM22.4349 10.7811L23.87 12.1861C24.0658 12.3779 24.0658 12.6887 23.87 12.8805L17.399 19.2162C17.2032 19.4079 16.8857 19.4079 16.6898 19.2162C16.6898 19.2162 16.6898 19.2162 16.6898 19.2162L12.0971 14.7196C12.0482 14.6716 11.9688 14.6716 11.9198 14.7196L7.32721 19.2162C7.13138 19.4079 6.81387 19.408 6.61804 19.2162C6.61804 19.2162 6.61804 19.2162 6.61804 19.2162L0.146874 12.8804C-0.0489579 12.6887 -0.0489579 12.3778 0.146874 12.1861L1.58198 10.781C1.77781 10.5892 2.09532 10.5892 2.29115 10.781L6.88392 15.2777C6.93288 15.3256 7.01226 15.3256 7.06122 15.2777C7.06121 15.2777 7.06122 15.2777 7.06122 15.2777L11.6538 10.781C11.8496 10.5892 12.1671 10.5892 12.3629 10.781C12.3629 10.781 12.3629 10.781 12.3629 10.781L16.9557 15.2777C17.0047 15.3256 17.084 15.3256 17.133 15.2777L21.7257 10.7811C21.9215 10.5893 22.239 10.5893 22.4349 10.7811Z",fill:"currentColor"})]})};export{n as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";const i=({color:r,title:l,titleId:C,...L})=>e("svg",{width:25,height:24,viewBox:"0 0 25 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:r||"var(--color-text-primary)","aria-labelledby":C,...L,children:[l?t("title",{id:C,children:l}):null,t("path",{d:"M4.91675 7.51605C8.83338 3.68134 15.1835 3.68134 19.1001 7.51605L19.5715 7.97756C19.7673 8.16929 19.7673 8.48016 19.5715 8.6719L17.959 10.2506C17.8611 10.3465 17.7024 10.3465 17.6044 10.2506L16.9558 9.61554C14.2234 6.94035 9.79343 6.94035 7.06109 9.61554L6.36643 10.2957C6.26851 10.3915 6.10976 10.3915 6.01184 10.2957L4.39937 8.71693C4.20354 8.5252 4.20354 8.21433 4.39937 8.0226L4.91675 7.51605ZM22.4349 10.7811L23.87 12.1861C24.0658 12.3779 24.0658 12.6887 23.87 12.8805L17.399 19.2162C17.2032 19.4079 16.8857 19.4079 16.6898 19.2162C16.6898 19.2162 16.6898 19.2162 16.6898 19.2162L12.0971 14.7196C12.0482 14.6716 11.9688 14.6716 11.9198 14.7196L7.32721 19.2162C7.13138 19.4079 6.81387 19.408 6.61804 19.2162C6.61804 19.2162 6.61804 19.2162 6.61804 19.2162L0.146874 12.8804C-0.0489579 12.6887 -0.0489579 12.3778 0.146874 12.1861L1.58198 10.781C1.77781 10.5892 2.09532 10.5892 2.29115 10.781L6.88392 15.2777C6.93288 15.3256 7.01226 15.3256 7.06122 15.2777C7.06121 15.2777 7.06122 15.2777 7.06122 15.2777L11.6538 10.781C11.8496 10.5892 12.1671 10.5892 12.3629 10.781C12.3629 10.781 12.3629 10.781 12.3629 10.781L16.9557 15.2777C17.0047 15.3256 17.084 15.3256 17.133 15.2777L21.7257 10.7811C21.9215 10.5893 22.239 10.5893 22.4349 10.7811Z",fill:"currentColor"})]});export{i as default};
 //# sourceMappingURL=logo-wallet-connect-mono.js.map

package/dist/es/components/logos/logo-wallet-connect-mono.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"logo-wallet-connect-mono.js","sources":["../../../../src/components/logos/logo-wallet-connect-mono.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 LogoWalletConnectMono = ({ 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={25}\n height={24}\n viewBox=\"0 0 25 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=\"M4.91675 7.51605C8.83338 3.68134 15.1835 3.68134 19.1001 7.51605L19.5715 7.97756C19.7673 8.16929 19.7673 8.48016 19.5715 8.6719L17.959 10.2506C17.8611 10.3465 17.7024 10.3465 17.6044 10.2506L16.9558 9.61554C14.2234 6.94035 9.79343 6.94035 7.06109 9.61554L6.36643 10.2957C6.26851 10.3915 6.10976 10.3915 6.01184 10.2957L4.39937 8.71693C4.20354 8.5252 4.20354 8.21433 4.39937 8.0226L4.91675 7.51605ZM22.4349 10.7811L23.87 12.1861C24.0658 12.3779 24.0658 12.6887 23.87 12.8805L17.399 19.2162C17.2032 19.4079 16.8857 19.4079 16.6898 19.2162C16.6898 19.2162 16.6898 19.2162 16.6898 19.2162L12.0971 14.7196C12.0482 14.6716 11.9688 14.6716 11.9198 14.7196L7.32721 19.2162C7.13138 19.4079 6.81387 19.408 6.61804 19.2162C6.61804 19.2162 6.61804 19.2162 6.61804 19.2162L0.146874 12.8804C-0.0489579 12.6887 -0.0489579 12.3778 0.146874 12.1861L1.58198 10.781C1.77781 10.5892 2.09532 10.5892 2.29115 10.781L6.88392 15.2777C6.93288 15.3256 7.01226 15.3256 7.06122 15.2777C7.06121 15.2777 7.06122 15.2777 7.06122 15.2777L11.6538 10.781C11.8496 10.5892 12.1671 10.5892 12.3629 10.781C12.3629 10.781 12.3629 10.781 12.3629 10.781L16.9557 15.2777C17.0047 15.3256 17.084 15.3256 17.133 15.2777L21.7257 10.7811C21.9215 10.5893 22.239 10.5893 22.4349 10.7811Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default LogoWalletConnectMono;\n"],"names":["LogoWalletConnectMono","customColor","title","titleId","props","~~color","token","~~_jsxs","_jsx"],"mappings":"~~+FAYMA~~,EAAwB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,~~IAAa~~,~~CAExF,MAAMC,EAAQJ,GAAeK,EAAM,qBAAqB,EACxD,OACEC,~~EACE,MAAA,CAAA,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,~~MAAOF~~,~~EAAK~~,~~kBACKF~~,EAAO,GACpBC,EAEH,SAAA,CAAAF,~~EAAQM~~,EAAA,QAAA,CAAO,~~GAAIL~~,EAAO,SAAGD,CAAK,CAAA,EAAY,KAC/CM,EAAA,OAAA,CACE,EAAE,ytCACF,KAAK,cAAc,CAAA,CACnB,CACE,CAAA~~,CAEV~~"}
1	+ {"version":3,"file":"logo-wallet-connect-mono.js","sources":["../../../../src/components/logos/logo-wallet-connect-mono.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 LogoWalletConnectMono = ({ 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={25}\n height={24}\n viewBox=\"0 0 25 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=\"M4.91675 7.51605C8.83338 3.68134 15.1835 3.68134 19.1001 7.51605L19.5715 7.97756C19.7673 8.16929 19.7673 8.48016 19.5715 8.6719L17.959 10.2506C17.8611 10.3465 17.7024 10.3465 17.6044 10.2506L16.9558 9.61554C14.2234 6.94035 9.79343 6.94035 7.06109 9.61554L6.36643 10.2957C6.26851 10.3915 6.10976 10.3915 6.01184 10.2957L4.39937 8.71693C4.20354 8.5252 4.20354 8.21433 4.39937 8.0226L4.91675 7.51605ZM22.4349 10.7811L23.87 12.1861C24.0658 12.3779 24.0658 12.6887 23.87 12.8805L17.399 19.2162C17.2032 19.4079 16.8857 19.4079 16.6898 19.2162C16.6898 19.2162 16.6898 19.2162 16.6898 19.2162L12.0971 14.7196C12.0482 14.6716 11.9688 14.6716 11.9198 14.7196L7.32721 19.2162C7.13138 19.4079 6.81387 19.408 6.61804 19.2162C6.61804 19.2162 6.61804 19.2162 6.61804 19.2162L0.146874 12.8804C-0.0489579 12.6887 -0.0489579 12.3778 0.146874 12.1861L1.58198 10.781C1.77781 10.5892 2.09532 10.5892 2.29115 10.781L6.88392 15.2777C6.93288 15.3256 7.01226 15.3256 7.06122 15.2777C7.06121 15.2777 7.06122 15.2777 7.06122 15.2777L11.6538 10.781C11.8496 10.5892 12.1671 10.5892 12.3629 10.781C12.3629 10.781 12.3629 10.781 12.3629 10.781L16.9557 15.2777C17.0047 15.3256 17.084 15.3256 17.133 15.2777L21.7257 10.7811C21.9215 10.5893 22.239 10.5893 22.4349 10.7811Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default LogoWalletConnectMono;\n"],"names":["LogoWalletConnectMono","customColor","title","titleId","props","_jsxs","_jsx"],"mappings":"kDAWA,MAAMA,EAAwB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAIzEC,EACE,MAAA,CAAA,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MARUJ,GAAe,4BAQb,kBACKE,EAAO,GACpBC,EAEH,SAAA,CAAAF,EAAQI,EAAA,QAAA,CAAO,GAAIH,EAAO,SAAGD,CAAK,CAAA,EAAY,KAC/CI,EAAA,OAAA,CACE,EAAE,ytCACF,KAAK,cAAc,CAAA,CACnB,CACE,CAAA"}

package/dist/es/components/logos/logo-warpcast-mono.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as e}from"react/jsx-runtime";import{token as H}from"@styled/tokens";const V=({color:C,title:l,titleId:t,...o})=>{const r=C||H("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":t,...o,children:[l?e("title",{id:t,children:l}):null,e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0.450346 2.1561C0 3.02306 0 4.16204 0 6.44V17.56C0 19.838 0 20.9769 0.450346 21.8439C0.829848 22.5745 1.42553 23.1702 2.1561 23.5497C3.02306 24 4.16204 24 6.44 24H17.56C19.838 24 20.9769 24 21.8439 23.5497C22.5745 23.1702 23.1702 22.5745 23.5497 21.8439C24 20.9769 24 19.838 24 17.56V6.44C24 4.16204 24 3.02306 23.5497 2.1561C23.1702 1.42553 22.5745 0.829848 21.8439 0.450346C20.9769 0 19.838 0 17.56 0H6.44C4.16204 0 3.02306 0 2.1561 0.450346C1.42553 0.829848 0.829848 1.42553 0.450346 2.1561ZM6.18667 3.73334H17.8133V6.08H21.12L20.4267 8.42667H19.84V17.92C20.1346 17.92 20.3733 18.1588 20.3733 18.4533V19.0933H20.48C20.7746 19.0933 21.0133 19.3321 21.0133 19.6267V20.2667H15.04V19.6267C15.04 19.3321 15.2788 19.0933 15.5733 19.0933H15.68V18.4533C15.68 18.1953 15.8632 17.9801 16.1067 17.9307V12.6933H16.0899C15.9013 10.6002 14.1422 8.96 12 8.96C9.8578 8.96 8.0987 10.6002 7.91008 12.6933H7.89334V17.92H8C8.29456 17.92 8.53334 18.1588 8.53334 18.4533V19.0933H8.64C8.93456 19.0933 9.17334 19.3321 9.17334 19.6267V20.2667H3.2V19.6267C3.2 19.3321 3.43879 19.0933 3.73334 19.0933H3.84V18.4533C3.84 18.1588 4.07879 17.92 4.37334 17.92V8.42667H3.78667L3.09334 6.08H6.18667V3.73334Z",fill:"currentColor"})]})};export{V as default};
+import{jsxs as i,jsx as e}from"react/jsx-runtime";const o=({color:t,title:l,titleId:C,...V})=>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,...V,children:[l?e("title",{id:C,children:l}):null,e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0.450346 2.1561C0 3.02306 0 4.16204 0 6.44V17.56C0 19.838 0 20.9769 0.450346 21.8439C0.829848 22.5745 1.42553 23.1702 2.1561 23.5497C3.02306 24 4.16204 24 6.44 24H17.56C19.838 24 20.9769 24 21.8439 23.5497C22.5745 23.1702 23.1702 22.5745 23.5497 21.8439C24 20.9769 24 19.838 24 17.56V6.44C24 4.16204 24 3.02306 23.5497 2.1561C23.1702 1.42553 22.5745 0.829848 21.8439 0.450346C20.9769 0 19.838 0 17.56 0H6.44C4.16204 0 3.02306 0 2.1561 0.450346C1.42553 0.829848 0.829848 1.42553 0.450346 2.1561ZM6.18667 3.73334H17.8133V6.08H21.12L20.4267 8.42667H19.84V17.92C20.1346 17.92 20.3733 18.1588 20.3733 18.4533V19.0933H20.48C20.7746 19.0933 21.0133 19.3321 21.0133 19.6267V20.2667H15.04V19.6267C15.04 19.3321 15.2788 19.0933 15.5733 19.0933H15.68V18.4533C15.68 18.1953 15.8632 17.9801 16.1067 17.9307V12.6933H16.0899C15.9013 10.6002 14.1422 8.96 12 8.96C9.8578 8.96 8.0987 10.6002 7.91008 12.6933H7.89334V17.92H8C8.29456 17.92 8.53334 18.1588 8.53334 18.4533V19.0933H8.64C8.93456 19.0933 9.17334 19.3321 9.17334 19.6267V20.2667H3.2V19.6267C3.2 19.3321 3.43879 19.0933 3.73334 19.0933H3.84V18.4533C3.84 18.1588 4.07879 17.92 4.37334 17.92V8.42667H3.78667L3.09334 6.08H6.18667V3.73334Z",fill:"currentColor"})]});export{o as default};
 //# sourceMappingURL=logo-warpcast-mono.js.map

package/dist/es/components/logos/logo-warpcast-mono.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"logo-warpcast-mono.js","sources":["../../../../src/components/logos/logo-warpcast-mono.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 LogoWarpcastMono = ({ 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=\"M0.450346 2.1561C0 3.02306 0 4.16204 0 6.44V17.56C0 19.838 0 20.9769 0.450346 21.8439C0.829848 22.5745 1.42553 23.1702 2.1561 23.5497C3.02306 24 4.16204 24 6.44 24H17.56C19.838 24 20.9769 24 21.8439 23.5497C22.5745 23.1702 23.1702 22.5745 23.5497 21.8439C24 20.9769 24 19.838 24 17.56V6.44C24 4.16204 24 3.02306 23.5497 2.1561C23.1702 1.42553 22.5745 0.829848 21.8439 0.450346C20.9769 0 19.838 0 17.56 0H6.44C4.16204 0 3.02306 0 2.1561 0.450346C1.42553 0.829848 0.829848 1.42553 0.450346 2.1561ZM6.18667 3.73334H17.8133V6.08H21.12L20.4267 8.42667H19.84V17.92C20.1346 17.92 20.3733 18.1588 20.3733 18.4533V19.0933H20.48C20.7746 19.0933 21.0133 19.3321 21.0133 19.6267V20.2667H15.04V19.6267C15.04 19.3321 15.2788 19.0933 15.5733 19.0933H15.68V18.4533C15.68 18.1953 15.8632 17.9801 16.1067 17.9307V12.6933H16.0899C15.9013 10.6002 14.1422 8.96 12 8.96C9.8578 8.96 8.0987 10.6002 7.91008 12.6933H7.89334V17.92H8C8.29456 17.92 8.53334 18.1588 8.53334 18.4533V19.0933H8.64C8.93456 19.0933 9.17334 19.3321 9.17334 19.6267V20.2667H3.2V19.6267C3.2 19.3321 3.43879 19.0933 3.73334 19.0933H3.84V18.4533C3.84 18.1588 4.07879 17.92 4.37334 17.92V8.42667H3.78667L3.09334 6.08H6.18667V3.73334Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default LogoWarpcastMono;\n"],"names":["LogoWarpcastMono","customColor","title","titleId","props","~~color","token","~~_jsxs","_jsx"],"mappings":"~~yFAYA~~,MAAMA,EAAmB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,~~IAAa~~,~~CAEnF,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,4pCACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA~~,CAGR~~"}
1	+ {"version":3,"file":"logo-warpcast-mono.js","sources":["../../../../src/components/logos/logo-warpcast-mono.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 LogoWarpcastMono = ({ 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=\"M0.450346 2.1561C0 3.02306 0 4.16204 0 6.44V17.56C0 19.838 0 20.9769 0.450346 21.8439C0.829848 22.5745 1.42553 23.1702 2.1561 23.5497C3.02306 24 4.16204 24 6.44 24H17.56C19.838 24 20.9769 24 21.8439 23.5497C22.5745 23.1702 23.1702 22.5745 23.5497 21.8439C24 20.9769 24 19.838 24 17.56V6.44C24 4.16204 24 3.02306 23.5497 2.1561C23.1702 1.42553 22.5745 0.829848 21.8439 0.450346C20.9769 0 19.838 0 17.56 0H6.44C4.16204 0 3.02306 0 2.1561 0.450346C1.42553 0.829848 0.829848 1.42553 0.450346 2.1561ZM6.18667 3.73334H17.8133V6.08H21.12L20.4267 8.42667H19.84V17.92C20.1346 17.92 20.3733 18.1588 20.3733 18.4533V19.0933H20.48C20.7746 19.0933 21.0133 19.3321 21.0133 19.6267V20.2667H15.04V19.6267C15.04 19.3321 15.2788 19.0933 15.5733 19.0933H15.68V18.4533C15.68 18.1953 15.8632 17.9801 16.1067 17.9307V12.6933H16.0899C15.9013 10.6002 14.1422 8.96 12 8.96C9.8578 8.96 8.0987 10.6002 7.91008 12.6933H7.89334V17.92H8C8.29456 17.92 8.53334 18.1588 8.53334 18.4533V19.0933H8.64C8.93456 19.0933 9.17334 19.3321 9.17334 19.6267V20.2667H3.2V19.6267C3.2 19.3321 3.43879 19.0933 3.73334 19.0933H3.84V18.4533C3.84 18.1588 4.07879 17.92 4.37334 17.92V8.42667H3.78667L3.09334 6.08H6.18667V3.73334Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default LogoWarpcastMono;\n"],"names":["LogoWarpcastMono","customColor","title","titleId","props","_jsxs","_jsx"],"mappings":"kDAWA,MAAMA,EAAmB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAIpEC,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,4pCACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA"}

package/dist/es/components/logos/logo-wax-mono.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as e}from"react/jsx-runtime";import{token as n}from"@styled/tokens";const d=({color:t,title:l,titleId:L,...o})=>{const r=t||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":L,...o,children:[l?e("title",{id:L,children:l}):null,e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M23.2497 12C23.2497 18.2131 18.2129 23.2499 11.9998 23.2499C5.78659 23.2499 0.749817 18.2131 0.749817 12C0.749817 5.78678 5.78659 0.75 11.9998 0.75C18.2129 0.75 23.2497 5.78678 23.2497 12ZM18.7751 14.0826H20.4372L15.1744 9.53902H13.5045L16.7578 12.3501L15.7298 13.2339L13.5931 10.6267H12.1798L9.61198 13.7521L9.33214 14.0938L10.5893 10.6324H9.44675L8.61425 12.9703L7.78105 10.6331H6.37481L5.5395 12.9752L4.70137 10.6225H3.56232L4.80895 14.077H6.29324L7.07793 11.8762L7.86894 14.0938H9.33214L8.45605 15.164H9.86018L12.8871 11.4789L13.7541 12.5392H12.6157L12.03 13.2628H14.3447L15.0162 14.0784H16.421L17.5959 13.0729L18.7751 14.0826ZM18.0044 11.3207L18.7884 11.9929L20.369 10.6556L18.787 10.6542L18.0044 11.3207Z",fill:"currentColor"})]})};export{d as default};
+import{jsxs as o,jsx as e}from"react/jsx-runtime";const r=({color:t,title:l,titleId:L,...i})=>o("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":L,...i,children:[l?e("title",{id:L,children:l}):null,e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M23.2497 12C23.2497 18.2131 18.2129 23.2499 11.9998 23.2499C5.78659 23.2499 0.749817 18.2131 0.749817 12C0.749817 5.78678 5.78659 0.75 11.9998 0.75C18.2129 0.75 23.2497 5.78678 23.2497 12ZM18.7751 14.0826H20.4372L15.1744 9.53902H13.5045L16.7578 12.3501L15.7298 13.2339L13.5931 10.6267H12.1798L9.61198 13.7521L9.33214 14.0938L10.5893 10.6324H9.44675L8.61425 12.9703L7.78105 10.6331H6.37481L5.5395 12.9752L4.70137 10.6225H3.56232L4.80895 14.077H6.29324L7.07793 11.8762L7.86894 14.0938H9.33214L8.45605 15.164H9.86018L12.8871 11.4789L13.7541 12.5392H12.6157L12.03 13.2628H14.3447L15.0162 14.0784H16.421L17.5959 13.0729L18.7751 14.0826ZM18.0044 11.3207L18.7884 11.9929L20.369 10.6556L18.787 10.6542L18.0044 11.3207Z",fill:"currentColor"})]});export{r as default};
 //# sourceMappingURL=logo-wax-mono.js.map

package/dist/es/components/logos/logo-wax-mono.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"logo-wax-mono.js","sources":["../../../../src/components/logos/logo-wax-mono.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 LogoWaxMono = ({ 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=\"M23.2497 12C23.2497 18.2131 18.2129 23.2499 11.9998 23.2499C5.78659 23.2499 0.749817 18.2131 0.749817 12C0.749817 5.78678 5.78659 0.75 11.9998 0.75C18.2129 0.75 23.2497 5.78678 23.2497 12ZM18.7751 14.0826H20.4372L15.1744 9.53902H13.5045L16.7578 12.3501L15.7298 13.2339L13.5931 10.6267H12.1798L9.61198 13.7521L9.33214 14.0938L10.5893 10.6324H9.44675L8.61425 12.9703L7.78105 10.6331H6.37481L5.5395 12.9752L4.70137 10.6225H3.56232L4.80895 14.077H6.29324L7.07793 11.8762L7.86894 14.0938H9.33214L8.45605 15.164H9.86018L12.8871 11.4789L13.7541 12.5392H12.6157L12.03 13.2628H14.3447L15.0162 14.0784H16.421L17.5959 13.0729L18.7751 14.0826ZM18.0044 11.3207L18.7884 11.9929L20.369 10.6556L18.787 10.6542L18.0044 11.3207Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default LogoWaxMono;\n"],"names":["LogoWaxMono","customColor","title","titleId","props","~~color","token","~~_jsxs","_jsx"],"mappings":"~~yFAYA~~,MAAMA,EAAc,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,~~IAAa~~,~~CAE9E,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,ysBACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA~~,CAGR~~"}
1	+ {"version":3,"file":"logo-wax-mono.js","sources":["../../../../src/components/logos/logo-wax-mono.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 LogoWaxMono = ({ 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=\"M23.2497 12C23.2497 18.2131 18.2129 23.2499 11.9998 23.2499C5.78659 23.2499 0.749817 18.2131 0.749817 12C0.749817 5.78678 5.78659 0.75 11.9998 0.75C18.2129 0.75 23.2497 5.78678 23.2497 12ZM18.7751 14.0826H20.4372L15.1744 9.53902H13.5045L16.7578 12.3501L15.7298 13.2339L13.5931 10.6267H12.1798L9.61198 13.7521L9.33214 14.0938L10.5893 10.6324H9.44675L8.61425 12.9703L7.78105 10.6331H6.37481L5.5395 12.9752L4.70137 10.6225H3.56232L4.80895 14.077H6.29324L7.07793 11.8762L7.86894 14.0938H9.33214L8.45605 15.164H9.86018L12.8871 11.4789L13.7541 12.5392H12.6157L12.03 13.2628H14.3447L15.0162 14.0784H16.421L17.5959 13.0729L18.7751 14.0826ZM18.0044 11.3207L18.7884 11.9929L20.369 10.6556L18.787 10.6542L18.0044 11.3207Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default LogoWaxMono;\n"],"names":["LogoWaxMono","customColor","title","titleId","props","_jsxs","_jsx"],"mappings":"kDAWA,MAAMA,EAAc,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAI/DC,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,ysBACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA"}

package/dist/es/components/logos/logo-xdc-mono.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 s=({color:r,title:l,titleId:o,...e})=>{const i=r||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":o,...e,children:[l?t("title",{id:o,children:l}):null,t("path",{d:"M21.6514 3L14.5297 11.9954L22 21.4992H17.8315C16.9697 21.4992 16.2193 21.0973 15.5851 20.2888L11.6538 15.2682L7.71774 20.2888C7.07867 21.0973 6.33309 21.4992 5.47131 21.4992H2.72137C2.29049 21.4992 2.05326 21.3055 2 20.9182C2 20.7294 2.09199 20.5212 2.27112 20.2888L8.77318 11.9954L2.64391 4.22973C2.46478 4.00218 2.37279 3.794 2.37279 3.5955C2.37279 3.1985 2.61002 3 3.08448 3H5.86347C6.72041 3 7.47567 3.40668 8.11958 4.22488L11.6538 8.7129L15.1881 4.22488C15.8223 3.41636 16.5727 3.00968 17.4442 3H21.6514Z",fill:"currentColor"}),t("path",{d:"M19.5406 16.7013L15.8466 12.0099L19.5406 7.31857V16.7013Z",fill:"currentColor"})]})};export{s as default};
+import{jsxs as i,jsx as l}from"react/jsx-runtime";const C=({color:o,title:t,titleId:r,...e})=>i("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:o||"var(--color-text-primary)","aria-labelledby":r,...e,children:[t?l("title",{id:r,children:t}):null,l("path",{d:"M21.6514 3L14.5297 11.9954L22 21.4992H17.8315C16.9697 21.4992 16.2193 21.0973 15.5851 20.2888L11.6538 15.2682L7.71774 20.2888C7.07867 21.0973 6.33309 21.4992 5.47131 21.4992H2.72137C2.29049 21.4992 2.05326 21.3055 2 20.9182C2 20.7294 2.09199 20.5212 2.27112 20.2888L8.77318 11.9954L2.64391 4.22973C2.46478 4.00218 2.37279 3.794 2.37279 3.5955C2.37279 3.1985 2.61002 3 3.08448 3H5.86347C6.72041 3 7.47567 3.40668 8.11958 4.22488L11.6538 8.7129L15.1881 4.22488C15.8223 3.41636 16.5727 3.00968 17.4442 3H21.6514Z",fill:"currentColor"}),l("path",{d:"M19.5406 16.7013L15.8466 12.0099L19.5406 7.31857V16.7013Z",fill:"currentColor"})]});export{C as default};
 //# sourceMappingURL=logo-xdc-mono.js.map

package/dist/es/components/logos/logo-xdc-mono.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"logo-xdc-mono.js","sources":["../../../../src/components/logos/logo-xdc-mono.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 LogoXdcMono = ({ 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=\"M21.6514 3L14.5297 11.9954L22 21.4992H17.8315C16.9697 21.4992 16.2193 21.0973 15.5851 20.2888L11.6538 15.2682L7.71774 20.2888C7.07867 21.0973 6.33309 21.4992 5.47131 21.4992H2.72137C2.29049 21.4992 2.05326 21.3055 2 20.9182C2 20.7294 2.09199 20.5212 2.27112 20.2888L8.77318 11.9954L2.64391 4.22973C2.46478 4.00218 2.37279 3.794 2.37279 3.5955C2.37279 3.1985 2.61002 3 3.08448 3H5.86347C6.72041 3 7.47567 3.40668 8.11958 4.22488L11.6538 8.7129L15.1881 4.22488C15.8223 3.41636 16.5727 3.00968 17.4442 3H21.6514Z\"\n fill=\"currentColor\"\n />\n <path d=\"M19.5406 16.7013L15.8466 12.0099L19.5406 7.31857V16.7013Z\" fill=\"currentColor\" />\n </svg>\n );\n};\nexport default LogoXdcMono;\n"],"names":["LogoXdcMono","customColor","title","titleId","props","~~color","token","~~_jsxs","_jsx"],"mappings":"~~yFAYMA~~,MAAAA,EAAc,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,~~IAAa~~,~~CAE9E,MAAMC,EAAQJ,GAAeK,EAAM,qBAAqB,EACxD,OACEC,~~EAAA,MAAA,CACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,~~MAAOF~~,~~EAAK~~,~~kBACKF~~,EAAO,GACpBC,EAAK,SAAA,CAERF,~~EAAQM~~,EAAA,QAAA,CAAO,~~GAAIL~~,EAAO,SAAGD,CAAc,CAAA,EAAG,KAC/CM,EACE,OAAA,CAAA,EAAE,ggBACF,KAAK,cAAc,CAAA,EAErBA,EAAA,OAAA,CAAM,EAAE,4DAA4D,KAAK,cAAiB,CAAA,CAAA,CAAA,CAAA~~,CAGhG~~"}
1	+ {"version":3,"file":"logo-xdc-mono.js","sources":["../../../../src/components/logos/logo-xdc-mono.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 LogoXdcMono = ({ 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=\"M21.6514 3L14.5297 11.9954L22 21.4992H17.8315C16.9697 21.4992 16.2193 21.0973 15.5851 20.2888L11.6538 15.2682L7.71774 20.2888C7.07867 21.0973 6.33309 21.4992 5.47131 21.4992H2.72137C2.29049 21.4992 2.05326 21.3055 2 20.9182C2 20.7294 2.09199 20.5212 2.27112 20.2888L8.77318 11.9954L2.64391 4.22973C2.46478 4.00218 2.37279 3.794 2.37279 3.5955C2.37279 3.1985 2.61002 3 3.08448 3H5.86347C6.72041 3 7.47567 3.40668 8.11958 4.22488L11.6538 8.7129L15.1881 4.22488C15.8223 3.41636 16.5727 3.00968 17.4442 3H21.6514Z\"\n fill=\"currentColor\"\n />\n <path d=\"M19.5406 16.7013L15.8466 12.0099L19.5406 7.31857V16.7013Z\" fill=\"currentColor\" />\n </svg>\n );\n};\nexport default LogoXdcMono;\n"],"names":["LogoXdcMono","customColor","title","titleId","props","_jsxs","_jsx"],"mappings":"kDAWMA,MAAAA,EAAc,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAI/DC,EAAA,MAAA,CACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MARUJ,GAAe,4BAQb,kBACKE,EAAO,GACpBC,EAAK,SAAA,CAERF,EAAQI,EAAA,QAAA,CAAO,GAAIH,EAAO,SAAGD,CAAc,CAAA,EAAG,KAC/CI,EACE,OAAA,CAAA,EAAE,ggBACF,KAAK,cAAc,CAAA,EAErBA,EAAA,OAAA,CAAM,EAAE,4DAA4D,KAAK,cAAiB,CAAA,CAAA,CAAA,CAAA"}

package/dist/es/components/logos/logo-zetachain-mono.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as n,jsx as l}from"react/jsx-runtime";import{token as c}from"@styled/tokens";const d=({color:r,title:t,titleId:e,...i})=>{const o=r||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:o,"aria-labelledby":e,...i,children:[t?l("title",{id:e,children:t}):null,l("g",{clipPath:"url(#clip0_10462_21100)",children:l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M23.2498 12C23.2498 18.2131 18.213 23.2499 11.9998 23.2499C5.78665 23.2499 0.749878 18.2131 0.749878 12C0.749878 5.78678 5.78665 0.75 11.9998 0.75C18.213 0.75 23.2498 5.78678 23.2498 12ZM14.9209 16.0061V14.4867L14.9215 14.488H16.6288V17.7147H6.9187V16.8613C6.9187 15.196 7.07596 13.7825 9.05396 12.0313L9.06524 12.0206L13.785 7.99257H8.62729V9.54137H6.91996V6.28523H16.6282V12.8176H14.9209V9.26695L10.178 13.3132C9.06211 14.3025 8.73944 15.0061 8.65298 16.0061H14.9209Z",fill:"currentColor"})}),l("defs",{children:l("clipPath",{id:"clip0_10462_21100",children:l("rect",{width:22.4999,height:22.4999,fill:"currentColor",transform:"translate(0.749878 0.75)"})})})]})};export{d as default};
+import{jsxs as o,jsx as l}from"react/jsx-runtime";const c=({color:t,title:e,titleId:i,...r})=>o("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":i,...r,children:[e?l("title",{id:i,children:e}):null,l("g",{clipPath:"url(#clip0_10462_21100)",children:l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M23.2498 12C23.2498 18.2131 18.213 23.2499 11.9998 23.2499C5.78665 23.2499 0.749878 18.2131 0.749878 12C0.749878 5.78678 5.78665 0.75 11.9998 0.75C18.213 0.75 23.2498 5.78678 23.2498 12ZM14.9209 16.0061V14.4867L14.9215 14.488H16.6288V17.7147H6.9187V16.8613C6.9187 15.196 7.07596 13.7825 9.05396 12.0313L9.06524 12.0206L13.785 7.99257H8.62729V9.54137H6.91996V6.28523H16.6282V12.8176H14.9209V9.26695L10.178 13.3132C9.06211 14.3025 8.73944 15.0061 8.65298 16.0061H14.9209Z",fill:"currentColor"})}),l("defs",{children:l("clipPath",{id:"clip0_10462_21100",children:l("rect",{width:22.4999,height:22.4999,fill:"currentColor",transform:"translate(0.749878 0.75)"})})})]});export{c as default};
 //# sourceMappingURL=logo-zetachain-mono.js.map

package/dist/es/components/logos/logo-zetachain-mono.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"logo-zetachain-mono.js","sources":["../../../../src/components/logos/logo-zetachain-mono.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 LogoZetachainMono = ({ 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 <g clipPath=\"url(#clip0_10462_21100)\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M23.2498 12C23.2498 18.2131 18.213 23.2499 11.9998 23.2499C5.78665 23.2499 0.749878 18.2131 0.749878 12C0.749878 5.78678 5.78665 0.75 11.9998 0.75C18.213 0.75 23.2498 5.78678 23.2498 12ZM14.9209 16.0061V14.4867L14.9215 14.488H16.6288V17.7147H6.9187V16.8613C6.9187 15.196 7.07596 13.7825 9.05396 12.0313L9.06524 12.0206L13.785 7.99257H8.62729V9.54137H6.91996V6.28523H16.6282V12.8176H14.9209V9.26695L10.178 13.3132C9.06211 14.3025 8.73944 15.0061 8.65298 16.0061H14.9209Z\"\n fill=\"currentColor\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_10462_21100\">\n <rect width={22.4999} height={22.4999} fill=\"currentColor\" transform=\"translate(0.749878 0.75)\" />\n </clipPath>\n </defs>\n </svg>\n );\n};\nexport default LogoZetachainMono;\n"],"names":["LogoZetachainMono","customColor","title","titleId","props","~~color","token","~~_jsxs","_jsx"],"mappings":"~~yFAYA~~,~~MAAMA~~,EAAoB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,~~IAAa~~,~~CAEpF,MAAMC,EAAQJ,GAAeK,EAAM,qBAAqB,EACxD,OACEC,~~SACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,~~MAAOF~~,~~EAAK~~,~~kBACKF~~,EACb,GAAAC,YAEHF,~~EAAQM~~,EAAA,QAAA,CAAO,~~GAAIL~~,WAAUD,CAAK,CAAA,EAAY,KAC/CM,EAAG,IAAA,CAAA,SAAS,0BAAyB,SACnCA,UACE,SAAS,UACT,SAAS,UACT,EAAE,wdACF,KAAK,cACL,CAAA,CAAA,CAAA,EAEJA,EAAA,OAAA,CAAA,SACEA,EAAU,WAAA,CAAA,GAAG,oBAAmB,SAC9BA,UAAM,MAAO,QAAS,OAAQ,QAAS,KAAK,eAAe,UAAU,4BAC5D,CAAA,CAAA,CAAA,CACN,CACH,CAAA~~,CAEV~~"}
1	+ {"version":3,"file":"logo-zetachain-mono.js","sources":["../../../../src/components/logos/logo-zetachain-mono.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 LogoZetachainMono = ({ 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 <g clipPath=\"url(#clip0_10462_21100)\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M23.2498 12C23.2498 18.2131 18.213 23.2499 11.9998 23.2499C5.78665 23.2499 0.749878 18.2131 0.749878 12C0.749878 5.78678 5.78665 0.75 11.9998 0.75C18.213 0.75 23.2498 5.78678 23.2498 12ZM14.9209 16.0061V14.4867L14.9215 14.488H16.6288V17.7147H6.9187V16.8613C6.9187 15.196 7.07596 13.7825 9.05396 12.0313L9.06524 12.0206L13.785 7.99257H8.62729V9.54137H6.91996V6.28523H16.6282V12.8176H14.9209V9.26695L10.178 13.3132C9.06211 14.3025 8.73944 15.0061 8.65298 16.0061H14.9209Z\"\n fill=\"currentColor\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_10462_21100\">\n <rect width={22.4999} height={22.4999} fill=\"currentColor\" transform=\"translate(0.749878 0.75)\" />\n </clipPath>\n </defs>\n </svg>\n );\n};\nexport default LogoZetachainMono;\n"],"names":["LogoZetachainMono","customColor","title","titleId","props","_jsxs","_jsx"],"mappings":"kDAWMA,MAAAA,EAAoB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAIrEC,SACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MARUJ,GAAe,4BAQb,kBACKE,EACb,GAAAC,YAEHF,EAAQI,EAAA,QAAA,CAAO,GAAIH,WAAUD,CAAK,CAAA,EAAY,KAC/CI,EAAG,IAAA,CAAA,SAAS,0BAAyB,SACnCA,UACE,SAAS,UACT,SAAS,UACT,EAAE,wdACF,KAAK,cACL,CAAA,CAAA,CAAA,EAEJA,EAAA,OAAA,CAAA,SACEA,EAAU,WAAA,CAAA,GAAG,oBAAmB,SAC9BA,UAAM,MAAO,QAAS,OAAQ,QAAS,KAAK,eAAe,UAAU,4BAC5D,CAAA,CAAA,CAAA,CACN,CACH,CAAA"}

package/dist/es/components/logos/logo-zilliqa-mono.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as l}from"react/jsx-runtime";import{token as V}from"@styled/tokens";const d=({color:r,title:t,titleId:L,...i})=>{const o=r||V("colors.text.primary");return e("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:o,"aria-labelledby":L,...i,children:[t?l("title",{id:L,children:t}):null,l("path",{d:"M19.0279 10.3083L16.2195 11.5604L8.76937 15.3526L16.2195 18.9345V13.0138L19.0279 11.7482V20.4952L16.2195 21.7474L5.25 16.4974V13.7069L12.8433 9.98183L5.25 6.33277V3.50207L8.10306 2.24994L19.0279 7.50887V10.3083Z",fill:"currentColor"}),l("path",{d:"M5.25 3.50207L16.2195 8.761L19.0279 7.50887L8.10306 2.24994L5.25 3.50207Z",fill:"#DDDBE0"}),l("path",{d:"M16.22 8.74911L19.0284 7.49698V10.2964L16.22 11.5485V8.74911Z",fill:"#B6B4BA"}),l("path",{d:"M5.25 3.50455V6.33525L12.8433 9.98431L5.25 13.7094V16.4998L16.2195 21.7498V18.9415L8.76937 15.355L16.2195 11.5629V8.76348L5.25 3.50455Z",fill:"currentColor"}),l("path",{d:"M16.22 21.729L19.0284 20.4769V11.7299L16.22 12.9954V21.729Z",fill:"#B6B4BA"})]})};export{d as default};
+import{jsxs as o,jsx as l}from"react/jsx-runtime";const e=({color:r,title:t,titleId:L,...i})=>o("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":L,...i,children:[t?l("title",{id:L,children:t}):null,l("path",{d:"M19.0279 10.3083L16.2195 11.5604L8.76937 15.3526L16.2195 18.9345V13.0138L19.0279 11.7482V20.4952L16.2195 21.7474L5.25 16.4974V13.7069L12.8433 9.98183L5.25 6.33277V3.50207L8.10306 2.24994L19.0279 7.50887V10.3083Z",fill:"currentColor"}),l("path",{d:"M5.25 3.50207L16.2195 8.761L19.0279 7.50887L8.10306 2.24994L5.25 3.50207Z",fill:"#DDDBE0"}),l("path",{d:"M16.22 8.74911L19.0284 7.49698V10.2964L16.22 11.5485V8.74911Z",fill:"#B6B4BA"}),l("path",{d:"M5.25 3.50455V6.33525L12.8433 9.98431L5.25 13.7094V16.4998L16.2195 21.7498V18.9415L8.76937 15.355L16.2195 11.5629V8.76348L5.25 3.50455Z",fill:"currentColor"}),l("path",{d:"M16.22 21.729L19.0284 20.4769V11.7299L16.22 12.9954V21.729Z",fill:"#B6B4BA"})]});export{e as default};
 //# sourceMappingURL=logo-zilliqa-mono.js.map

package/dist/es/components/logos/logo-zilliqa-mono.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"logo-zilliqa-mono.js","sources":["../../../../src/components/logos/logo-zilliqa-mono.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 LogoZilliqaMono = ({ 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=\"M19.0279 10.3083L16.2195 11.5604L8.76937 15.3526L16.2195 18.9345V13.0138L19.0279 11.7482V20.4952L16.2195 21.7474L5.25 16.4974V13.7069L12.8433 9.98183L5.25 6.33277V3.50207L8.10306 2.24994L19.0279 7.50887V10.3083Z\"\n fill=\"currentColor\"\n />\n <path d=\"M5.25 3.50207L16.2195 8.761L19.0279 7.50887L8.10306 2.24994L5.25 3.50207Z\" fill=\"#DDDBE0\" />\n <path d=\"M16.22 8.74911L19.0284 7.49698V10.2964L16.22 11.5485V8.74911Z\" fill=\"#B6B4BA\" />\n <path\n d=\"M5.25 3.50455V6.33525L12.8433 9.98431L5.25 13.7094V16.4998L16.2195 21.7498V18.9415L8.76937 15.355L16.2195 11.5629V8.76348L5.25 3.50455Z\"\n fill=\"currentColor\"\n />\n <path d=\"M16.22 21.729L19.0284 20.4769V11.7299L16.22 12.9954V21.729Z\" fill=\"#B6B4BA\" />\n </svg>\n );\n};\nexport default LogoZilliqaMono;\n"],"names":["LogoZilliqaMono","customColor","title","titleId","props","~~color","token","~~_jsxs","_jsx"],"mappings":"~~yFAYA~~,~~MAAMA~~,EAAkB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,~~IAAa~~,~~CAElF,MAAMC,EAAQJ,GAAeK,EAAM,qBAAqB,EACxD,OACEC,~~SACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,~~MAAOF~~,~~EAAK~~,~~kBACKF~~,EACb,GAAAC,YAEHF,~~EAAQM~~,EAAA,QAAA,CAAO,~~GAAIL~~,WAAUD,CAAK,CAAA,EAAY,KAC/CM,EACE,OAAA,CAAA,EAAE,sNACF,KAAK,iBAEPA,EAAA,OAAA,CAAM,EAAE,4EAA4E,KAAK,SAAY,CAAA,EACrGA,UAAM,EAAE,gEAAgE,KAAK,SAAY,CAAA,EACzFA,UACE,EAAE,0IACF,KAAK,cACL,CAAA,EACFA,UAAM,EAAE,8DAA8D,KAAK,SAAS,CAAA,CAAG,CACnF,CAAA~~,CAEV~~"}
1	+ {"version":3,"file":"logo-zilliqa-mono.js","sources":["../../../../src/components/logos/logo-zilliqa-mono.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 LogoZilliqaMono = ({ 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=\"M19.0279 10.3083L16.2195 11.5604L8.76937 15.3526L16.2195 18.9345V13.0138L19.0279 11.7482V20.4952L16.2195 21.7474L5.25 16.4974V13.7069L12.8433 9.98183L5.25 6.33277V3.50207L8.10306 2.24994L19.0279 7.50887V10.3083Z\"\n fill=\"currentColor\"\n />\n <path d=\"M5.25 3.50207L16.2195 8.761L19.0279 7.50887L8.10306 2.24994L5.25 3.50207Z\" fill=\"#DDDBE0\" />\n <path d=\"M16.22 8.74911L19.0284 7.49698V10.2964L16.22 11.5485V8.74911Z\" fill=\"#B6B4BA\" />\n <path\n d=\"M5.25 3.50455V6.33525L12.8433 9.98431L5.25 13.7094V16.4998L16.2195 21.7498V18.9415L8.76937 15.355L16.2195 11.5629V8.76348L5.25 3.50455Z\"\n fill=\"currentColor\"\n />\n <path d=\"M16.22 21.729L19.0284 20.4769V11.7299L16.22 12.9954V21.729Z\" fill=\"#B6B4BA\" />\n </svg>\n );\n};\nexport default LogoZilliqaMono;\n"],"names":["LogoZilliqaMono","customColor","title","titleId","props","_jsxs","_jsx"],"mappings":"kDAWMA,MAAAA,EAAkB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAInEC,SACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MARUJ,GAAe,4BAQb,kBACKE,EACb,GAAAC,YAEHF,EAAQI,EAAA,QAAA,CAAO,GAAIH,WAAUD,CAAK,CAAA,EAAY,KAC/CI,EACE,OAAA,CAAA,EAAE,sNACF,KAAK,iBAEPA,EAAA,OAAA,CAAM,EAAE,4EAA4E,KAAK,SAAY,CAAA,EACrGA,UAAM,EAAE,gEAAgE,KAAK,SAAY,CAAA,EACzFA,UACE,EAAE,0IACF,KAAK,cACL,CAAA,EACFA,UAAM,EAAE,8DAA8D,KAAK,SAAS,CAAA,CAAG,CACnF,CAAA"}

package/dist/es/components/logos/logo-zksync-mono.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as d,jsx as l}from"react/jsx-runtime";import{token as n}from"@styled/tokens";const L=({color:t,title:e,titleId:o,...r})=>{const i=t||n("colors.text.primary");return d("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:i,"aria-labelledby":o,...r,children:[e?l("title",{id:o,children:e}):null,l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6.77227 8.65272L6.77227 5.01532L0 11.7876L6.77227 18.5599L6.77227 13.6973L13.5595 8.65272L6.77227 8.65272Z",fill:"currentColor"}),l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17.2269 15.0125L17.2269 18.5599L23.9992 11.7876L17.2269 5.01532L17.2269 9.92205L10.4396 15.0125L17.2269 15.0125Z",fill:"currentColor"})]})};export{L as default};
+import{jsxs as r,jsx as l}from"react/jsx-runtime";const d=({color:o,title:e,titleId:i,...t})=>r("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:o||"var(--color-text-primary)","aria-labelledby":i,...t,children:[e?l("title",{id:i,children:e}):null,l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6.77227 8.65272L6.77227 5.01532L0 11.7876L6.77227 18.5599L6.77227 13.6973L13.5595 8.65272L6.77227 8.65272Z",fill:"currentColor"}),l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17.2269 15.0125L17.2269 18.5599L23.9992 11.7876L17.2269 5.01532L17.2269 9.92205L10.4396 15.0125L17.2269 15.0125Z",fill:"currentColor"})]});export{d as default};
 //# sourceMappingURL=logo-zksync-mono.js.map

package/dist/es/components/logos/logo-zksync-mono.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"logo-zksync-mono.js","sources":["../../../../src/components/logos/logo-zksync-mono.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 LogoZksyncMono = ({ 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=\"M6.77227 8.65272L6.77227 5.01532L0 11.7876L6.77227 18.5599L6.77227 13.6973L13.5595 8.65272L6.77227 8.65272Z\"\n fill=\"currentColor\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M17.2269 15.0125L17.2269 18.5599L23.9992 11.7876L17.2269 5.01532L17.2269 9.92205L10.4396 15.0125L17.2269 15.0125Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default LogoZksyncMono;\n"],"names":["LogoZksyncMono","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,~~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,8GACF,KAAK,cAAc,CAAA,EAErBA,EAAA,OAAA,CACE,SAAS,UACT,SAAS,UACT,EAAE,oHACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA~~,CAGR~~"}
1	+ {"version":3,"file":"logo-zksync-mono.js","sources":["../../../../src/components/logos/logo-zksync-mono.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 LogoZksyncMono = ({ 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=\"M6.77227 8.65272L6.77227 5.01532L0 11.7876L6.77227 18.5599L6.77227 13.6973L13.5595 8.65272L6.77227 8.65272Z\"\n fill=\"currentColor\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M17.2269 15.0125L17.2269 18.5599L23.9992 11.7876L17.2269 5.01532L17.2269 9.92205L10.4396 15.0125L17.2269 15.0125Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default LogoZksyncMono;\n"],"names":["LogoZksyncMono","customColor","title","titleId","props","_jsxs","_jsx"],"mappings":"wDAWMA,EAAiB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAIlEC,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,8GACF,KAAK,cAAc,CAAA,EAErBA,EAAA,OAAA,CACE,SAAS,UACT,SAAS,UACT,EAAE,oHACF,KAAK,cACL,CAAA,CAAA,CAAA,CAAA"}

package/dist/es/components/primitives/button.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as k}from"react/jsx-runtime";import"@styled/tokens";import{Children as x,cloneElement as y,forwardRef as D,useRef as E}from"react";import{Flex as w,HStack as L,Box as j}from"@styled/jsx";import{cx as T}from"@styled/css";import"../feedback/callout.js";import{LoadingSpinner as J}from"../feedback/loading-spinner.js";import"../feedback/progress-bar.js";import"./checkbox.js";import"./dropdown-selector.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import"./portal.js";import"../../hooks/useToast.js";import"../../recipes/toast.js";import"../feedback/tooltip.js";import{button as K}from"../../recipes/button.js";import{createSlot as z,createHost as M}from"create-slots";import{useButton as V,useHover as W,useFocusRing as q,mergeProps as A}from"react-aria";const C=z(({children:t,...i})=>e(w,{alignItems:"center",justifyContent:"center",children:x.map(t,r=>y(r,i))})),N=z(({children:t,...i})=>e(w,{alignItems:"center",justifyContent:"center",children:x.map(t,r=>y(r,i))})),G=({variant:t="primary",size:i="md"})=>{const r=t==="primary"||t==="negative",p=t==="neutral"||t==="tertiary";return e(J,{size:{sm:20,md:24,lg:28}[i],strokeWidth:2.5,inverted:r,neutral:p})},S=D((t,i)=>{const{label:r,variant:p="primary",textStyle:H,size:m="md",disabled:l,expand:c,validating:d,iconSize:I,onHover:u,centerContent:f}=t,a=I||(m==="sm"?16:24),g=r&&c&&!f,o=K({variant:p,textStyle:H,expand:c,size:m,validating:d,iconOnly:!r}),P=E(null),h=i||P,{buttonProps:B}=V({...t,isDisabled:l??!1},h),{hoverProps:F}=W({isDisabled:l??!1}),{isFocusVisible:R,focusProps:O}=q();return M(t.children,b=>{const n=b.get(C),s=b.get(N),v=a/4;return e("button",{className:T(o.button,"group",!r&&o.iconContainer,R&&o.focus),ref:h,...A(B,F,O),"aria-disabled":l,onMouseEnter:u,onTouchStart:u,children:d?e(G,{variant:p,size:m}):k(L,{w:"full",gap:2,justify:r&&(n||s)&&!f?"space-between":"center",children:[n&&{...n,props:{className:n.props.color?void 0:o.icon,width:a,height:a,...n.props}},s&&g&&e(j,{w:v}),r&&e("span",{className:o.label,children:r}),n&&g&&e(j,{w:v}),s&&{...s,props:{className:s.props.color?void 0:o.icon,width:a,height:a,...s.props}}]})})})}),Q=Object.assign(S,{LeadingIcon:C,TrailingIcon:N});S.displayName="Button";export{Q as default};
+import{jsx as r,jsxs as D}from"react/jsx-runtime";import{Children as b,cloneElement as x,forwardRef as E,useRef as F}from"react";import{cn as w}from"../../lib/cn.js";import"../feedback/callout.js";import{LoadingSpinner as L}from"../feedback/loading-spinner.js";import"./checkbox.js";import"./dropdown-selector.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import"./portal.js";import"../../hooks/useToast.js";import"../feedback/tooltip.js";import{button as T}from"../../recipes/button.js";import{createSlot as N,createHost as W}from"create-slots";import{useButton as $,useHover as k,useFocusRing as q,mergeProps as M}from"react-aria";const j=N(({children:e,...i})=>r("div",{className:"flex items-center justify-center",children:b.map(e,t=>x(t,i))})),z=N(({children:e,...i})=>r("div",{className:"flex items-center justify-center",children:b.map(e,t=>x(t,i))})),V=({variant:e="primary",size:i="md"})=>{const t=e==="primary"||e==="negative",l=e==="neutral"||e==="tertiary";return r(L,{size:{sm:20,md:24,lg:28}[i],strokeWidth:2.5,inverted:t,neutral:l})},S=E((e,i)=>{const{label:t,variant:l="primary",textStyle:P,size:m="md",disabled:p,expand:c,validating:d,iconSize:C,onHover:u,centerContent:f}=e,a=C||(m==="sm"?16:24),h=t&&c&&!f,o=T({variant:l,textStyle:P,expand:c,size:m,validating:d,iconOnly:!t}),H=F(null),v=i||H,{buttonProps:R}=$({...e,isDisabled:p??!1},v),{hoverProps:B}=k({isDisabled:p??!1}),{isFocusVisible:I,focusProps:O}=q();return W(e.children,g=>{const n=g.get(j),s=g.get(z),y=a/4;return r("button",{className:w(o.button,"group",!t&&o.iconContainer,I&&o.focus),ref:v,...M(R,B,O),"aria-disabled":p,onMouseEnter:u,onTouchStart:u,children:d?r(V,{variant:l,size:m}):D("div",{className:w("flex flex-row items-center w-full gap-2",t&&(n||s)&&!f?"justify-between":"justify-center"),children:[n&&{...n,props:{className:n.props.color?void 0:o.icon,width:a,height:a,...n.props}},s&&h&&r("div",{style:{width:`${y*.25}rem`}}),t&&r("span",{className:o.label,children:t}),n&&h&&r("div",{style:{width:`${y*.25}rem`}}),s&&{...s,props:{className:s.props.color?void 0:o.icon,width:a,height:a,...s.props}}]})})})}),A=Object.assign(S,{LeadingIcon:j,TrailingIcon:z});S.displayName="Button";export{A as default};
 //# sourceMappingURL=button.js.map

package/dist/es/components/primitives/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@~~styled~~/~~css~~';\nimport { ~~Box, Flex, HStack } from '@styled/jsx';\nimport {~~ createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n label?: string;\n size?: 'sm' \| 'md' \| 'lg';\n variant?:\n \| 'primary'\n \| 'secondary'\n \| 'positive'\n \| 'negative'\n \| 'neutral'\n \| 'tertiary'\n \| 'text'\n \| 'transparent'\n \| 'inverse';\n textStyle?: 'negative' \| 'positive' \| 'neutral' \| 'subtle';\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n iconSize?: number;\n onHover?: MouseEventHandler<HTMLButtonElement> \| TouchEventHandler<HTMLButtonElement>;\n centerContent?: boolean;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <~~Flex~~ ~~alignItems~~=\"center\" ~~justifyContent=\"~~center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </~~Flex~~>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <~~Flex~~ ~~alignItems~~=\"center\" ~~justifyContent=\"~~center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </~~Flex~~>\n );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n const spinnerInverted = variant === 'primary' \|\| variant === 'negative';\n const spinnerNeutral = variant === 'neutral' \|\| variant === 'tertiary';\n const spinnerSizes = {\n sm: 20,\n md: 24,\n lg: 28,\n };\n\n return (\n <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n const {\n label,\n variant = 'primary',\n textStyle,\n size = 'md',\n disabled,\n expand,\n validating,\n iconSize: iconSizeOverride,\n onHover,\n centerContent,\n } = props;\n\n const iconSize = iconSizeOverride \|\| (size === 'sm' ? 16 : 24);\n const addPaddingContainer = label && expand && !centerContent;\n\n const classes = button({ variant, textStyle, expand, size, validating, iconOnly: !label });\n\n const internalRef = useRef(null);\n const ref = forwardedRef \|\| internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n const containerSize = iconSize / 4;\n\n return (\n <button\n className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n ref={ref}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-disabled={disabled}\n onMouseEnter={onHover as MouseEventHandler}\n onTouchStart={onHover as TouchEventHandler}\n >\n {validating ? (\n <Validation variant={variant} size={size} />\n ) : (\n <~~HStack~~\n w~~=\"~~full~~\"\n~~ gap={2}\n ~~justify={~~label && (leadingIcon \|\| trailingIcon) && !centerContent ? '~~space~~-between' : 'center'}\n >\n {leadingIcon && {\n ...leadingIcon,\n props: {\n className: !leadingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n ...leadingIcon.props,\n },\n }}\n {trailingIcon && addPaddingContainer && <~~Box~~ w={containerSize} />}\n {label && <span className={classes.label}>{label}</span>}\n {leadingIcon && addPaddingContainer && <~~Box~~ w={containerSize} />}\n {trailingIcon && {\n ...trailingIcon,\n props: {\n className: !trailingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n ...trailingIcon.props,\n },\n }}\n </~~HStack~~>\n )}\n </button>\n );\n });\n});\n\nconst Button = Object.assign(Component, {\n LeadingIcon,\n TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","~~Flex","~~Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","textStyle","disabled","expand","validating","iconSizeOverride","onHover","centerContent","iconSize","addPaddingContainer","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","~~HStack","Box","~~Button"],"mappings":"~~00BA8BA~~,~~MAAMA~~,EAAcC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,~~EAACC~~,~~EAAI~~,~~CAAC~~,~~WAAW~~,~~SAAS~~,~~eAAe,SACtC,~~SAAAC,EAAS,~~IAAIJ~~,~~EAAUK~~,GACfC,EAAaD,~~EAAOJ~~,CAAK,CACjC,~~CACI~~,CAAA,~~CAEV~~,~~EAEKM~~,~~EAAeR~~,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,~~EAACC~~,~~EAAI~~,~~CAAC~~,~~WAAW~~,~~SAAS~~,~~eAAe,SACtC,~~SAAAC,EAAS,~~IAAIJ~~,~~EAAUK~~,GACfC,EAAaD,~~EAAOJ~~,CAAK,CACjC,~~CACI~~,CAAA,~~CAEV~~,~~EAEKO~~,EAAa,CAAC,CAAE,QAAAC,EAAU,UAAW,KAAAC,EAAO,IAAI,IAA4B,CAChF,MAAMC,EAAkBF,IAAY,WAAaA,IAAY,WACvDG,EAAiBH,IAAY,WAAaA,IAAY,WAO5D,~~OACEP~~,~~EAACW~~,EAAe,CAAA,KAPG,CACnB,GAAI,GACJ,GAAI,GACJ,GAAI,IAI+BH,CAAI,EAAG,YAAa,IAAK,SAAUC,EAAiB,QAASC,CAAkB,CAAA,CAEtH,EAEME,EAAYC,EAA2C,~~CAACd~~,~~EAAOe~~,IAAgB,CACnF,KAAM,CACJ,MAAAC,EACA,QAAAR,EAAU,UACV,UAAAS,EACA,KAAAR,EAAO,KACP,SAAAS,EACA,OAAAC,EACA,WAAAC,EACA,SAAUC,EACV,QAAAC,EACA,cAAAC,CACD,~~EAAGvB~~,~~EAEEwB~~,EAAWH,IAAqBZ,IAAS,KAAO,GAAK,IACrDgB,EAAsBT,GAASG,GAAU,CAACI,EAE1CG,EAAUC,EAAO,CAAE,QAAAnB,EAAS,UAAAS,EAAW,OAAAE,EAAQ,KAAAV,EAAM,WAAAW,EAAY,SAAU,CAACJ,CAAO,CAAA,EAEnFY,EAAcC,EAAO,IAAI,EACzBC,EAAMf,GAAgBa,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EACtB,CAAE,~~GAAGhC~~,EAAO,~~WAAYkB~~,GAAY,EAAO,EAC3CY,CAAyC,EAErC,CAAE,WAAAG,CAAU,EAAKC,EAAS,CAAE,WAAYhB,GAAY,EAAK,CAAE,EAC3D,CAAE,eAAAiB,EAAgB,WAAAC,GAAeC,~~EAAAA~~,~~EAEvC,~~OAAOC,~~EAAWtC~~,EAAM,~~SAAUuC~~,GAAQ,CACxC,MAAMC,EAAcD,EAAM,~~IAAI1C~~,CAAW,~~EACnC4C~~,EAAeF,EAAM,IAAIjC,CAAY,EACrCoC,EAAgBlB,EAAW,EAEjC,~~OACEvB~~,YACE,~~UAAW0C~~,EAAGjB,EAAQ,OAAQ,QAAS,CAACV,GAASU,EAAQ,cAAeS,GAAkBT,EAAQ,KAAK,EACvG,IAAKI,~~EAAG~~,~~GACJc,~~EAAWb,EAAaE,EAAYG,CAAU,~~EACnC~~,~~gBAAAlB~~,EACf,aAAcI,EACd,aAAcA,EAA4B,SAEzCF,~~EACCnB~~,~~EAACM~~,~~EAAU~~,~~CAAC~~,QAASC,EAAS,KAAMC,IAEpCoC,~~EAACC~~,~~EACC~~,CAAA,~~EAAE~~,~~OACF~~,~~IAAK~~,~~EACL,QAAS9B,~~IAAUwB,GAAeC,IAAiB,CAAClB,EAAgB,~~gBAAkB~~,~~SAErF~~,SAAA,CAAAiB,GAAe,CACd,GAAGA,EACH,MAAO,CACL,UAAYA,EAAY,MAAM,MAAuB,OAAfd,EAAQ,KAC9C,MAAOF,EACP,OAAQA,EACR,GAAGgB,EAAY,KAChB,~~CACF~~,~~EACAC,~~GAAgBhB,~~GAAuBxB~~,~~EAAC8C~~,~~EAAI~~,CAAA,~~EAAGL~~,~~IAC/C1B~~,~~GAASf~~,~~EAAA~~,OAAA,~~CAAM~~,~~UAAWyB~~,EAAQ,~~eAAQV~~,~~CAAK~~,CAAA,~~EAC/CwB~~,GAAef,~~GAAuBxB~~,~~EAAC8C~~,GAAI,~~EAAGL~~,~~CAAiB~~,CAAA,~~EAC/DD~~,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,UAAYA,EAAa,MAAM,MAAuB,OAAff,EAAQ,KAC/C,MAAOF,EACP,OAAQA,EACR,GAAGiB,EAAa,KACjB,EACF,~~CACM~~,CAAA,~~CAEJ~~,CAAA,CAEb,CAAC,CACH,CAAC,~~EAEKO~~,EAAS,OAAO,~~OAAOnC~~,EAAW,CACtC,~~YAAAhB~~,EACA,~~aAAAS~~,CACD,CAAA,EAEDO,EAAU,YAAc"}
1	+ {"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cn } from '@lib/cn';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n label?: string;\n size?: 'sm' \| 'md' \| 'lg';\n variant?:\n \| 'primary'\n \| 'secondary'\n \| 'positive'\n \| 'negative'\n \| 'neutral'\n \| 'tertiary'\n \| 'text'\n \| 'transparent'\n \| 'inverse';\n textStyle?: 'negative' \| 'positive' \| 'neutral' \| 'subtle';\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n iconSize?: number;\n onHover?: MouseEventHandler<HTMLButtonElement> \| TouchEventHandler<HTMLButtonElement>;\n centerContent?: boolean;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <div className=\"flex items-center justify-center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </div>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <div className=\"flex items-center justify-center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </div>\n );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n const spinnerInverted = variant === 'primary' \|\| variant === 'negative';\n const spinnerNeutral = variant === 'neutral' \|\| variant === 'tertiary';\n const spinnerSizes = {\n sm: 20,\n md: 24,\n lg: 28,\n };\n\n return (\n <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n const {\n label,\n variant = 'primary',\n textStyle,\n size = 'md',\n disabled,\n expand,\n validating,\n iconSize: iconSizeOverride,\n onHover,\n centerContent,\n } = props;\n\n const iconSize = iconSizeOverride \|\| (size === 'sm' ? 16 : 24);\n const addPaddingContainer = label && expand && !centerContent;\n\n const classes = button({ variant, textStyle, expand, size, validating, iconOnly: !label });\n\n const internalRef = useRef(null);\n const ref = forwardedRef \|\| internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n const containerSize = iconSize / 4;\n\n return (\n <button\n className={cn(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n ref={ref}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-disabled={disabled}\n onMouseEnter={onHover as MouseEventHandler}\n onTouchStart={onHover as TouchEventHandler}\n >\n {validating ? (\n <Validation variant={variant} size={size} />\n ) : (\n <div\n className={cn(\n 'flex flex-row items-center w-full gap-2',\n label && (leadingIcon \|\| trailingIcon) && !centerContent ? 'justify-between' : 'justify-center',\n )}\n >\n {leadingIcon && {\n ...leadingIcon,\n props: {\n className: !leadingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n ...leadingIcon.props,\n },\n }}\n {trailingIcon && addPaddingContainer && <div style={{ width: `${containerSize * 0.25}rem` }} />}\n {label && <span className={classes.label}>{label}</span>}\n {leadingIcon && addPaddingContainer && <div style={{ width: `${containerSize * 0.25}rem` }} />}\n {trailingIcon && {\n ...trailingIcon,\n props: {\n className: !trailingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n ...trailingIcon.props,\n },\n }}\n </div>\n )}\n </button>\n );\n });\n});\n\nconst Button = Object.assign(Component, {\n LeadingIcon,\n TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","textStyle","disabled","expand","validating","iconSizeOverride","onHover","centerContent","iconSize","addPaddingContainer","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cn","mergeProps","_jsxs","Button"],"mappings":"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"}

package/dist/es/components/primitives/checkbox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as d,jsx as e}from"react/jsx-runtime";import{token as y}from"@styled/tokens";import k from"../icons/ico-checkmark.js";import C from"./text.js";import{useToggleState as S}from"../../hooks/useToggleState.js";import{css as n}from"@styled/css";import{Box as j}from"@styled/jsx";import{Flex as v}from"@styled/jsx/flex";import{forwardRef as w,useRef as I,useEffect as N}from"react";import{useCheckbox as F,useFocusRing as P,VisuallyHidden as R,mergeProps as W}from"react-aria";const m=w((l,u)=>{const{label:o,indeterminate:r=!1,disabled:s=!1,checked:b,"aria-label":p,...f}=l,t=S({...l,isSelected:b}),h=I(null),i=u||h;N(()=>{const c="current"in i?i.current:null;c&&(c.indeterminate=!!r)},[r,i]);const{inputProps:g}=F({...f,"aria-label":o||p||"Checkbox",isDisabled:s,isIndeterminate:r},t,i),{isFocusVisible:a,focusProps:x}=P();return d("label",{className:n({display:"flex",alignItems:"center",rounded:"sm",opacity:s?.3:1}),children:[e(R,{children:e("input",{...W(g,x),ref:i})}),e("div",{className:n({display:"flex",alignItems:"center",justifyContent:"center",width:5,height:5,bg:t.isSelected?"brand.base":"transparent",borderWidth:"thick",borderColor:t.isSelected||a?"brand.base":"text.tertiary",transition:"background-color 0.2s ease, border-color 0.2s ease",_hover:{cursor:"pointer",borderColor:"brand.base"},pointerEvents:s?"none":"auto",rounded:"sm",boxSizing:"border-box",outlineColor:a?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}),children:d("span",{children:[t.isSelected&&!r&&e(k,{height:16,width:16,color:y("colors.surface.primary")}),t.isSelected&&!!r&&e(v,{justifyContent:"center",alignItems:"center",children:e("div",{className:n({w:2.5,h:.5,bg:"surface.primary"})})})]})}),o&&e(j,{ml:3,children:e(C,{fontWeight:"medium",styles:{lineHeight:1},children:o})})]})});m.displayName="Checkbox";export{m as default};
+import{jsxs as c,jsx as e}from"react/jsx-runtime";import y from"../icons/ico-checkmark.js";import v from"./text.js";import{useToggleState as k}from"../../hooks/useToggleState.js";import{cn as d}from"../../lib/cn.js";import{forwardRef as N,useRef as S,useEffect as j}from"react";import{useCheckbox as w,useFocusRing as C,VisuallyHidden as P,mergeProps as R}from"react-aria";const u=N((n,m)=>{const{label:o,indeterminate:r=!1,disabled:s=!1,checked:b,"aria-label":f,...p}=n,t=k({...n,isSelected:b}),h=S(null),i=m||h;j(()=>{const l="current"in i?i.current:null;l&&(l.indeterminate=!!r)},[r,i]);const{inputProps:g}=w({...p,"aria-label":o||f||"Checkbox",isDisabled:s,isIndeterminate:r},t,i),{isFocusVisible:a,focusProps:x}=C();return c("label",{className:d("flex items-center rounded-sm",s?"opacity-30":"opacity-100"),children:[e(P,{children:e("input",{...R(g,x),ref:i})}),e("div",{className:d("flex items-center justify-center w-5 h-5 border-thick transition-[background-color,border-color] duration-200 ease-in-out hover:cursor-pointer hover:border-brand-base rounded box-border outline outline-offset-[0.125rem]",t.isSelected?"bg-brand-base":"bg-transparent",t.isSelected||a?"border-brand-base":"border-text-tertiary",s?"pointer-events-none":"pointer-events-auto",a?"outline-brand-base outline-thick":"outline-transparent outline-thick"),children:c("span",{children:[t.isSelected&&!r&&e(y,{height:16,width:16,color:"var(--color-surface-primary)"}),t.isSelected&&!!r&&e("div",{className:"flex justify-center items-center",children:e("div",{className:"w-2.5 h-0.5 bg-surface-primary"})})]})}),o&&e("div",{className:"ml-3",children:e(v,{fontWeight:"medium",styles:{lineHeight:1},children:o})})]})});u.displayName="Checkbox";export{u as default};
 //# sourceMappingURL=checkbox.js.map

package/dist/es/components/primitives/checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sources":["../../../../src/components/primitives/checkbox.tsx"],"sourcesContent":["import { IcoCheckmark } from '@components/icons';\nimport Text from '@components/primitives/text';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { ~~css~~ } from '@~~styled~~/~~css~~';\nimport { ~~Box } from '@styled/jsx';\nimport { Flex } from '@styled/jsx/flex';\nimport { token } from '@styled/tokens';\nimport {~~ forwardRef, useEffect, useRef } from 'react';\nimport { VisuallyHidden, mergeProps, useCheckbox, useFocusRing, type AriaCheckboxProps } from 'react-aria';\n\nexport type CheckboxProps = AriaCheckboxProps & {\n label?: string;\n disabled?: boolean;\n indeterminate?: boolean;\n checked?: boolean;\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, forwardedRef) => {\n const { label, indeterminate = false, disabled = false, checked, 'aria-label': ariaLabel, ...otherProps } = props;\n const state = useToggleState({ ...props, isSelected: checked });\n const internalRef = useRef<HTMLInputElement>(null);\n const ref = forwardedRef \|\| internalRef;\n\n useEffect(() => {\n const currentRef = 'current' in ref ? ref.current : null;\n if (currentRef) {\n currentRef.indeterminate = !!indeterminate;\n }\n }, [indeterminate, ref]);\n\n const { inputProps } = useCheckbox(\n {\n ...otherProps,\n 'aria-label': label \|\| ariaLabel \|\| 'Checkbox',\n isDisabled: disabled,\n isIndeterminate: indeterminate,\n },\n state,\n ref as React.RefObject<HTMLInputElement>,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <label\n className={~~css~~(~~{\n display:~~ 'flex~~',\n alignItems:~~ 'center~~',\n~~ rounded~~: '~~sm'~~,\n opacity:~~ disabled ? ~~0.3~~ : ~~1,\n }~~)}\n >\n <VisuallyHidden>\n <input {...mergeProps(inputProps, focusProps)} ref={ref} />\n </VisuallyHidden>\n <div\n className={~~css~~({\n ~~display:~~ 'flex~~',\n alignItems:~~ 'center~~',\n justifyContent:~~ 'center~~',\n width:~~ 5~~,\n height~~: 5,\n ~~bg:~~ state.isSelected ? 'brand.base' : 'transparent',\n ~~borderWidth: 'thick',\n borderColor:~~ state.isSelected \|\| isFocusVisible ? 'brand.base' : 'text.tertiary',\n ~~transition: 'background-color 0.2s ease, border-color 0.2s ease',\n _hover: {\n cursor: 'pointer',\n borderColor: 'brand.base',\n },\n pointerEvents:~~ disabled ? 'none' : 'auto',\n ~~rounded: 'sm',\n boxSizing: 'border-box',\n outlineColor:~~ isFocusVisible ? 'brand.base' : 'transparent~~',\n outlineStyle:~~ ~~'solid',\n outlineWidth: '~~thick',\n ~~outlineOffset: 0.5,\n~~ })}\n >\n <span>\n {state.isSelected && !indeterminate && (\n <IcoCheckmark height={16} width={16} color={~~token~~(~~'colors.~~surface.primary')} />\n )}\n {state.isSelected && !!indeterminate && (\n <~~Flex~~ ~~justifyContent~~=\"center\" ~~alignItems=\"~~center\">\n <div\n className~~={css({\n~~ w: 2.5~~,\n~~ h: 0.5~~,\n~~ bg~~: '~~surface.primary~~',\n })}~~\n />\n </~~Flex~~>\n )}\n </span>\n </div>\n {label && (\n <~~Box~~ ml={3}>\n <Text fontWeight=\"medium\" styles={{ lineHeight: 1 }}>\n {label}\n </Text>\n </~~Box~~>\n )}\n </label>\n );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","props","forwardedRef","label","indeterminate","disabled","checked","ariaLabel","otherProps","state","useToggleState","internalRef","useRef","ref","useEffect","currentRef","inputProps","useCheckbox","isFocusVisible","focusProps","useFocusRing","_jsxs","~~css~~","_jsx","VisuallyHidden","mergeProps","IcoCheckmark","~~token","Flex","Box","~~Text"],"mappings":"~~meAiBA~~,MAAMA,EAAWC,EAA4C,CAACC,EAAOC,IAAgB,CACnF,KAAM,CAAE,MAAAC,EAAO,cAAAC,EAAgB,GAAO,SAAAC,EAAW,GAAO,QAAAC,EAAS,aAAcC,EAAW,GAAGC,CAAU,EAAKP,EACtGQ,EAAQC,EAAe,CAAE,GAAGT,EAAO,WAAYK,CAAO,CAAE,EACxDK,EAAcC,EAAyB,IAAI,EAC3CC,EAAMX,GAAgBS,EAE5BG,EAAU,IAAK,CACb,MAAMC,EAAa,YAAaF,EAAMA,EAAI,QAAU,KAChDE,IACFA,EAAW,cAAgB,CAAC,CAACX,EAEjC,EAAG,CAACA,EAAeS,CAAG,CAAC,EAEvB,KAAM,CAAE,WAAAG,CAAY,EAAGC,EACrB,CACE,GAAGT,EACH,aAAcL,GAASI,GAAa,WACpC,WAAYF,EACZ,gBAAiBD,CAClB,EACDK,EACAI,CAAwC,EAEpC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,IAEvC,OACEC,~~EAAA~~,QAAA,~~CACE~~,UAAWC,~~EAAI~~,~~CACb,QAAS,OACT,WAAY,SACZ,QAAS,KACT,QAASjB,~~EAAW,~~GAAM~~,~~EAC3B~~,EAAC,SAAA,~~CAEFkB~~,EAACC,~~EAAc~~,CAAA,~~SACbD~~,~~cAAWE,~~EAAWT,EAAYG,CAAU,EAAG,IAAKN,CAAO,CAAA,CAAA,CAAA,EAE7DU,EACE,MAAA,CAAA,UAAWD,~~EAAI~~,~~CACb~~,~~QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,MAAO,EACP,OAAQ,EACR,GAAIb,~~EAAM,WAAa,~~aAAe~~,~~cACtC~~,~~YAAa,QACb,YAAaA,~~EAAM,YAAcS,EAAiB,~~aAAe~~,~~gBACjE~~,~~WAAY,qDACZ,OAAQ,CACN,OAAQ,UACR,YAAa,YACd,EACD,cAAeb,~~EAAW,~~OAAS~~,~~OACnC~~,~~QAAS,KACT,UAAW,aACX,aAAca,~~EAAiB,~~aAAe~~,~~cAC9C~~,~~aAAc~~,~~QACd~~,~~aAAc~~,~~QACd,cAAe,GAChB,EAAC,SAEFG,EACG,~~OAAA,CAAA,SAAA,~~CAAAZ~~,EAAM,YAAc,CAACL,GACpBmB,EAACG,~~GAAa~~,OAAQ,GAAI,MAAO,GAAI,~~MAAOC~~,~~EAAM~~,~~wBAAwB,IAE3ElB,~~EAAM,YAAc,CAAC,CAACL,GACrBmB,~~EAACK~~,~~GAAK~~,~~eAAe~~,~~SAAS~~,~~WAAW~~,~~SAAQ~~,~~SAC/CL,EACE,~~MAAA,CAAA,~~UAAWD~~,~~EAAI~~,~~CACb,EAAG,IACH,EAAG,GACH,GAAI,iBACL,~~CAAA,~~GAEE~~,CAAA,~~CACR,CACI,~~CAAA,~~CAAA~~,CAAA,~~EAERnB~~,GACCoB,~~EAACM~~,~~EAAI~~,~~CAAA~~,~~GAAI~~,~~WACPN~~,~~EAACO~~,~~EAAK~~,~~CAAA,~~WAAW,SAAS,OAAQ,CAAE,WAAY,CAAC,~~WAC9C3B~~,CAAK,CAAA,GAGX,CAAA,CAAA,CAGP,CAAC,EAEDJ,EAAS,YAAc"}
1	+ {"version":3,"file":"checkbox.js","sources":["../../../../src/components/primitives/checkbox.tsx"],"sourcesContent":["import { IcoCheckmark } from '@components/icons';\nimport Text from '@components/primitives/text';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cn } from '@lib/cn';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { VisuallyHidden, mergeProps, useCheckbox, useFocusRing, type AriaCheckboxProps } from 'react-aria';\n\nexport type CheckboxProps = AriaCheckboxProps & {\n label?: string;\n disabled?: boolean;\n indeterminate?: boolean;\n checked?: boolean;\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, forwardedRef) => {\n const { label, indeterminate = false, disabled = false, checked, 'aria-label': ariaLabel, ...otherProps } = props;\n const state = useToggleState({ ...props, isSelected: checked });\n const internalRef = useRef<HTMLInputElement>(null);\n const ref = forwardedRef \|\| internalRef;\n\n useEffect(() => {\n const currentRef = 'current' in ref ? ref.current : null;\n if (currentRef) {\n currentRef.indeterminate = !!indeterminate;\n }\n }, [indeterminate, ref]);\n\n const { inputProps } = useCheckbox(\n {\n ...otherProps,\n 'aria-label': label \|\| ariaLabel \|\| 'Checkbox',\n isDisabled: disabled,\n isIndeterminate: indeterminate,\n },\n state,\n ref as React.RefObject<HTMLInputElement>,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <label className={cn('flex items-center rounded-sm', disabled ? 'opacity-30' : 'opacity-100')}>\n <VisuallyHidden>\n <input {...mergeProps(inputProps, focusProps)} ref={ref} />\n </VisuallyHidden>\n <div\n className={cn(\n 'flex items-center justify-center w-5 h-5 border-thick transition-[background-color,border-color] duration-200 ease-in-out hover:cursor-pointer hover:border-brand-base rounded box-border outline outline-offset-[0.125rem]',\n state.isSelected ? 'bg-brand-base' : 'bg-transparent',\n state.isSelected \|\| isFocusVisible ? 'border-brand-base' : 'border-text-tertiary',\n disabled ? 'pointer-events-none' : 'pointer-events-auto',\n isFocusVisible ? 'outline-brand-base outline-thick' : 'outline-transparent outline-thick',\n )}\n >\n <span>\n {state.isSelected && !indeterminate && (\n <IcoCheckmark height={16} width={16} color={'var(--color-surface-primary)'} />\n )}\n {state.isSelected && !!indeterminate && (\n <div className=\"flex justify-center items-center\">\n <div className=\"w-2.5 h-0.5 bg-surface-primary\" />\n </div>\n )}\n </span>\n </div>\n {label && (\n <div className=\"ml-3\">\n <Text fontWeight=\"medium\" styles={{ lineHeight: 1 }}>\n {label}\n </Text>\n </div>\n )}\n </label>\n );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","props","forwardedRef","label","indeterminate","disabled","checked","ariaLabel","otherProps","state","useToggleState","internalRef","useRef","ref","useEffect","currentRef","inputProps","useCheckbox","isFocusVisible","focusProps","useFocusRing","_jsxs","cn","_jsx","VisuallyHidden","mergeProps","IcoCheckmark","Text"],"mappings":"qXAcA,MAAMA,EAAWC,EAA4C,CAACC,EAAOC,IAAgB,CACnF,KAAM,CAAE,MAAAC,EAAO,cAAAC,EAAgB,GAAO,SAAAC,EAAW,GAAO,QAAAC,EAAS,aAAcC,EAAW,GAAGC,CAAU,EAAKP,EACtGQ,EAAQC,EAAe,CAAE,GAAGT,EAAO,WAAYK,CAAO,CAAE,EACxDK,EAAcC,EAAyB,IAAI,EAC3CC,EAAMX,GAAgBS,EAE5BG,EAAU,IAAK,CACb,MAAMC,EAAa,YAAaF,EAAMA,EAAI,QAAU,KAChDE,IACFA,EAAW,cAAgB,CAAC,CAACX,EAEjC,EAAG,CAACA,EAAeS,CAAG,CAAC,EAEvB,KAAM,CAAE,WAAAG,CAAY,EAAGC,EACrB,CACE,GAAGT,EACH,aAAcL,GAASI,GAAa,WACpC,WAAYF,EACZ,gBAAiBD,CAClB,EACDK,EACAI,CAAwC,EAEpC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,IAEvC,OACEC,EAAO,QAAA,CAAA,UAAWC,EAAG,+BAAgCjB,EAAW,aAAe,aAAa,EAAC,SAAA,CAC3FkB,EAACC,YACCD,EAAW,QAAA,CAAA,GAAAE,EAAWT,EAAYG,CAAU,EAAG,IAAKN,CAAO,CAAA,CAAA,CAAA,EAE7DU,EACE,MAAA,CAAA,UAAWD,EACT,8NACAb,EAAM,WAAa,gBAAkB,iBACrCA,EAAM,YAAcS,EAAiB,oBAAsB,uBAC3Db,EAAW,sBAAwB,sBACnCa,EAAiB,mCAAqC,mCAAmC,EAG3F,SAAAG,EAAA,OAAA,CAAA,SAAA,CACGZ,EAAM,YAAc,CAACL,GACpBmB,EAACG,EAAY,CAAC,OAAQ,GAAI,MAAO,GAAI,MAAO,iCAE7CjB,EAAM,YAAc,CAAC,CAACL,GACrBmB,EAAK,MAAA,CAAA,UAAU,4CACbA,EAAK,MAAA,CAAA,UAAU,gCAAgC,CAAA,GAElD,CAAA,CAAA,CAEC,CAAA,EACLpB,GACCoB,SAAK,UAAU,OACb,SAAAA,EAACI,EAAI,CAAC,WAAW,SAAS,OAAQ,CAAE,WAAY,CAAC,WAC9CxB,CAAK,CAAA,GAGX,CAAA,CAAA,CAGP,CAAC,EAEDJ,EAAS,YAAc"}

package/dist/es/components/primitives/dropdown-selector.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as g,jsx as o}from"react/jsx-runtime";import{token as S}from"@styled/tokens";import U from"../icons/ico-caret-down.js";import Y from"../icons/ico-caret-up.js";import G from"../icons/ico-checkmark.js";import J from"../icons/ico-question-circle-fill.js";import{createContext as Q,useContext as X,useCallback as D,useState as W,useRef as A,useMemo as Z,Children as m,useEffect as ee,cloneElement as te}from"react";import{HStack as E,Box as B,VStack as re}from"@styled/jsx";import{css as F}from"@styled/css";import"../feedback/callout.js";import"../feedback/progress-bar.js";import"./button.js";import"./checkbox.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import O from"./text.js";import"./portal.js";import"../../hooks/useToast.js";import"../../recipes/toast.js";import oe from"../feedback/tooltip.js";import{useButton as ne,useFocusRing as le,useKeyboard as ie,mergeProps as se}from"react-aria";const L={sm:{caret:16,check:14,height:"2.625rem",top:48,width:"0.75rem",mult:2.25},md:{caret:17,check:15,height:"2.8125rem",top:52,width:"0.85rem",mult:2.25},lg:{caret:18,check:16,height:"3rem",top:55,width:"1rem",mult:2.5}},N=Q({selectedOption:null,setSelectedOption:()=>{}}),_=({value:r,label:i,size:u="lg",isFocused:x,optionHoverColor:d})=>{const{selectedOption:h,setSelectedOption:p}=X(N),l=h?.value===r,s=L[u],k=D(()=>{p({value:r,label:i})},[p,r,i]);return g(E,{py:1.5,gap:2,bg:l?"brand.base":x?"brand.lightest":"",_hover:l?{}:{bg:d||"brand.lightest"},onClick:k,style:{paddingLeft:s.width,paddingRight:s.width},children:[o(B,{style:{minWidth:s.width},children:l&&o(G,{width:s.check,height:s.check,color:S("colors.text.quaternary")})}),o(O,{size:u,fontWeight:"medium",fontColor:l?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:i})]})},j=({children:r,onSelect:i,label:u,placeholder:x="Select one",selectedValue:d,size:h="lg",tooltipContent:p,disabled:l,viewMax:s=5,optionHoverColor:k,...q})=>{const[f,v]=W(!1),[t,b]=W(null),w=A(null),C=A(null),a=L[h],I=s*a.mult+1,K=D(()=>{v(e=>!e),f||(b(null),setTimeout(()=>{var e;return(e=C.current)===null||e===void 0?void 0:e.focus()}))},[f]),R=D(e=>{i(e.value),v(!1)},[i]),z=Z(()=>{const e=m.toArray(r).find(n=>n.props.value===d);return e?e.props.label:x},[d,r]),{buttonProps:V}=ne({...q,isDisabled:l,onPress:K},w),{focusProps:$,isFocusVisible:M}=le(),{keyboardProps:T}=ie({onKeyDown:e=>{var n,c;if(!f)return;let y=t;const P=m.toArray(r);switch(e.key){case"ArrowUp":e.preventDefault(),t===null?b(m.count(r)-1):(y=t>0?t-1:m.count(r)-1,b(y));break;case"ArrowDown":e.preventDefault(),t===null?b(0):(y=t<m.count(r)-1?t+1:0,b(y));break;case"Enter":if(e.preventDefault(),(n=w.current)===null||n===void 0||n.focus(),t===null)return;if(t>=0&&t<P.length){const H=P[t];H&&i(H.props.value)}break;case"Escape":v(!1),(c=w.current)===null||c===void 0||c.focus();break}}});return ee(()=>{const e=n=>{var c;!((c=C.current)===null||c===void 0)&&c.contains(n.target)||v(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),o(N.Provider,{value:{selectedOption:{value:d??"",label:z},setSelectedOption:R},children:g(re,{gap:2,w:"full",alignItems:"flex-start",children:[(u||p)&&g(E,{gap:2,pointerEvents:l?"none":"auto",opacity:l?.3:"",transition:"all linear 120ms",children:[u&&o(O,{size:"sm",fontWeight:"medium",children:u}),p&&o(oe,{content:p,children:o(J,{className:F({w:4,h:4,color:"neutral.primary"})})})]}),g("button",{className:F({w:"full",h:"fit-content",bg:"surface.primary",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:M?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:w,...se(V,$,T),children:[g(E,{w:"full",p:4,justifyContent:"space-between",style:{height:a.height},children:[o(O,{truncate:!0,size:h,fontColor:d?"text.primary":"text.tertiary",children:z}),f?o(Y,{width:a.caret,height:a.caret,color:S("colors.brand.base")}):o(U,{width:a.caret,height:a.caret,color:S("colors.brand.base")})]}),f&&o(B,{ref:C,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${I}rem`,top:a.top},overflowY:"auto",outline:"none",zIndex:"max",children:m.map(r,(e,n)=>te(e,{isFocused:n===t,size:h,optionHoverColor:k}))})]})]})})};_.displayName="DropdownOption",j.displayName="DropdownSelector";export{_ as DropdownOption,j as DropdownSelector};
+import{jsxs as b,jsx as o}from"react/jsx-runtime";import V from"../icons/ico-caret-down.js";import B from"../icons/ico-caret-up.js";import U from"../icons/ico-checkmark.js";import G from"../icons/ico-question-circle-fill.js";import{createContext as J,useContext as Q,useCallback as N,useState as A,useRef as F,useMemo as X,Children as m,useEffect as Y,cloneElement as Z}from"react";import{cn as S}from"../../lib/cn.js";import"../feedback/callout.js";import"./button.js";import"./checkbox.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import z from"./text.js";import"./portal.js";import"../../hooks/useToast.js";import $ from"../feedback/tooltip.js";import{useButton as ee,useFocusRing as te,useKeyboard as re,mergeProps as oe}from"react-aria";const _={sm:{caret:16,check:14,height:"2.625rem",top:48,width:"0.75rem",mult:2.25},md:{caret:17,check:15,height:"2.8125rem",top:52,width:"0.85rem",mult:2.25},lg:{caret:18,check:16,height:"3rem",top:55,width:"1rem",mult:2.5}},j=J({selectedOption:null,setSelectedOption:()=>{}}),q=({value:r,label:i,size:u="lg",isFocused:C,optionHoverColor:d})=>{const{selectedOption:h,setSelectedOption:p}=Q(j),l=h?.value===r,a=_[u],g=N(()=>{p({value:r,label:i})},[p,r,i]);return b("div",{className:S("flex flex-row items-center py-1.5 gap-2",l?"bg-brand-base":C?"bg-brand-lightest":"",!l&&`hover:bg-${d||"brand-lightest"}`),role:"option",tabIndex:0,"aria-selected":l,onClick:g,onKeyDown:y=>{(y.key==="Enter"||y.key===" ")&&g()},style:{paddingLeft:a.width,paddingRight:a.width},children:[o("div",{style:{minWidth:a.width},children:l&&o(U,{width:a.check,height:a.check,color:"var(--color-text-quaternary)"})}),o(z,{size:u,fontWeight:"medium",fontColor:l?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:i})]})},H=({children:r,onSelect:i,label:u,placeholder:C="Select one",selectedValue:d,size:h="lg",tooltipContent:p,disabled:l,viewMax:a=5,optionHoverColor:g,...y})=>{const[f,w]=A(!1),[t,v]=A(null),x=F(null),D=F(null),s=_[h],K=a*s.mult+1,L=N(()=>{w(e=>!e),f||(v(null),setTimeout(()=>{var e;return(e=D.current)===null||e===void 0?void 0:e.focus()}))},[f]),R=N(e=>{i(e.value),w(!1)},[i]),O=X(()=>{const e=m.toArray(r).find(n=>n.props.value===d);return e?e.props.label:C},[d,r]),{buttonProps:W}=ee({...y,isDisabled:l,onPress:L},x),{focusProps:I,isFocusVisible:M}=te(),{keyboardProps:T}=re({onKeyDown:e=>{var n,c;if(!f)return;let k=t;const E=m.toArray(r);switch(e.key){case"ArrowUp":e.preventDefault(),t===null?v(m.count(r)-1):(k=t>0?t-1:m.count(r)-1,v(k));break;case"ArrowDown":e.preventDefault(),t===null?v(0):(k=t<m.count(r)-1?t+1:0,v(k));break;case"Enter":if(e.preventDefault(),(n=x.current)===null||n===void 0||n.focus(),t===null)return;if(t>=0&&t<E.length){const P=E[t];P&&i(P.props.value)}break;case"Escape":w(!1),(c=x.current)===null||c===void 0||c.focus();break}}});return Y(()=>{const e=n=>{var c;!((c=D.current)===null||c===void 0)&&c.contains(n.target)||w(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),o(j.Provider,{value:{selectedOption:{value:d??"",label:O},setSelectedOption:R},children:b("div",{className:"flex flex-col gap-2 w-full items-start",children:[(u||p)&&b("div",{className:S("flex flex-row items-center gap-2 transition-all duration-[120ms] linear",l?"pointer-events-none opacity-30":"pointer-events-auto"),children:[u&&o(z,{size:"sm",fontWeight:"medium",children:u}),p&&o($,{content:p,children:o(G,{className:"w-4 h-4 text-neutral-primary"})})]}),b("button",{className:S("w-full h-fit bg-surface-primary border border-neutral-secondary rounded-xl transition-all duration-[120ms] linear relative cursor-pointer hover:border-neutral-primary disabled:opacity-30 disabled:pointer-events-none outline-offset-[0.125rem]",M?"outline outline-brand-base outline-thick":"outline-none"),ref:x,...oe(W,I,T),children:[b("div",{className:"flex flex-row items-center w-full p-4 justify-between",style:{height:s.height},children:[o(z,{truncate:!0,size:h,fontColor:d?"text.primary":"text.tertiary",children:O}),f?o(B,{width:s.caret,height:s.caret,color:"var(--color-brand-base)"}):o(V,{width:s.caret,height:s.caret,color:"var(--color-brand-base)"})]}),f&&o("div",{ref:D,tabIndex:-1,className:"py-2 bg-surface-primary absolute w-full rounded-input shadow-[4px_8px_20px_0px_rgba(0,0,0,0.15)] overflow-y-auto outline-none z-max",style:{maxHeight:`${K}rem`,top:s.top},children:m.map(r,(e,n)=>Z(e,{isFocused:n===t,size:h,optionHoverColor:g}))})]})]})})};q.displayName="DropdownOption",H.displayName="DropdownSelector";export{q as DropdownOption,H as DropdownSelector};
 //# sourceMappingURL=dropdown-selector.js.map

package/dist/es/components/primitives/dropdown-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n Children,\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n children: ReactNode;\n onSelect: (value: string) => void;\n label?: string;\n placeholder?: string;\n selectedValue?: string;\n size?: 'sm' \| 'md' \| 'lg';\n tooltipContent?: string;\n disabled?: boolean;\n viewMax?: 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10;\n optionHoverColor?: string;\n}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\n optionHoverColor?: string;\n}\n\ninterface OptionData {\n value: string;\n label: string;\n}\n\nexport interface DropdownContextType {\n selectedOption: OptionData \| null;\n setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n selectedOption: null,\n setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused, optionHoverColor }: DropdownOptionProps) => {\n const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n const isSelected = selectedOption?.value === value;\n const sizeProps = SIZES[size];\n\n const handleSelectOption = useCallback(() => {\n setSelectedOption({ value, label });\n }, [setSelectedOption, value, label]);\n\n return (\n <HStack\n py={1.5}\n gap={2}\n bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n _hover={!isSelected ? { bg: optionHoverColor \|\| 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <Box style={{ minWidth: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n )}\n </Box>\n <Text\n size={size}\n fontWeight=\"medium\"\n fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n styles={{ textAlign: 'left' }}\n >\n {label}\n </Text>\n </HStack>\n );\n};\n\nexport const DropdownSelector = ({\n children,\n onSelect,\n label,\n placeholder = 'Select one',\n selectedValue,\n size = 'lg',\n tooltipContent,\n disabled,\n viewMax = 5,\n optionHoverColor,\n ...props\n}: DropdownSelectorProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const sizeProps = SIZES[size];\n const maxHeight = viewMax * sizeProps.mult + 1;\n\n const toggleDropdown = useCallback(() => {\n setIsOpen(prev => !prev);\n if (!isOpen) {\n setFocusedIndex(null);\n setTimeout(() => dropdownRef.current?.focus());\n }\n }, [isOpen]);\n\n const handleSelect = useCallback(\n (option: OptionData) => {\n onSelect(option.value);\n setIsOpen(false);\n },\n [onSelect],\n );\n\n const selectedLabel = useMemo(() => {\n const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n const matchedChild = childElements.find(child => child.props.value === selectedValue);\n return matchedChild ? matchedChild.props.label : placeholder;\n }, [selectedValue, children]);\n\n const { buttonProps } = useButton(\n {\n ...props,\n isDisabled: disabled,\n onPress: toggleDropdown,\n },\n buttonRef,\n );\n\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: event => {\n if (!isOpen) return;\n\n let newFocusedIndex = focusedIndex;\n const childArray = Children.toArray(children);\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(Children.count(children) - 1);\n } else {\n newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'ArrowDown':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(0);\n } else {\n newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'Enter':\n event.preventDefault();\n buttonRef.current?.focus();\n if (focusedIndex === null) return;\n if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n if (selectedChild) {\n onSelect(selectedChild.props.value);\n }\n }\n break;\n case 'Escape':\n setIsOpen(false);\n buttonRef.current?.focus();\n break;\n default:\n break;\n }\n },\n });\n\n useEffect(() => {\n const handleClick = (event: MouseEvent) => {\n if (!dropdownRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClick);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n };\n }, []);\n\n return (\n <DropdownContext.Provider\n value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n >\n <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n {(label \|\| tooltipContent) && (\n <HStack\n gap={2}\n pointerEvents={disabled ? 'none' : 'auto'}\n opacity={disabled ? 0.3 : ''}\n transition={'all linear 120ms'}\n >\n {label && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip content={tooltipContent}>\n <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n </Tooltip>\n )}\n </HStack>\n )}\n\n <button\n className={css({\n w: 'full',\n h: 'fit-content',\n bg: 'surface.primary',\n borderWidth: 'thin',\n borderColor: 'neutral.secondary',\n rounded: 'xl',\n transition: 'all linear 120ms',\n position: 'relative',\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n _hover: { borderColor: 'neutral.primary' },\n _disabled: { opacity: 0.3, pointerEvents: 'none' },\n })}\n ref={buttonRef}\n {...mergeProps(buttonProps, focusProps, keyboardProps)}\n >\n <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n <Text truncate size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n {selectedLabel}\n </Text>\n {isOpen ? (\n <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n ) : (\n <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n )}\n </HStack>\n\n {isOpen && (\n <Box\n ref={dropdownRef}\n tabIndex={-1}\n py={2}\n bg=\"surface.primary\"\n position=\"absolute\"\n w=\"full\"\n rounded=\"input\"\n boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n overflowY=\"auto\"\n outline=\"none\"\n zIndex=\"max\"\n >\n {Children.map(children, (child, index) =>\n cloneElement(child as ReactElement<DropdownOptionProps>, {\n isFocused: index === focusedIndex,\n size,\n optionHoverColor,\n }),\n )}\n </Box>\n )}\n </button>\n </VStack>\n </DropdownContext.Provider>\n );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","optionHoverColor","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { cn } from '@lib/cn';\nimport {\n Children,\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n children: ReactNode;\n onSelect: (value: string) => void;\n label?: string;\n placeholder?: string;\n selectedValue?: string;\n size?: 'sm' \| 'md' \| 'lg';\n tooltipContent?: string;\n disabled?: boolean;\n viewMax?: 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10;\n optionHoverColor?: string;\n}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\n optionHoverColor?: string;\n}\n\ninterface OptionData {\n value: string;\n label: string;\n}\n\nexport interface DropdownContextType {\n selectedOption: OptionData \| null;\n setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n selectedOption: null,\n setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused, optionHoverColor }: DropdownOptionProps) => {\n const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n const isSelected = selectedOption?.value === value;\n const sizeProps = SIZES[size];\n\n const handleSelectOption = useCallback(() => {\n setSelectedOption({ value, label });\n }, [setSelectedOption, value, label]);\n\n return (\n <div\n className={cn(\n 'flex flex-row items-center py-1.5 gap-2',\n isSelected ? 'bg-brand-base' : isFocused ? 'bg-brand-lightest' : '',\n !isSelected && `hover:bg-${optionHoverColor \|\| 'brand-lightest'}`,\n )}\n role=\"option\"\n tabIndex={0}\n aria-selected={isSelected}\n onClick={handleSelectOption}\n onKeyDown={e => {\n if (e.key === 'Enter' \|\| e.key === ' ') handleSelectOption();\n }}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <div style={{ minWidth: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={'var(--color-text-quaternary)'} />\n )}\n </div>\n <Text\n size={size}\n fontWeight=\"medium\"\n fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n styles={{ textAlign: 'left' }}\n >\n {label}\n </Text>\n </div>\n );\n};\n\nexport const DropdownSelector = ({\n children,\n onSelect,\n label,\n placeholder = 'Select one',\n selectedValue,\n size = 'lg',\n tooltipContent,\n disabled,\n viewMax = 5,\n optionHoverColor,\n ...props\n}: DropdownSelectorProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const sizeProps = SIZES[size];\n const maxHeight = viewMax * sizeProps.mult + 1;\n\n const toggleDropdown = useCallback(() => {\n setIsOpen(prev => !prev);\n if (!isOpen) {\n setFocusedIndex(null);\n setTimeout(() => dropdownRef.current?.focus());\n }\n }, [isOpen]);\n\n const handleSelect = useCallback(\n (option: OptionData) => {\n onSelect(option.value);\n setIsOpen(false);\n },\n [onSelect],\n );\n\n const selectedLabel = useMemo(() => {\n const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n const matchedChild = childElements.find(child => child.props.value === selectedValue);\n return matchedChild ? matchedChild.props.label : placeholder;\n }, [selectedValue, children]);\n\n const { buttonProps } = useButton(\n {\n ...props,\n isDisabled: disabled,\n onPress: toggleDropdown,\n },\n buttonRef,\n );\n\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: event => {\n if (!isOpen) return;\n\n let newFocusedIndex = focusedIndex;\n const childArray = Children.toArray(children);\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(Children.count(children) - 1);\n } else {\n newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'ArrowDown':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(0);\n } else {\n newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'Enter':\n event.preventDefault();\n buttonRef.current?.focus();\n if (focusedIndex === null) return;\n if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n if (selectedChild) {\n onSelect(selectedChild.props.value);\n }\n }\n break;\n case 'Escape':\n setIsOpen(false);\n buttonRef.current?.focus();\n break;\n default:\n break;\n }\n },\n });\n\n useEffect(() => {\n const handleClick = (event: MouseEvent) => {\n if (!dropdownRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClick);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n };\n }, []);\n\n return (\n <DropdownContext.Provider\n value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n >\n <div className=\"flex flex-col gap-2 w-full items-start\">\n {(label \|\| tooltipContent) && (\n <div\n className={cn(\n 'flex flex-row items-center gap-2 transition-all duration-[120ms] linear',\n disabled ? 'pointer-events-none opacity-30' : 'pointer-events-auto',\n )}\n >\n {label && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip content={tooltipContent}>\n <IcoQuestionCircleFill className=\"w-4 h-4 text-neutral-primary\" />\n </Tooltip>\n )}\n </div>\n )}\n\n <button\n className={cn(\n 'w-full h-fit bg-surface-primary border border-neutral-secondary rounded-xl transition-all duration-[120ms] linear relative cursor-pointer hover:border-neutral-primary disabled:opacity-30 disabled:pointer-events-none outline-offset-[0.125rem]',\n isFocusVisible ? 'outline outline-brand-base outline-thick' : 'outline-none',\n )}\n ref={buttonRef}\n {...mergeProps(buttonProps, focusProps, keyboardProps)}\n >\n <div className=\"flex flex-row items-center w-full p-4 justify-between\" style={{ height: sizeProps.height }}>\n <Text truncate size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n {selectedLabel}\n </Text>\n {isOpen ? (\n <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={'var(--color-brand-base)'} />\n ) : (\n <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={'var(--color-brand-base)'} />\n )}\n </div>\n\n {isOpen && (\n <div\n ref={dropdownRef}\n tabIndex={-1}\n className=\"py-2 bg-surface-primary absolute w-full rounded-input shadow-[4px_8px_20px_0px_rgba(0,0,0,0.15)] overflow-y-auto outline-none z-max\"\n style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n >\n {Children.map(children, (child, index) =>\n cloneElement(child as ReactElement<DropdownOptionProps>, {\n isFocused: index === focusedIndex,\n size,\n optionHoverColor,\n }),\n )}\n </div>\n )}\n </button>\n </div>\n </DropdownContext.Provider>\n );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","optionHoverColor","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","cn","e","_jsx","IcoCheckmark","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","Tooltip","IcoQuestionCircleFill","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}

package/dist/es/components/primitives/popover.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o,Fragment as X,jsxs as C}from"react/jsx-runtime";import g from"./button.js";import"./checkbox.js";import"./dropdown-selector.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import{useToggleState as re}from"../../hooks/useToggleState.js";import{cx as ne}from"@styled/css";import{Center as ie,Box as Y}from"@styled/jsx";import{vstack as le}from"@styled/patterns";import{token as ce}from"@styled/tokens";import{createSlot as f,createHost as se}from"create-slots";import{Children as pe,cloneElement as ae,useMemo as de,useRef as z,useCallback as A,useEffect as me}from"react";import{useOverlayTrigger as ge,usePopover as ue,mergeProps as B,Overlay as fe}from"react-aria";const D="bottom left",H=8,ve="hover",E=f(({children:t})=>o(X,{children:t})),j=f(({children:t,...c})=>{const{onPress:i,...s}=c;return o(ie,{children:pe.map(t,l=>ae(l,s))})}),w=f(t=>o(g.LeadingIcon,{...t})),K=f(t=>o(g.TrailingIcon,{...t})),M=({children:t,...c})=>se(t,i=>{var s;const{isOpen:l,defaultOpen:W,onOpenChange:_,trigger:O=ve,iconSize:v,onPress:he,...I}=c,{isSelected:q,setSelected:h}=re({isOpen:l,defaultSelected:W,onChange:_,...c}),x=l!==void 0?l:q,r=24,n=de(()=>({isOpen:x,open:()=>{h(!0)},close:()=>{h(!1)},setOpen(e){h(e)},toggle(){}}),[x]),S=i.getProps(E),p=z(null),{triggerProps:L,overlayProps:G}=ge({type:"dialog"},n,p),a=z(null),{popoverProps:J,underlayProps:Q}=ue({placement:c.placement||D,offset:H,popoverRef:a,triggerRef:p,...S},n),b=B(S,J);!((s=b?.style)===null||s===void 0)&&s.zIndex&&(b.style.zIndex=ce("zIndex.max"));const{className:V,...Z}=b,k=A(()=>{n.open()},[n]),y=A(e=>{var P,T;const d=(P=p.current)===null||P===void 0?void 0:P.getBoundingClientRect(),m=(T=a.current)===null||T===void 0?void 0:T.getBoundingClientRect();if(d&&m){const oe=e.clientX>=d.left-r&&e.clientX<=d.right+r&&e.clientY>=d.top-r&&e.clientY<=d.bottom+r,te=e.clientX>=m.left-r&&e.clientX<=m.right+r&&e.clientY>=m.top-r&&e.clientY<=m.bottom+r;!oe&&!te&&n.close()}},[n]),$=()=>{if(a.current){const e=a.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.length>0&&e[0].focus()}},ee=e=>{e.key==="Enter"&&(e.preventDefault(),l?n.close():(n.open(),setTimeout($,0)))};me(()=>(document.addEventListener("mousemove",y),()=>{document.removeEventListener("mousemove",y)}),[y]);const u=i.get(j),R=i.getProps(w),F=i.getProps(K),N=v?{height:v,width:v}:{};return C(X,{children:[u?o(Y,{display:"inline-block",ref:p,...I,children:u&&{...u,props:{...u.props,...L}}}):o(Y,{display:"inline-block",ref:p,children:C(g,{...B(L,I),onKeyDown:ee,onHover:()=>O==="hover"&&k(),onPress:()=>O==="click"&&k(),children:[R&&o(g.LeadingIcon,{...R,...N}),F&&o(g.TrailingIcon,{...F,...N})]})}),x&&C(fe,{...G,children:[o("div",{...Q,className:"underlay"}),o("div",{ref:a,...Z,className:ne(le({bg:"surface.secondary",p:3,gap:0,color:"text.secondary",borderWidth:1,borderColor:"neutral.secondary",borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",maxW:52,alignItems:"start"}),V),children:i.get(E)})]})]})}),U=Object.assign(M,{Trigger:j,LeadingIcon:w,TrailingIcon:K,Content:E});export{H as DEFAULT_OFFSET,D as DEFAULT_PLACEMENT,U as Popover,M as PopoverHost,U as default};
+import{jsx as t,Fragment as k,jsxs as E}from"react/jsx-runtime";import g from"./button.js";import"./checkbox.js";import"./dropdown-selector.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import{useToggleState as oe}from"../../hooks/useToggleState.js";import{cn as ne}from"../../lib/cn.js";import{createSlot as f,createHost as re}from"create-slots";import{Children as le,cloneElement as ie,useMemo as ce,useRef as z,useCallback as A,useEffect as se}from"react";import{useOverlayTrigger as ae,usePopover as pe,mergeProps as X,Overlay as de}from"react-aria";const Y="bottom left",j=8,me="hover",O=f(({children:o})=>t(k,{children:o})),w=f(({children:o,...c})=>{const{onPress:l,...s}=c;return t("div",{className:"flex items-center justify-center",children:le.map(o,i=>ie(i,s))})}),D=f(o=>t(g.LeadingIcon,{...o})),H=f(o=>t(g.TrailingIcon,{...o})),q=({children:o,...c})=>re(o,l=>{var s;const{isOpen:i,defaultOpen:M,onOpenChange:U,trigger:C=me,iconSize:v,onPress:ge,...I}=c,{isSelected:K,setSelected:h}=oe({isOpen:i,defaultSelected:M,onChange:U,...c}),x=i!==void 0?i:K,n=24,r=ce(()=>({isOpen:x,open:()=>{h(!0)},close:()=>{h(!1)},setOpen(e){h(e)},toggle(){}}),[x]),L=l.getProps(O),a=z(null),{triggerProps:S,overlayProps:G}=ae({type:"dialog"},r,a),p=z(null),{popoverProps:J,underlayProps:Q}=pe({placement:c.placement||Y,offset:j,popoverRef:p,triggerRef:a,...L},r),y=X(L,J);!((s=y?.style)===null||s===void 0)&&s.zIndex&&(y.style.zIndex="var(--zIndex-max)");const{className:V,...Z}=y,N=A(()=>{r.open()},[r]),P=A(e=>{var b,T;const d=(b=a.current)===null||b===void 0?void 0:b.getBoundingClientRect(),m=(T=p.current)===null||T===void 0?void 0:T.getBoundingClientRect();if(d&&m){const ee=e.clientX>=d.left-n&&e.clientX<=d.right+n&&e.clientY>=d.top-n&&e.clientY<=d.bottom+n,te=e.clientX>=m.left-n&&e.clientX<=m.right+n&&e.clientY>=m.top-n&&e.clientY<=m.bottom+n;!ee&&!te&&r.close()}},[r]),$=()=>{if(p.current){const e=p.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.length>0&&e[0].focus()}},W=e=>{e.key==="Enter"&&(e.preventDefault(),i?r.close():(r.open(),setTimeout($,0)))};se(()=>(document.addEventListener("mousemove",P),()=>{document.removeEventListener("mousemove",P)}),[P]);const u=l.get(w),_=l.getProps(D),F=l.getProps(H),R=v?{height:v,width:v}:{};return E(k,{children:[u?t("div",{className:"inline-block",ref:a,...I,children:u&&{...u,props:{...u.props,...S}}}):t("div",{className:"inline-block",ref:a,children:E(g,{...X(S,I),onKeyDown:W,onHover:()=>C==="hover"&&N(),onPress:()=>C==="click"&&N(),children:[_&&t(g.LeadingIcon,{..._,...R}),F&&t(g.TrailingIcon,{...F,...R})]})}),x&&E(de,{...G,children:[t("div",{...Q,className:"underlay"}),t("div",{ref:p,...Z,className:ne("flex flex-col bg-surface-secondary p-3 gap-0 text-text-secondary border border-neutral-secondary rounded-xl shadow-[0px_4px_20px_0px_rgba(0,0,0,0.10)] max-w-52 items-start",V),children:l.get(O)})]})]})}),B=Object.assign(q,{Trigger:w,LeadingIcon:D,TrailingIcon:H,Content:O});export{j as DEFAULT_OFFSET,Y as DEFAULT_PLACEMENT,B as Popover,q as PopoverHost,B as default};
 //# sourceMappingURL=popover.js.map

package/dist/es/components/primitives/popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Box, Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n Children,\n ComponentProps,\n PropsWithChildren,\n cloneElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n isOpen?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n placement?: Placement;\n trigger?: 'click' \| 'hover';\n}\n\ninterface OverlayTriggerState {\n readonly isOpen: boolean;\n setOpen(isOpen: boolean): void;\n open(): void;\n close(): void;\n toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' \| 'triggerRef'> & {\n children?: ReactNode;\n state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst DEFAULT_TRIGGER: string = 'hover';\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst Trigger = createSlot(({ children, ...props }) => {\n const { onPress, ...restProps } = props;\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, restProps);\n })}\n </Center>\n );\n});\n\nconst LeadingIcon = createSlot(props => <Button.LeadingIcon {...props} />);\n\nconst TrailingIcon = createSlot(props => <Button.TrailingIcon {...props} />);\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n return createHost(children, slots => {\n const { isOpen, defaultOpen, onOpenChange, trigger = DEFAULT_TRIGGER, iconSize, onPress, ...restProps } = props;\n const { isSelected, setSelected: setOpen } = useToggleState({\n isOpen: isOpen,\n defaultSelected: defaultOpen,\n onChange: onOpenChange,\n ...props,\n });\n\n const isPopoverOpen = isOpen !== undefined ? isOpen : isSelected;\n const safeZoneRadius = 24;\n\n const state = useMemo(\n () => ({\n isOpen: isPopoverOpen,\n open: () => {\n setOpen(true);\n },\n close: () => {\n setOpen(false);\n },\n setOpen(value: boolean) {\n setOpen(value);\n },\n toggle() {},\n }),\n [isPopoverOpen],\n );\n\n const popoverContentProps = slots.getProps(PopoverContent);\n\n const triggerRef = useRef<HTMLDivElement>(null);\n const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const { popoverProps, underlayProps } = usePopover(\n {\n placement: props.placement \|\| DEFAULT_PLACEMENT,\n offset: DEFAULT_OFFSET,\n popoverRef: contentRef,\n triggerRef,\n ...popoverContentProps,\n },\n state,\n );\n\n const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n // Need to override zIndex set by react-aria so popover displays over iframe\n if (contentProps?.style?.zIndex) {\n contentProps.style.zIndex = token('zIndex.max');\n }\n\n const { className: contentClassName, ...restContentProps } = contentProps;\n\n const handleTrigger = useCallback(() => {\n state.open();\n }, [state]);\n\n const handleMouseLeave = useCallback(\n (event: MouseEvent) => {\n const buttonRect = triggerRef.current?.getBoundingClientRect();\n const popoverRect = contentRef.current?.getBoundingClientRect();\n\n if (buttonRect && popoverRect) {\n const withinButtonSafeZone =\n event.clientX >= buttonRect.left - safeZoneRadius &&\n event.clientX <= buttonRect.right + safeZoneRadius &&\n event.clientY >= buttonRect.top - safeZoneRadius &&\n event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n const withinPopoverSafeZone =\n event.clientX >= popoverRect.left - safeZoneRadius &&\n event.clientX <= popoverRect.right + safeZoneRadius &&\n event.clientY >= popoverRect.top - safeZoneRadius &&\n event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n state.close();\n }\n }\n },\n [state],\n );\n\n const focusFirstInteractiveElement = () => {\n if (contentRef.current) {\n const interactiveElements = contentRef.current.querySelectorAll(\n 'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n if (interactiveElements.length > 0) {\n (interactiveElements[0] as HTMLElement).focus();\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n if (isOpen) {\n state.close();\n } else {\n state.open();\n setTimeout(focusFirstInteractiveElement, 0);\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('mousemove', handleMouseLeave);\n return () => {\n document.removeEventListener('mousemove', handleMouseLeave);\n };\n }, [handleMouseLeave]);\n\n const triggerEle = slots.get(Trigger);\n const leadingIconProps = slots.getProps(LeadingIcon);\n const trailingIconProps = slots.getProps(TrailingIcon);\n const customIconSize = iconSize ? { height: iconSize, width: iconSize } : {};\n\n return (\n <>\n {triggerEle ? (\n <Box display=\"inline-block\" ref={triggerRef} {...restProps}>\n {triggerEle && { ...triggerEle, props: { ...triggerEle.props, ...triggerProps } }}\n </Box>\n ) : (\n <Box display=\"inline-block\" ref={triggerRef}>\n <Button\n {...mergeProps(triggerProps, restProps)}\n onKeyDown={handleKeyDown}\n onHover={() => trigger === 'hover' && handleTrigger()}\n onPress={() => trigger === 'click' && handleTrigger()}\n >\n {leadingIconProps && <Button.LeadingIcon {...leadingIconProps} {...customIconSize} />}\n {trailingIconProps && <Button.TrailingIcon {...trailingIconProps} {...customIconSize} />}\n </Button>\n </Box>\n )}\n {isPopoverOpen && (\n <Overlay {...overlayProps}>\n <div {...underlayProps} className=\"underlay\" />\n <div\n ref={contentRef}\n {...restContentProps}\n className={cx(\n vstack({\n bg: 'surface.secondary',\n p: 3,\n gap: 0,\n color: 'text.secondary',\n borderWidth: 1,\n borderColor: 'neutral.secondary',\n borderRadius: 'xl',\n boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n maxW: 52,\n alignItems: 'start',\n }),\n contentClassName,\n )}\n >\n {slots.get(PopoverContent)}\n </div>\n </Overlay>\n )}\n </>\n );\n });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n Trigger,\n LeadingIcon,\n TrailingIcon,\n Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","DEFAULT_TRIGGER","PopoverContent","createSlot","children","_jsx","_Fragment","Trigger","props","onPress","restProps","Center","Children","child","cloneElement","LeadingIcon","Button","TrailingIcon","PopoverHost","createHost","slots","isOpen","defaultOpen","onOpenChange","trigger","iconSize","isSelected","setOpen","useToggleState","isPopoverOpen","safeZoneRadius","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","contentClassName","restContentProps","handleTrigger","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","triggerEle","leadingIconProps","trailingIconProps","customIconSize","_jsxs","Box","Overlay","cx","vstack","Popover"],"mappings":"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"}
1	+ {"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cn } from '@lib/cn';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n Children,\n ComponentProps,\n PropsWithChildren,\n cloneElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n isOpen?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n placement?: Placement;\n trigger?: 'click' \| 'hover';\n}\n\ninterface OverlayTriggerState {\n readonly isOpen: boolean;\n setOpen(isOpen: boolean): void;\n open(): void;\n close(): void;\n toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' \| 'triggerRef'> & {\n children?: ReactNode;\n state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst DEFAULT_TRIGGER: string = 'hover';\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst Trigger = createSlot(({ children, ...props }) => {\n const { onPress, ...restProps } = props;\n return (\n <div className=\"flex items-center justify-center\">\n {Children.map(children, child => {\n return cloneElement(child, restProps);\n })}\n </div>\n );\n});\n\nconst LeadingIcon = createSlot(props => <Button.LeadingIcon {...props} />);\n\nconst TrailingIcon = createSlot(props => <Button.TrailingIcon {...props} />);\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n return createHost(children, slots => {\n const { isOpen, defaultOpen, onOpenChange, trigger = DEFAULT_TRIGGER, iconSize, onPress, ...restProps } = props;\n const { isSelected, setSelected: setOpen } = useToggleState({\n isOpen: isOpen,\n defaultSelected: defaultOpen,\n onChange: onOpenChange,\n ...props,\n });\n\n const isPopoverOpen = isOpen !== undefined ? isOpen : isSelected;\n const safeZoneRadius = 24;\n\n const state = useMemo(\n () => ({\n isOpen: isPopoverOpen,\n open: () => {\n setOpen(true);\n },\n close: () => {\n setOpen(false);\n },\n setOpen(value: boolean) {\n setOpen(value);\n },\n toggle() {},\n }),\n [isPopoverOpen],\n );\n\n const popoverContentProps = slots.getProps(PopoverContent);\n\n const triggerRef = useRef<HTMLDivElement>(null);\n const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const { popoverProps, underlayProps } = usePopover(\n {\n placement: props.placement \|\| DEFAULT_PLACEMENT,\n offset: DEFAULT_OFFSET,\n popoverRef: contentRef,\n triggerRef,\n ...popoverContentProps,\n },\n state,\n );\n\n const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n // Need to override zIndex set by react-aria so popover displays over iframe\n if (contentProps?.style?.zIndex) {\n contentProps.style.zIndex = 'var(--zIndex-max)';\n }\n\n const { className: contentClassName, ...restContentProps } = contentProps;\n\n const handleTrigger = useCallback(() => {\n state.open();\n }, [state]);\n\n const handleMouseLeave = useCallback(\n (event: MouseEvent) => {\n const buttonRect = triggerRef.current?.getBoundingClientRect();\n const popoverRect = contentRef.current?.getBoundingClientRect();\n\n if (buttonRect && popoverRect) {\n const withinButtonSafeZone =\n event.clientX >= buttonRect.left - safeZoneRadius &&\n event.clientX <= buttonRect.right + safeZoneRadius &&\n event.clientY >= buttonRect.top - safeZoneRadius &&\n event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n const withinPopoverSafeZone =\n event.clientX >= popoverRect.left - safeZoneRadius &&\n event.clientX <= popoverRect.right + safeZoneRadius &&\n event.clientY >= popoverRect.top - safeZoneRadius &&\n event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n state.close();\n }\n }\n },\n [state],\n );\n\n const focusFirstInteractiveElement = () => {\n if (contentRef.current) {\n const interactiveElements = contentRef.current.querySelectorAll(\n 'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n if (interactiveElements.length > 0) {\n (interactiveElements[0] as HTMLElement).focus();\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n if (isOpen) {\n state.close();\n } else {\n state.open();\n setTimeout(focusFirstInteractiveElement, 0);\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('mousemove', handleMouseLeave);\n return () => {\n document.removeEventListener('mousemove', handleMouseLeave);\n };\n }, [handleMouseLeave]);\n\n const triggerEle = slots.get(Trigger);\n const leadingIconProps = slots.getProps(LeadingIcon);\n const trailingIconProps = slots.getProps(TrailingIcon);\n const customIconSize = iconSize ? { height: iconSize, width: iconSize } : {};\n\n return (\n <>\n {triggerEle ? (\n <div className=\"inline-block\" ref={triggerRef} {...restProps}>\n {triggerEle && { ...triggerEle, props: { ...triggerEle.props, ...triggerProps } }}\n </div>\n ) : (\n <div className=\"inline-block\" ref={triggerRef}>\n <Button\n {...mergeProps(triggerProps, restProps)}\n onKeyDown={handleKeyDown}\n onHover={() => trigger === 'hover' && handleTrigger()}\n onPress={() => trigger === 'click' && handleTrigger()}\n >\n {leadingIconProps && <Button.LeadingIcon {...leadingIconProps} {...customIconSize} />}\n {trailingIconProps && <Button.TrailingIcon {...trailingIconProps} {...customIconSize} />}\n </Button>\n </div>\n )}\n {isPopoverOpen && (\n <Overlay {...overlayProps}>\n <div {...underlayProps} className=\"underlay\" />\n <div\n ref={contentRef}\n {...restContentProps}\n className={cn(\n 'flex flex-col bg-surface-secondary p-3 gap-0 text-text-secondary border border-neutral-secondary rounded-xl shadow-[0px_4px_20px_0px_rgba(0,0,0,0.10)] max-w-52 items-start',\n contentClassName,\n )}\n >\n {slots.get(PopoverContent)}\n </div>\n </Overlay>\n )}\n </>\n );\n });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n Trigger,\n LeadingIcon,\n TrailingIcon,\n Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","DEFAULT_TRIGGER","PopoverContent","createSlot","children","_jsx","_Fragment","Trigger","props","onPress","restProps","Children","child","cloneElement","LeadingIcon","Button","TrailingIcon","PopoverHost","createHost","slots","isOpen","defaultOpen","onOpenChange","trigger","iconSize","isSelected","setOpen","useToggleState","isPopoverOpen","safeZoneRadius","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","contentClassName","restContentProps","handleTrigger","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","triggerEle","leadingIconProps","trailingIconProps","customIconSize","_jsxs","Overlay","cn","Popover"],"mappings":"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"}

package/dist/es/components/primitives/radio.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as V,jsx as e}from"react/jsx-runtime";import v from"./text.js";import{Flex as c,Circle as y,Box as P}from"@styled/jsx";import{flex as R}from"@styled/patterns";import{createContext as k,forwardRef as S,useContext as j,useRef as w,useCallback as u}from"react";import{useHover as F,useFocusRing as I,usePress as N,VisuallyHidden as W,mergeProps as z}from"react-aria";const m=k({selectedValue:void 0,setSelectedValue:()=>{}}),p=i=>{const{children:s,onChange:t,selectedValue:o,vertical:r}=i,n=u(a=>{t(a)},[t]);return e(c,{direction:r?"column":"row",gap:r?5:10,role:"radiogroup",children:e(m.Provider,{value:{selectedValue:o,setSelectedValue:n},children:s})})},h=S((i,s)=>{const{label:t,value:o}=i,r=j(m),n=w(null),a=s||n,b=u(()=>{r.setSelectedValue(o)},[r,o]),{hoverProps:f}=F({}),{focusProps:x,isFocusVisible:d}=I(),{pressProps:g}=N({onPress:b}),l=r.selectedValue===o,C=l?0:-1;return V("label",{className:R({alignItems:"center"}),children:[e(W,{children:e("input",{...z(g,x,f),ref:a,type:"radio",checked:l,tabIndex:C,readOnly:!0})}),e(c,{justifyContent:"center",alignItems:"center",borderWidth:"thick",borderColor:d||l?"brand.base":"text.tertiary",transition:"border-color 0.2s ease",outlineColor:"brand.base",outlineStyle:d?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"brand.base"},cursor:"pointer",w:6,h:6,rounded:"full","aria-hidden":"true",children:l&&e(y,{size:3,bg:"brand.base"})}),e(P,{ml:3,children:e(v,{size:"lg",fontWeight:"medium",children:t})})]})});p.displayName="RadioGroup",h.displayName="Radio";export{h as Radio,p as RadioGroup};
+import{jsxs as V,jsx as e}from"react/jsx-runtime";import y from"./text.js";import{cn as c}from"../../lib/cn.js";import{createContext as N,forwardRef as P,useContext as R,useRef as k,useCallback as u}from"react";import{useHover as w,useFocusRing as C,usePress as j,VisuallyHidden as S,mergeProps as F}from"react-aria";const m=N({selectedValue:void 0,setSelectedValue:()=>{}}),f=a=>{const{children:t,onChange:l,selectedValue:r,vertical:o}=a,i=u(d=>{l(d)},[l]);return e("div",{className:c("flex",o?"flex-col gap-5":"flex-row gap-10"),role:"radiogroup",children:e(m.Provider,{value:{selectedValue:r,setSelectedValue:i},children:t})})},p=P((a,t)=>{const{label:l,value:r}=a,o=R(m),i=k(null),d=t||i,b=u(()=>{o.setSelectedValue(r)},[o,r]),{hoverProps:h}=w({}),{focusProps:x,isFocusVisible:n}=C(),{pressProps:v}=j({onPress:b}),s=o.selectedValue===r,g=s?0:-1;return V("label",{className:"flex items-center",children:[e(S,{children:e("input",{...F(v,x,h),ref:d,type:"radio",checked:s,tabIndex:g,readOnly:!0})}),e("div",{className:c("flex justify-center items-center border-thick transition-colors duration-200 ease-in-out cursor-pointer w-6 h-6 rounded-full hover:border-brand-base",n||s?"border-brand-base":"border-text-tertiary",n?"outline outline-thick outline-brand-base outline-offset-[0.125rem]":"outline-none"),"aria-hidden":"true",children:s&&e("div",{className:"rounded-full w-3 h-3 bg-brand-base"})}),e("div",{className:"ml-3",children:e(y,{size:"lg",fontWeight:"medium",children:l})})]})});f.displayName="RadioGroup",p.displayName="Radio";export{p as Radio,f as RadioGroup};
 //# sourceMappingURL=radio.js.map