@magiclabs/ui-components 1.19.0 → 1.19.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.
- package/dist/cjs/components/icons/ico-asterisk-with-shield.js +2 -0
- package/dist/cjs/components/icons/ico-asterisk-with-shield.js.map +1 -0
- package/dist/cjs/components/icons/ico-atom.js +2 -0
- package/dist/cjs/components/icons/ico-atom.js.map +1 -0
- package/dist/cjs/components/icons/ico-block.js +2 -0
- package/dist/cjs/components/icons/ico-block.js.map +1 -0
- package/dist/cjs/components/icons/ico-caret-down.js +1 -1
- package/dist/cjs/components/icons/ico-caret-down.js.map +1 -1
- package/dist/cjs/components/icons/ico-expand.js +2 -0
- package/dist/cjs/components/icons/ico-expand.js.map +1 -0
- package/dist/cjs/components/icons/ico-kebab.js +2 -0
- package/dist/cjs/components/icons/ico-kebab.js.map +1 -0
- package/dist/cjs/components/icons/ico-loading-fill.js +2 -0
- package/dist/cjs/components/icons/ico-loading-fill.js.map +1 -0
- package/dist/cjs/components/icons/ico-megaphone.js +2 -0
- package/dist/cjs/components/icons/ico-megaphone.js.map +1 -0
- package/dist/cjs/components/icons/ico-minimize.js +2 -0
- package/dist/cjs/components/icons/ico-minimize.js.map +1 -0
- package/dist/cjs/components/icons/ico-swap.js +1 -1
- package/dist/cjs/components/icons/ico-swap.js.map +1 -1
- package/dist/cjs/components/icons/ico-trash.js +2 -0
- package/dist/cjs/components/icons/ico-trash.js.map +1 -0
- package/dist/cjs/components/icons/ico-warning.js +1 -1
- package/dist/cjs/components/icons/ico-warning.js.map +1 -1
- package/dist/cjs/components/logos/icon-art.js +1 -1
- package/dist/cjs/components/logos/icon-art.js.map +1 -1
- package/dist/cjs/components/logos/icon-email.js +2 -0
- package/dist/cjs/components/logos/icon-email.js.map +1 -0
- package/dist/cjs/components/logos/icon-game-controller-dark.js +1 -1
- package/dist/cjs/components/logos/icon-game-controller-dark.js.map +1 -1
- package/dist/cjs/components/logos/icon-game-controller.js +1 -1
- package/dist/cjs/components/logos/icon-game-controller.js.map +1 -1
- package/dist/cjs/components/logos/icon-magic-globe.js +2 -0
- package/dist/cjs/components/logos/icon-magic-globe.js.map +1 -0
- package/dist/cjs/components/logos/icon-magic-logo.js +1 -1
- package/dist/cjs/components/logos/icon-magic-logo.js.map +1 -1
- package/dist/cjs/components/logos/icon-music-dark.js +1 -1
- package/dist/cjs/components/logos/icon-music-dark.js.map +1 -1
- package/dist/cjs/components/logos/icon-music.js +1 -1
- package/dist/cjs/components/logos/icon-music.js.map +1 -1
- package/dist/cjs/components/logos/icon-profile-dark.js +1 -1
- package/dist/cjs/components/logos/icon-profile-dark.js.map +1 -1
- package/dist/cjs/components/logos/icon-sms.js +2 -0
- package/dist/cjs/components/logos/icon-sms.js.map +1 -0
- package/dist/cjs/components/logos/icon-ticket-dark.js +1 -1
- package/dist/cjs/components/logos/icon-ticket-dark.js.map +1 -1
- package/dist/cjs/components/logos/logo-aptos-mono.js +1 -1
- package/dist/cjs/components/logos/logo-aptos-mono.js.map +1 -1
- package/dist/cjs/components/logos/logo-auth0-mono.js +2 -0
- package/dist/cjs/components/logos/logo-auth0-mono.js.map +1 -0
- package/dist/cjs/components/logos/logo-auth0.js +2 -0
- package/dist/cjs/components/logos/logo-auth0.js.map +1 -0
- package/dist/cjs/components/logos/logo-azure-mono.js +2 -0
- package/dist/cjs/components/logos/logo-azure-mono.js.map +1 -0
- package/dist/cjs/components/logos/logo-azure.js +2 -0
- package/dist/cjs/components/logos/logo-azure.js.map +1 -0
- package/dist/cjs/components/logos/logo-bit-bucket-mono.js +1 -1
- package/dist/cjs/components/logos/logo-bit-bucket-mono.js.map +1 -1
- package/dist/cjs/components/logos/logo-cognito-mono.js +2 -0
- package/dist/cjs/components/logos/logo-cognito-mono.js.map +1 -0
- package/dist/cjs/components/logos/logo-cognito.js +2 -0
- package/dist/cjs/components/logos/logo-cognito.js.map +1 -0
- package/dist/cjs/components/logos/logo-pay-pal-wordmark-mono.js +1 -1
- package/dist/cjs/components/logos/logo-pay-pal-wordmark-mono.js.map +1 -1
- package/dist/cjs/components/logos/logo-pay-pal-wordmark.js +1 -1
- package/dist/cjs/components/logos/logo-pay-pal-wordmark.js.map +1 -1
- package/dist/cjs/components/logos/website-magic.js +2 -0
- package/dist/cjs/components/logos/website-magic.js.map +1 -0
- package/dist/cjs/components/primitives/dropdown-selector.js +1 -1
- package/dist/cjs/components/primitives/dropdown-selector.js.map +1 -1
- package/dist/cjs/components/primitives/popover.js +1 -1
- package/dist/cjs/components/primitives/popover.js.map +1 -1
- package/dist/cjs/components/primitives/text.js +1 -1
- package/dist/cjs/components/primitives/text.js.map +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/recipes/text.js +1 -1
- package/dist/cjs/recipes/text.js.map +1 -1
- package/dist/es/components/icons/ico-asterisk-with-shield.js +2 -0
- package/dist/es/components/icons/ico-asterisk-with-shield.js.map +1 -0
- package/dist/es/components/icons/ico-atom.js +2 -0
- package/dist/es/components/icons/ico-atom.js.map +1 -0
- package/dist/es/components/icons/ico-block.js +2 -0
- package/dist/es/components/icons/ico-block.js.map +1 -0
- package/dist/es/components/icons/ico-caret-down.js +1 -1
- package/dist/es/components/icons/ico-caret-down.js.map +1 -1
- package/dist/es/components/icons/ico-expand.js +2 -0
- package/dist/es/components/icons/ico-expand.js.map +1 -0
- package/dist/es/components/icons/ico-kebab.js +2 -0
- package/dist/es/components/icons/ico-kebab.js.map +1 -0
- package/dist/es/components/icons/ico-loading-fill.js +2 -0
- package/dist/es/components/icons/ico-loading-fill.js.map +1 -0
- package/dist/es/components/icons/ico-megaphone.js +2 -0
- package/dist/es/components/icons/ico-megaphone.js.map +1 -0
- package/dist/es/components/icons/ico-minimize.js +2 -0
- package/dist/es/components/icons/ico-minimize.js.map +1 -0
- package/dist/es/components/icons/ico-swap.js +1 -1
- package/dist/es/components/icons/ico-swap.js.map +1 -1
- package/dist/es/components/icons/ico-trash.js +2 -0
- package/dist/es/components/icons/ico-trash.js.map +1 -0
- package/dist/es/components/icons/ico-warning.js +1 -1
- package/dist/es/components/icons/ico-warning.js.map +1 -1
- package/dist/es/components/logos/icon-art.js +1 -1
- package/dist/es/components/logos/icon-art.js.map +1 -1
- package/dist/es/components/logos/icon-email.js +2 -0
- package/dist/es/components/logos/icon-email.js.map +1 -0
- package/dist/es/components/logos/icon-game-controller-dark.js +1 -1
- package/dist/es/components/logos/icon-game-controller-dark.js.map +1 -1
- package/dist/es/components/logos/icon-game-controller.js +1 -1
- package/dist/es/components/logos/icon-game-controller.js.map +1 -1
- package/dist/es/components/logos/icon-magic-globe.js +2 -0
- package/dist/es/components/logos/icon-magic-globe.js.map +1 -0
- package/dist/es/components/logos/icon-magic-logo.js +1 -1
- package/dist/es/components/logos/icon-magic-logo.js.map +1 -1
- package/dist/es/components/logos/icon-music-dark.js +1 -1
- package/dist/es/components/logos/icon-music-dark.js.map +1 -1
- package/dist/es/components/logos/icon-music.js +1 -1
- package/dist/es/components/logos/icon-music.js.map +1 -1
- package/dist/es/components/logos/icon-profile-dark.js +1 -1
- package/dist/es/components/logos/icon-profile-dark.js.map +1 -1
- package/dist/es/components/logos/icon-sms.js +2 -0
- package/dist/es/components/logos/icon-sms.js.map +1 -0
- package/dist/es/components/logos/icon-ticket-dark.js +1 -1
- package/dist/es/components/logos/icon-ticket-dark.js.map +1 -1
- package/dist/es/components/logos/logo-aptos-mono.js +1 -1
- package/dist/es/components/logos/logo-aptos-mono.js.map +1 -1
- package/dist/es/components/logos/logo-auth0-mono.js +2 -0
- package/dist/es/components/logos/logo-auth0-mono.js.map +1 -0
- package/dist/es/components/logos/logo-auth0.js +2 -0
- package/dist/es/components/logos/logo-auth0.js.map +1 -0
- package/dist/es/components/logos/logo-azure-mono.js +2 -0
- package/dist/es/components/logos/logo-azure-mono.js.map +1 -0
- package/dist/es/components/logos/logo-azure.js +2 -0
- package/dist/es/components/logos/logo-azure.js.map +1 -0
- package/dist/es/components/logos/logo-bit-bucket-mono.js +1 -1
- package/dist/es/components/logos/logo-bit-bucket-mono.js.map +1 -1
- package/dist/es/components/logos/logo-cognito-mono.js +2 -0
- package/dist/es/components/logos/logo-cognito-mono.js.map +1 -0
- package/dist/es/components/logos/logo-cognito.js +2 -0
- package/dist/es/components/logos/logo-cognito.js.map +1 -0
- package/dist/es/components/logos/logo-pay-pal-wordmark-mono.js +1 -1
- package/dist/es/components/logos/logo-pay-pal-wordmark-mono.js.map +1 -1
- package/dist/es/components/logos/logo-pay-pal-wordmark.js +1 -1
- package/dist/es/components/logos/logo-pay-pal-wordmark.js.map +1 -1
- package/dist/es/components/logos/website-magic.js +2 -0
- package/dist/es/components/logos/website-magic.js.map +1 -0
- package/dist/es/components/primitives/dropdown-selector.js +1 -1
- package/dist/es/components/primitives/dropdown-selector.js.map +1 -1
- package/dist/es/components/primitives/popover.js +1 -1
- package/dist/es/components/primitives/popover.js.map +1 -1
- package/dist/es/components/primitives/text.js +1 -1
- package/dist/es/components/primitives/text.js.map +1 -1
- package/dist/es/index.js +1 -1
- package/dist/es/recipes/text.js +1 -1
- package/dist/es/recipes/text.js.map +1 -1
- package/dist/panda.buildinfo.json +1 -1
- package/dist/types/components/icons/ico-asterisk-with-shield.d.ts +14 -0
- package/dist/types/components/icons/ico-asterisk-with-shield.d.ts.map +1 -0
- package/dist/types/components/icons/ico-atom.d.ts +14 -0
- package/dist/types/components/icons/ico-atom.d.ts.map +1 -0
- package/dist/types/components/icons/ico-block.d.ts +14 -0
- package/dist/types/components/icons/ico-block.d.ts.map +1 -0
- package/dist/types/components/icons/ico-expand.d.ts +14 -0
- package/dist/types/components/icons/ico-expand.d.ts.map +1 -0
- package/dist/types/components/icons/ico-kebab.d.ts +14 -0
- package/dist/types/components/icons/ico-kebab.d.ts.map +1 -0
- package/dist/types/components/icons/ico-loading-fill.d.ts +14 -0
- package/dist/types/components/icons/ico-loading-fill.d.ts.map +1 -0
- package/dist/types/components/icons/ico-megaphone.d.ts +14 -0
- package/dist/types/components/icons/ico-megaphone.d.ts.map +1 -0
- package/dist/types/components/icons/ico-minimize.d.ts +14 -0
- package/dist/types/components/icons/ico-minimize.d.ts.map +1 -0
- package/dist/types/components/icons/ico-trash.d.ts +14 -0
- package/dist/types/components/icons/ico-trash.d.ts.map +1 -0
- package/dist/types/components/icons/index.d.ts +9 -0
- package/dist/types/components/icons/index.d.ts.map +1 -1
- package/dist/types/components/logos/icon-email.d.ts +10 -0
- package/dist/types/components/logos/icon-email.d.ts.map +1 -0
- package/dist/types/components/logos/icon-magic-globe.d.ts +10 -0
- package/dist/types/components/logos/icon-magic-globe.d.ts.map +1 -0
- package/dist/types/components/logos/icon-sms.d.ts +10 -0
- package/dist/types/components/logos/icon-sms.d.ts.map +1 -0
- package/dist/types/components/logos/index.d.ts +10 -0
- package/dist/types/components/logos/index.d.ts.map +1 -1
- package/dist/types/components/logos/logo-auth0-mono.d.ts +14 -0
- package/dist/types/components/logos/logo-auth0-mono.d.ts.map +1 -0
- package/dist/types/components/logos/logo-auth0.d.ts +10 -0
- package/dist/types/components/logos/logo-auth0.d.ts.map +1 -0
- package/dist/types/components/logos/logo-azure-mono.d.ts +14 -0
- package/dist/types/components/logos/logo-azure-mono.d.ts.map +1 -0
- package/dist/types/components/logos/logo-azure.d.ts +10 -0
- package/dist/types/components/logos/logo-azure.d.ts.map +1 -0
- package/dist/types/components/logos/logo-cognito-mono.d.ts +14 -0
- package/dist/types/components/logos/logo-cognito-mono.d.ts.map +1 -0
- package/dist/types/components/logos/logo-cognito.d.ts +10 -0
- package/dist/types/components/logos/logo-cognito.d.ts.map +1 -0
- package/dist/types/components/logos/website-magic.d.ts +10 -0
- package/dist/types/components/logos/website-magic.d.ts.map +1 -0
- package/dist/types/components/primitives/dropdown-selector.d.ts +2 -1
- package/dist/types/components/primitives/dropdown-selector.d.ts.map +1 -1
- package/dist/types/components/primitives/popover.d.ts +1 -0
- package/dist/types/components/primitives/popover.d.ts.map +1 -1
- package/dist/types/components/primitives/text.d.ts.map +1 -1
- package/dist/types/recipes/text.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsxs as e,jsx as L}from"react/jsx-runtime";import{token as h}from"@styled/tokens";const o=({color:i,title:l,titleId:t,...d})=>{const a=i||h("colors.text.primary");return e("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:a,"aria-labelledby":t,...d,children:[l?L("title",{id:t,children:l}):null,L("path",{d:"M16.9823 5.88894L18.7085 5.44446L18.7213 5.46341L18.7649 15.8859L18.7085 15.9426L18.3528 15.9578L17.0025 15.7476L16.9823 15.6944V5.88894Z",fill:"#7A3E65"}),L("path",{d:"M6.99937 16.6662L7.00574 16.6667L11.5622 17.9907L11.5738 17.9996L11.5936 18.0154L11.5872 21.9827L11.5738 21.9996L6.99937 19.7773V16.6662Z",fill:"#7A3E65"}),L("path",{d:"M16.9823 15.6944L11.5813 16.988L8.86938 16.3334L6.99937 16.6662L11.5738 17.9996L18.6338 16.0887L18.7085 15.9426L16.9823 15.6944Z",fill:"#CFB2C1"}),L("path",{d:"M16.1473 7.33365L16.1032 7.28348L11.622 5.9814L11.5729 6.00036L11.5279 5.97738L4.47649 8.01068L4.43798 8.05777L4.49458 8.08878L6.10712 8.32522L6.16412 8.30586L11.5654 7.01242L14.2772 7.66701L16.1473 7.33365Z",fill:"#512843"}),L("path",{d:"M6.16588 18.1114L4.43975 18.5281L4.43673 18.5181L4.36875 8.13457L4.43975 8.05781L6.16588 8.3059V18.1114Z",fill:"#C17B9E"}),L("path",{d:"M8.49659 14.083L11.575 14.4441L11.5981 14.4096L11.6106 9.59463L11.575 9.55518L8.49659 9.91633V14.083Z",fill:"#7A3E65"}),L("path",{d:"M14.6526 14.083L11.575 14.4441V9.55518L14.6526 9.91633V14.083Z",fill:"#C17B9E"}),L("path",{d:"M16.1486 7.33331L11.5742 6.00002V2L16.1486 4.22218V7.33331Z",fill:"#C17B9E"}),L("path",{d:"M11.5742 2L3 6.13885V17.861L4.43853 18.5277L4.43798 8.05777L11.5729 6.00036L11.5742 2Z",fill:"#7A3E65"}),L("path",{d:"M18.7085 5.44446V15.9426L11.5738 17.9996V21.9996L20.1476 17.861V6.13885L18.7085 5.44446Z",fill:"#C17B9E"}),L("rect",{x:3,y:2,width:17.1476,height:19.9996,fill:"black",style:{mixBlendMode:"saturation"}})]})};export{o as default};
|
|
2
|
+
//# sourceMappingURL=logo-cognito-mono.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"logo-cognito-mono.js","sources":["../../../../src/components/logos/logo-cognito-mono.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport { token } from '@styled/tokens';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {\n /**\n * Configures icon color on monochrome svgs.\n */\n color?: string;\n}\nconst LogoCognitoMono = ({ color: customColor, title, titleId, ...props }: Props) => {\n // Utilize dynamic primary text color by default\n const color = customColor || token('colors.text.primary');\n return (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n color={color}\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n d=\"M16.9823 5.88894L18.7085 5.44446L18.7213 5.46341L18.7649 15.8859L18.7085 15.9426L18.3528 15.9578L17.0025 15.7476L16.9823 15.6944V5.88894Z\"\n fill=\"#7A3E65\"\n />\n <path\n d=\"M6.99937 16.6662L7.00574 16.6667L11.5622 17.9907L11.5738 17.9996L11.5936 18.0154L11.5872 21.9827L11.5738 21.9996L6.99937 19.7773V16.6662Z\"\n fill=\"#7A3E65\"\n />\n <path\n d=\"M16.9823 15.6944L11.5813 16.988L8.86938 16.3334L6.99937 16.6662L11.5738 17.9996L18.6338 16.0887L18.7085 15.9426L16.9823 15.6944Z\"\n fill=\"#CFB2C1\"\n />\n <path\n d=\"M16.1473 7.33365L16.1032 7.28348L11.622 5.9814L11.5729 6.00036L11.5279 5.97738L4.47649 8.01068L4.43798 8.05777L4.49458 8.08878L6.10712 8.32522L6.16412 8.30586L11.5654 7.01242L14.2772 7.66701L16.1473 7.33365Z\"\n fill=\"#512843\"\n />\n <path\n d=\"M6.16588 18.1114L4.43975 18.5281L4.43673 18.5181L4.36875 8.13457L4.43975 8.05781L6.16588 8.3059V18.1114Z\"\n fill=\"#C17B9E\"\n />\n <path\n d=\"M8.49659 14.083L11.575 14.4441L11.5981 14.4096L11.6106 9.59463L11.575 9.55518L8.49659 9.91633V14.083Z\"\n fill=\"#7A3E65\"\n />\n <path d=\"M14.6526 14.083L11.575 14.4441V9.55518L14.6526 9.91633V14.083Z\" fill=\"#C17B9E\" />\n <path d=\"M16.1486 7.33331L11.5742 6.00002V2L16.1486 4.22218V7.33331Z\" fill=\"#C17B9E\" />\n <path d=\"M11.5742 2L3 6.13885V17.861L4.43853 18.5277L4.43798 8.05777L11.5729 6.00036L11.5742 2Z\" fill=\"#7A3E65\" />\n <path\n d=\"M18.7085 5.44446V15.9426L11.5738 17.9996V21.9996L20.1476 17.861V6.13885L18.7085 5.44446Z\"\n fill=\"#C17B9E\"\n />\n <rect\n x={3}\n y={2}\n width={17.1476}\n height={19.9996}\n fill=\"black\"\n style={{\n mixBlendMode: 'saturation',\n }}\n />\n </svg>\n );\n};\nexport default LogoCognitoMono;\n"],"names":["LogoCognitoMono","customColor","title","titleId","props","color","token","_jsxs","_jsx"],"mappings":"yFAYMA,MAAAA,EAAkB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAAa,CAElF,MAAMC,EAAQJ,GAAeK,EAAM,qBAAqB,EACxD,OACEC,EACE,MAAA,CAAA,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MAAOF,EACU,kBAAAF,KACbC,EAAK,SAAA,CAERF,EAAQM,EAAA,QAAA,CAAO,GAAIL,WAAUD,CAAK,CAAA,EAAY,KAC/CM,EACE,OAAA,CAAA,EAAE,4IACF,KAAK,SACL,CAAA,EACFA,UACE,EAAE,4IACF,KAAK,YAEPA,EAAA,OAAA,CACE,EAAE,mIACF,KAAK,SAAS,CAAA,EAEhBA,EACE,OAAA,CAAA,EAAE,kNACF,KAAK,SACL,CAAA,EACFA,UACE,EAAE,2GACF,KAAK,SACL,CAAA,EACFA,UACE,EAAE,wGACF,KAAK,SAAS,CAAA,EAEhBA,EAAA,OAAA,CAAM,EAAE,iEAAiE,KAAK,SAAY,CAAA,EAC1FA,EAAM,OAAA,CAAA,EAAE,8DAA8D,KAAK,YAC3EA,EAAA,OAAA,CAAM,EAAE,yFAAyF,KAAK,YACtGA,EAAA,OAAA,CACE,EAAE,2FACF,KAAK,SAAS,CAAA,EAEhBA,EACE,OAAA,CAAA,EAAG,EACH,EAAG,EACH,MAAO,QACP,OAAQ,QACR,KAAK,QACL,MAAO,CACL,aAAc,aAEhB,CAAA,CAAA,CAAA,CAAA,CAGR"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsxs as d,jsx as L}from"react/jsx-runtime";const h=({title:l,titleId:t,...i})=>d("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":t,...i,children:[l?L("title",{id:t,children:l}):null,L("path",{d:"M16.9823 5.88894L18.7085 5.44446L18.7213 5.46341L18.7649 15.8859L18.7085 15.9426L18.3528 15.9578L17.0025 15.7476L16.9823 15.6944V5.88894Z",fill:"#7A3E65"}),L("path",{d:"M6.99937 16.6662L7.00574 16.6667L11.5622 17.9907L11.5738 17.9996L11.5936 18.0154L11.5872 21.9827L11.5738 21.9996L6.99937 19.7773V16.6662Z",fill:"#7A3E65"}),L("path",{d:"M16.9823 15.6944L11.5813 16.988L8.86938 16.3334L6.99937 16.6662L11.5738 17.9996L18.6338 16.0887L18.7085 15.9426L16.9823 15.6944Z",fill:"#CFB2C1"}),L("path",{d:"M16.1473 7.33365L16.1032 7.28348L11.622 5.9814L11.5729 6.00036L11.5279 5.97738L4.47649 8.01068L4.43798 8.05777L4.49458 8.08878L6.10712 8.32522L6.16412 8.30586L11.5654 7.01242L14.2772 7.66701L16.1473 7.33365Z",fill:"#512843"}),L("path",{d:"M6.16588 18.1114L4.43975 18.5281L4.43673 18.5181L4.36875 8.13457L4.43975 8.05781L6.16588 8.3059V18.1114Z",fill:"#C17B9E"}),L("path",{d:"M8.49659 14.083L11.575 14.4441L11.5981 14.4096L11.6106 9.59463L11.575 9.55518L8.49659 9.91633V14.083Z",fill:"#7A3E65"}),L("path",{d:"M14.6526 14.083L11.575 14.4441V9.55518L14.6526 9.91633V14.083Z",fill:"#C17B9E"}),L("path",{d:"M16.1486 7.33331L11.5742 6.00002V2L16.1486 4.22218V7.33331Z",fill:"#C17B9E"}),L("path",{d:"M11.5742 2L3 6.13885V17.861L4.43853 18.5277L4.43798 8.05777L11.5729 6.00036L11.5742 2Z",fill:"#7A3E65"}),L("path",{d:"M18.7085 5.44446V15.9426L11.5738 17.9996V21.9996L20.1476 17.861V6.13885L18.7085 5.44446Z",fill:"#C17B9E"})]});export{h as default};
|
|
2
|
+
//# sourceMappingURL=logo-cognito.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"logo-cognito.js","sources":["../../../../src/components/logos/logo-cognito.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {}\nconst LogoCognito = ({ title, titleId, ...props }: Props) => (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n d=\"M16.9823 5.88894L18.7085 5.44446L18.7213 5.46341L18.7649 15.8859L18.7085 15.9426L18.3528 15.9578L17.0025 15.7476L16.9823 15.6944V5.88894Z\"\n fill=\"#7A3E65\"\n />\n <path\n d=\"M6.99937 16.6662L7.00574 16.6667L11.5622 17.9907L11.5738 17.9996L11.5936 18.0154L11.5872 21.9827L11.5738 21.9996L6.99937 19.7773V16.6662Z\"\n fill=\"#7A3E65\"\n />\n <path\n d=\"M16.9823 15.6944L11.5813 16.988L8.86938 16.3334L6.99937 16.6662L11.5738 17.9996L18.6338 16.0887L18.7085 15.9426L16.9823 15.6944Z\"\n fill=\"#CFB2C1\"\n />\n <path\n d=\"M16.1473 7.33365L16.1032 7.28348L11.622 5.9814L11.5729 6.00036L11.5279 5.97738L4.47649 8.01068L4.43798 8.05777L4.49458 8.08878L6.10712 8.32522L6.16412 8.30586L11.5654 7.01242L14.2772 7.66701L16.1473 7.33365Z\"\n fill=\"#512843\"\n />\n <path\n d=\"M6.16588 18.1114L4.43975 18.5281L4.43673 18.5181L4.36875 8.13457L4.43975 8.05781L6.16588 8.3059V18.1114Z\"\n fill=\"#C17B9E\"\n />\n <path\n d=\"M8.49659 14.083L11.575 14.4441L11.5981 14.4096L11.6106 9.59463L11.575 9.55518L8.49659 9.91633V14.083Z\"\n fill=\"#7A3E65\"\n />\n <path d=\"M14.6526 14.083L11.575 14.4441V9.55518L14.6526 9.91633V14.083Z\" fill=\"#C17B9E\" />\n <path d=\"M16.1486 7.33331L11.5742 6.00002V2L16.1486 4.22218V7.33331Z\" fill=\"#C17B9E\" />\n <path d=\"M11.5742 2L3 6.13885V17.861L4.43853 18.5277L4.43798 8.05777L11.5729 6.00036L11.5742 2Z\" fill=\"#7A3E65\" />\n <path d=\"M18.7085 5.44446V15.9426L11.5738 17.9996V21.9996L20.1476 17.861V6.13885L18.7085 5.44446Z\" fill=\"#C17B9E\" />\n </svg>\n);\nexport default LogoCognito;\n"],"names":["LogoCognito","title","titleId","props","_jsxs","_jsx"],"mappings":"kDAMA,MAAMA,EAAc,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,GAAGC,KACxCC,SACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,+CACWF,EAAO,GACpBC,EAAK,SAAA,CAERF,EAAQI,EAAA,QAAA,CAAO,GAAIH,EAAU,SAAAD,IAAiB,KAC/CI,EACE,OAAA,CAAA,EAAE,4IACF,KAAK,SAAS,CAAA,EAEhBA,EACE,OAAA,CAAA,EAAE,4IACF,KAAK,SAAS,CAAA,EAEhBA,EACE,OAAA,CAAA,EAAE,mIACF,KAAK,SAAS,CAAA,EAEhBA,EACE,OAAA,CAAA,EAAE,kNACF,KAAK,SAAS,CAAA,EAEhBA,EACE,OAAA,CAAA,EAAE,2GACF,KAAK,SAAS,CAAA,EAEhBA,EACE,OAAA,CAAA,EAAE,wGACF,KAAK,SAAS,CAAA,EAEhBA,EAAM,OAAA,CAAA,EAAE,iEAAiE,KAAK,SAAS,CAAA,EACvFA,EAAM,OAAA,CAAA,EAAE,8DAA8D,KAAK,SAAS,CAAA,EACpFA,EAAM,OAAA,CAAA,EAAE,yFAAyF,KAAK,SAAS,CAAA,EAC/GA,EAAM,OAAA,CAAA,EAAE,2FAA2F,KAAK,SAAY,CAAA,CAAA,CAAA,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as C}from"react/jsx-runtime";import{token as i}from"@styled/tokens";const H=({color:t,title:l,titleId:r,...o})=>{const L=t||i("colors.text.primary");return e("svg",{width:78,height:24,viewBox:"0 0 78 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:L,"aria-labelledby":r,...o,children:[l?C("title",{id:r,children:l}):null,C("path",{d:"M9.41316 1.84616H3.41316C3.02854 1.84616 2.64393 2.15385 2.567 2.53847L0.182389 17.9231C0.105466 18.2308 0.336235 18.4615 0.643928 18.4615H3.49008C3.8747 18.4615 4.25931 18.1539 4.33624 17.7692L4.95162 13.6154C5.02854 13.2308 5.33624 12.9231 5.79777 12.9231H7.72085C11.6439 12.9231 13.9516 11 14.567 7.23078C14.7978 5.61539 14.567 4.3077 13.7978 3.38462C12.9516 2.38462 11.4132 1.84616 9.41316 1.84616ZM10.1055 7.46155C9.79777 9.61539 8.10547 9.61539 6.567 9.61539H5.64393L6.25931 5.61539C6.25931 5.38462 6.49008 5.23078 6.72085 5.23078H7.10547C8.18239 5.23078 9.18239 5.23078 9.72085 5.84616C10.1055 6.15385 10.2593 6.69232 10.1055 7.46155Z",fill:"currentColor"}),C("path",{d:"M27.
|
|
1
|
+
import{jsxs as e,jsx as C}from"react/jsx-runtime";import{token as i}from"@styled/tokens";const H=({color:t,title:l,titleId:r,...o})=>{const L=t||i("colors.text.primary");return e("svg",{width:78,height:24,viewBox:"0 0 78 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",color:L,"aria-labelledby":r,...o,children:[l?C("title",{id:r,children:l}):null,C("path",{d:"M9.41316 1.84616H3.41316C3.02854 1.84616 2.64393 2.15385 2.567 2.53847L0.182389 17.9231C0.105466 18.2308 0.336235 18.4615 0.643928 18.4615H3.49008C3.8747 18.4615 4.25931 18.1539 4.33624 17.7692L4.95162 13.6154C5.02854 13.2308 5.33624 12.9231 5.79777 12.9231H7.72085C11.6439 12.9231 13.9516 11 14.567 7.23078C14.7978 5.61539 14.567 4.3077 13.7978 3.38462C12.9516 2.38462 11.4132 1.84616 9.41316 1.84616ZM10.1055 7.46155C9.79777 9.61539 8.10547 9.61539 6.567 9.61539H5.64393L6.25931 5.61539C6.25931 5.38462 6.49008 5.23078 6.72085 5.23078H7.10547C8.18239 5.23078 9.18239 5.23078 9.72085 5.84616C10.1055 6.15385 10.2593 6.69232 10.1055 7.46155Z",fill:"currentColor"}),C("path",{d:"M27.2593 7.38462H24.4131C24.1824 7.38462 23.9516 7.53846 23.9516 7.76923L23.7978 8.53846L23.567 8.23077C22.9516 7.30769 21.567 7 20.1824 7C17.0285 7 14.3362 9.38461 13.7978 12.7692C13.4901 14.4615 13.8747 16.0769 14.8747 17.1538C15.7208 18.1538 17.0285 18.6154 18.4901 18.6154C21.0285 18.6154 22.4901 17 22.4901 17L22.3362 17.7692C22.2593 18.0769 22.4901 18.3846 22.7978 18.3846H25.4131C25.7978 18.3846 26.1824 18.0769 26.2593 17.6923L27.7978 7.84615C27.8747 7.69231 27.567 7.38462 27.2593 7.38462ZM23.3362 12.9231C23.0285 14.5385 21.7978 15.6923 20.1055 15.6923C19.2593 15.6923 18.6439 15.4615 18.1824 14.9231C17.7208 14.3846 17.567 13.6923 17.7208 12.9231C17.9516 11.3077 19.3362 10.1538 20.9516 10.1538C21.7978 10.1538 22.4131 10.4615 22.8747 10.9231C23.2593 11.4615 23.4131 12.1538 23.3362 12.9231Z",fill:"currentColor"}),C("path",{d:"M42.5669 7.38461H39.7207C39.413 7.38461 39.1823 7.53846 39.0284 7.76923L35.0284 13.6154L33.3361 8C33.2592 7.61538 32.8746 7.38461 32.5669 7.38461H29.7207C29.413 7.38461 29.1053 7.69231 29.2592 8.07692L32.413 17.3846L29.413 21.5385C29.1823 21.8462 29.413 22.3077 29.7976 22.3077H32.6438C32.9515 22.3077 33.1823 22.1538 33.3361 21.9231L42.9515 8.07692C43.1823 7.84615 42.9515 7.38461 42.5669 7.38461Z",fill:"currentColor"}),C("path",{d:"M52.1053 1.84616H46.1053C45.7207 1.84616 45.3361 2.15385 45.2591 2.53847L42.8745 17.8462C42.7976 18.1539 43.0284 18.3846 43.3361 18.3846H46.413C46.7207 18.3846 46.9515 18.1539 46.9515 17.9231L47.6438 13.5385C47.7207 13.1539 48.0284 12.8462 48.4899 12.8462H50.413C54.3361 12.8462 56.6438 10.9231 57.2591 7.15385C57.4899 5.53847 57.2591 4.23078 56.4899 3.3077C55.5668 2.38462 54.1053 1.84616 52.1053 1.84616ZM52.7976 7.46154C52.4899 9.61539 50.7976 9.61539 49.2591 9.61539H48.3361L48.9515 5.61539C48.9515 5.38462 49.1822 5.23078 49.413 5.23078H49.7976C50.8745 5.23078 51.8745 5.23078 52.413 5.84616C52.7976 6.15385 52.8745 6.69231 52.7976 7.46154Z",fill:"currentColor"}),C("path",{d:"M69.9514 7.38462H67.1053C66.8745 7.38462 66.6437 7.53846 66.6437 7.76923L66.4899 8.53846L66.2591 8.23077C65.6437 7.30769 64.2591 7 62.8745 7C59.7207 7 57.0284 9.38461 56.4899 12.7692C56.1822 14.4615 56.5668 16.0769 57.5668 17.1538C58.413 18.1538 59.7207 18.6154 61.1822 18.6154C63.7207 18.6154 65.1822 17 65.1822 17L65.0284 17.7692C64.9514 18.0769 65.1822 18.3846 65.4899 18.3846H68.1053C68.4899 18.3846 68.8745 18.0769 68.9514 17.6923L70.4899 7.84615C70.4899 7.69231 70.2591 7.38462 69.9514 7.38462ZM65.9514 12.9231C65.6437 14.5385 64.413 15.6923 62.7207 15.6923C61.8745 15.6923 61.2591 15.4615 60.7976 14.9231C60.3361 14.3846 60.1822 13.6923 60.3361 12.9231C60.5668 11.3077 61.9514 10.1538 63.5668 10.1538C64.413 10.1538 65.0284 10.4615 65.4899 10.9231C65.9514 11.4615 66.1053 12.1538 65.9514 12.9231Z",fill:"currentColor"}),C("path",{d:"M73.3363 2.23078L70.8748 17.8462C70.7978 18.1539 71.0286 18.3846 71.3363 18.3846H73.7978C74.1825 18.3846 74.5671 18.0769 74.644 17.6923L77.1055 2.38462C77.1825 2.07693 76.9517 1.84616 76.644 1.84616H73.8748C73.5671 1.84616 73.4132 2.00001 73.3363 2.23078Z",fill:"currentColor"})]})};export{H as default};
|
|
2
2
|
//# sourceMappingURL=logo-pay-pal-wordmark-mono.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logo-pay-pal-wordmark-mono.js","sources":["../../../../src/components/logos/logo-pay-pal-wordmark-mono.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport { token } from '@styled/tokens';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {\n /**\n * Configures icon color on monochrome svgs.\n */\n color?: string;\n}\nconst LogoPayPalWordmarkMono = ({ color: customColor, title, titleId, ...props }: Props) => {\n // Utilize dynamic primary text color by default\n const color = customColor || token('colors.text.primary');\n return (\n <svg\n width={78}\n height={24}\n viewBox=\"0 0 78 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n color={color}\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n d=\"M9.41316 1.84616H3.41316C3.02854 1.84616 2.64393 2.15385 2.567 2.53847L0.182389 17.9231C0.105466 18.2308 0.336235 18.4615 0.643928 18.4615H3.49008C3.8747 18.4615 4.25931 18.1539 4.33624 17.7692L4.95162 13.6154C5.02854 13.2308 5.33624 12.9231 5.79777 12.9231H7.72085C11.6439 12.9231 13.9516 11 14.567 7.23078C14.7978 5.61539 14.567 4.3077 13.7978 3.38462C12.9516 2.38462 11.4132 1.84616 9.41316 1.84616ZM10.1055 7.46155C9.79777 9.61539 8.10547 9.61539 6.567 9.61539H5.64393L6.25931 5.61539C6.25931 5.38462 6.49008 5.23078 6.72085 5.23078H7.10547C8.18239 5.23078 9.18239 5.23078 9.72085 5.84616C10.1055 6.15385 10.2593 6.69232 10.1055 7.46155Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M27.
|
|
1
|
+
{"version":3,"file":"logo-pay-pal-wordmark-mono.js","sources":["../../../../src/components/logos/logo-pay-pal-wordmark-mono.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport { token } from '@styled/tokens';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {\n /**\n * Configures icon color on monochrome svgs.\n */\n color?: string;\n}\nconst LogoPayPalWordmarkMono = ({ color: customColor, title, titleId, ...props }: Props) => {\n // Utilize dynamic primary text color by default\n const color = customColor || token('colors.text.primary');\n return (\n <svg\n width={78}\n height={24}\n viewBox=\"0 0 78 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n color={color}\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n d=\"M9.41316 1.84616H3.41316C3.02854 1.84616 2.64393 2.15385 2.567 2.53847L0.182389 17.9231C0.105466 18.2308 0.336235 18.4615 0.643928 18.4615H3.49008C3.8747 18.4615 4.25931 18.1539 4.33624 17.7692L4.95162 13.6154C5.02854 13.2308 5.33624 12.9231 5.79777 12.9231H7.72085C11.6439 12.9231 13.9516 11 14.567 7.23078C14.7978 5.61539 14.567 4.3077 13.7978 3.38462C12.9516 2.38462 11.4132 1.84616 9.41316 1.84616ZM10.1055 7.46155C9.79777 9.61539 8.10547 9.61539 6.567 9.61539H5.64393L6.25931 5.61539C6.25931 5.38462 6.49008 5.23078 6.72085 5.23078H7.10547C8.18239 5.23078 9.18239 5.23078 9.72085 5.84616C10.1055 6.15385 10.2593 6.69232 10.1055 7.46155Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M27.2593 7.38462H24.4131C24.1824 7.38462 23.9516 7.53846 23.9516 7.76923L23.7978 8.53846L23.567 8.23077C22.9516 7.30769 21.567 7 20.1824 7C17.0285 7 14.3362 9.38461 13.7978 12.7692C13.4901 14.4615 13.8747 16.0769 14.8747 17.1538C15.7208 18.1538 17.0285 18.6154 18.4901 18.6154C21.0285 18.6154 22.4901 17 22.4901 17L22.3362 17.7692C22.2593 18.0769 22.4901 18.3846 22.7978 18.3846H25.4131C25.7978 18.3846 26.1824 18.0769 26.2593 17.6923L27.7978 7.84615C27.8747 7.69231 27.567 7.38462 27.2593 7.38462ZM23.3362 12.9231C23.0285 14.5385 21.7978 15.6923 20.1055 15.6923C19.2593 15.6923 18.6439 15.4615 18.1824 14.9231C17.7208 14.3846 17.567 13.6923 17.7208 12.9231C17.9516 11.3077 19.3362 10.1538 20.9516 10.1538C21.7978 10.1538 22.4131 10.4615 22.8747 10.9231C23.2593 11.4615 23.4131 12.1538 23.3362 12.9231Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M42.5669 7.38461H39.7207C39.413 7.38461 39.1823 7.53846 39.0284 7.76923L35.0284 13.6154L33.3361 8C33.2592 7.61538 32.8746 7.38461 32.5669 7.38461H29.7207C29.413 7.38461 29.1053 7.69231 29.2592 8.07692L32.413 17.3846L29.413 21.5385C29.1823 21.8462 29.413 22.3077 29.7976 22.3077H32.6438C32.9515 22.3077 33.1823 22.1538 33.3361 21.9231L42.9515 8.07692C43.1823 7.84615 42.9515 7.38461 42.5669 7.38461Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M52.1053 1.84616H46.1053C45.7207 1.84616 45.3361 2.15385 45.2591 2.53847L42.8745 17.8462C42.7976 18.1539 43.0284 18.3846 43.3361 18.3846H46.413C46.7207 18.3846 46.9515 18.1539 46.9515 17.9231L47.6438 13.5385C47.7207 13.1539 48.0284 12.8462 48.4899 12.8462H50.413C54.3361 12.8462 56.6438 10.9231 57.2591 7.15385C57.4899 5.53847 57.2591 4.23078 56.4899 3.3077C55.5668 2.38462 54.1053 1.84616 52.1053 1.84616ZM52.7976 7.46154C52.4899 9.61539 50.7976 9.61539 49.2591 9.61539H48.3361L48.9515 5.61539C48.9515 5.38462 49.1822 5.23078 49.413 5.23078H49.7976C50.8745 5.23078 51.8745 5.23078 52.413 5.84616C52.7976 6.15385 52.8745 6.69231 52.7976 7.46154Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M69.9514 7.38462H67.1053C66.8745 7.38462 66.6437 7.53846 66.6437 7.76923L66.4899 8.53846L66.2591 8.23077C65.6437 7.30769 64.2591 7 62.8745 7C59.7207 7 57.0284 9.38461 56.4899 12.7692C56.1822 14.4615 56.5668 16.0769 57.5668 17.1538C58.413 18.1538 59.7207 18.6154 61.1822 18.6154C63.7207 18.6154 65.1822 17 65.1822 17L65.0284 17.7692C64.9514 18.0769 65.1822 18.3846 65.4899 18.3846H68.1053C68.4899 18.3846 68.8745 18.0769 68.9514 17.6923L70.4899 7.84615C70.4899 7.69231 70.2591 7.38462 69.9514 7.38462ZM65.9514 12.9231C65.6437 14.5385 64.413 15.6923 62.7207 15.6923C61.8745 15.6923 61.2591 15.4615 60.7976 14.9231C60.3361 14.3846 60.1822 13.6923 60.3361 12.9231C60.5668 11.3077 61.9514 10.1538 63.5668 10.1538C64.413 10.1538 65.0284 10.4615 65.4899 10.9231C65.9514 11.4615 66.1053 12.1538 65.9514 12.9231Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M73.3363 2.23078L70.8748 17.8462C70.7978 18.1539 71.0286 18.3846 71.3363 18.3846H73.7978C74.1825 18.3846 74.5671 18.0769 74.644 17.6923L77.1055 2.38462C77.1825 2.07693 76.9517 1.84616 76.644 1.84616H73.8748C73.5671 1.84616 73.4132 2.00001 73.3363 2.23078Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\nexport default LogoPayPalWordmarkMono;\n"],"names":["LogoPayPalWordmarkMono","customColor","title","titleId","props","color","token","_jsxs","_jsx"],"mappings":"yFAYMA,MAAAA,EAAyB,CAAC,CAAE,MAAOC,EAAa,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IAAa,CAEzF,MAAMC,EAAQJ,GAAeK,EAAM,qBAAqB,EACxD,OACEC,SACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MAAOF,oBACUF,EAAO,GACpBC,EAAK,SAAA,CAERF,EAAQM,EAAA,QAAA,CAAO,GAAIL,EAAO,SAAGD,CAAc,CAAA,EAAG,KAC/CM,UACE,EAAE,ooBACF,KAAK,cACL,CAAA,EACFA,EACE,OAAA,CAAA,EAAE,qyBACF,KAAK,cAAc,CAAA,EAErBA,EAAA,OAAA,CACE,EAAE,iZACF,KAAK,iBAEPA,EAAA,OAAA,CACE,EAAE,woBACF,KAAK,cACL,CAAA,EACFA,EACE,OAAA,CAAA,EAAE,syBACF,KAAK,cAAc,CAAA,EAErBA,EACE,OAAA,CAAA,EAAE,kQACF,KAAK,cAAc,CAAA,CACnB,CACE,CAAA,CAEV"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as i,jsx as C}from"react/jsx-runtime";const H=({title:l,titleId:t,...L})=>i("svg",{width:78,height:24,viewBox:"0 0 78 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":t,...L,children:[l?C("title",{id:t,children:l}):null,C("path",{d:"M9.41316 1.84616H3.41316C3.02854 1.84616 2.64393 2.15385 2.567 2.53847L0.182389 17.9231C0.105466 18.2308 0.336235 18.4615 0.643928 18.4615H3.49008C3.8747 18.4615 4.25931 18.1539 4.33624 17.7692L4.95162 13.6154C5.02854 13.2308 5.33624 12.9231 5.79777 12.9231H7.72085C11.6439 12.9231 13.9516 11 14.567 7.23078C14.7978 5.61539 14.567 4.3077 13.7978 3.38462C12.9516 2.38462 11.4132 1.84616 9.41316 1.84616ZM10.1055 7.46155C9.79777 9.61539 8.10547 9.61539 6.567 9.61539H5.64393L6.25931 5.61539C6.25931 5.38462 6.49008 5.23078 6.72085 5.23078H7.10547C8.18239 5.23078 9.18239 5.23078 9.72085 5.84616C10.1055 6.15385 10.2593 6.69232 10.1055 7.46155Z",fill:"#003087"}),C("path",{d:"M27.
|
|
1
|
+
import{jsxs as i,jsx as C}from"react/jsx-runtime";const H=({title:l,titleId:t,...L})=>i("svg",{width:78,height:24,viewBox:"0 0 78 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":t,...L,children:[l?C("title",{id:t,children:l}):null,C("path",{d:"M9.41316 1.84616H3.41316C3.02854 1.84616 2.64393 2.15385 2.567 2.53847L0.182389 17.9231C0.105466 18.2308 0.336235 18.4615 0.643928 18.4615H3.49008C3.8747 18.4615 4.25931 18.1539 4.33624 17.7692L4.95162 13.6154C5.02854 13.2308 5.33624 12.9231 5.79777 12.9231H7.72085C11.6439 12.9231 13.9516 11 14.567 7.23078C14.7978 5.61539 14.567 4.3077 13.7978 3.38462C12.9516 2.38462 11.4132 1.84616 9.41316 1.84616ZM10.1055 7.46155C9.79777 9.61539 8.10547 9.61539 6.567 9.61539H5.64393L6.25931 5.61539C6.25931 5.38462 6.49008 5.23078 6.72085 5.23078H7.10547C8.18239 5.23078 9.18239 5.23078 9.72085 5.84616C10.1055 6.15385 10.2593 6.69232 10.1055 7.46155Z",fill:"#003087"}),C("path",{d:"M27.2593 7.38462H24.4131C24.1824 7.38462 23.9516 7.53846 23.9516 7.76923L23.7978 8.53846L23.567 8.23077C22.9516 7.30769 21.567 7 20.1824 7C17.0285 7 14.3362 9.38461 13.7978 12.7692C13.4901 14.4615 13.8747 16.0769 14.8747 17.1538C15.7208 18.1538 17.0285 18.6154 18.4901 18.6154C21.0285 18.6154 22.4901 17 22.4901 17L22.3362 17.7692C22.2593 18.0769 22.4901 18.3846 22.7978 18.3846H25.4131C25.7978 18.3846 26.1824 18.0769 26.2593 17.6923L27.7978 7.84615C27.8747 7.69231 27.567 7.38462 27.2593 7.38462ZM23.3362 12.9231C23.0285 14.5385 21.7978 15.6923 20.1055 15.6923C19.2593 15.6923 18.6439 15.4615 18.1824 14.9231C17.7208 14.3846 17.567 13.6923 17.7208 12.9231C17.9516 11.3077 19.3362 10.1538 20.9516 10.1538C21.7978 10.1538 22.4131 10.4615 22.8747 10.9231C23.2593 11.4615 23.4131 12.1538 23.3362 12.9231Z",fill:"#003087"}),C("path",{d:"M42.5669 7.38461H39.7207C39.413 7.38461 39.1823 7.53846 39.0284 7.76923L35.0284 13.6154L33.3361 8C33.2592 7.61538 32.8746 7.38461 32.5669 7.38461H29.7207C29.413 7.38461 29.1053 7.69231 29.2592 8.07692L32.413 17.3846L29.413 21.5385C29.1823 21.8462 29.413 22.3077 29.7976 22.3077H32.6438C32.9515 22.3077 33.1823 22.1538 33.3361 21.9231L42.9515 8.07692C43.1823 7.84615 42.9515 7.38461 42.5669 7.38461Z",fill:"#003087"}),C("path",{d:"M52.1053 1.84616H46.1053C45.7207 1.84616 45.3361 2.15385 45.2591 2.53847L42.8745 17.8462C42.7976 18.1539 43.0284 18.3846 43.3361 18.3846H46.413C46.7207 18.3846 46.9515 18.1539 46.9515 17.9231L47.6438 13.5385C47.7207 13.1539 48.0284 12.8462 48.4899 12.8462H50.413C54.3361 12.8462 56.6438 10.9231 57.2591 7.15385C57.4899 5.53847 57.2591 4.23078 56.4899 3.3077C55.5668 2.38462 54.1053 1.84616 52.1053 1.84616ZM52.7976 7.46154C52.4899 9.61539 50.7976 9.61539 49.2591 9.61539H48.3361L48.9515 5.61539C48.9515 5.38462 49.1822 5.23078 49.413 5.23078H49.7976C50.8745 5.23078 51.8745 5.23078 52.413 5.84616C52.7976 6.15385 52.8745 6.69231 52.7976 7.46154Z",fill:"#009CDE"}),C("path",{d:"M69.9514 7.38462H67.1053C66.8745 7.38462 66.6437 7.53846 66.6437 7.76923L66.4899 8.53846L66.2591 8.23077C65.6437 7.30769 64.2591 7 62.8745 7C59.7207 7 57.0284 9.38461 56.4899 12.7692C56.1822 14.4615 56.5668 16.0769 57.5668 17.1538C58.413 18.1538 59.7207 18.6154 61.1822 18.6154C63.7207 18.6154 65.1822 17 65.1822 17L65.0284 17.7692C64.9514 18.0769 65.1822 18.3846 65.4899 18.3846H68.1053C68.4899 18.3846 68.8745 18.0769 68.9514 17.6923L70.4899 7.84615C70.4899 7.69231 70.2591 7.38462 69.9514 7.38462ZM65.9514 12.9231C65.6437 14.5385 64.413 15.6923 62.7207 15.6923C61.8745 15.6923 61.2591 15.4615 60.7976 14.9231C60.3361 14.3846 60.1822 13.6923 60.3361 12.9231C60.5668 11.3077 61.9514 10.1538 63.5668 10.1538C64.413 10.1538 65.0284 10.4615 65.4899 10.9231C65.9514 11.4615 66.1053 12.1538 65.9514 12.9231Z",fill:"#009CDE"}),C("path",{d:"M73.3363 2.23078L70.8748 17.8462C70.7978 18.1539 71.0286 18.3846 71.3363 18.3846H73.7978C74.1825 18.3846 74.5671 18.0769 74.644 17.6923L77.1055 2.38462C77.1825 2.07693 76.9517 1.84616 76.644 1.84616H73.8748C73.5671 1.84616 73.4132 2.00001 73.3363 2.23078Z",fill:"#009CDE"})]});export{H as default};
|
|
2
2
|
//# sourceMappingURL=logo-pay-pal-wordmark.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logo-pay-pal-wordmark.js","sources":["../../../../src/components/logos/logo-pay-pal-wordmark.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {}\nconst LogoPayPalWordmark = ({ title, titleId, ...props }: Props) => (\n <svg\n width={78}\n height={24}\n viewBox=\"0 0 78 24\"\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=\"M9.41316 1.84616H3.41316C3.02854 1.84616 2.64393 2.15385 2.567 2.53847L0.182389 17.9231C0.105466 18.2308 0.336235 18.4615 0.643928 18.4615H3.49008C3.8747 18.4615 4.25931 18.1539 4.33624 17.7692L4.95162 13.6154C5.02854 13.2308 5.33624 12.9231 5.79777 12.9231H7.72085C11.6439 12.9231 13.9516 11 14.567 7.23078C14.7978 5.61539 14.567 4.3077 13.7978 3.38462C12.9516 2.38462 11.4132 1.84616 9.41316 1.84616ZM10.1055 7.46155C9.79777 9.61539 8.10547 9.61539 6.567 9.61539H5.64393L6.25931 5.61539C6.25931 5.38462 6.49008 5.23078 6.72085 5.23078H7.10547C8.18239 5.23078 9.18239 5.23078 9.72085 5.84616C10.1055 6.15385 10.2593 6.69232 10.1055 7.46155Z\"\n fill=\"#003087\"\n />\n <path\n d=\"M27.
|
|
1
|
+
{"version":3,"file":"logo-pay-pal-wordmark.js","sources":["../../../../src/components/logos/logo-pay-pal-wordmark.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {}\nconst LogoPayPalWordmark = ({ title, titleId, ...props }: Props) => (\n <svg\n width={78}\n height={24}\n viewBox=\"0 0 78 24\"\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=\"M9.41316 1.84616H3.41316C3.02854 1.84616 2.64393 2.15385 2.567 2.53847L0.182389 17.9231C0.105466 18.2308 0.336235 18.4615 0.643928 18.4615H3.49008C3.8747 18.4615 4.25931 18.1539 4.33624 17.7692L4.95162 13.6154C5.02854 13.2308 5.33624 12.9231 5.79777 12.9231H7.72085C11.6439 12.9231 13.9516 11 14.567 7.23078C14.7978 5.61539 14.567 4.3077 13.7978 3.38462C12.9516 2.38462 11.4132 1.84616 9.41316 1.84616ZM10.1055 7.46155C9.79777 9.61539 8.10547 9.61539 6.567 9.61539H5.64393L6.25931 5.61539C6.25931 5.38462 6.49008 5.23078 6.72085 5.23078H7.10547C8.18239 5.23078 9.18239 5.23078 9.72085 5.84616C10.1055 6.15385 10.2593 6.69232 10.1055 7.46155Z\"\n fill=\"#003087\"\n />\n <path\n d=\"M27.2593 7.38462H24.4131C24.1824 7.38462 23.9516 7.53846 23.9516 7.76923L23.7978 8.53846L23.567 8.23077C22.9516 7.30769 21.567 7 20.1824 7C17.0285 7 14.3362 9.38461 13.7978 12.7692C13.4901 14.4615 13.8747 16.0769 14.8747 17.1538C15.7208 18.1538 17.0285 18.6154 18.4901 18.6154C21.0285 18.6154 22.4901 17 22.4901 17L22.3362 17.7692C22.2593 18.0769 22.4901 18.3846 22.7978 18.3846H25.4131C25.7978 18.3846 26.1824 18.0769 26.2593 17.6923L27.7978 7.84615C27.8747 7.69231 27.567 7.38462 27.2593 7.38462ZM23.3362 12.9231C23.0285 14.5385 21.7978 15.6923 20.1055 15.6923C19.2593 15.6923 18.6439 15.4615 18.1824 14.9231C17.7208 14.3846 17.567 13.6923 17.7208 12.9231C17.9516 11.3077 19.3362 10.1538 20.9516 10.1538C21.7978 10.1538 22.4131 10.4615 22.8747 10.9231C23.2593 11.4615 23.4131 12.1538 23.3362 12.9231Z\"\n fill=\"#003087\"\n />\n <path\n d=\"M42.5669 7.38461H39.7207C39.413 7.38461 39.1823 7.53846 39.0284 7.76923L35.0284 13.6154L33.3361 8C33.2592 7.61538 32.8746 7.38461 32.5669 7.38461H29.7207C29.413 7.38461 29.1053 7.69231 29.2592 8.07692L32.413 17.3846L29.413 21.5385C29.1823 21.8462 29.413 22.3077 29.7976 22.3077H32.6438C32.9515 22.3077 33.1823 22.1538 33.3361 21.9231L42.9515 8.07692C43.1823 7.84615 42.9515 7.38461 42.5669 7.38461Z\"\n fill=\"#003087\"\n />\n <path\n d=\"M52.1053 1.84616H46.1053C45.7207 1.84616 45.3361 2.15385 45.2591 2.53847L42.8745 17.8462C42.7976 18.1539 43.0284 18.3846 43.3361 18.3846H46.413C46.7207 18.3846 46.9515 18.1539 46.9515 17.9231L47.6438 13.5385C47.7207 13.1539 48.0284 12.8462 48.4899 12.8462H50.413C54.3361 12.8462 56.6438 10.9231 57.2591 7.15385C57.4899 5.53847 57.2591 4.23078 56.4899 3.3077C55.5668 2.38462 54.1053 1.84616 52.1053 1.84616ZM52.7976 7.46154C52.4899 9.61539 50.7976 9.61539 49.2591 9.61539H48.3361L48.9515 5.61539C48.9515 5.38462 49.1822 5.23078 49.413 5.23078H49.7976C50.8745 5.23078 51.8745 5.23078 52.413 5.84616C52.7976 6.15385 52.8745 6.69231 52.7976 7.46154Z\"\n fill=\"#009CDE\"\n />\n <path\n d=\"M69.9514 7.38462H67.1053C66.8745 7.38462 66.6437 7.53846 66.6437 7.76923L66.4899 8.53846L66.2591 8.23077C65.6437 7.30769 64.2591 7 62.8745 7C59.7207 7 57.0284 9.38461 56.4899 12.7692C56.1822 14.4615 56.5668 16.0769 57.5668 17.1538C58.413 18.1538 59.7207 18.6154 61.1822 18.6154C63.7207 18.6154 65.1822 17 65.1822 17L65.0284 17.7692C64.9514 18.0769 65.1822 18.3846 65.4899 18.3846H68.1053C68.4899 18.3846 68.8745 18.0769 68.9514 17.6923L70.4899 7.84615C70.4899 7.69231 70.2591 7.38462 69.9514 7.38462ZM65.9514 12.9231C65.6437 14.5385 64.413 15.6923 62.7207 15.6923C61.8745 15.6923 61.2591 15.4615 60.7976 14.9231C60.3361 14.3846 60.1822 13.6923 60.3361 12.9231C60.5668 11.3077 61.9514 10.1538 63.5668 10.1538C64.413 10.1538 65.0284 10.4615 65.4899 10.9231C65.9514 11.4615 66.1053 12.1538 65.9514 12.9231Z\"\n fill=\"#009CDE\"\n />\n <path\n d=\"M73.3363 2.23078L70.8748 17.8462C70.7978 18.1539 71.0286 18.3846 71.3363 18.3846H73.7978C74.1825 18.3846 74.5671 18.0769 74.644 17.6923L77.1055 2.38462C77.1825 2.07693 76.9517 1.84616 76.644 1.84616H73.8748C73.5671 1.84616 73.4132 2.00001 73.3363 2.23078Z\"\n fill=\"#009CDE\"\n />\n </svg>\n);\nexport default LogoPayPalWordmark;\n"],"names":["LogoPayPalWordmark","title","titleId","props","_jsxs","_jsx"],"mappings":"kDAMMA,MAAAA,EAAqB,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAK,IACpDC,EAAA,MAAA,CACE,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BACW,kBAAAF,EACb,GAAAC,EAEH,SAAA,CAAAF,EAAQI,EAAO,QAAA,CAAA,GAAIH,EAAU,SAAAD,CAAc,CAAA,EAAG,KAC/CI,EACE,OAAA,CAAA,EAAE,ooBACF,KAAK,SAAS,CAAA,EAEhBA,EAAA,OAAA,CACE,EAAE,qyBACF,KAAK,SACL,CAAA,EACFA,EACE,OAAA,CAAA,EAAE,iZACF,KAAK,SACL,CAAA,EACFA,EACE,OAAA,CAAA,EAAE,woBACF,KAAK,SAAS,CAAA,EAEhBA,EAAA,OAAA,CACE,EAAE,syBACF,KAAK,SAAS,CAAA,EAEhBA,EAAA,OAAA,CACE,EAAE,kQACF,KAAK,SAAS,CAAA,CACd,CACE,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsxs as e,jsx as l}from"react/jsx-runtime";const h=({title:i,titleId:t,...C})=>e("svg",{width:16,height:16,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":t,...C,children:[i?l("title",{id:t,children:i}):null,e("g",{clipPath:"url(#clip0_3464_71)",children:[l("path",{d:"M8 0C8.73048 0.848057 9.53616 1.63563 10.4074 2.35356C9.82687 4.13837 9.51434 6.03459 9.51434 8C9.51434 9.96541 9.82687 11.8616 10.4074 13.6464C9.53616 14.3644 8.73048 15.1519 8 16C7.26952 15.1519 6.46384 14.3644 5.5926 13.6464C6.17313 11.8616 6.48566 9.96541 6.48566 8C6.48566 6.03459 6.17313 4.13837 5.5926 2.35357C6.46384 1.63563 7.26952 0.848058 8 0Z",fill:"#6851FF"}),l("path",{d:"M3.92732 12.4125C3.0051 11.7998 2.02637 11.2583 1 10.7964C1.28471 9.91186 1.43787 8.97289 1.43787 8C1.43787 7.02712 1.28471 6.08814 1 5.20356C2.02637 4.74173 3.0051 4.20025 3.92732 3.58754C4.27995 5.00407 4.46654 6.48138 4.46654 8C4.46654 9.51862 4.27995 10.9959 3.92732 12.4125Z",fill:"#6851FF"}),l("path",{d:"M11.5335 8C11.5335 9.51863 11.72 10.9959 12.0727 12.4125C12.9949 11.7998 13.9736 11.2583 15 10.7964C14.7153 9.91186 14.5621 8.97289 14.5621 8C14.5621 7.02712 14.7153 6.08814 15 5.20356C13.9736 4.74173 12.9949 4.20024 12.0727 3.58754C11.72 5.00406 11.5335 6.48138 11.5335 8Z",fill:"#6851FF"})]}),l("defs",{children:l("clipPath",{id:"clip0_3464_71",children:l("rect",{width:16,height:16,fill:"white"})})})]});export{h as default};
|
|
2
|
+
//# sourceMappingURL=website-magic.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"website-magic.js","sources":["../../../../src/components/logos/website-magic.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport interface Props extends SVGRProps, SVGProps<SVGSVGElement> {}\nconst WebsiteMagic = ({ title, titleId, ...props }: Props) => (\n <svg\n width={16}\n height={16}\n viewBox=\"0 0 16 16\"\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 <g clipPath=\"url(#clip0_3464_71)\">\n <path\n d=\"M8 0C8.73048 0.848057 9.53616 1.63563 10.4074 2.35356C9.82687 4.13837 9.51434 6.03459 9.51434 8C9.51434 9.96541 9.82687 11.8616 10.4074 13.6464C9.53616 14.3644 8.73048 15.1519 8 16C7.26952 15.1519 6.46384 14.3644 5.5926 13.6464C6.17313 11.8616 6.48566 9.96541 6.48566 8C6.48566 6.03459 6.17313 4.13837 5.5926 2.35357C6.46384 1.63563 7.26952 0.848058 8 0Z\"\n fill=\"#6851FF\"\n />\n <path\n d=\"M3.92732 12.4125C3.0051 11.7998 2.02637 11.2583 1 10.7964C1.28471 9.91186 1.43787 8.97289 1.43787 8C1.43787 7.02712 1.28471 6.08814 1 5.20356C2.02637 4.74173 3.0051 4.20025 3.92732 3.58754C4.27995 5.00407 4.46654 6.48138 4.46654 8C4.46654 9.51862 4.27995 10.9959 3.92732 12.4125Z\"\n fill=\"#6851FF\"\n />\n <path\n d=\"M11.5335 8C11.5335 9.51863 11.72 10.9959 12.0727 12.4125C12.9949 11.7998 13.9736 11.2583 15 10.7964C14.7153 9.91186 14.5621 8.97289 14.5621 8C14.5621 7.02712 14.7153 6.08814 15 5.20356C13.9736 4.74173 12.9949 4.20024 12.0727 3.58754C11.72 5.00406 11.5335 6.48138 11.5335 8Z\"\n fill=\"#6851FF\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_3464_71\">\n <rect width={16} height={16} fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n);\nexport default WebsiteMagic;\n"],"names":["WebsiteMagic","title","titleId","props","_jsxs","_jsx"],"mappings":"wDAMMA,EAAe,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,GAAGC,CAAc,IACvDC,EACE,MAAA,CAAA,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,6BAA4B,kBACjBF,EAAO,GACpBC,EAAK,SAAA,CAERF,EAAQI,EAAA,QAAA,CAAO,GAAIH,EAAO,SAAGD,CAAK,CAAA,EAAY,KAC/CG,EAAA,IAAA,CAAG,SAAS,sBACV,SAAA,CAAAC,EAAA,OAAA,CACE,EAAE,qWACF,KAAK,SAAS,CAAA,EAEhBA,EAAA,OAAA,CACE,EAAE,0RACF,KAAK,SACL,CAAA,EACFA,EACE,OAAA,CAAA,EAAE,oRACF,KAAK,SAAS,CAAA,CACd,CACA,CAAA,EACJA,EACE,OAAA,CAAA,SAAAA,EAAA,WAAA,CAAU,GAAG,gBAAe,SAC1BA,EAAM,OAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,KAAK,OAAO,CAAA,CAChC,CAAA,CAAA,CAAA,CACN,CACH,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as m,jsx as t}from"react/jsx-runtime";import"../feedback/callout.js";import{css as E}from"@styled/css";import{HStack as x,Box as P,VStack as K}from"@styled/jsx";import{token as f}from"@styled/tokens";import M from"../icons/ico-caret-down.js";import T from"../icons/ico-caret-up.js";import U from"../icons/ico-checkmark.js";import Y from"../icons/ico-question-circle-fill.js";import"./button.js";import"./checkbox.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import S from"./text.js";import"./portal.js";import{createContext as q,useContext as G,useCallback as k,useState as
|
|
1
|
+
import{jsxs as m,jsx as t}from"react/jsx-runtime";import"../feedback/callout.js";import{css as E}from"@styled/css";import{HStack as x,Box as P,VStack as K}from"@styled/jsx";import{token as f}from"@styled/tokens";import M from"../icons/ico-caret-down.js";import T from"../icons/ico-caret-up.js";import U from"../icons/ico-checkmark.js";import Y from"../icons/ico-question-circle-fill.js";import"./button.js";import"./checkbox.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import S from"./text.js";import"./portal.js";import{createContext as q,useContext as G,useCallback as k,useState as $,useRef as z,useMemo as J,Children as c,useEffect as Q,cloneElement as X}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import Z from"../feedback/tooltip.js";import{useButton as ee,useFocusRing as oe,useKeyboard as re,mergeProps as te}from"react-aria";const N=q({selectedOption:null,setSelectedOption:()=>{}}),W=({value:r,label:l,isFocused:h})=>{const{selectedOption:w,setSelectedOption:i}=G(N),s=w?.value===r,u=k(()=>{i({value:r,label:l})},[i,r,l]);return m(x,{px:4,py:1.5,gap:2,bg:s?"brand.base":h?"brand.lightest":"",_hover:s?{}:{bg:"brand.lightest"},onClick:u,children:[t(P,{w:4,children:s&&t(U,{width:16,height:16,color:f("colors.surface.primary")})}),t(S,{size:"lg",styles:{fontWeight:500,color:f(`colors.${s?"surface":"text"}.primary`)},children:l})]})},j=({children:r,onSelect:l,label:h,placeholder:w="Select one",selectedValue:i,tooltipContent:s,disabled:u,viewMax:A=5,...F})=>{const[p,b]=$(!1),[o,d]=$(null),v=z(null),g=z(null),H=A*2.5+1,I=k(()=>{b(e=>!e),p||(d(null),setTimeout(()=>{var e;return(e=g.current)===null||e===void 0?void 0:e.focus()}))},[p]),L=k(e=>{l(e.value),b(!1)},[l]),D=J(()=>{const e=c.toArray(r).find(n=>n.props.value===i);return e?e.props.label:w},[i,r]),{buttonProps:R}=ee({...F,isDisabled:u,onPress:I},v),{focusProps:V,isFocusVisible:_}=oe(),{keyboardProps:B}=re({onKeyDown:e=>{var n,a;if(!p)return;let y=o;const C=c.toArray(r);switch(e.key){case"ArrowUp":e.preventDefault(),o===null?d(c.count(r)-1):(y=o>0?o-1:c.count(r)-1,d(y));break;case"ArrowDown":e.preventDefault(),o===null?d(0):(y=o<c.count(r)-1?o+1:0,d(y));break;case"Enter":if(e.preventDefault(),(n=v.current)===null||n===void 0||n.focus(),o===null)return;if(o>=0&&o<C.length){const O=C[o];O&&l(O.props.value)}break;case"Escape":b(!1),(a=v.current)===null||a===void 0||a.focus();break}}});return Q(()=>{const e=n=>{var a;!((a=g.current)===null||a===void 0)&&a.contains(n.target)||b(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t(N.Provider,{value:{selectedOption:{value:i??"",label:D},setSelectedOption:L},children:m(K,{gap:2,w:"full",alignItems:"flex-start",children:[m(x,{gap:2,opacity:u?.3:"",transition:"all linear 120ms",children:[h&&t(S,{size:"sm",styles:{fontWeight:500},children:h}),s&&t(Z,{isDisabled:u,content:s,children:t(Y,{className:E({w:4,h:4,color:"neutral.primary"})})})]}),m("button",{className:E({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:v,...te(R,V,B),children:[m(x,{w:"full",h:12,p:4,justifyContent:"space-between",children:[t(S,{size:"lg",styles:{color:f(`colors.text.${i?"primary":"tertiary"}`)},children:D}),p?t(T,{width:18,height:18,color:f("colors.brand.base")}):t(M,{width:18,height:18,color:f("colors.brand.base")})]}),p&&t(P,{ref:g,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",top:55,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${H}rem`},overflowY:"auto",outline:"none",zIndex:"max",children:c.map(r,(e,n)=>X(e,{isFocused:n===o}))})]})]})})};W.displayName="DropdownOption",j.displayName="DropdownSelector";export{W as DropdownOption,j as DropdownSelector};
|
|
2
2
|
//# sourceMappingURL=dropdown-selector.js.map
|
|
@@ -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 selectedValue?: string;\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}\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 DropdownContext = createContext<DropdownContextType>({\n selectedOption: null,\n setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, isFocused }: DropdownOptionProps) => {\n const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n const isSelected = selectedOption?.value === value;\n\n const handleSelectOption = useCallback(() => {\n setSelectedOption({ value, label });\n }, [setSelectedOption, value, label]);\n\n return (\n <HStack\n px={4}\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 >\n <Box w={4}>{isSelected && <IcoCheckmark width={16} height={16} color={token('colors.surface.primary')} />}</Box>\n <Text size=\"lg\" 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 selectedValue,\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 maxHeight = viewMax * 2.5 + 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 : 'Select one';\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 <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 <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\" h={12} p={4} justifyContent=\"space-between\">\n <Text size=\"lg\" styles={{ color: token(`colors.text.${selectedValue ? 'primary' : 'tertiary'}`) }}>\n {selectedLabel}\n </Text>\n {isOpen ? (\n <IcoCaretUp width={18} height={18} color={token('colors.brand.base')} />\n ) : (\n <IcoCaretDown width={18} height={18} 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 top={55}\n boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n style={{ maxHeight: `${maxHeight}rem` }}\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 }),\n )}\n </Box>\n )}\n </button>\n </VStack>\n </DropdownContext.Provider>\n );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["DropdownContext","createContext","DropdownOption","value","label","isFocused","selectedOption","setSelectedOption","useContext","isSelected","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","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":"o5BA+CA,MAAMA,EAAkBC,EAAmC,CACzD,eAAgB,KAChB,kBAAmB,IAAK,CACzB,CAAA,CAAA,EAEYC,EAAiB,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,UAAAC,CAAS,IAA2B,CACjF,KAAM,CAAE,eAAAC,EAAgB,kBAAAC,CAAiB,EAAKC,EAAWR,CAAe,EAClES,EAAaH,GAAgB,QAAUH,EAEvCO,EAAqBC,EAAY,IAAK,CAC1CJ,EAAkB,CAAE,MAAAJ,EAAO,MAAAC,CAAK,CAAE,CACpC,EAAG,CAACG,EAAmBJ,EAAOC,CAAK,CAAC,EAEpC,OACEQ,EAACC,EACC,CAAA,GAAI,EACJ,GAAI,IACJ,IAAK,EACL,GAAIJ,EAAa,aAAeJ,EAAY,iBAAmB,GAC/D,OAASI,EAAwC,GAA3B,CAAE,GAAI,gBAAkB,EAC9C,QAASC,EAAkB,SAAA,CAE3BI,EAACC,EAAI,CAAA,EAAG,EAAC,SAAGN,GAAcK,EAACE,EAAa,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOC,EAAM,wBAAwB,CAAC,CAAA,CAAW,CAAA,EAChHH,EAACI,EAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,WAAY,IAAK,MAAOD,EAAM,UAAUR,EAAa,UAAY,MAAM,UAAU,CAAG,EAAA,SAC3GL,CAAK,CAAA,CACD,CACA,CAAA,CAEb,EAEae,EAAmB,CAAC,CAC/B,SAAAC,EACA,SAAAC,EACA,MAAAjB,EACA,cAAAkB,EACA,eAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,EACV,GAAGC,CACmB,IAAI,CAC1B,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAAS,EAAK,EACpC,CAACC,EAAcC,CAAe,EAAIF,EAAwB,IAAI,EAC9DG,EAAYC,EAA0B,IAAI,EAC1CC,EAAcD,EAAuB,IAAI,EACzCE,EAAYV,EAAU,IAAM,EAE5BW,EAAiBzB,EAAY,IAAK,CACtCiB,EAAUS,GAAQ,CAACA,CAAI,EAClBV,IACHI,EAAgB,IAAI,EACpB,WAAW,IAAK,CAAA,IAAAO,EAAC,OAAAA,EAAAJ,EAAY,qCAAS,MAAK,CAAE,CAAA,EAEjD,EAAG,CAACP,CAAM,CAAC,EAELY,EAAe5B,EAClB6B,GAAsB,CACrBnB,EAASmB,EAAO,KAAK,EACrBZ,EAAU,EAAK,CACjB,EACA,CAACP,CAAQ,CAAC,EAGNoB,EAAgBC,EAAQ,IAAK,CAEjC,MAAMC,EADgBC,EAAS,QAAQxB,CAAQ,EACZ,KAAKyB,GAASA,EAAM,MAAM,QAAUvB,CAAa,EACpF,OAAOqB,EAAeA,EAAa,MAAM,MAAQ,YACnD,EAAG,CAACrB,EAAeF,CAAQ,CAAC,EAEtB,CAAE,YAAA0B,CAAa,EAAGC,EACtB,CACE,GAAGrB,EACH,WAAYF,EACZ,QAASY,GAEXJ,CAAS,EAGL,CAAE,WAAAgB,EAAY,eAAAC,GAAmBC,GAAAA,EAEjC,CAAE,cAAAC,CAAe,EAAGC,GAAY,CACpC,UAAWC,GAAQ,SACjB,GAAI,CAAC1B,EAAQ,OAEb,IAAI2B,EAAkBxB,EACtB,MAAMyB,EAAaX,EAAS,QAAQxB,CAAQ,EAE5C,OAAQiC,EAAM,KACZ,IAAK,UACHA,EAAM,eAAA,EACFvB,IAAiB,KACnBC,EAAgBa,EAAS,MAAMxB,CAAQ,EAAI,CAAC,GAE5CkC,EAAkBxB,EAAe,EAAIA,EAAe,EAAIc,EAAS,MAAMxB,CAAQ,EAAI,EACnFW,EAAgBuB,CAAe,GAEjC,MACF,IAAK,YACHD,EAAM,iBACFvB,IAAiB,KACnBC,EAAgB,CAAC,GAEjBuB,EAAkBxB,EAAec,EAAS,MAAMxB,CAAQ,EAAI,EAAIU,EAAe,EAAI,EACnFC,EAAgBuB,CAAe,GAEjC,MACF,IAAK,QAGH,GAFAD,EAAM,eAAc,GACpBf,EAAAN,EAAU,WAAS,MAAAM,IAAA,QAAAA,EAAA,QACfR,IAAiB,KAAM,OAC3B,GAAIA,GAAgB,GAAKA,EAAeyB,EAAW,OAAQ,CACzD,MAAMC,EAAgBD,EAAWzB,CAAY,EACzC0B,GACFnC,EAASmC,EAAc,MAAM,KAAK,CAEtC,CACA,MACF,IAAK,SACH5B,EAAU,EAAK,GACf6B,EAAAzB,EAAU,WAAS,MAAAyB,IAAA,QAAAA,EAAA,QACnB,KAGJ,CACF,CACD,CAAA,EAED,OAAAC,EAAU,IAAK,CACb,MAAMC,EAAeN,GAAqB,OACnC,GAAAf,EAAAJ,EAAY,WAAO,MAAAI,IAAA,SAAAA,EAAE,SAASe,EAAM,MAAc,GACrDzB,EAAU,EAAK,CAEnB,EAEA,gBAAS,iBAAiB,YAAa+B,CAAW,EAE3C,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAW,CACvD,CACF,EAAG,CAAE,CAAA,EAGH7C,EAACd,EAAgB,SAAQ,CACvB,MAAO,CAAE,eAAgB,CAAE,MAAOsB,GAAiB,GAAI,MAAOmB,CAAa,EAAI,kBAAmBF,GAElG,SAAA3B,EAACgD,EAAM,CAAC,IAAK,EAAG,EAAE,OAAO,WAAW,aAAY,SAAA,CAC9ChD,EAACC,EAAM,CAAC,IAAK,EAAG,QAASW,EAAW,GAAM,GAAI,WAAY,mBAAkB,SAAA,CACzEpB,GACCU,EAACI,EAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,GAAG,EACtC,SAAAd,CACI,CAAA,EAGRmB,GACCT,EAAC+C,EAAO,CAAC,WAAYrC,EAAU,QAASD,EACtC,SAAAT,EAACgD,EAAqB,CAAC,UAAWC,EAAI,CAAE,EAAG,EAAG,EAAG,EAAG,MAAO,iBAAiB,CAAE,CAAK,CAAA,CAAA,CAAA,CAEtF,CAAA,CAAA,EAGHnD,EAAA,SAAA,CACE,UAAWmD,EAAI,CACb,EAAG,OACH,EAAG,cACH,YAAa,OACb,YAAa,oBACb,QAAS,KACT,WAAY,mBACZ,SAAU,WACV,OAAQ,UACR,aAAc,aACd,aAAcd,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,GACf,OAAQ,CAAE,YAAa,iBAAmB,EAC1C,UAAW,CAAE,QAAS,GAAK,cAAe,MAAQ,EACnD,EACD,IAAKjB,KACDgC,GAAWlB,EAAaE,EAAYG,CAAa,YAErDvC,EAACC,GAAO,EAAE,OAAO,EAAG,GAAI,EAAG,EAAG,eAAe,gBAC3C,SAAA,CAAAC,EAACI,EAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,MAAOD,EAAM,eAAeK,EAAgB,UAAY,UAAU,EAAE,GAC3F,SAAAmB,IAEFd,EACCb,EAACmD,EAAU,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOhD,EAAM,mBAAmB,CAAC,CAAA,EAEpEH,EAACoD,EAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOjD,EAAM,mBAAmB,GACtE,CAAA,CAAA,EAGFU,GACCb,EAACC,GACC,IAAKmB,EACL,SAAU,GACV,GAAI,EACJ,GAAG,kBACH,SAAS,WACT,EAAE,OACF,QAAQ,QACR,IAAK,GACL,UAAU,uCACV,MAAO,CAAE,UAAW,GAAGC,CAAS,OAChC,UAAU,OACV,QAAQ,OACR,OAAO,eAENS,EAAS,IAAIxB,EAAU,CAACyB,EAAOsB,IAC9BC,EAAavB,EAA4C,CACvD,UAAWsB,IAAUrC,CACtB,CAAA,CAAC,CAEA,CAAA,CACP,GACM,CACF,CAAA,CAAA,CAAA,CAGf,EAEA5B,EAAe,YAAc,iBAC7BiB,EAAiB,YAAc"}
|
|
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 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}\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 DropdownContext = createContext<DropdownContextType>({\n selectedOption: null,\n setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, isFocused }: DropdownOptionProps) => {\n const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n const isSelected = selectedOption?.value === value;\n\n const handleSelectOption = useCallback(() => {\n setSelectedOption({ value, label });\n }, [setSelectedOption, value, label]);\n\n return (\n <HStack\n px={4}\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 >\n <Box w={4}>{isSelected && <IcoCheckmark width={16} height={16} color={token('colors.surface.primary')} />}</Box>\n <Text size=\"lg\" 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 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 maxHeight = viewMax * 2.5 + 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 <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 <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\" h={12} p={4} justifyContent=\"space-between\">\n <Text size=\"lg\" styles={{ color: token(`colors.text.${selectedValue ? 'primary' : 'tertiary'}`) }}>\n {selectedLabel}\n </Text>\n {isOpen ? (\n <IcoCaretUp width={18} height={18} color={token('colors.brand.base')} />\n ) : (\n <IcoCaretDown width={18} height={18} 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 top={55}\n boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n style={{ maxHeight: `${maxHeight}rem` }}\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 }),\n )}\n </Box>\n )}\n </button>\n </VStack>\n </DropdownContext.Provider>\n );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["DropdownContext","createContext","DropdownOption","value","label","isFocused","selectedOption","setSelectedOption","useContext","isSelected","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,2 +1,2 @@
|
|
|
1
|
-
import{jsx as l,Fragment as
|
|
1
|
+
import{jsx as l,Fragment as L,jsxs as O}from"react/jsx-runtime";import C from"./button.js";import"./checkbox.js";import"./dropdown-selector.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import{useToggleState as J}from"../../hooks/useToggleState.js";import{cx as Q}from"@styled/css";import{Center as R}from"@styled/jsx";import{vstack as V}from"@styled/patterns";import{token as $}from"@styled/tokens";import{createSlot as P,createHost as ee}from"create-slots";import{Children as k,cloneElement as z,useMemo as oe,useRef as A,useCallback as F,useEffect as re}from"react";import{useOverlayTrigger as te,usePopover as ne,mergeProps as N,Overlay as ie}from"react-aria";const X="bottom left",Y=8,le="hover",E=P(({children:i})=>l(L,{children:i})),w=P(({children:i,...o})=>l(R,{children:k.map(i,r=>z(r,o))})),D=P(({children:i,...o})=>l(R,{children:k.map(i,r=>z(r,o))})),H=({children:i,...o})=>ee(i,r=>{var h;const{isSelected:B,setSelected:v}=J({isOpen:o.isOpen,defaultSelected:o.defaultOpen,onChange:o.onOpenChange,...o}),a=o.isOpen!==void 0?o.isOpen:B,t=24,T=o.trigger||le,n=oe(()=>({isOpen:a,open:()=>{v(!0)},close:()=>{v(!1)},setOpen(e){v(e)},toggle(){}}),[a]),I=r.getProps(E),d=A(null),{triggerProps:M,overlayProps:U}=te({type:"dialog"},n,d),s=A(null),{popoverProps:W,underlayProps:_}=ne({placement:X,offset:Y,popoverRef:s,triggerRef:d,...I},n),m=N(I,W);!((h=m?.style)===null||h===void 0)&&h.zIndex&&(m.style.zIndex=$("zIndex.max"));const S=F(()=>{n.open()},[n]),x=F(e=>{var b,y;const c=(b=d.current)===null||b===void 0?void 0:b.getBoundingClientRect(),p=(y=s.current)===null||y===void 0?void 0:y.getBoundingClientRect();if(c&&p){const K=e.clientX>=c.left-t&&e.clientX<=c.right+t&&e.clientY>=c.top-t&&e.clientY<=c.bottom+t,Z=e.clientX>=p.left-t&&e.clientX<=p.right+t&&e.clientY>=p.top-t&&e.clientY<=p.bottom+t;!K&&!Z&&n.close()}},[n]),q=()=>{if(s.current){const e=s.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.length>0&&e[0].focus()}},G=e=>{e.key==="Enter"&&(e.preventDefault(),a?n.close():(n.open(),setTimeout(q,0)))};re(()=>(document.addEventListener("mousemove",x),()=>{document.removeEventListener("mousemove",x)}),[x]);const g=o.size==="sm"?16:24,u=r.get(w),f=r.get(D);return O(L,{children:[O(C,{ref:d,...N(M,o),onKeyDown:G,onHover:()=>T==="hover"&&S(),onPress:()=>T==="click"&&S(),children:[u&&l(C.LeadingIcon,{children:u&&{...u,props:{...u.props,width:g,height:g}}}),f&&l(C.TrailingIcon,{children:f&&{...f,props:{...f.props,width:g,height:g}}})]}),a&&O(ie,{...U,children:[l("div",{..._,className:"underlay"}),l("div",{ref:s,...m,className:Q(V({bg:"surface.primary",p:3,gap:0,color:"text.secondary",borderWidth:1,borderColor:"neutral.secondary",borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",maxW:52,alignItems:"start"}),m.className),children:r.get(E)})]})]})}),j=Object.assign(H,{LeadingIcon:w,TrailingIcon:D,Content:E});export{Y as DEFAULT_OFFSET,X as DEFAULT_PLACEMENT,j as Popover,H as PopoverHost,j as default};
|
|
2
2
|
//# sourceMappingURL=popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n Children,\n ComponentProps,\n PropsWithChildren,\n cloneElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n isOpen?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n}\n\ninterface OverlayTriggerState {\n readonly isOpen: boolean;\n setOpen(isOpen: boolean): void;\n open(): void;\n close(): void;\n toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'> & {\n children?: ReactNode;\n state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n return createHost(children, slots => {\n const { isSelected, setSelected: setOpen } = useToggleState({\n isOpen: props.isOpen,\n defaultSelected: props.defaultOpen,\n onChange: props.onOpenChange,\n ...props,\n });\n\n const isOpen = props.isOpen !== undefined ? props.isOpen : isSelected;\n const safeZoneRadius = 24;\n\n const state = useMemo(\n () => ({\n isOpen,\n open: () => {\n setOpen(true);\n },\n close: () => {\n setOpen(false);\n },\n setOpen(value: boolean) {\n setOpen(value);\n },\n toggle() {},\n }),\n [isOpen],\n );\n\n const popoverContentProps = slots.getProps(PopoverContent);\n\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const { popoverProps, underlayProps } = usePopover(\n {\n placement: DEFAULT_PLACEMENT,\n offset: DEFAULT_OFFSET,\n popoverRef: contentRef,\n triggerRef,\n ...popoverContentProps,\n },\n state,\n );\n\n const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n // Need to override zIndex set by react-aria so popover displays over iframe\n if (contentProps?.style?.zIndex) {\n contentProps.style.zIndex = token('zIndex.max');\n }\n\n const handleMouseEnter = useCallback(() => {\n state.open();\n }, [state]);\n\n const handleMouseLeave = useCallback(\n (event: MouseEvent) => {\n const buttonRect = triggerRef.current?.getBoundingClientRect();\n const popoverRect = contentRef.current?.getBoundingClientRect();\n\n if (buttonRect && popoverRect) {\n const withinButtonSafeZone =\n event.clientX >= buttonRect.left - safeZoneRadius &&\n event.clientX <= buttonRect.right + safeZoneRadius &&\n event.clientY >= buttonRect.top - safeZoneRadius &&\n event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n const withinPopoverSafeZone =\n event.clientX >= popoverRect.left - safeZoneRadius &&\n event.clientX <= popoverRect.right + safeZoneRadius &&\n event.clientY >= popoverRect.top - safeZoneRadius &&\n event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n state.close();\n }\n }\n },\n [state],\n );\n\n const focusFirstInteractiveElement = () => {\n if (contentRef.current) {\n const interactiveElements = contentRef.current.querySelectorAll(\n 'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n if (interactiveElements.length > 0) {\n (interactiveElements[0] as HTMLElement).focus();\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n if (isOpen) {\n state.close();\n } else {\n state.open();\n setTimeout(focusFirstInteractiveElement, 0);\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('mousemove', handleMouseLeave);\n return () => {\n document.removeEventListener('mousemove', handleMouseLeave);\n };\n }, [handleMouseLeave]);\n\n const iconSize = props.size === 'sm' ? 16 : 24;\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n\n return (\n <>\n <Button\n ref={triggerRef}\n {...mergeProps(triggerProps, props)}\n onHover={handleMouseEnter}\n onKeyDown={handleKeyDown}\n >\n {leadingIcon && (\n <Button.LeadingIcon>\n {leadingIcon && { ...leadingIcon, props: { ...leadingIcon.props, width: iconSize, height: iconSize } }}\n </Button.LeadingIcon>\n )}\n {trailingIcon && (\n <Button.TrailingIcon>\n {trailingIcon && { ...trailingIcon, props: { ...trailingIcon.props, width: iconSize, height: iconSize } }}\n </Button.TrailingIcon>\n )}\n </Button>\n {isOpen && (\n <Overlay {...overlayProps}>\n <div {...underlayProps} className=\"underlay\" />\n <div\n ref={contentRef}\n {...contentProps}\n className={cx(\n vstack({\n bg: 'surface.primary',\n p: 3,\n gap: 0,\n color: 'text.secondary',\n borderWidth: 1,\n borderColor: 'neutral.secondary',\n borderRadius: 'xl',\n boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n maxW: 52,\n alignItems: 'start',\n }),\n contentProps.className,\n )}\n >\n {slots.get(PopoverContent)}\n </div>\n </Overlay>\n )}\n </>\n );\n });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n LeadingIcon,\n TrailingIcon,\n Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","PopoverContent","createSlot","children","_jsx","_Fragment","LeadingIcon","props","Center","Children","child","cloneElement","TrailingIcon","PopoverHost","createHost","slots","isSelected","setOpen","useToggleState","isOpen","safeZoneRadius","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","handleMouseEnter","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","iconSize","leadingIcon","trailingIcon","_jsxs","Button","Overlay","cx","vstack","Popover"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n Children,\n ComponentProps,\n PropsWithChildren,\n cloneElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n isOpen?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n trigger?: 'click' | 'hover';\n}\n\ninterface OverlayTriggerState {\n readonly isOpen: boolean;\n setOpen(isOpen: boolean): void;\n open(): void;\n close(): void;\n toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'> & {\n children?: ReactNode;\n state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst DEFAULT_TRIGGER: string = 'hover';\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n return createHost(children, slots => {\n const { isSelected, setSelected: setOpen } = useToggleState({\n isOpen: props.isOpen,\n defaultSelected: props.defaultOpen,\n onChange: props.onOpenChange,\n ...props,\n });\n\n const isOpen = props.isOpen !== undefined ? props.isOpen : isSelected;\n const safeZoneRadius = 24;\n const trigger = props.trigger || DEFAULT_TRIGGER;\n\n const state = useMemo(\n () => ({\n isOpen,\n open: () => {\n setOpen(true);\n },\n close: () => {\n setOpen(false);\n },\n setOpen(value: boolean) {\n setOpen(value);\n },\n toggle() {},\n }),\n [isOpen],\n );\n\n const popoverContentProps = slots.getProps(PopoverContent);\n\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const { popoverProps, underlayProps } = usePopover(\n {\n placement: DEFAULT_PLACEMENT,\n offset: DEFAULT_OFFSET,\n popoverRef: contentRef,\n triggerRef,\n ...popoverContentProps,\n },\n state,\n );\n\n const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n // Need to override zIndex set by react-aria so popover displays over iframe\n if (contentProps?.style?.zIndex) {\n contentProps.style.zIndex = token('zIndex.max');\n }\n\n const handleTrigger = useCallback(() => {\n state.open();\n }, [state]);\n\n const handleMouseLeave = useCallback(\n (event: MouseEvent) => {\n const buttonRect = triggerRef.current?.getBoundingClientRect();\n const popoverRect = contentRef.current?.getBoundingClientRect();\n\n if (buttonRect && popoverRect) {\n const withinButtonSafeZone =\n event.clientX >= buttonRect.left - safeZoneRadius &&\n event.clientX <= buttonRect.right + safeZoneRadius &&\n event.clientY >= buttonRect.top - safeZoneRadius &&\n event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n const withinPopoverSafeZone =\n event.clientX >= popoverRect.left - safeZoneRadius &&\n event.clientX <= popoverRect.right + safeZoneRadius &&\n event.clientY >= popoverRect.top - safeZoneRadius &&\n event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n state.close();\n }\n }\n },\n [state],\n );\n\n const focusFirstInteractiveElement = () => {\n if (contentRef.current) {\n const interactiveElements = contentRef.current.querySelectorAll(\n 'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n if (interactiveElements.length > 0) {\n (interactiveElements[0] as HTMLElement).focus();\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n if (isOpen) {\n state.close();\n } else {\n state.open();\n setTimeout(focusFirstInteractiveElement, 0);\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('mousemove', handleMouseLeave);\n return () => {\n document.removeEventListener('mousemove', handleMouseLeave);\n };\n }, [handleMouseLeave]);\n\n const iconSize = props.size === 'sm' ? 16 : 24;\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n\n return (\n <>\n <Button\n ref={triggerRef}\n {...mergeProps(triggerProps, props)}\n onKeyDown={handleKeyDown}\n onHover={() => trigger === 'hover' && handleTrigger()}\n onPress={() => trigger === 'click' && handleTrigger()}\n >\n {leadingIcon && (\n <Button.LeadingIcon>\n {leadingIcon && { ...leadingIcon, props: { ...leadingIcon.props, width: iconSize, height: iconSize } }}\n </Button.LeadingIcon>\n )}\n {trailingIcon && (\n <Button.TrailingIcon>\n {trailingIcon && { ...trailingIcon, props: { ...trailingIcon.props, width: iconSize, height: iconSize } }}\n </Button.TrailingIcon>\n )}\n </Button>\n {isOpen && (\n <Overlay {...overlayProps}>\n <div {...underlayProps} className=\"underlay\" />\n <div\n ref={contentRef}\n {...contentProps}\n className={cx(\n vstack({\n bg: 'surface.primary',\n p: 3,\n gap: 0,\n color: 'text.secondary',\n borderWidth: 1,\n borderColor: 'neutral.secondary',\n borderRadius: 'xl',\n boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n maxW: 52,\n alignItems: 'start',\n }),\n contentProps.className,\n )}\n >\n {slots.get(PopoverContent)}\n </div>\n </Overlay>\n )}\n </>\n );\n });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n LeadingIcon,\n TrailingIcon,\n Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","DEFAULT_TRIGGER","PopoverContent","createSlot","children","_jsx","_Fragment","LeadingIcon","props","Center","Children","child","cloneElement","TrailingIcon","PopoverHost","createHost","slots","isSelected","setOpen","useToggleState","isOpen","safeZoneRadius","trigger","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","handleTrigger","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","iconSize","leadingIcon","trailingIcon","_jsxs","Button","Overlay","cx","vstack","Popover"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as l}from"react/jsx-runtime";import{text as m}from"../../recipes/text.js";import{css as r}from"@styled/css";import{forwardRef as c}from"react";const i={color:"text.primary"},p=c(({children:e,styles:t={},scale:s},a)=>l("h1",{ref:a,className:r({textStyle:s?"h1-scaled":"h1",textWrap:"pretty",...i}),style:t,children:e})),x=c(({children:e,styles:t={},scale:s},a)=>l("h2",{ref:a,className:r({textStyle:s?"h2-scaled":"h2",textWrap:"pretty",...i}),style:t,children:e})),o=c(({children:e,styles:t={},scale:s},a)=>l("h3",{ref:a,className:r({textStyle:s?"h3-scaled":"h3",textWrap:"pretty",...i}),style:t,children:e})),N=c(({children:e,styles:t={},scale:s},a)=>l("h4",{ref:a,className:r({textStyle:s?"h4-scaled":"h4",textWrap:"pretty",...i}),style:t,children:e})),f=c(({children:e,styles:t={},scale:s},a)=>l("h5",{ref:a,className:r({textStyle:s?"h5-scaled":"h5",textWrap:"pretty",...i}),style:t,children:e})),H=c(({children:e,styles:t={},scale:s},a)=>l("h6",{ref:a,className:r({textStyle:s?"h6-scaled":"h6",textWrap:"pretty",color:"text.secondary"}),style:t,children:e})),T=c(({children:e,styles:t={},variant:s="text",size:a="md",truncate:n=!1},y)=>{const d=m({mono:!0,variant:s,size:a});return l("span",{ref:y,className:`${d} ${r({truncate:n})}`,style:t,children:e})}),u=c(({children:e,styles:t={},scale:s,inline:a=!1,variant:n="text",size:y="md",truncate:d=!1},S)=>{const W=m({variant:n,size:y,scale:s}),h={ref:S,className:`${W} ${r({truncate:d})}`,style:t};return a?l("span",{...h,children:e}):l("p",{...h,children:e})}),v=Object.assign(u,{H1:p,H2:x,H3:o,H4:N,H5:f,H6:H,Mono:T});u.displayName="Text",p.displayName="Text.H1",x.displayName="Text.H2",o.displayName="Text.H3",N.displayName="Text.H4",f.displayName="Text.H5",H.displayName="Text.H6",T.displayName="Text.Mono";var $=v;export{$ as default};
|
|
2
2
|
//# sourceMappingURL=text.js.map
|
|
@@ -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
|
|
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":"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"}
|