npm - @magiclabs/ui-components - Versions diffs - 1.23.0 → 1.23.2 - Mend

@magiclabs/ui-components 1.23.0 → 1.23.2

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 (202) hide show

package/dist/cjs/components/logos/icon-person.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");const i=({title:s,titleId:t,...r})=>e.jsxs("svg",{width:32,height:32,viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":t,...r,children:[s?e.jsx("title",{id:t,children:s}):null,e.jsx("circle",{cx:16,cy:8.72727,r:7.27273,fill:"url(#paint0_radial_11175_21190)"}),e.jsx("path",{d:"M6.65869 30.5455H25.3416C28.2157 30.5455 30.5456 28.2155 30.5456 25.3415C30.5456 23.2135 29.2501 21.3 27.2743 20.5097L21.7296 18.2918C18.0516 16.8206 13.9487 16.8206 10.2707 18.2918L4.72597 20.5097C2.75023 21.3 1.45469 23.2135 1.45469 25.3415C1.45469 28.2155 3.7846 30.5455 6.65869 30.5455Z",fill:"url(#paint1_linear_11175_21190)"}),e.jsx("line",{x1:21.2363,y1:24.6545,x2:23.8545,y2:24.6545,stroke:"url(#paint2_linear_11175_21190)",strokeWidth:3.2,strokeLinecap:"round"}),e.jsxs("defs",{children:[e.jsxs("radialGradient",{id:"paint0_radial_11175_21190",cx:0,cy:0,r:1,gradientUnits:"userSpaceOnUse",gradientTransform:"translate(10.1818 -0.727273) rotate(77.7352) scale(17.118)",children:[e.jsx("stop",{stopColor:"#EDEBFF"}),e.jsx("stop",{offset:1,stopColor:"#6851FF"})]}),e.jsxs("linearGradient",{id:"paint1_linear_11175_21190",x1:16.0001,y1:12.0867,x2:16.0001,y2:27.592,gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"#BDB2FF"}),e.jsx("stop",{offset:1,stopColor:"#6851FF"})]}),e.jsxs("linearGradient",{id:"paint2_linear_11175_21190",x1:22.5454,y1:23.2545,x2:22.5454,y2:26.2545,gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"#EDEBFF"}),e.jsx("stop",{offset:1,stopColor:"#EDEBFF",stopOpacity:0})]})]})]});exports.default=i;
2	+ //# sourceMappingURL=icon-person.js.map

package/dist/cjs/components/logos/icon-person.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"icon-person.js","sources":["../../../../src/components/logos/icon-person.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {}\nconst IconPerson = ({ title, titleId, ...props }: Props) => (\n <svg\n width={32}\n height={32}\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <circle cx={16} cy={8.72727} r={7.27273} fill=\"url(#paint0_radial_11175_21190)\" />\n <path\n d=\"M6.65869 30.5455H25.3416C28.2157 30.5455 30.5456 28.2155 30.5456 25.3415C30.5456 23.2135 29.2501 21.3 27.2743 20.5097L21.7296 18.2918C18.0516 16.8206 13.9487 16.8206 10.2707 18.2918L4.72597 20.5097C2.75023 21.3 1.45469 23.2135 1.45469 25.3415C1.45469 28.2155 3.7846 30.5455 6.65869 30.5455Z\"\n fill=\"url(#paint1_linear_11175_21190)\"\n />\n <line\n x1={21.2363}\n y1={24.6545}\n x2={23.8545}\n y2={24.6545}\n stroke=\"url(#paint2_linear_11175_21190)\"\n strokeWidth={3.2}\n strokeLinecap=\"round\"\n />\n <defs>\n <radialGradient\n id=\"paint0_radial_11175_21190\"\n cx={0}\n cy={0}\n r={1}\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(10.1818 -0.727273) rotate(77.7352) scale(17.118)\"\n >\n <stop stopColor=\"#EDEBFF\" />\n <stop offset={1} stopColor=\"#6851FF\" />\n </radialGradient>\n <linearGradient\n id=\"paint1_linear_11175_21190\"\n x1={16.0001}\n y1={12.0867}\n x2={16.0001}\n y2={27.592}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#BDB2FF\" />\n <stop offset={1} stopColor=\"#6851FF\" />\n </linearGradient>\n <linearGradient\n id=\"paint2_linear_11175_21190\"\n x1={22.5454}\n y1={23.2545}\n x2={22.5454}\n y2={26.2545}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#EDEBFF\" />\n <stop offset={1} stopColor=\"#EDEBFF\" stopOpacity={0} />\n </linearGradient>\n </defs>\n </svg>\n);\nexport default IconPerson;\n"],"names":["IconPerson","title","titleId","props","_jsxs","_jsx"],"mappings":"uGAMMA,MAAAA,EAAa,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAC5CC,OACE,MAAA,CAAA,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BAA4B,kBACjBF,EAAO,GACpBC,EAAK,SAAA,CAERF,EAAQI,MAAO,QAAA,CAAA,GAAIH,EAAU,SAAAD,CAAc,CAAA,EAAG,KAC/CI,MAAQ,SAAA,CAAA,GAAI,GAAI,GAAI,QAAS,EAAG,QAAS,KAAK,iCAAiC,CAAA,EAC/EA,EAAAA,IAAA,OAAA,CACE,EAAE,qSACF,KAAK,iCAAiC,CAAA,EAExCA,EAAA,IAAA,OAAA,CACE,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,OAAO,kCACP,YAAa,IACb,cAAc,OAAO,CAAA,EAEvBD,EAAAA,KAAA,OAAA,CAAA,SAAA,CACEA,EAAAA,KACE,iBAAA,CAAA,GAAG,4BACH,GAAI,EACJ,GAAI,EACJ,EAAG,EACH,cAAc,iBACd,kBAAkB,6DAA4D,SAAA,CAE9EC,EAAAA,IAAM,OAAA,CAAA,UAAU,SAAY,CAAA,EAC5BA,EAAAA,IAAM,OAAA,CAAA,OAAQ,EAAG,UAAU,SAAY,CAAA,CAAA,CAAA,CAAA,EAEzCD,EAAAA,KAAA,iBAAA,CACE,GAAG,4BACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,OACJ,cAAc,iBAAgB,SAAA,CAE9BC,EAAAA,IAAM,OAAA,CAAA,UAAU,YAChBA,EAAAA,IAAA,OAAA,CAAM,OAAQ,EAAG,UAAU,SAAS,CAAA,CAAG,CACxB,CAAA,EACjBD,EAAAA,KACE,iBAAA,CAAA,GAAG,4BACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,cAAc,iBAEd,SAAA,CAAAC,EAAA,IAAA,OAAA,CAAM,UAAU,SAAS,CAAA,EACzBA,EAAAA,IAAA,OAAA,CAAM,OAAQ,EAAG,UAAU,UAAU,YAAa,CAAC,CAAA,CAAI,CACxC,CAAA,CAAA,CAAA,CAAA,CACZ,CACH,CAAA"}

package/dist/cjs/components/logos/icon-reset.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");const t=({title:l,titleId:i,...s})=>e.jsxs("svg",{width:32,height:32,viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":i,...s,children:[l?e.jsx("title",{id:i,children:l}):null,e.jsx("circle",{cx:16.0032,cy:16,r:14.6667,fill:"#D9D9D9"}),e.jsx("circle",{cx:16.0032,cy:16,r:14.6667,fill:"url(#paint0_linear_11179_10889)"}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.0011 9.77778C12.5405 9.77778 9.77886 12.5633 9.77886 16C9.77886 16.4909 9.38089 16.8889 8.88997 16.8889C8.39905 16.8889 8.00108 16.4909 8.00108 16C8.00108 11.5861 11.5541 8 16.0011 8C18.6366 8 20.6089 9.10223 21.9047 10.1832C22.0157 10.2758 22.1219 10.3683 22.2233 10.4602V9.28711C22.2233 8.79619 22.6213 8.39822 23.1122 8.39822C23.6031 8.39822 24.0011 8.79619 24.0011 9.28711V12.8427C24.0011 13.3336 23.6031 13.7316 23.1122 13.7316H19.9549C19.4639 13.7316 19.066 13.3336 19.066 12.8427C19.066 12.3517 19.4639 11.9538 19.9549 11.9538H21.2184C21.08 11.8207 20.9291 11.6845 20.7659 11.5483C19.6919 10.6524 18.1087 9.77778 16.0011 9.77778ZM23.1122 15.1111C23.6031 15.1111 24.0011 15.5091 24.0011 16C24.0011 20.4163 20.4173 24 16.0011 24C13.7297 24 11.9448 22.8572 10.771 21.7926C10.7015 21.7296 10.6339 21.6666 10.5682 21.6039V22.7129C10.5682 23.2038 10.1702 23.6018 9.67931 23.6018C9.18839 23.6018 8.79042 23.2038 8.79042 22.7129V19.1573C8.79042 18.6664 9.18839 18.2684 9.67931 18.2684H12.8935C13.3844 18.2684 13.7824 18.6664 13.7824 19.1573C13.7824 19.6483 13.3844 20.0462 12.8935 20.0462H11.5225C11.6586 20.1871 11.8063 20.3316 11.9654 20.4758C12.9712 21.3881 14.3471 22.2222 16.0011 22.2222C19.4355 22.2222 22.2233 19.4344 22.2233 16C22.2233 15.5091 22.6213 15.1111 23.1122 15.1111Z",fill:"url(#paint1_linear_11179_10889)"}),e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:"paint0_linear_11179_10889",x1:16.0032,y1:1.33333,x2:16.0032,y2:30.6667,gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"#FF9B80"}),e.jsx("stop",{offset:1,stopColor:"#FC5C30"})]}),e.jsxs("linearGradient",{id:"paint1_linear_11179_10889",x1:16.0011,y1:8.88889,x2:16.0011,y2:23.1111,gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"white"}),e.jsx("stop",{offset:1,stopColor:"#FFEAE5"})]})]})]});exports.default=t;
2	+ //# sourceMappingURL=icon-reset.js.map

package/dist/cjs/components/logos/icon-reset.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"icon-reset.js","sources":["../../../../src/components/logos/icon-reset.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {}\nconst IconReset = ({ title, titleId, ...props }: Props) => (\n <svg\n width={32}\n height={32}\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <circle cx={16.0032} cy={16} r={14.6667} fill=\"#D9D9D9\" />\n <circle cx={16.0032} cy={16} r={14.6667} fill=\"url(#paint0_linear_11179_10889)\" />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M16.0011 9.77778C12.5405 9.77778 9.77886 12.5633 9.77886 16C9.77886 16.4909 9.38089 16.8889 8.88997 16.8889C8.39905 16.8889 8.00108 16.4909 8.00108 16C8.00108 11.5861 11.5541 8 16.0011 8C18.6366 8 20.6089 9.10223 21.9047 10.1832C22.0157 10.2758 22.1219 10.3683 22.2233 10.4602V9.28711C22.2233 8.79619 22.6213 8.39822 23.1122 8.39822C23.6031 8.39822 24.0011 8.79619 24.0011 9.28711V12.8427C24.0011 13.3336 23.6031 13.7316 23.1122 13.7316H19.9549C19.4639 13.7316 19.066 13.3336 19.066 12.8427C19.066 12.3517 19.4639 11.9538 19.9549 11.9538H21.2184C21.08 11.8207 20.9291 11.6845 20.7659 11.5483C19.6919 10.6524 18.1087 9.77778 16.0011 9.77778ZM23.1122 15.1111C23.6031 15.1111 24.0011 15.5091 24.0011 16C24.0011 20.4163 20.4173 24 16.0011 24C13.7297 24 11.9448 22.8572 10.771 21.7926C10.7015 21.7296 10.6339 21.6666 10.5682 21.6039V22.7129C10.5682 23.2038 10.1702 23.6018 9.67931 23.6018C9.18839 23.6018 8.79042 23.2038 8.79042 22.7129V19.1573C8.79042 18.6664 9.18839 18.2684 9.67931 18.2684H12.8935C13.3844 18.2684 13.7824 18.6664 13.7824 19.1573C13.7824 19.6483 13.3844 20.0462 12.8935 20.0462H11.5225C11.6586 20.1871 11.8063 20.3316 11.9654 20.4758C12.9712 21.3881 14.3471 22.2222 16.0011 22.2222C19.4355 22.2222 22.2233 19.4344 22.2233 16C22.2233 15.5091 22.6213 15.1111 23.1122 15.1111Z\"\n fill=\"url(#paint1_linear_11179_10889)\"\n />\n <defs>\n <linearGradient\n id=\"paint0_linear_11179_10889\"\n x1={16.0032}\n y1={1.33333}\n x2={16.0032}\n y2={30.6667}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#FF9B80\" />\n <stop offset={1} stopColor=\"#FC5C30\" />\n </linearGradient>\n <linearGradient\n id=\"paint1_linear_11179_10889\"\n x1={16.0011}\n y1={8.88889}\n x2={16.0011}\n y2={23.1111}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"white\" />\n <stop offset={1} stopColor=\"#FFEAE5\" />\n </linearGradient>\n </defs>\n </svg>\n);\nexport default IconReset;\n"],"names":["IconReset","title","titleId","props","_jsxs","_jsx"],"mappings":"6GAMMA,EAAY,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,GAAGC,KACtCC,EAAAA,KAAA,MAAA,CACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,+CACWF,EAAO,GACpBC,EAEH,SAAA,CAAAF,EAAQI,EAAO,IAAA,QAAA,CAAA,GAAIH,WAAUD,CAAK,CAAA,EAAY,KAC/CI,EAAAA,IAAA,SAAA,CAAQ,GAAI,QAAS,GAAI,GAAI,EAAG,QAAS,KAAK,SAAS,CAAA,EACvDA,EAAAA,IAAQ,SAAA,CAAA,GAAI,QAAS,GAAI,GAAI,EAAG,QAAS,KAAK,iCAAiC,CAAA,EAC/EA,EAAAA,IACE,OAAA,CAAA,SAAS,UACT,SAAS,UACT,EAAE,0wCACF,KAAK,iCACL,CAAA,EACFD,EAAAA,uBACEA,EAAAA,KACE,iBAAA,CAAA,GAAG,4BACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,cAAc,2BAEdC,EAAAA,IAAM,OAAA,CAAA,UAAU,SAAS,CAAA,EACzBA,EAAAA,IAAM,OAAA,CAAA,OAAQ,EAAG,UAAU,SAAS,CAAA,CAAG,IAEzCD,EAAAA,KAAA,iBAAA,CACE,GAAG,4BACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,cAAc,iBAEd,SAAA,CAAAC,EAAAA,IAAA,OAAA,CAAM,UAAU,OAAU,CAAA,EAC1BA,MAAM,OAAA,CAAA,OAAQ,EAAG,UAAU,WAAY,CACxB,CAAA,CAAA,CAAA,CAAA,CACZ,CACH,CAAA"}

package/dist/cjs/components/logos/icon-warning-shield.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");const t=({title:i,titleId:l,...s})=>e.jsxs("svg",{width:32,height:32,viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":l,...s,children:[i?e.jsx("title",{id:l,children:i}):null,e.jsx("path",{d:"M4.00323 8.67022C4.00323 7.18895 4.98074 5.88538 6.40268 5.47038L15.0749 2.93937C15.685 2.76129 16.3334 2.76138 16.9435 2.93962L25.6046 5.46993C27.0262 5.88522 28.0032 7.18859 28.0032 8.66952V13.356C28.0032 17.0385 26.8444 20.6276 24.691 23.6148C22.7546 26.301 20.1022 28.3781 17.047 29.6159C16.3789 29.8865 15.6316 29.8866 14.9634 29.616C11.9071 28.3783 9.25377 26.3009 7.31664 23.614C5.16251 20.6261 4.00329 17.0361 4.00323 13.3527V8.67022Z",fill:"url(#paint0_linear_11179_10852)"}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.0032 9.33333C16.9237 9.33333 17.6699 10.0795 17.6699 11V16.3333C17.6699 17.2538 16.9237 18 16.0032 18C15.0828 18 14.3366 17.2538 14.3366 16.3333V11C14.3366 10.0795 15.0828 9.33333 16.0032 9.33333Z",fill:"url(#paint1_linear_11179_10852)"}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14.3294 21.1667C14.3294 20.2462 15.0756 19.5 15.9961 19.5H16.0085C16.929 19.5 17.6752 20.2462 17.6752 21.1667C17.6752 22.0871 16.929 22.8333 16.0085 22.8333H15.9961C15.0756 22.8333 14.3294 22.0871 14.3294 21.1667Z",fill:"url(#paint2_linear_11179_10852)"}),e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:"paint0_linear_11179_10852",x1:16.0032,y1:2.66667,x2:16.0032,y2:30,gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"#FF9B80"}),e.jsx("stop",{offset:1,stopColor:"#FC5C30"})]}),e.jsxs("linearGradient",{id:"paint1_linear_11179_10852",x1:16.3366,y1:11,x2:16.3366,y2:16.3333,gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"white"}),e.jsx("stop",{offset:1,stopColor:"#FFEAE5"})]}),e.jsxs("linearGradient",{id:"paint2_linear_11179_10852",x1:16.0023,y1:19.3333,x2:16.0023,y2:23,gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"white"}),e.jsx("stop",{offset:1,stopColor:"#FFEAE5"})]})]})]});exports.default=t;
2	+ //# sourceMappingURL=icon-warning-shield.js.map

package/dist/cjs/components/logos/icon-warning-shield.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"icon-warning-shield.js","sources":["../../../../src/components/logos/icon-warning-shield.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {}\nconst IconWarningShield = ({ title, titleId, ...props }: Props) => (\n <svg\n width={32}\n height={32}\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n d=\"M4.00323 8.67022C4.00323 7.18895 4.98074 5.88538 6.40268 5.47038L15.0749 2.93937C15.685 2.76129 16.3334 2.76138 16.9435 2.93962L25.6046 5.46993C27.0262 5.88522 28.0032 7.18859 28.0032 8.66952V13.356C28.0032 17.0385 26.8444 20.6276 24.691 23.6148C22.7546 26.301 20.1022 28.3781 17.047 29.6159C16.3789 29.8865 15.6316 29.8866 14.9634 29.616C11.9071 28.3783 9.25377 26.3009 7.31664 23.614C5.16251 20.6261 4.00329 17.0361 4.00323 13.3527V8.67022Z\"\n fill=\"url(#paint0_linear_11179_10852)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M16.0032 9.33333C16.9237 9.33333 17.6699 10.0795 17.6699 11V16.3333C17.6699 17.2538 16.9237 18 16.0032 18C15.0828 18 14.3366 17.2538 14.3366 16.3333V11C14.3366 10.0795 15.0828 9.33333 16.0032 9.33333Z\"\n fill=\"url(#paint1_linear_11179_10852)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M14.3294 21.1667C14.3294 20.2462 15.0756 19.5 15.9961 19.5H16.0085C16.929 19.5 17.6752 20.2462 17.6752 21.1667C17.6752 22.0871 16.929 22.8333 16.0085 22.8333H15.9961C15.0756 22.8333 14.3294 22.0871 14.3294 21.1667Z\"\n fill=\"url(#paint2_linear_11179_10852)\"\n />\n <defs>\n <linearGradient\n id=\"paint0_linear_11179_10852\"\n x1={16.0032}\n y1={2.66667}\n x2={16.0032}\n y2={30}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#FF9B80\" />\n <stop offset={1} stopColor=\"#FC5C30\" />\n </linearGradient>\n <linearGradient\n id=\"paint1_linear_11179_10852\"\n x1={16.3366}\n y1={11}\n x2={16.3366}\n y2={16.3333}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"white\" />\n <stop offset={1} stopColor=\"#FFEAE5\" />\n </linearGradient>\n <linearGradient\n id=\"paint2_linear_11179_10852\"\n x1={16.0023}\n y1={19.3333}\n x2={16.0023}\n y2={23}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"white\" />\n <stop offset={1} stopColor=\"#FFEAE5\" />\n </linearGradient>\n </defs>\n </svg>\n);\nexport default IconWarningShield;\n"],"names":["IconWarningShield","title","titleId","props","_jsxs","_jsx"],"mappings":"uGAMMA,MAAAA,EAAoB,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAc,IAC5DC,OACE,MAAA,CAAA,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACW,kBAAAF,EACb,GAAAC,EAEH,SAAA,CAAAF,EAAQI,EAAAA,IAAO,QAAA,CAAA,GAAIH,EAAU,SAAAD,CAAc,CAAA,EAAG,KAC/CI,EAAAA,YACE,EAAE,6bACF,KAAK,iCACL,CAAA,EACFA,MACE,OAAA,CAAA,SAAS,UACT,SAAS,UACT,EAAE,2MACF,KAAK,iCAAiC,CAAA,EAExCA,EAAA,IAAA,OAAA,CACE,SAAS,UACT,SAAS,UACT,EAAE,yNACF,KAAK,oCAEPD,EAAA,KAAA,OAAA,CAAA,SAAA,CACEA,EAAAA,KACE,iBAAA,CAAA,GAAG,4BACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,GACJ,cAAc,iBAEd,SAAA,CAAAC,EAAAA,IAAA,OAAA,CAAM,UAAU,SAAY,CAAA,EAC5BA,EAAM,IAAA,OAAA,CAAA,OAAQ,EAAG,UAAU,SAAY,CAAA,CAAA,CAAA,CAAA,EAEzCD,OACE,iBAAA,CAAA,GAAG,4BACH,GAAI,QACJ,GAAI,GACJ,GAAI,QACJ,GAAI,QACJ,cAAc,iBAAgB,SAAA,CAE9BC,EAAAA,IAAM,OAAA,CAAA,UAAU,UAChBA,EAAAA,IAAA,OAAA,CAAM,OAAQ,EAAG,UAAU,SAAY,CAAA,CAAA,CAAA,CAAA,EAEzCD,OAAA,iBAAA,CACE,GAAG,4BACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,GACJ,cAAc,iBAAgB,SAAA,CAE9BC,EAAAA,IAAM,OAAA,CAAA,UAAU,OAAU,CAAA,EAC1BA,cAAM,OAAQ,EAAG,UAAU,SAAS,CAAA,CAAG,CACxB,CAAA,CAAA,CAAA,CAAA,CACZ,CACH,CAAA"}

package/dist/cjs/components/logos/icon-warning.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");const t=({title:i,titleId:s,...l})=>e.jsxs("svg",{width:32,height:32,viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":s,...l,children:[i?e.jsx("title",{id:s,children:i}):null,e.jsx("path",{d:"M12.8786 5.72258L2.86809 24.0752C1.57572 26.4445 3.29062 29.3333 5.98949 29.3333H26.0105C28.7094 29.3333 30.4243 26.4445 29.1319 24.0752L19.1215 5.72258C17.7738 3.25195 14.2263 3.25195 12.8786 5.72258Z",fill:"url(#paint0_linear_11179_10869)"}),e.jsx("path",{d:"M12.8786 5.72258L2.86809 24.0752C1.57572 26.4445 3.29062 29.3333 5.98949 29.3333H26.0105C28.7094 29.3333 30.4243 26.4445 29.1319 24.0752L19.1215 5.72258C17.7738 3.25195 14.2263 3.25195 12.8786 5.72258Z",fill:"url(#paint1_linear_11179_10869)"}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16 11.3333C16.9205 11.3333 17.6667 12.0795 17.6667 13V18.3333C17.6667 19.2538 16.9205 20 16 20C15.0795 20 14.3333 19.2538 14.3333 18.3333V13C14.3333 12.0795 15.0795 11.3333 16 11.3333Z",fill:"url(#paint2_linear_11179_10869)"}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16 11.3333C16.9205 11.3333 17.6667 12.0795 17.6667 13V18.3333C17.6667 19.2538 16.9205 20 16 20C15.0795 20 14.3333 19.2538 14.3333 18.3333V13C14.3333 12.0795 15.0795 11.3333 16 11.3333Z",fill:"url(#paint3_linear_11179_10869)"}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14.3262 23.1667C14.3262 22.2462 15.0724 21.5 15.9929 21.5H16.0054C16.9259 21.5 17.6721 22.2462 17.6721 23.1667C17.6721 24.0871 16.9259 24.8333 16.0054 24.8333H15.9929C15.0724 24.8333 14.3262 24.0871 14.3262 23.1667Z",fill:"url(#paint4_linear_11179_10869)"}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14.3262 23.1667C14.3262 22.2462 15.0724 21.5 15.9929 21.5H16.0054C16.9259 21.5 17.6721 22.2462 17.6721 23.1667C17.6721 24.0871 16.9259 24.8333 16.0054 24.8333H15.9929C15.0724 24.8333 14.3262 24.0871 14.3262 23.1667Z",fill:"url(#paint5_linear_11179_10869)"}),e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:"paint0_linear_11179_10869",x1:16,y1:0,x2:16,y2:29.3333,gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"#A799FF"}),e.jsx("stop",{offset:1,stopColor:"#6851FF"})]}),e.jsxs("linearGradient",{id:"paint1_linear_11179_10869",x1:16,y1:0,x2:16,y2:29.3333,gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"#FF9B80"}),e.jsx("stop",{offset:1,stopColor:"#FC5C30"})]}),e.jsxs("linearGradient",{id:"paint2_linear_11179_10869",x1:16.3333,y1:13,x2:16.3333,y2:18.3333,gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"white"}),e.jsx("stop",{offset:1,stopColor:"#EDEBFF"})]}),e.jsxs("linearGradient",{id:"paint3_linear_11179_10869",x1:16.3333,y1:13,x2:16.3333,y2:18.3333,gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"white"}),e.jsx("stop",{offset:1,stopColor:"#FFEAE5"})]}),e.jsxs("linearGradient",{id:"paint4_linear_11179_10869",x1:15.9992,y1:21.3333,x2:15.9992,y2:25,gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"white"}),e.jsx("stop",{offset:1,stopColor:"#EDEBFF"})]}),e.jsxs("linearGradient",{id:"paint5_linear_11179_10869",x1:15.9992,y1:21.3333,x2:15.9992,y2:25,gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"white"}),e.jsx("stop",{offset:1,stopColor:"#FFEAE5"})]})]})]});exports.default=t;
2	+ //# sourceMappingURL=icon-warning.js.map

package/dist/cjs/components/logos/icon-warning.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"icon-warning.js","sources":["../../../../src/components/logos/icon-warning.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {}\nconst IconWarning = ({ title, titleId, ...props }: Props) => (\n <svg\n width={32}\n height={32}\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n d=\"M12.8786 5.72258L2.86809 24.0752C1.57572 26.4445 3.29062 29.3333 5.98949 29.3333H26.0105C28.7094 29.3333 30.4243 26.4445 29.1319 24.0752L19.1215 5.72258C17.7738 3.25195 14.2263 3.25195 12.8786 5.72258Z\"\n fill=\"url(#paint0_linear_11179_10869)\"\n />\n <path\n d=\"M12.8786 5.72258L2.86809 24.0752C1.57572 26.4445 3.29062 29.3333 5.98949 29.3333H26.0105C28.7094 29.3333 30.4243 26.4445 29.1319 24.0752L19.1215 5.72258C17.7738 3.25195 14.2263 3.25195 12.8786 5.72258Z\"\n fill=\"url(#paint1_linear_11179_10869)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M16 11.3333C16.9205 11.3333 17.6667 12.0795 17.6667 13V18.3333C17.6667 19.2538 16.9205 20 16 20C15.0795 20 14.3333 19.2538 14.3333 18.3333V13C14.3333 12.0795 15.0795 11.3333 16 11.3333Z\"\n fill=\"url(#paint2_linear_11179_10869)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M16 11.3333C16.9205 11.3333 17.6667 12.0795 17.6667 13V18.3333C17.6667 19.2538 16.9205 20 16 20C15.0795 20 14.3333 19.2538 14.3333 18.3333V13C14.3333 12.0795 15.0795 11.3333 16 11.3333Z\"\n fill=\"url(#paint3_linear_11179_10869)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M14.3262 23.1667C14.3262 22.2462 15.0724 21.5 15.9929 21.5H16.0054C16.9259 21.5 17.6721 22.2462 17.6721 23.1667C17.6721 24.0871 16.9259 24.8333 16.0054 24.8333H15.9929C15.0724 24.8333 14.3262 24.0871 14.3262 23.1667Z\"\n fill=\"url(#paint4_linear_11179_10869)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M14.3262 23.1667C14.3262 22.2462 15.0724 21.5 15.9929 21.5H16.0054C16.9259 21.5 17.6721 22.2462 17.6721 23.1667C17.6721 24.0871 16.9259 24.8333 16.0054 24.8333H15.9929C15.0724 24.8333 14.3262 24.0871 14.3262 23.1667Z\"\n fill=\"url(#paint5_linear_11179_10869)\"\n />\n <defs>\n <linearGradient id=\"paint0_linear_11179_10869\" x1={16} y1={0} x2={16} y2={29.3333} gradientUnits=\"userSpaceOnUse\">\n <stop stopColor=\"#A799FF\" />\n <stop offset={1} stopColor=\"#6851FF\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_11179_10869\" x1={16} y1={0} x2={16} y2={29.3333} gradientUnits=\"userSpaceOnUse\">\n <stop stopColor=\"#FF9B80\" />\n <stop offset={1} stopColor=\"#FC5C30\" />\n </linearGradient>\n <linearGradient\n id=\"paint2_linear_11179_10869\"\n x1={16.3333}\n y1={13}\n x2={16.3333}\n y2={18.3333}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"white\" />\n <stop offset={1} stopColor=\"#EDEBFF\" />\n </linearGradient>\n <linearGradient\n id=\"paint3_linear_11179_10869\"\n x1={16.3333}\n y1={13}\n x2={16.3333}\n y2={18.3333}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"white\" />\n <stop offset={1} stopColor=\"#FFEAE5\" />\n </linearGradient>\n <linearGradient\n id=\"paint4_linear_11179_10869\"\n x1={15.9992}\n y1={21.3333}\n x2={15.9992}\n y2={25}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"white\" />\n <stop offset={1} stopColor=\"#EDEBFF\" />\n </linearGradient>\n <linearGradient\n id=\"paint5_linear_11179_10869\"\n x1={15.9992}\n y1={21.3333}\n x2={15.9992}\n y2={25}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"white\" />\n <stop offset={1} stopColor=\"#FFEAE5\" />\n </linearGradient>\n </defs>\n </svg>\n);\nexport default IconWarning;\n"],"names":["IconWarning","title","titleId","props","_jsxs","_jsx"],"mappings":"6GAMMA,EAAc,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,GAAGC,KACxCC,EAAAA,KAAA,MAAA,CACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,+CACWF,EAAO,GACpBC,EAEH,SAAA,CAAAF,EAAQI,EAAO,IAAA,QAAA,CAAA,GAAIH,WAAUD,CAAK,CAAA,EAAY,KAC/CI,EAAAA,IAAA,OAAA,CACE,EAAE,4MACF,KAAK,iCACL,CAAA,EACFA,EAAAA,YACE,EAAE,4MACF,KAAK,iCACL,CAAA,EACFA,cACE,SAAS,UACT,SAAS,UACT,EAAE,4LACF,KAAK,oCAEPA,EAAAA,IAAA,OAAA,CACE,SAAS,UACT,SAAS,UACT,EAAE,4LACF,KAAK,iCAAiC,CAAA,EAExCA,EAAAA,IACE,OAAA,CAAA,SAAS,UACT,SAAS,UACT,EAAE,2NACF,KAAK,iCACL,CAAA,EACFA,cACE,SAAS,UACT,SAAS,UACT,EAAE,2NACF,KAAK,iCACL,CAAA,EACFD,EACE,KAAA,OAAA,CAAA,SAAA,CAAAA,OAAA,iBAAA,CAAgB,GAAG,4BAA4B,GAAI,GAAI,GAAI,EAAG,GAAI,GAAI,GAAI,QAAS,cAAc,iBAC/F,SAAA,CAAAC,EAAA,IAAA,OAAA,CAAM,UAAU,YAChBA,EAAAA,IAAA,OAAA,CAAM,OAAQ,EAAG,UAAU,WAAY,CACxB,CAAA,EACjBD,yBAAgB,GAAG,4BAA4B,GAAI,GAAI,GAAI,EAAG,GAAI,GAAI,GAAI,QAAS,cAAc,iBAAgB,SAAA,CAC/GC,EAAAA,YAAM,UAAU,SAAY,CAAA,EAC5BA,EAAAA,IAAM,OAAA,CAAA,OAAQ,EAAG,UAAU,SAAY,CAAA,CAAA,CAAA,CAAA,EAEzCD,EAAAA,KACE,iBAAA,CAAA,GAAG,4BACH,GAAI,QACJ,GAAI,GACJ,GAAI,QACJ,GAAI,QACJ,cAAc,iBAAgB,SAAA,CAE9BC,EAAAA,YAAM,UAAU,OAAU,CAAA,EAC1BA,EAAAA,YAAM,OAAQ,EAAG,UAAU,SAAS,CAAA,CAAG,CACxB,CAAA,EACjBD,EAAAA,KACE,iBAAA,CAAA,GAAG,4BACH,GAAI,QACJ,GAAI,GACJ,GAAI,QACJ,GAAI,QACJ,cAAc,iBAEd,SAAA,CAAAC,MAAA,OAAA,CAAM,UAAU,OAAU,CAAA,EAC1BA,EAAAA,YAAM,OAAQ,EAAG,UAAU,SAAS,CAAA,CAAG,IAEzCD,EAAAA,KAAA,iBAAA,CACE,GAAG,4BACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,GACJ,cAAc,2BAEdC,EAAM,IAAA,OAAA,CAAA,UAAU,OAAO,CAAA,EACvBA,MAAM,OAAA,CAAA,OAAQ,EAAG,UAAU,SAAS,CAAA,CAAG,IAEzCD,OAAA,iBAAA,CACE,GAAG,4BACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,GACJ,cAAc,iBAEd,SAAA,CAAAC,EAAA,IAAA,OAAA,CAAM,UAAU,OAAU,CAAA,EAC1BA,MAAM,OAAA,CAAA,OAAQ,EAAG,UAAU,WAAY,CACxB,CAAA,CAAA,CAAA,CAAA,CACZ,CACH,CAAA"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),j=require("@styled/tokens"),y=require("../icons/ico-checkmark.js"),k=require("./text.js"),q=require("../../hooks/useToggleState.js"),i=require("@styled/css"),C=require("@styled/jsx/flex"),o=require("react"),a=require("react-aria");const b=o.forwardRef((c,h)=>{const{label:n,indeterminate:r=!1,disabled:l=!1,checked:x,"aria-label":f,...m}=c,s=q.useToggleState({...c,isSelected:x}),g=o.useRef(null),t=h||g;o.useEffect(()=>{const u="current"in t?t.current:null;u&&(u.indeterminate=!!r)},[r,t]);const{inputProps:p}=a.useCheckbox({...m,"aria-label":n||f||"Checkbox",isDisabled:l,isIndeterminate:r},s,t),{isFocusVisible:d,focusProps:v}=a.useFocusRing();return e.jsxs("label",{className:i.css({display:"flex",alignItems:"center",rounded:"sm",opacity:l?.3:1}),children:[e.jsx(a.VisuallyHidden,{children:e.jsx("input",{...a.mergeProps(p,v),ref:t})}),e.jsx("div",{className:i.css({display:"flex",alignItems:"center",justifyContent:"center",width:5,height:5,bg:s.isSelected?"brand.base":"transparent",borderWidth:"thick",borderColor:s.isSelected||d?"brand.base":"text.tertiary",transition:"background-color 0.2s ease, border-color 0.2s ease",_hover:{cursor:"pointer",borderColor:"brand.base"},pointerEvents:l?"none":"auto",rounded:"sm",boxSizing:"border-box",outlineColor:d?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}),children:e.jsxs("span",{children:[s.isSelected&&!r&&e.jsx(y.default,{height:16,width:16,color:j.token("colors.surface.primary")}),s.isSelected&&!!r&&e.jsx(C.Flex,{justifyContent:"center",alignItems:"center",children:e.jsx("div",{className:i.css({w:2.5,h:.5,bg:"surface.primary"})})})]})}),n&&e.jsx("div",{className:i.css({ml:3}),children:e.jsx(k.default,{styles:{fontWeight:500,lineHeight:1},children:n})})]})});b.displayName="Checkbox",exports.default=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),j=require("@styled/tokens"),y=require("../icons/ico-checkmark.js"),k=require("./text.js"),q=require("../../hooks/useToggleState.js"),i=require("@styled/css"),C=require("@styled/jsx/flex"),o=require("react"),a=require("react-aria");const b=o.forwardRef((c,h)=>{const{label:n,indeterminate:r=!1,disabled:l=!1,checked:x,"aria-label":m,...f}=c,s=q.useToggleState({...c,isSelected:x}),g=o.useRef(null),t=h||g;o.useEffect(()=>{const u="current"in t?t.current:null;u&&(u.indeterminate=!!r)},[r,t]);const{inputProps:p}=a.useCheckbox({...f,"aria-label":n||m||"Checkbox",isDisabled:l,isIndeterminate:r},s,t),{isFocusVisible:d,focusProps:v}=a.useFocusRing();return e.jsxs("label",{className:i.css({display:"flex",alignItems:"center",rounded:"sm",opacity:l?.3:1}),children:[e.jsx(a.VisuallyHidden,{children:e.jsx("input",{...a.mergeProps(p,v),ref:t})}),e.jsx("div",{className:i.css({display:"flex",alignItems:"center",justifyContent:"center",width:5,height:5,bg:s.isSelected?"brand.base":"transparent",borderWidth:"thick",borderColor:s.isSelected||d?"brand.base":"text.tertiary",transition:"background-color 0.2s ease, border-color 0.2s ease",_hover:{cursor:"pointer",borderColor:"brand.base"},pointerEvents:l?"none":"auto",rounded:"sm",boxSizing:"border-box",outlineColor:d?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}),children:e.jsxs("span",{children:[s.isSelected&&!r&&e.jsx(y.default,{height:16,width:16,color:j.token("colors.surface.primary")}),s.isSelected&&!!r&&e.jsx(C.Flex,{justifyContent:"center",alignItems:"center",children:e.jsx("div",{className:i.css({w:2.5,h:.5,bg:"surface.primary"})})})]})}),n&&e.jsx("div",{className:i.css({ml:3}),children:e.jsx(k.default,{fontWeight:"medium",styles:{lineHeight:1},children:n})})]})});b.displayName="Checkbox",exports.default=b;
 //# sourceMappingURL=checkbox.js.map

package/dist/cjs/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 { 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 <div className={css({ ml: 3 })}>\n <Text styles={{ ~~fontWeight: 500,~~ lineHeight: 1 }}>{label}</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","css","_jsx","VisuallyHidden","mergeProps","IcoCheckmark","token","Flex","Text"],"mappings":"oVAgBMA,EAAWC,EAAAA,WAA4C,CAACC,EAAOC,IAAgB,CACnF,KAAM,CAAE,MAAAC,EAAO,cAAAC,EAAgB,GAAO,SAAAC,EAAW,GAAO,QAAAC,EAAS,aAAcC,EAAW,GAAGC,CAAU,EAAKP,EACtGQ,EAAQC,iBAAe,CAAE,GAAGT,EAAO,WAAYK,CAAO,CAAE,EACxDK,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAMX,GAAgBS,EAE5BG,EAAAA,UAAU,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,cACrB,CACE,GAAGT,EACH,aAAcL,GAASI,GAAa,WACpC,WAAYF,EACZ,gBAAiBD,CAClB,EACDK,EACAI,CAAwC,EAEpC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,EAAAA,eAEvC,OACEC,EAAAA,KAAA,QAAA,CACE,UAAWC,MAAI,CACb,QAAS,OACT,WAAY,SACZ,QAAS,KACT,QAASjB,EAAW,GAAM,EAC3B,EAAC,SAAA,CAEFkB,MAACC,iBAAc,CAAA,SACbD,kBAAWE,aAAWT,EAAYG,CAAU,EAAG,IAAKN,CAAO,CAAA,CAAA,CAAA,EAE7DU,MACE,MAAA,CAAA,UAAWD,EAAAA,IAAI,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,EAAAA,KACG,OAAA,CAAA,SAAA,CAAAZ,EAAM,YAAc,CAACL,GACpBmB,MAACG,WAAa,OAAQ,GAAI,MAAO,GAAI,MAAOC,EAAM,MAAA,wBAAwB,IAE3ElB,EAAM,YAAc,CAAC,CAACL,GACrBmB,MAACK,QAAK,eAAe,SAAS,WAAW,SAAQ,SAC/CL,MACE,MAAA,CAAA,UAAWD,EAAAA,IAAI,CACb,EAAG,IACH,EAAG,GACH,GAAI,iBACL,CAAA,GAEE,CAAA,CACR,GAEC,CAAA,EACLnB,GACCoB,EAAAA,WAAK,UAAWD,MAAI,CAAE,GAAI,EAAG,EAAC,SAC5BC,EAACM,IAAAA,EAAAA,SAAK,OAAQ,CAAE,WAAY,~~IAAK,WAAY,~~CAAC,~~WAAK1B~~,CAAK,CAAA,~~GAE3D~~,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 { css } from '@styled/css';\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 <div className={css({ 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","css","_jsx","VisuallyHidden","mergeProps","IcoCheckmark","token","Flex","Text"],"mappings":"oVAgBMA,EAAWC,EAAAA,WAA4C,CAACC,EAAOC,IAAgB,CACnF,KAAM,CAAE,MAAAC,EAAO,cAAAC,EAAgB,GAAO,SAAAC,EAAW,GAAO,QAAAC,EAAS,aAAcC,EAAW,GAAGC,CAAU,EAAKP,EACtGQ,EAAQC,iBAAe,CAAE,GAAGT,EAAO,WAAYK,CAAO,CAAE,EACxDK,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAMX,GAAgBS,EAE5BG,EAAAA,UAAU,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,cACrB,CACE,GAAGT,EACH,aAAcL,GAASI,GAAa,WACpC,WAAYF,EACZ,gBAAiBD,CAClB,EACDK,EACAI,CAAwC,EAEpC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,EAAAA,eAEvC,OACEC,EAAAA,KAAA,QAAA,CACE,UAAWC,MAAI,CACb,QAAS,OACT,WAAY,SACZ,QAAS,KACT,QAASjB,EAAW,GAAM,EAC3B,EAAC,SAAA,CAEFkB,MAACC,iBAAc,CAAA,SACbD,kBAAWE,aAAWT,EAAYG,CAAU,EAAG,IAAKN,CAAO,CAAA,CAAA,CAAA,EAE7DU,MACE,MAAA,CAAA,UAAWD,EAAAA,IAAI,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,EAAAA,KACG,OAAA,CAAA,SAAA,CAAAZ,EAAM,YAAc,CAACL,GACpBmB,MAACG,WAAa,OAAQ,GAAI,MAAO,GAAI,MAAOC,EAAM,MAAA,wBAAwB,IAE3ElB,EAAM,YAAc,CAAC,CAACL,GACrBmB,MAACK,QAAK,eAAe,SAAS,WAAW,SAAQ,SAC/CL,MACE,MAAA,CAAA,UAAWD,EAAAA,IAAI,CACb,EAAG,IACH,EAAG,GACH,GAAI,iBACL,CAAA,GAEE,CAAA,CACR,GAEC,CAAA,EACLnB,GACCoB,EAAAA,WAAK,UAAWD,MAAI,CAAE,GAAI,EAAG,EAAC,SAC5BC,EAACM,IAAAA,EAAAA,SAAK,WAAW,SAAS,OAAQ,CAAE,WAAY,CAAC,WAC9C1B,CAAK,CAAA,GAGX,CAAA,CAAA,CAGP,CAAC,EAEDJ,EAAS,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";var t=require("react/jsx-runtime");require("../feedback/callout.js");var z=require("@styled/css"),b=require("@styled/jsx");require("../feedback/progress-bar.js");var v=require("@styled/tokens"),I=require("../icons/ico-caret-down.js"),K=require("../icons/ico-caret-up.js"),V=require("../icons/ico-checkmark.js"),M=require("../icons/ico-question-circle-fill.js");require("./button.js"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js");var j=require("./text.js");require("./portal.js");var r=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var T=require("../feedback/tooltip.js"),y=require("react-aria");const E={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}},P=r.createContext({selectedOption:null,setSelectedOption:()=>{}}),R=({value:o,label:a,size:d="lg",isFocused:k})=>{const{selectedOption:h,setSelectedOption:p}=r.useContext(P),s=h?.value===o,i=E[d],q=r.useCallback(()=>{p({value:o,label:a})},[p,o,a]);return t.jsxs(b.HStack,{py:1.5,gap:2,bg:s?"brand.base":k?"brand.lightest":"",_hover:s?{}:{bg:"brand.lightest"},onClick:q,style:{paddingLeft:i.width,paddingRight:i.width},children:[t.jsx(b.Box,{style:{width:i.width},children:s&&t.jsx(V.default,{width:i.check,height:i.check,color:v.token("colors.surface.primary")})}),t.jsx(j.default,{size:d,styles:{fontWeight:500,color:v.token(`colors.${s?"surface":"text"}.primary`)},children:a})]})},A=({children:o,onSelect:a,label:d,placeholder:k="Select one",selectedValue:h,size:p="lg",tooltipContent:s,disabled:i,viewMax:q=5,...F})=>{const[f,x]=r.useState(!1),[l,m]=r.useState(null),w=r.useRef(null),C=r.useRef(null),u=E[p],H=q*u.mult+1,W=r.useCallback(()=>{x(e=>!e),f||(m(null),setTimeout(()=>{var e;return(e=C.current)===null||e===void 0?void 0:e.focus()}))},[f]),B=r.useCallback(e=>{a(e.value),x(!1)},[a]),S=r.useMemo(()=>{const e=r.Children.toArray(o).find(n=>n.props.value===h);return e?e.props.label:k},[h,o]),{buttonProps:L}=y.useButton({...F,isDisabled:i,onPress:W},w),{focusProps:N,isFocusVisible:_}=y.useFocusRing(),{keyboardProps:$}=y.useKeyboard({onKeyDown:e=>{var n,c;if(!f)return;let g=l;const D=r.Children.toArray(o);switch(e.key){case"ArrowUp":e.preventDefault(),l===null?m(r.Children.count(o)-1):(g=l>0?l-1:r.Children.count(o)-1,m(g));break;case"ArrowDown":e.preventDefault(),l===null?m(0):(g=l<r.Children.count(o)-1?l+1:0,m(g));break;case"Enter":if(e.preventDefault(),(n=w.current)===null||n===void 0||n.focus(),l===null)return;if(l>=0&&l<D.length){const O=D[l];O&&a(O.props.value)}break;case"Escape":x(!1),(c=w.current)===null||c===void 0||c.focus();break}}});return r.useEffect(()=>{const e=n=>{var c;!((c=C.current)===null||c===void 0)&&c.contains(n.target)||x(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(P.Provider,{value:{selectedOption:{value:h??"",label:S},setSelectedOption:B},children:t.jsxs(b.VStack,{gap:2,w:"full",alignItems:"flex-start",children:[(d||s)&&t.jsxs(b.HStack,{gap:2,opacity:i?.3:"",transition:"all linear 120ms",children:[d&&t.jsx(j.default,{size:"sm",styles:{fontWeight:500},children:d}),s&&t.jsx(T.default,{isDisabled:i,content:s,children:t.jsx(M.default,{className:z.css({w:4,h:4,color:"neutral.primary"})})})]}),t.jsxs("button",{className:z.css({w:"full",h:"fit-content",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:_?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:w,...y.mergeProps(L,N,$),children:[t.jsxs(b.HStack,{w:"full",p:4,justifyContent:"space-between",style:{height:u.height},children:[t.jsx(j.default,{size:p,styles:{color:v.token(`colors.text.${h?"primary":"tertiary"}`)},children:S}),f?t.jsx(K.default,{width:u.caret,height:u.caret,color:v.token("colors.brand.base")}):t.jsx(I.default,{width:u.caret,height:u.caret,color:v.token("colors.brand.base")})]}),f&&t.jsx(b.Box,{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:`${H}rem`,top:u.top},overflowY:"auto",outline:"none",zIndex:"max",children:r.Children.map(o,(e,n)=>r.cloneElement(e,{isFocused:n===l,size:p}))})]})]})})};R.displayName="DropdownOption",A.displayName="DropdownSelector",exports.DropdownOption=R,exports.DropdownSelector=A;
+"use strict";var t=require("react/jsx-runtime");require("../feedback/callout.js");var z=require("@styled/css"),m=require("@styled/jsx");require("../feedback/progress-bar.js");var C=require("@styled/tokens"),K=require("../icons/ico-caret-down.js"),V=require("../icons/ico-caret-up.js"),M=require("../icons/ico-checkmark.js"),T=require("../icons/ico-question-circle-fill.js");require("./button.js"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js");var j=require("./text.js");require("./portal.js");var r=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var U=require("../feedback/tooltip.js"),g=require("react-aria");const E={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}},A=r.createContext({selectedOption:null,setSelectedOption:()=>{}}),P=({value:i,label:a,size:d="lg",isFocused:y})=>{const{selectedOption:h,setSelectedOption:p}=r.useContext(A),s=h?.value===i,o=E[d],k=r.useCallback(()=>{p({value:i,label:a})},[p,i,a]);return t.jsxs(m.HStack,{py:1.5,gap:2,bg:s?"brand.base":y?"brand.lightest":"",_hover:s?{}:{bg:"brand.lightest"},onClick:k,style:{paddingLeft:o.width,paddingRight:o.width},children:[t.jsx(m.Box,{style:{width:o.width},children:s&&t.jsx(M.default,{width:o.check,height:o.check,color:C.token("colors.text.quaternary")})}),t.jsx(j.default,{size:d,fontWeight:"medium",color:s?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:a})]})},R=({children:i,onSelect:a,label:d,placeholder:y="Select one",selectedValue:h,size:p="lg",tooltipContent:s,disabled:o,viewMax:k=5,...F})=>{const[b,v]=r.useState(!1),[l,f]=r.useState(null),x=r.useRef(null),q=r.useRef(null),u=E[p],H=k*u.mult+1,W=r.useCallback(()=>{v(e=>!e),b||(f(null),setTimeout(()=>{var e;return(e=q.current)===null||e===void 0?void 0:e.focus()}))},[b]),B=r.useCallback(e=>{a(e.value),v(!1)},[a]),S=r.useMemo(()=>{const e=r.Children.toArray(i).find(n=>n.props.value===h);return e?e.props.label:y},[h,i]),{buttonProps:L}=g.useButton({...F,isDisabled:o,onPress:W},x),{focusProps:N,isFocusVisible:_}=g.useFocusRing(),{keyboardProps:I}=g.useKeyboard({onKeyDown:e=>{var n,c;if(!b)return;let w=l;const D=r.Children.toArray(i);switch(e.key){case"ArrowUp":e.preventDefault(),l===null?f(r.Children.count(i)-1):(w=l>0?l-1:r.Children.count(i)-1,f(w));break;case"ArrowDown":e.preventDefault(),l===null?f(0):(w=l<r.Children.count(i)-1?l+1:0,f(w));break;case"Enter":if(e.preventDefault(),(n=x.current)===null||n===void 0||n.focus(),l===null)return;if(l>=0&&l<D.length){const O=D[l];O&&a(O.props.value)}break;case"Escape":v(!1),(c=x.current)===null||c===void 0||c.focus();break}}});return r.useEffect(()=>{const e=n=>{var c;!((c=q.current)===null||c===void 0)&&c.contains(n.target)||v(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(A.Provider,{value:{selectedOption:{value:h??"",label:S},setSelectedOption:B},children:t.jsxs(m.VStack,{gap:2,w:"full",alignItems:"flex-start",children:[(d||s)&&t.jsxs(m.HStack,{gap:2,opacity:o?.3:"",transition:"all linear 120ms",children:[d&&t.jsx(j.default,{size:"sm",fontWeight:"medium",children:d}),s&&t.jsx(U.default,{isDisabled:o,content:s,children:t.jsx(T.default,{className:z.css({w:4,h:4,color:"neutral.primary"})})})]}),t.jsxs("button",{className:z.css({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:_?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:x,...g.mergeProps(L,N,I),children:[t.jsxs(m.HStack,{w:"full",p:4,justifyContent:"space-between",style:{height:u.height},children:[t.jsx(j.default,{size:p,color:h?"text.primary":"text.tertiary",children:S}),b?t.jsx(V.default,{width:u.caret,height:u.caret,color:C.token("colors.brand.base")}):t.jsx(K.default,{width:u.caret,height:u.caret,color:C.token("colors.brand.base")})]}),b&&t.jsx(m.Box,{ref:q,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:`${H}rem`,top:u.top},overflowY:"auto",outline:"none",zIndex:"max",children:r.Children.map(i,(e,n)=>r.cloneElement(e,{isFocused:n===l,size:p}))})]})]})})};P.displayName="DropdownOption",R.displayName="DropdownSelector",exports.DropdownOption=P,exports.DropdownSelector=R;
 //# sourceMappingURL=dropdown-selector.js.map

package/dist/cjs/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}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\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 }: 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: 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <Box style={{ width: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.surface.primary')} />\n )}\n </Box>\n <Text size={size} styles={{ fontWeight: 500, color: token(`colors.${isSelected ? 'surface' : 'text'}.primary`) }}>\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 ...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 gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n {label && (\n <Text size=\"sm\" styles={{ fontWeight: 500 }}>\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip isDisabled={disabled} 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 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 size={size} styles={{ color: token(`colors.text.${selectedValue ? 'primary' : '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 }),\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","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 { 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}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\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 }: 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: 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <Box style={{ width: 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 color={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 ...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 gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n {label && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip isDisabled={disabled} 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 size={size} color={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 }),\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","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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"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),C=require("./text.js"),i=require("@styled/jsx"),R=require("@styled/patterns"),s=require("react"),t=require("react-aria");const b=s.createContext({selectedValue:void 0,setSelectedValue:()=>{}}),h=n=>{const{children:d,onChange:a,selectedValue:l,vertical:r}=n,u=s.useCallback(c=>{a(c)},[a]);return e.jsx(i.Flex,{direction:r?"column":"row",gap:r?5:10,role:"radiogroup",children:e.jsx(b.Provider,{value:{selectedValue:l,setSelectedValue:u},children:d})})},p=s.forwardRef((n,d)=>{const{label:a,value:l}=n,r=s.useContext(b),u=s.useRef(null),c=d||u,v=s.useCallback(()=>{r.setSelectedValue(l)},[r,l]),{hoverProps:f}=t.useHover({}),{focusProps:j,isFocusVisible:x}=t.useFocusRing(),{pressProps:g}=t.usePress({onPress:v}),o=r.selectedValue===l,m=o?0:-1;return e.jsxs("label",{className:R.flex({alignItems:"center"}),children:[e.jsx(t.VisuallyHidden,{children:e.jsx("input",{...t.mergeProps(g,j,f),ref:c,type:"radio",checked:o,tabIndex:m,readOnly:!0})}),e.jsx(i.Flex,{justifyContent:"center",alignItems:"center",borderWidth:"thick",borderColor:x||o?"brand.base":"text.tertiary",transition:"border-color 0.2s ease",outlineColor:"brand.base",outlineStyle:x?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"brand.base"},cursor:"pointer",w:6,h:6,rounded:"full","aria-hidden":"true",children:o&&e.jsx(i.Circle,{size:3,bg:"brand.base"})}),e.jsx(i.Box,{ml:3,children:e.jsx(C.default,{size:"lg",styles:{fontWeight:500},children:a})})]})});h.displayName="RadioGroup",p.displayName="Radio",exports.Radio=p,exports.RadioGroup=h;
+"use strict";var e=require("react/jsx-runtime"),C=require("./text.js"),o=require("@styled/jsx"),R=require("@styled/patterns"),s=require("react"),t=require("react-aria");const b=s.createContext({selectedValue:void 0,setSelectedValue:()=>{}}),h=d=>{const{children:n,onChange:a,selectedValue:l,vertical:r}=d,u=s.useCallback(c=>{a(c)},[a]);return e.jsx(o.Flex,{direction:r?"column":"row",gap:r?5:10,role:"radiogroup",children:e.jsx(b.Provider,{value:{selectedValue:l,setSelectedValue:u},children:n})})},p=s.forwardRef((d,n)=>{const{label:a,value:l}=d,r=s.useContext(b),u=s.useRef(null),c=n||u,v=s.useCallback(()=>{r.setSelectedValue(l)},[r,l]),{hoverProps:f}=t.useHover({}),{focusProps:j,isFocusVisible:x}=t.useFocusRing(),{pressProps:m}=t.usePress({onPress:v}),i=r.selectedValue===l,g=i?0:-1;return e.jsxs("label",{className:R.flex({alignItems:"center"}),children:[e.jsx(t.VisuallyHidden,{children:e.jsx("input",{...t.mergeProps(m,j,f),ref:c,type:"radio",checked:i,tabIndex:g,readOnly:!0})}),e.jsx(o.Flex,{justifyContent:"center",alignItems:"center",borderWidth:"thick",borderColor:x||i?"brand.base":"text.tertiary",transition:"border-color 0.2s ease",outlineColor:"brand.base",outlineStyle:x?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"brand.base"},cursor:"pointer",w:6,h:6,rounded:"full","aria-hidden":"true",children:i&&e.jsx(o.Circle,{size:3,bg:"brand.base"})}),e.jsx(o.Box,{ml:3,children:e.jsx(C.default,{size:"lg",fontWeight:"medium",children:a})})]})});h.displayName="RadioGroup",p.displayName="Radio",exports.Radio=p,exports.RadioGroup=h;
 //# sourceMappingURL=radio.js.map

package/dist/cjs/components/primitives/radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio.js","sources":["../../../../src/components/primitives/radio.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { Box, Circle, Flex } from '@styled/jsx';\nimport { flex } from '@styled/patterns';\nimport { PropsWithChildren, createContext, forwardRef, useCallback, useContext, useRef } from 'react';\nimport {\n AriaRadioGroupProps,\n AriaRadioProps,\n VisuallyHidden,\n mergeProps,\n useFocusRing,\n useHover,\n usePress,\n} from 'react-aria';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, PropsWithChildren {\n onChange: (value: string) => void;\n selectedValue?: string;\n vertical?: boolean;\n}\n\nexport interface RadioProps extends AriaRadioProps {\n label?: string;\n}\n\nconst RadioContext = createContext<{\n selectedValue: string \| undefined;\n setSelectedValue: (value: string) => void;\n}>({\n selectedValue: undefined,\n setSelectedValue: () => {},\n});\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n const { children, onChange, selectedValue, vertical } = props;\n\n const handleSelect = useCallback(\n (value: string) => {\n onChange(value);\n },\n [onChange],\n );\n\n return (\n <Flex direction={vertical ? 'column' : 'row'} gap={vertical ? 5 : 10} role=\"radiogroup\">\n <RadioContext.Provider value={{ selectedValue, setSelectedValue: handleSelect }}>\n {children}\n </RadioContext.Provider>\n </Flex>\n );\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>((props, forwardedRef) => {\n const { label, value } = props;\n const state = useContext(RadioContext);\n\n const internalRef = useRef<HTMLInputElement>(null);\n const ref = forwardedRef \|\| internalRef;\n\n const handlePress = useCallback(() => {\n state.setSelectedValue(value);\n }, [state, value]);\n\n const { hoverProps } = useHover({});\n const { focusProps, isFocusVisible } = useFocusRing();\n const { pressProps } = usePress({\n onPress: handlePress,\n });\n\n const isSelected = state.selectedValue === value;\n\n const tabIndex = isSelected ? 0 : -1;\n\n return (\n <label className={flex({ alignItems: 'center' })}>\n <VisuallyHidden>\n <input\n {...mergeProps(pressProps, focusProps, hoverProps)}\n ref={ref}\n type=\"radio\"\n checked={isSelected}\n tabIndex={tabIndex}\n readOnly\n />\n </VisuallyHidden>\n <Flex\n justifyContent=\"center\"\n alignItems=\"center\"\n borderWidth=\"thick\"\n borderColor={isFocusVisible \|\| isSelected ? 'brand.base' : 'text.tertiary'}\n transition=\"border-color 0.2s ease\"\n outlineColor=\"brand.base\"\n outlineStyle={isFocusVisible ? 'solid' : 'none'}\n outlineWidth=\"thick\"\n outlineOffset={0.5}\n _hover={{ borderColor: 'brand.base' }}\n cursor=\"pointer\"\n w={6}\n h={6}\n rounded=\"full\"\n aria-hidden=\"true\"\n >\n {isSelected && <Circle size={3} bg=\"brand.base\" />}\n </Flex>\n <Box ml={3}>\n <Text size=\"lg\" ~~styles={{~~ fontWeight~~: 500 }}~~>\n {label}\n </Text>\n </Box>\n </label>\n );\n});\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"],"names":["RadioContext","createContext","RadioGroup","props","children","onChange","selectedValue","vertical","handleSelect","useCallback","value","_jsx","Flex","Radio","forwardRef","forwardedRef","label","state","useContext","internalRef","useRef","ref","handlePress","hoverProps","useHover","focusProps","isFocusVisible","useFocusRing","pressProps","usePress","isSelected","tabIndex","_jsxs","flex","VisuallyHidden","mergeProps","Circle","Box","Text"],"mappings":"yKAwBA,MAAMA,EAAeC,EAAAA,cAGlB,CACD,cAAe,OACf,iBAAkB,IAAK,CACxB,CAAA,CAAA,EAEYC,EAAcC,GAA0B,CACnD,KAAM,CAAE,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,SAAAC,CAAQ,EAAKJ,EAElDK,EAAeC,EAAAA,YAClBC,GAAiB,CAChBL,EAASK,CAAK,CAChB,EACA,CAACL,CAAQ,CAAC,EAGZ,OACEM,~~EAACC~~,~~IAAAA~~,EAAAA,KAAI,CAAC,UAAWL,EAAW,SAAW,MAAO,IAAKA,EAAW,EAAI,GAAI,KAAK,aAAY,SACrFI,~~MAACX~~,EAAa,SAAQ,CAAC,MAAO,CAAE,cAAAM,EAAe,iBAAkBE,CAAY,WAC1EJ,CAAQ,CAAA,CAEN,CAAA,CAEX,EAEaS,EAAQC,EAAAA,WAAyC,CAACX,EAAOY,IAAgB,CACpF,KAAM,CAAE,MAAAC,EAAO,MAAAN,CAAO,EAAGP,EACnBc,EAAQC,~~EAAWlB~~,~~WAAAA~~,CAAY,EAE/BmB,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAMN,GAAgBI,EAEtBG,EAAcb,EAAAA,YAAY,IAAK,CACnCQ,EAAM,iBAAiBP,CAAK,CAC9B,EAAG,CAACO,EAAOP,CAAK,CAAC,EAEX,CAAE,WAAAa,CAAY,EAAGC,~~EAAS~~,~~SAAA~~,CAAE,CAAA,EAC5B,CAAE,WAAAC,EAAY,eAAAC,GAAmBC,iBACjC,CAAE,WAAAC,CAAY,EAAGC,~~WAAS~~,CAC9B,QAASP,CACV,CAAA,EAEKQ,EAAab,EAAM,gBAAkBP,EAErCqB,EAAWD,EAAa,EAAI,GAElC,OACEE,~~EAAAA~~,~~KAAO,~~QAAA,CAAA,UAAWC,~~EAAK~~,~~KAAA,~~CAAE,WAAY,SAAU,EAAC,SAAA,CAC9CtB,~~EAAAA~~,~~IAACuB~~,iBAAc,CAAA,SACbvB,kBACMwB,EAAAA,WAAWP,EAAYH,EAAYF,CAAU,EACjD,IAAKF,EACL,KAAK,QACL,QAASS,EACT,SAAUC,EACV,~~aAEa~~,CAAA,~~EACjBpB~~,~~EAACC~~,~~IAAAA~~,EAAAA,~~KAAI~~,~~CACH~~,eAAe,SACf,WAAW,SACX,YAAY,QACZ,YAAac,GAAkBI,EAAa,aAAe,gBAC3D,WAAW,yBACX,aAAa,aACb,aAAcJ,EAAiB,QAAU,OACzC,aAAa,QACb,cAAe,GACf,OAAQ,CAAE,YAAa,cACvB,OAAO,UACP,EAAG,EACH,EAAG,EACH,QAAQ,~~qBACI~~,~~OAAM~~,~~SAEjBI~~,GAAcnB,EAAAA,IAACyB,~~EAAAA~~,~~OAAM,CAAC,~~KAAM,EAAG,GAAG,~~YAAY~~,CAAA,~~IAEjDzB~~,EAAAA,IAAC0B,~~EAAI~~,~~IAAA~~,~~CAAA~~,GAAI,~~EAAC~~,~~SACR1B~~,~~EAAC2B~~,~~IAAAA~~,~~EAAAA~~,~~SAAK~~,KAAK,KAAK,~~OAAQ~~,~~CAAE~~,~~WAAY,KACnC,~~SAAAtB,GAEC,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAEDd,EAAW,YAAc,aACzBW,EAAM,YAAc"}
1	+ {"version":3,"file":"radio.js","sources":["../../../../src/components/primitives/radio.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { Box, Circle, Flex } from '@styled/jsx';\nimport { flex } from '@styled/patterns';\nimport { PropsWithChildren, createContext, forwardRef, useCallback, useContext, useRef } from 'react';\nimport {\n AriaRadioGroupProps,\n AriaRadioProps,\n VisuallyHidden,\n mergeProps,\n useFocusRing,\n useHover,\n usePress,\n} from 'react-aria';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, PropsWithChildren {\n onChange: (value: string) => void;\n selectedValue?: string;\n vertical?: boolean;\n}\n\nexport interface RadioProps extends AriaRadioProps {\n label?: string;\n}\n\nconst RadioContext = createContext<{\n selectedValue: string \| undefined;\n setSelectedValue: (value: string) => void;\n}>({\n selectedValue: undefined,\n setSelectedValue: () => {},\n});\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n const { children, onChange, selectedValue, vertical } = props;\n\n const handleSelect = useCallback(\n (value: string) => {\n onChange(value);\n },\n [onChange],\n );\n\n return (\n <Flex direction={vertical ? 'column' : 'row'} gap={vertical ? 5 : 10} role=\"radiogroup\">\n <RadioContext.Provider value={{ selectedValue, setSelectedValue: handleSelect }}>\n {children}\n </RadioContext.Provider>\n </Flex>\n );\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>((props, forwardedRef) => {\n const { label, value } = props;\n const state = useContext(RadioContext);\n\n const internalRef = useRef<HTMLInputElement>(null);\n const ref = forwardedRef \|\| internalRef;\n\n const handlePress = useCallback(() => {\n state.setSelectedValue(value);\n }, [state, value]);\n\n const { hoverProps } = useHover({});\n const { focusProps, isFocusVisible } = useFocusRing();\n const { pressProps } = usePress({\n onPress: handlePress,\n });\n\n const isSelected = state.selectedValue === value;\n\n const tabIndex = isSelected ? 0 : -1;\n\n return (\n <label className={flex({ alignItems: 'center' })}>\n <VisuallyHidden>\n <input\n {...mergeProps(pressProps, focusProps, hoverProps)}\n ref={ref}\n type=\"radio\"\n checked={isSelected}\n tabIndex={tabIndex}\n readOnly\n />\n </VisuallyHidden>\n <Flex\n justifyContent=\"center\"\n alignItems=\"center\"\n borderWidth=\"thick\"\n borderColor={isFocusVisible \|\| isSelected ? 'brand.base' : 'text.tertiary'}\n transition=\"border-color 0.2s ease\"\n outlineColor=\"brand.base\"\n outlineStyle={isFocusVisible ? 'solid' : 'none'}\n outlineWidth=\"thick\"\n outlineOffset={0.5}\n _hover={{ borderColor: 'brand.base' }}\n cursor=\"pointer\"\n w={6}\n h={6}\n rounded=\"full\"\n aria-hidden=\"true\"\n >\n {isSelected && <Circle size={3} bg=\"brand.base\" />}\n </Flex>\n <Box ml={3}>\n <Text size=\"lg\" fontWeight=\"medium\">\n {label}\n </Text>\n </Box>\n </label>\n );\n});\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"],"names":["RadioContext","createContext","RadioGroup","props","children","onChange","selectedValue","vertical","handleSelect","useCallback","value","_jsx","Flex","Radio","forwardRef","forwardedRef","label","state","useContext","internalRef","useRef","ref","handlePress","hoverProps","useHover","focusProps","isFocusVisible","useFocusRing","pressProps","usePress","isSelected","tabIndex","_jsxs","flex","VisuallyHidden","mergeProps","Circle","Box","Text"],"mappings":"yKAwBA,MAAMA,EAAeC,EAAAA,cAGlB,CACD,cAAe,OACf,iBAAkB,IAAK,CACxB,CAAA,CAAA,EAEYC,EAAcC,GAA0B,CACnD,KAAM,CAAE,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,SAAAC,CAAQ,EAAKJ,EAElDK,EAAeC,EAAAA,YAClBC,GAAiB,CAChBL,EAASK,CAAK,CAChB,EACA,CAACL,CAAQ,CAAC,EAGZ,OACEM,EAAAA,IAACC,EAAAA,KAAI,CAAC,UAAWL,EAAW,SAAW,MAAO,IAAKA,EAAW,EAAI,GAAI,KAAK,aAAY,SACrFI,EAACX,IAAAA,EAAa,SAAQ,CAAC,MAAO,CAAE,cAAAM,EAAe,iBAAkBE,CAAY,WAC1EJ,CAAQ,CAAA,CAEN,CAAA,CAEX,EAEaS,EAAQC,EAAAA,WAAyC,CAACX,EAAOY,IAAgB,CACpF,KAAM,CAAE,MAAAC,EAAO,MAAAN,CAAO,EAAGP,EACnBc,EAAQC,EAAAA,WAAWlB,CAAY,EAE/BmB,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAMN,GAAgBI,EAEtBG,EAAcb,EAAAA,YAAY,IAAK,CACnCQ,EAAM,iBAAiBP,CAAK,CAC9B,EAAG,CAACO,EAAOP,CAAK,CAAC,EAEX,CAAE,WAAAa,CAAY,EAAGC,EAAAA,SAAS,CAAE,CAAA,EAC5B,CAAE,WAAAC,EAAY,eAAAC,GAAmBC,iBACjC,CAAE,WAAAC,CAAY,EAAGC,EAAAA,SAAS,CAC9B,QAASP,CACV,CAAA,EAEKQ,EAAab,EAAM,gBAAkBP,EAErCqB,EAAWD,EAAa,EAAI,GAElC,OACEE,OAAO,QAAA,CAAA,UAAWC,OAAK,CAAE,WAAY,SAAU,EAAC,SAAA,CAC9CtB,EAACuB,IAAAA,iBAAc,CAAA,SACbvB,kBACMwB,EAAAA,WAAWP,EAAYH,EAAYF,CAAU,EACjD,IAAKF,EACL,KAAK,QACL,QAASS,EACT,SAAUC,EACV,SACA,EAAA,CAAA,CAAA,CAAA,EAEJpB,EAAAA,IAACC,EAAAA,KACC,CAAA,eAAe,SACf,WAAW,SACX,YAAY,QACZ,YAAac,GAAkBI,EAAa,aAAe,gBAC3D,WAAW,yBACX,aAAa,aACb,aAAcJ,EAAiB,QAAU,OACzC,aAAa,QACb,cAAe,GACf,OAAQ,CAAE,YAAa,cACvB,OAAO,UACP,EAAG,EACH,EAAG,EACH,QAAQ,OACI,cAAA,gBAEXI,GAAcnB,EAAAA,IAACyB,UAAO,KAAM,EAAG,GAAG,cAC9B,CAAA,EACPzB,EAAAA,IAAC0B,EAAAA,IAAG,CAAC,GAAI,EACP,SAAA1B,EAAAA,IAAC2B,UAAK,CAAA,KAAK,KAAK,WAAW,SACxB,SAAAtB,GAEC,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAEDd,EAAW,YAAc,aACzBW,EAAM,YAAc"}

package/dist/cjs/components/primitives/switch.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),v=require("./text.js"),m=require("../../hooks/useToggleState.js"),a=require("@styled/css"),x=require("@styled/jsx/flex"),S=require("@styled/patterns"),l=require("react"),s=require("react-aria");const n=l.forwardRef((t,o)=>{const{checked:u,disabled:c=!1,label:i,...d}=t,b=l.useRef(null),p=o||b,e=m.useToggleState({...t,isSelected:u}),{buttonProps:g}=s.useToggleButton({...d,isDisabled:c},e,p),{isFocusVisible:f,focusProps:h}=s.useFocusRing();return r.jsxs(x.Flex,{alignItems:"center",children:[i&&r.jsx("div",{className:a.css({mr:2}),children:r.jsx(v.default,{styles:{fontWeight:500,lineHeight:1},children:i})}),r.jsx("button",{...s.mergeProps(g,h),className:a.css({px:.5,h:5,width:11,_disabled:{opacity:.3,pointerEvents:"none"},bg:e.isSelected?"brand.base":"neutral.primary",_hover:{bg:e.isSelected?"brand.base":"ink.70",_dark:{bg:e.isSelected?"brand.base":"slate.4"}},transition:"background-color 0.2s ease",rounded:"full",outlineColor:f?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer"}),children:r.jsx("span",{className:S.circle({h:4,w:4,bg:"paper",position:"relative",left:e.isSelected?6:0,transition:"left 0.2s ease"})})})]})});n.displayName="Switch",exports.default=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),v=require("./text.js"),m=require("../../hooks/useToggleState.js"),a=require("@styled/css"),x=require("@styled/jsx/flex"),S=require("@styled/patterns"),l=require("react"),s=require("react-aria");const n=l.forwardRef((t,o)=>{const{checked:u,disabled:c=!1,label:i,...d}=t,b=l.useRef(null),p=o||b,e=m.useToggleState({...t,isSelected:u}),{buttonProps:g}=s.useToggleButton({...d,isDisabled:c},e,p),{isFocusVisible:f,focusProps:h}=s.useFocusRing();return r.jsxs(x.Flex,{alignItems:"center",children:[i&&r.jsx("div",{className:a.css({mr:2}),children:r.jsx(v.default,{fontWeight:"medium",styles:{lineHeight:1},children:i})}),r.jsx("button",{...s.mergeProps(g,h),className:a.css({px:.5,h:5,width:11,_disabled:{opacity:.3,pointerEvents:"none"},bg:e.isSelected?"brand.base":"neutral.primary",_hover:{bg:e.isSelected?"brand.base":"ink.70",_dark:{bg:e.isSelected?"brand.base":"slate.4"}},transition:"background-color 0.2s ease",rounded:"full",outlineColor:f?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer"}),children:r.jsx("span",{className:S.circle({h:4,w:4,bg:"paper",position:"relative",left:e.isSelected?6:0,transition:"left 0.2s ease"})})})]})});n.displayName="Switch",exports.default=n;
 //# sourceMappingURL=switch.js.map

package/dist/cjs/components/primitives/switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.js","sources":["../../../../src/components/primitives/switch.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css } from '@styled/css';\nimport { Flex } from '@styled/jsx/flex';\nimport { circle } from '@styled/patterns';\nimport { forwardRef, useRef } from 'react';\nimport { mergeProps, useFocusRing, useToggleButton, type AriaToggleButtonProps } from 'react-aria';\n\nexport type SwitchProps = AriaToggleButtonProps & {\n checked?: boolean;\n disabled?: boolean;\n label?: string;\n};\n\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, forwardedRef) => {\n const { checked, disabled = false, label, ...otherProps } = props;\n\n const internalRef = useRef(null);\n const ref = forwardedRef \|\| internalRef;\n\n const state = useToggleState({ ...props, isSelected: checked });\n\n const { buttonProps } = useToggleButton(\n { ...otherProps, isDisabled: disabled },\n state,\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <Flex alignItems=\"center\">\n {label && (\n <div className={css({ mr: 2 })}>\n <Text styles={{ ~~fontWeight: 500,~~ lineHeight: 1 }}>{label}</Text>\n </div>\n )}\n <button\n {...mergeProps(buttonProps, focusProps)}\n className={css({\n px: 0.5,\n h: 5,\n width: 11,\n _disabled: {\n opacity: 0.3,\n pointerEvents: 'none',\n },\n bg: state.isSelected ? 'brand.base' : 'neutral.primary',\n _hover: {\n bg: !state.isSelected ? 'ink.70' : 'brand.base',\n _dark: {\n bg: !state.isSelected ? 'slate.4' : 'brand.base',\n },\n },\n transition: 'background-color 0.2s ease',\n rounded: 'full',\n outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n outlineStyle: 'solid',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n cursor: 'pointer',\n })}\n >\n <span\n className={circle({\n h: 4,\n w: 4,\n bg: 'paper',\n position: 'relative',\n left: state.isSelected ? 6 : 0,\n transition: 'left 0.2s ease',\n })}\n />\n </button>\n </Flex>\n );\n});\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["Switch","forwardRef","props","forwardedRef","checked","disabled","label","otherProps","internalRef","useRef","ref","state","useToggleState","buttonProps","useToggleButton","isFocusVisible","focusProps","useFocusRing","_jsxs","Flex","_jsx","css","Text","mergeProps","circle"],"mappings":"ySAcA,MAAMA,EAASC,EAAAA,WAA2C,CAACC,EAAOC,IAAgB,CAChF,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAW,GAAO,MAAAC,EAAO,GAAGC,CAAY,EAAGL,EAEtDM,EAAcC,SAAO,IAAI,EACzBC,EAAMP,GAAgBK,EAEtBG,EAAQC,EAAe,eAAA,CAAE,GAAGV,EAAO,WAAYE,CAAO,CAAE,EAExD,CAAE,YAAAS,CAAW,EAAKC,EAAAA,gBACtB,CAAE,GAAGP,EAAY,WAAYF,CAAU,EACvCM,EACAD,CAAyC,EAErC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,iBAEvC,OACEC,OAACC,EAAAA,KAAK,CAAA,WAAW,SAAQ,SAAA,CACtBb,GACCc,EAAAA,IAAA,MAAA,CAAK,UAAWC,MAAI,CAAE,GAAI,CAAC,CAAE,EAAC,SAC5BD,EAACE,IAAAA,EAAAA,QAAK,CAAA,OAAQ,CAAE,WAAY,~~IAAK,WAAY,~~CAAC,~~EAAK~~,SAAAhB,~~CAAa~~,CAAA,CAAA,CAAA,~~EAGpEc~~,EAAA,IAAA,SAAA,CAAA,GACMG,EAAWV,WAAAA,EAAaG,CAAU,EACtC,UAAWK,MAAI,CACb,GAAI,GACJ,EAAG,EACH,MAAO,GACP,UAAW,CACT,QAAS,GACT,cAAe,MAChB,EACD,GAAIV,EAAM,WAAa,aAAe,kBACtC,OAAQ,CACN,GAAKA,EAAM,WAAwB,aAAX,SACxB,MAAO,CACL,GAAKA,EAAM,WAAyB,aAAZ,SACzB,CACF,EACD,WAAY,6BACZ,QAAS,OACT,aAAcI,EAAiB,aAAe,cAC9C,aAAc,QACd,aAAc,QACd,cAAe,GACf,OAAQ,SACT,CAAA,EAED,SAAAK,EAAAA,IAAA,OAAA,CACE,UAAWI,EAAAA,OAAO,CAChB,EAAG,EACH,EAAG,EACH,GAAI,QACJ,SAAU,WACV,KAAMb,EAAM,WAAa,EAAI,EAC7B,WAAY,gBACb,CAAA,CACD,CAAA,CAAA,CAAA,CACK,CACJ,CAAA,CAEX,CAAC,EAEDX,EAAO,YAAc"}
1	+ {"version":3,"file":"switch.js","sources":["../../../../src/components/primitives/switch.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css } from '@styled/css';\nimport { Flex } from '@styled/jsx/flex';\nimport { circle } from '@styled/patterns';\nimport { forwardRef, useRef } from 'react';\nimport { mergeProps, useFocusRing, useToggleButton, type AriaToggleButtonProps } from 'react-aria';\n\nexport type SwitchProps = AriaToggleButtonProps & {\n checked?: boolean;\n disabled?: boolean;\n label?: string;\n};\n\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, forwardedRef) => {\n const { checked, disabled = false, label, ...otherProps } = props;\n\n const internalRef = useRef(null);\n const ref = forwardedRef \|\| internalRef;\n\n const state = useToggleState({ ...props, isSelected: checked });\n\n const { buttonProps } = useToggleButton(\n { ...otherProps, isDisabled: disabled },\n state,\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <Flex alignItems=\"center\">\n {label && (\n <div className={css({ mr: 2 })}>\n <Text fontWeight=\"medium\" styles={{ lineHeight: 1 }}>\n {label}\n </Text>\n </div>\n )}\n <button\n {...mergeProps(buttonProps, focusProps)}\n className={css({\n px: 0.5,\n h: 5,\n width: 11,\n _disabled: {\n opacity: 0.3,\n pointerEvents: 'none',\n },\n bg: state.isSelected ? 'brand.base' : 'neutral.primary',\n _hover: {\n bg: !state.isSelected ? 'ink.70' : 'brand.base',\n _dark: {\n bg: !state.isSelected ? 'slate.4' : 'brand.base',\n },\n },\n transition: 'background-color 0.2s ease',\n rounded: 'full',\n outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n outlineStyle: 'solid',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n cursor: 'pointer',\n })}\n >\n <span\n className={circle({\n h: 4,\n w: 4,\n bg: 'paper',\n position: 'relative',\n left: state.isSelected ? 6 : 0,\n transition: 'left 0.2s ease',\n })}\n />\n </button>\n </Flex>\n );\n});\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["Switch","forwardRef","props","forwardedRef","checked","disabled","label","otherProps","internalRef","useRef","ref","state","useToggleState","buttonProps","useToggleButton","isFocusVisible","focusProps","useFocusRing","_jsxs","Flex","_jsx","css","Text","mergeProps","circle"],"mappings":"ySAcA,MAAMA,EAASC,EAAAA,WAA2C,CAACC,EAAOC,IAAgB,CAChF,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAW,GAAO,MAAAC,EAAO,GAAGC,CAAY,EAAGL,EAEtDM,EAAcC,SAAO,IAAI,EACzBC,EAAMP,GAAgBK,EAEtBG,EAAQC,EAAe,eAAA,CAAE,GAAGV,EAAO,WAAYE,CAAO,CAAE,EAExD,CAAE,YAAAS,CAAW,EAAKC,EAAAA,gBACtB,CAAE,GAAGP,EAAY,WAAYF,CAAU,EACvCM,EACAD,CAAyC,EAErC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,iBAEvC,OACEC,OAACC,EAAAA,KAAK,CAAA,WAAW,SAAQ,SAAA,CACtBb,GACCc,EAAAA,IAAA,MAAA,CAAK,UAAWC,MAAI,CAAE,GAAI,CAAC,CAAE,EAAC,SAC5BD,EAACE,IAAAA,EAAAA,QAAK,CAAA,WAAW,SAAS,OAAQ,CAAE,WAAY,CAAC,EAC9C,SAAAhB,CACI,CAAA,CAAA,CAAA,EAGXc,EAAA,IAAA,SAAA,CAAA,GACMG,EAAWV,WAAAA,EAAaG,CAAU,EACtC,UAAWK,MAAI,CACb,GAAI,GACJ,EAAG,EACH,MAAO,GACP,UAAW,CACT,QAAS,GACT,cAAe,MAChB,EACD,GAAIV,EAAM,WAAa,aAAe,kBACtC,OAAQ,CACN,GAAKA,EAAM,WAAwB,aAAX,SACxB,MAAO,CACL,GAAKA,EAAM,WAAyB,aAAZ,SACzB,CACF,EACD,WAAY,6BACZ,QAAS,OACT,aAAcI,EAAiB,aAAe,cAC9C,aAAc,QACd,aAAc,QACd,cAAe,GACf,OAAQ,SACT,CAAA,EAED,SAAAK,EAAAA,IAAA,OAAA,CACE,UAAWI,EAAAA,OAAO,CAChB,EAAG,EACH,EAAG,EACH,GAAI,QACJ,SAAU,WACV,KAAMb,EAAM,WAAa,EAAI,EAC7B,WAAY,gBACb,CAAA,CACD,CAAA,CAAA,CAAA,CACK,CACJ,CAAA,CAEX,CAAC,EAEDX,EAAO,YAAc"}

package/dist/cjs/components/primitives/text.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var a=require("react/jsx-runtime"),h=require("../../recipes/text.js"),l=require("@styled/css"),c=require("react");const d={color:"text.primary"},f=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h1",{ref:r,className:l.css({textStyle:s?"h1-scaled":"h1",textWrap:"pretty",...d}),style:t,children:e})),o=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h2",{ref:r,className:l.css({textStyle:s?"h2-scaled":"h2",textWrap:"pretty",...d}),style:t,children:e})),p=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h3",{ref:r,className:l.css({textStyle:s?"h3-scaled":"h3",textWrap:"pretty",...d}),style:t,children:e})),m=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h4",{ref:r,className:l.css({textStyle:s?"h4-scaled":"h4",textWrap:"pretty",...d}),style:t,children:e})),N=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h5",{ref:r,className:l.css({textStyle:s?"h5-scaled":"h5",textWrap:"pretty",...d}),style:t,children:e})),u=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h6",{ref:r,className:l.css({textStyle:s?"h6-scaled":"h6",textWrap:"pretty",color:"text.secondary"}),style:t,children:e})),j=c.forwardRef(({children:e,styles:t={},variant:s="text",size:r="md",truncate:i=!1},n)=>{const y=h.text({mono:!0,variant:s,size:r});return a.jsx("span",{ref:n,className:`${y} ${l.css({truncate:i})}`,style:t,children:e})}),H=c.forwardRef(({children:e,styles:t={},scale:s,inline:r=!1,variant:i="text",size:n="md",truncate:y=!1},v)=>{const R=h.text({variant:i,size:n,scale:s}),x={ref:v,className:`${R} ${l.css({truncate:y})}`,style:t};return r?a.jsx("span",{...x,children:e}):a.jsx("p",{...x,children:e})}),T=Object.assign(H,{H1:f,H2:o,H3:p,H4:m,H5:N,H6:u,Mono:j});H.displayName="Text",f.displayName="Text.H1",o.displayName="Text.H2",p.displayName="Text.H3",m.displayName="Text.H4",N.displayName="Text.H5",u.displayName="Text.H6",j.displayName="Text.Mono";var w=T;exports.default=w;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("react/jsx-runtime"),S=require("../../recipes/text.js"),o=require("@styled/css"),d=require("react");const i="text.primary",x=d.forwardRef(({children:e,styles:s={},scale:r,color:t=i,...a},l)=>c.jsx("h1",{ref:l,className:o.css({textStyle:r?"h1-scaled":"h1",color:t,...a}),style:s,children:e})),y=d.forwardRef(({children:e,styles:s={},scale:r,color:t=i,...a},l)=>c.jsx("h2",{ref:l,className:o.css({textStyle:r?"h2-scaled":"h2",color:t,...a}),style:s,children:e})),f=d.forwardRef(({children:e,styles:s={},scale:r,color:t=i,...a},l)=>c.jsx("h3",{ref:l,className:o.css({textStyle:r?"h3-scaled":"h3",color:t,...a}),style:s,children:e})),m=d.forwardRef(({children:e,styles:s={},scale:r,color:t=i,...a},l)=>c.jsx("h4",{ref:l,className:o.css({textStyle:r?"h4-scaled":"h4",color:t,...a}),style:s,children:e})),N=d.forwardRef(({children:e,styles:s={},scale:r,color:t=i,...a},l)=>c.jsx("h5",{ref:l,className:o.css({textStyle:r?"h5-scaled":"h5",color:t,...a}),style:s,children:e})),u=d.forwardRef(({children:e,styles:s={},scale:r,color:t="text.secondary",...a},l)=>c.jsx("h6",{ref:l,className:o.css({textStyle:r?"h6-scaled":"h6",color:t,...a}),style:s,children:e})),n=d.forwardRef(({children:e,styles:s={},scale:r,inline:t=!1,mono:a=!1,variant:l="text",size:H="md",truncate:j=!1,fontWeight:R,...T},w)=>{const v=S.text({mono:a,variant:l,size:H,scale:r}),h={ref:w,className:o.cx(v,o.css({truncate:j,fontWeight:R??(l!=="text"?"medium":"normal"),...T})),style:s};return t?c.jsx("span",{...h,children:e}):c.jsx("p",{...h,children:e})}),p=d.forwardRef((e,s)=>c.jsx(n,{ref:s,mono:!0,...e})),q=Object.assign(n,{H1:x,H2:y,H3:f,H4:m,H5:N,H6:u,Mono:p});n.displayName="Text",x.displayName="Text.H1",y.displayName="Text.H2",f.displayName="Text.H3",m.displayName="Text.H4",N.displayName="Text.H5",u.displayName="Text.H6",p.displayName="Text.Mono",exports.default=q;
 //# sourceMappingURL=text.js.map

package/dist/cjs/components/primitives/text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text.js","sources":["../../../../src/components/primitives/text.tsx"],"sourcesContent":["import { text } from '@recipes/text';\nimport { css } from '@styled/css';\nimport { CSSProperties, PropsWithChildren, forwardRef } from 'react';\n\nexport type TextStyles = {\n color?: CSSProperties['color'];\n fontWeight?: CSSProperties['fontWeight'];\n fontSize?: CSSProperties['fontSize'];\n lineHeight?: CSSProperties['lineHeight'];\n letterSpacing?: CSSProperties['letterSpacing'];\n textAlign?: CSSProperties['textAlign'];\n textDecoration?: CSSProperties['textDecoration'];\n textTransform?: CSSProperties['textTransform'];\n};\n\nexport interface TextProps extends PropsWithChildren {\n styles?: TextStyles;\n scale?: boolean;\n}\n\nexport interface BodyProps extends TextProps {\n inline?: boolean;\n variant?: 'text' \| 'error' \| 'info' \| 'success' \| 'warning';\n size?: 'xs' \| 'sm' \| 'md' \| 'lg';\n truncate?: boolean;\n}\n\nconst defaultColor = ~~{ color:~~ 'text.primary' };\n\nconst TextH1 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n <h1\n ref={ref}\n className={css({ textStyle: scale ? 'h1-scaled' : 'h1', ~~textWrap: 'pretty'~~, ...~~defaultColor~~ })}\n style={styles}\n >\n {children}\n </h1>\n));\n\nconst TextH2 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n <h2\n ref={ref}\n className={css({ textStyle: scale ? 'h2-scaled' : 'h2', ~~textWrap: 'pretty'~~, ...~~defaultColor~~ })}\n style={styles}\n >\n {children}\n </h2>\n));\n\nconst TextH3 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n <h3\n ref={ref}\n className={css({ textStyle: scale ? 'h3-scaled' : 'h3', ~~textWrap: 'pretty'~~, ...~~defaultColor~~ })}\n style={styles}\n >\n {children}\n </h3>\n));\n\nconst TextH4 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n <h4\n ref={ref}\n className={css({ textStyle: scale ? 'h4-scaled' : 'h4', ~~textWrap: 'pretty'~~, ...~~defaultColor~~ })}\n style={styles}\n >\n {children}\n </h4>\n));\n\nconst TextH5 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n <h5\n ref={ref}\n className={css({ textStyle: scale ? 'h5-scaled' : 'h5', ~~textWrap: 'pretty'~~, ...~~defaultColor~~ })}\n style={styles}\n >\n {children}\n </h5>\n));\n\nconst TextH6 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n <h6\n ref={ref}\n className={css({ textStyle: scale ? 'h6-scaled' : 'h6', ~~textWrap: 'pretty'~~, ~~color:~~ ~~'text.secondary'~~ })}\n style={styles}\n >\n {children}\n </h6>\n));\n\nconst ~~TextMono~~ = forwardRef<HTMLParagraphElement, BodyProps>(\n ({ children, styles = {}, variant = 'text', size = 'md', truncate = false }, ref) => {\n const classStyles = text({ mono~~: true~~, variant, size });\n\n ~~return~~ ~~(\n <span~~ ~~ref~~=~~{ref}~~ ~~className={`${classStyles}~~ ~~${css({~~ ~~truncate })}`} style={styles}>\n {children}\n </span>\n );\n },\n);\n\nconst Body = forwardRef<HTMLParagraphElement, BodyProps>~~(~~\n ({ children, styles = {}, scale, inline = false,~~ variant = 'text', ~~size~~ = 'md', ~~truncate~~ ~~= false }, ref~~) ~~=> {\n const classStyles = text({ variant, size, scale })~~;\n const bodyProps = {\n ref,\n className: ~~`${~~classStyles} ${css({ truncate })~~}`,\~~n style: styles,\n };\n\n if (inline) {\n return <span {...bodyProps}>{children}</span>;\n }\n\n return <p {...bodyProps}>{children}</p>;\n },\n);\n\nconst Text = Object.assign(Body, {\n H1: TextH1,\n H2: TextH2,\n H3: TextH3,\n H4: TextH4,\n H5: TextH5,\n H6: TextH6,\n Mono: TextMono,\n});\n\nBody.displayName = 'Text';\nTextH1.displayName = 'Text.H1';\nTextH2.displayName = 'Text.H2';\nTextH3.displayName = 'Text.H3';\nTextH4.displayName = 'Text.H4';\nTextH5.displayName = 'Text.H5';\nTextH6.displayName = 'Text.H6';\nTextMono.displayName = 'Text.Mono';\n\nexport default Text;\n"],"names":["defaultColor","TextH1","forwardRef","children","styles","scale","ref","_jsx","css","TextH2","TextH3","TextH4","TextH5","TextH6","~~TextMono~~","variant","size","truncate","classStyles","text","~~Body~~","~~inline~~","~~bodyProps~~","Text"],"mappings":"~~sLA2BA~~,MAAMA,EAAe,~~CAAE~~,~~MAAO,gBAExBC,~~EAASC,~~EAAAA~~,~~WAA0C,~~CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,~~GAAI~~,MAAAC,~~CAAO~~,~~EAAEC~~,~~IAC1FC~~,~~MAAA~~,KAAA,~~CACE~~,IAAKD,~~EACL~~,UAAWE,EAAAA,IAAI,CAAE,~~UAAWH~~,EAAQ,YAAc,KAAM,~~SAAU~~,~~SAAU~~,~~GAAGL~~,~~CAAY~~,~~CAAE~~,~~EAC7F~~,~~MAAOI~~,~~EAAM~~,~~SAEZD~~,~~CAAQ~~,CAAA,~~CAEZ~~,~~EAEKM~~,~~EAASP~~,~~EAAAA~~,~~WAA0C,~~CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,~~CAAA~~,~~EAAI~~,MAAAC,~~CAAO~~,~~EAAEC~~,~~IAC1FC~~,~~MAAA~~,KAAA,~~CACE~~,IAAKD,~~EACL~~,UAAWE,~~MAAI~~,CAAE,~~UAAWH~~,EAAQ,YAAc,KAAM,~~SAAU~~,~~SAAU~~,~~GAAGL~~,~~CAAY~~,~~CAAE~~,~~EAC7F~~,~~MAAOI~~,~~EAAM~~,~~SAEZD~~,~~CAAQ~~,CAAA,~~CAEZ~~,~~EAEKO~~,~~EAASR~~,~~EAAAA~~,~~WAA0C,~~CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,~~CAAA~~,~~EAAI~~,MAAAC,~~CAAO~~,~~EAAEC~~,~~IAC1FC~~,~~MAAA~~,KAAA,~~CACE~~,IAAKD,~~EACL~~,UAAWE,EAAAA,IAAI,CAAE,~~UAAWH~~,EAAQ,YAAc,KAAM,~~SAAU~~,~~SAAU~~,~~GAAGL~~,~~CAAY~~,~~CAAE~~,~~EAC7F~~,~~MAAOI~~,~~EAAM~~,~~SAEZD~~,~~CAAQ~~,CAAA,~~CAEZ~~,~~EAEKQ~~,~~EAAST~~,~~EAAAA~~,~~WAA0C~~,CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,~~CAAA~~,~~EAAI~~,MAAAC,~~CAAO~~,~~EAAEC~~,~~IAC1FC~~,~~MAAA~~,KAAA,~~CACE~~,IAAKD,~~EACL~~,UAAWE,EAAAA,IAAI,CAAE,~~UAAWH~~,EAAQ,YAAc,KAAM,~~SAAU~~,~~SAAU~~,~~GAAGL~~,~~CAAY~~,~~CAAE~~,~~EAC7F~~,~~MAAOI~~,~~EAAM~~,~~SAEZD~~,~~CAAQ~~,CAAA,~~CAEZ~~,~~EAEKS~~,~~EAASV~~,~~EAA0C~~,~~WAAA,~~CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,~~CAAA~~,~~EAAI~~,MAAAC,~~CAAO~~,~~EAAEC~~,~~IAC1FC~~,EAAAA,~~IAAA~~,KAAA,~~CACE~~,IAAKD,~~EACL~~,UAAWE,~~EAAAA~~,~~IAAI~~,CAAE,~~UAAWH~~,EAAQ,YAAc,KAAM,~~SAAU~~,~~SAAU~~,~~GAAGL~~,~~CAAY~~,~~CAAE~~,~~EAC7F~~,~~MAAOI~~,~~EAAM~~,~~SAEZD~~,~~CAAQ~~,CAAA,~~CAEZ~~,~~EAEKU~~,~~EAASX~~,~~aAA0C~~,CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,~~GAAI~~,MAAAC,CAAK,EAAIC,~~IAC1FC~~,~~EACE~~,IAAA,KAAA,CAAA,IAAKD,~~EACL~~,UAAWE,EAAAA,IAAI,CAAE,~~UAAWH~~,EAAQ,YAAc,KAAM,~~SAAU~~,~~SAAU~~,~~MAAO~~,~~gBAAgB~~,~~CAAE~~,~~EACrG~~,~~MAAOD~~,~~EAAM~~,~~SAEZD~~,~~CAAQ~~,CAAA,~~CAEZ~~,~~EAEKW~~,~~EAAWZ~~,~~EACf~~,~~WAAA~~,~~CAAC~~,~~CAAE~~,SAAAC,~~EAAU~~,OAAAC,EAAS,~~CAAA~~,~~EAAI~~,~~QAAAW~~,EAAU,~~OAAQ~~,KAAAC,EAAO,~~KAAM~~,SAAAC,EAAW,~~EAAO~~,~~EAAEX~~,~~IAAO~~,~~CAClF~~,~~MAAMY~~,EAAcC,EAAAA,KAAK,CAAE,~~KAAM~~,~~GAAM~~,~~QAAAJ~~,EAAS,KAAAC,~~CAAI~~,~~CAAE~~,~~EAEtD~~,~~OACET~~,~~EAAM~~,~~IAAA~~,~~OAAA~~,~~CAAA~~,~~IAAKD~~,~~EAAK~~,~~UAAW~~,~~GAAGY~~,~~CAAW~~,~~IAAIV,~~EAAAA,IAAI,CAAE,~~SAAAS~~,~~CAAQ~~,~~CAAE~~,~~CAAC~~,~~GAAI~~,~~MAAOb~~,~~EACtE~~,~~SAAAD~~,~~CACI~~,~~CAAA~~,~~CAEX~~,CAAC,~~EAGGiB~~,~~EAAOlB~~,~~aACX~~,~~CAAC~~,~~CAAE~~,~~SAAAC~~,~~EAAU~~,~~OAAAC~~,~~EAAS~~,~~CAAI~~,~~EAAA~~,~~MAAAC~~,~~EAAO~~,~~OAAAgB~~,~~EAAS,GAAO,QAAAN,EAAU,OAAQ,KAAAC,EAAO,KAAM,SAAAC,EAAW,EAAK,EAAIX,~~IAAO,~~CACzG~~,~~MAAMY,EAAcC,EAAK,KAAA,CAAE,QAAAJ,EAAS,KAAAC,EAAM,MAAAX,CAAO,~~CAAA,~~EAC3CiB~~,EAAY,~~CAChB~~,~~IAAAhB~~,~~EACA~~,~~UAAW~~,~~GAAGY~~,~~CAAW~~,~~IAAIV~~,~~EAAI~~,~~IAAA~~,~~CAAE~~,~~SAAAS~~,~~CAAU~~,~~CAAA,~~CAAC,~~GAC9C~~,~~MAAOb~~,~~GAGT~~,~~OAAIiB~~,~~EACKd~~,~~MAAU~~,~~OAAA,~~CAAA,~~GAAAe~~,~~EAAY~~,~~SAAAnB,IAGxBI,MAAO,IAAA,CAAA,GAAAe,EAAY,SAAAnB,GAC5B,CAAC,EAGGoB,~~EAAO,OAAO,~~OAAOH~~,EAAM,CAC/B,~~GAAInB~~,EACJ,~~GAAIQ~~,EACJ,GAAIC,EACJ,GAAIC,EACJ,GAAIC,EACJ,GAAIC,EACJ,~~KAAMC~~,CACP,CAAA,~~EAEDM~~,EAAK,YAAc,~~OACnBnB~~,EAAO,YAAc,~~UACrBQ~~,EAAO,YAAc,UACrBC,EAAO,YAAc,UACrBC,EAAO,YAAc,UACrBC,EAAO,YAAc,UACrBC,EAAO,YAAc,~~UACrBC~~,EAAS,YAAc~~,YAEvB,MAAeS~~"}
1	+ {"version":3,"file":"text.js","sources":["../../../../src/components/primitives/text.tsx"],"sourcesContent":["import { text } from '@recipes/text';\nimport { css, cx } from '@styled/css';\nimport { CSSProperties, PropsWithChildren, forwardRef } from 'react';\n\nexport type TextStyles = {\n color?: CSSProperties['color'];\n fontWeight?: CSSProperties['fontWeight'];\n fontSize?: CSSProperties['fontSize'];\n lineHeight?: CSSProperties['lineHeight'];\n letterSpacing?: CSSProperties['letterSpacing'];\n textAlign?: CSSProperties['textAlign'];\n textDecoration?: CSSProperties['textDecoration'];\n textTransform?: CSSProperties['textTransform'];\n textWrap?: CSSProperties['textWrap'];\n maxWidth?: CSSProperties['maxWidth'];\n};\n\nexport interface TextProps extends PropsWithChildren {\n styles?: TextStyles;\n scale?: boolean;\n fontWeight?: 'normal' \| 'medium' \| 'semibold' \| 'bold' \| 'extrabold';\n color?: 'text.primary' \| 'text.secondary' \| 'text.tertiary' \| 'text.quaternary';\n}\n\nexport interface BodyProps extends TextProps {\n inline?: boolean;\n mono?: boolean;\n variant?: 'text' \| 'error' \| 'info' \| 'success' \| 'warning';\n size?: 'xs' \| 'sm' \| 'md' \| 'lg';\n truncate?: boolean;\n}\n\nconst defaultColor = 'text.primary';\n\nconst TextH1 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, color = defaultColor, ...props }, ref) => (\n <h1 ref={ref} className={css({ textStyle: scale ? 'h1-scaled' : 'h1', color, ...props })} style={styles}>\n {children}\n </h1>\n ),\n);\n\nconst TextH2 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, color = defaultColor, ...props }, ref) => (\n <h2 ref={ref} className={css({ textStyle: scale ? 'h2-scaled' : 'h2', color, ...props })} style={styles}>\n {children}\n </h2>\n ),\n);\n\nconst TextH3 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, color = defaultColor, ...props }, ref) => (\n <h3 ref={ref} className={css({ textStyle: scale ? 'h3-scaled' : 'h3', color, ...props })} style={styles}>\n {children}\n </h3>\n ),\n);\n\nconst TextH4 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, color = defaultColor, ...props }, ref) => (\n <h4 ref={ref} className={css({ textStyle: scale ? 'h4-scaled' : 'h4', color, ...props })} style={styles}>\n {children}\n </h4>\n ),\n);\n\nconst TextH5 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, color = defaultColor, ...props }, ref) => (\n <h5 ref={ref} className={css({ textStyle: scale ? 'h5-scaled' : 'h5', color, ...props })} style={styles}>\n {children}\n </h5>\n ),\n);\n\nconst TextH6 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, color = 'text.secondary', ...props }, ref) => (\n <h6 ref={ref} className={css({ textStyle: scale ? 'h6-scaled' : 'h6', color, ...props })} style={styles}>\n {children}\n </h6>\n ),\n);\n\nconst Body = forwardRef<HTMLParagraphElement, BodyProps>(\n (\n {\n children,\n styles = {},\n scale,\n inline = false,\n mono = false,\n variant = 'text',\n size = 'md',\n truncate = false,\n fontWeight,\n ...props\n },\n ref,\n ) => {\n const classStyles = text({ mono, variant, size, scale });\n const fontWeightStyle = fontWeight ?? (variant !== 'text' ? 'medium' : 'normal');\n const bodyProps = {\n ref,\n className: cx(classStyles, css({ truncate, fontWeight: fontWeightStyle, ...props })),\n style: styles,\n };\n\n if (inline) {\n return <span {...bodyProps}>{children}</span>;\n }\n\n return <p {...bodyProps}>{children}</p>;\n },\n);\n\nconst TextMono = forwardRef<HTMLParagraphElement, BodyProps>((props, ref) => {\n return <Body ref={ref} mono {...props} />;\n});\n\nconst Text = Object.assign(Body, {\n H1: TextH1,\n H2: TextH2,\n H3: TextH3,\n H4: TextH4,\n H5: TextH5,\n H6: TextH6,\n Mono: TextMono,\n});\n\nBody.displayName = 'Text';\nTextH1.displayName = 'Text.H1';\nTextH2.displayName = 'Text.H2';\nTextH3.displayName = 'Text.H3';\nTextH4.displayName = 'Text.H4';\nTextH5.displayName = 'Text.H5';\nTextH6.displayName = 'Text.H6';\nTextMono.displayName = 'Text.Mono';\n\nexport default Text;\n"],"names":["defaultColor","TextH1","forwardRef","children","styles","scale","color","props","ref","_jsx","css","TextH2","TextH3","TextH4","TextH5","TextH6","Body","inline","mono","variant","size","truncate","fontWeight","classStyles","text","bodyProps","cx","TextMono","Text"],"mappings":"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"}