@magiclabs/ui-components 1.28.3 → 1.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/containers/card.js +1 -1
- package/dist/cjs/components/containers/card.js.map +1 -1
- package/dist/cjs/components/external/paypal-button.js +1 -1
- package/dist/cjs/components/external/paypal-button.js.map +1 -1
- package/dist/cjs/components/feedback/animated-checkmark.js +2 -0
- package/dist/cjs/components/feedback/animated-checkmark.js.map +1 -0
- package/dist/cjs/components/feedback/animated-spinner.js +2 -0
- package/dist/cjs/components/feedback/animated-spinner.js.map +1 -0
- package/dist/cjs/components/list-items/transaction-row.js +1 -1
- package/dist/cjs/components/list-items/transaction-row.js.map +1 -1
- package/dist/cjs/components/primitives/button.js +1 -1
- package/dist/cjs/components/primitives/button.js.map +1 -1
- 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/sections/verify-pincode.js +1 -1
- package/dist/cjs/components/sections/verify-pincode.js.map +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/styles/keyframes.js +1 -1
- package/dist/cjs/styles/keyframes.js.map +1 -1
- package/dist/es/components/containers/card.js +1 -1
- package/dist/es/components/external/paypal-button.js +1 -1
- package/dist/es/components/feedback/animated-checkmark.js +2 -0
- package/dist/es/components/feedback/animated-checkmark.js.map +1 -0
- package/dist/es/components/feedback/animated-spinner.js +2 -0
- package/dist/es/components/feedback/animated-spinner.js.map +1 -0
- package/dist/es/components/list-items/transaction-row.js +1 -1
- package/dist/es/components/primitives/button.js +1 -1
- 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/sections/verify-pincode.js +1 -1
- package/dist/es/components/sections/verify-pincode.js.map +1 -1
- package/dist/es/index.js +1 -1
- package/dist/es/styles/keyframes.js +1 -1
- package/dist/es/styles/keyframes.js.map +1 -1
- package/dist/panda.buildinfo.json +1 -1
- package/dist/types/components/feedback/animated-checkmark.d.ts +8 -0
- package/dist/types/components/feedback/animated-checkmark.d.ts.map +1 -0
- package/dist/types/components/feedback/animated-spinner.d.ts +8 -0
- package/dist/types/components/feedback/animated-spinner.d.ts.map +1 -0
- package/dist/types/components/feedback/index.d.ts +4 -0
- package/dist/types/components/feedback/index.d.ts.map +1 -1
- package/dist/types/styles/keyframes.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var v=require("react"),s=require("@styled/jsx"),d=require("@styled/css");require("../feedback/callout.js");var j=require("../feedback/loading-spinner.js");require("../feedback/progress-bar.js"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js"),require("../primitives/text.js"),require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var m=require("../../recipes/card.js");const t=v.forwardRef(({children:i,className:a,id:u,asButton:r,stack:l,onClick:o,validating:n,...x},c)=>{const q=m.card({asButton:r,validating:n,...x});return l||r?e.jsx(s.Flex,{id:u,className:d.cx(q,a),flexDirection:"column",role:r?"button":"none",onClick:r?o:void 0,ref:c,children:n?e.jsx(j.LoadingSpinner,{neutral:!0}):i}):e.jsx(s.Box,{id:u,className:d.cx(q,a),ref:c,children:i})});t.displayName="Card",exports.Card=t;
|
|
2
2
|
//# sourceMappingURL=card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sources":["../../../../src/components/containers/card.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { card } from '@recipes/card';\nimport { cx } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { ComponentProps, forwardRef } from 'react';\n\nexport interface CardProps extends ComponentProps<'div'> {\n className?: string;\n id?: string;\n alt?: boolean;\n asButton?: boolean;\n alignment?: 'center' | 'left' | 'right';\n expand?: boolean;\n gapType?: 'none' | 'sm' | 'md' | 'lg';\n heavyShadow?: boolean;\n paddingType?: 'none' | 'sm' | 'md' | 'lg';\n stack?: boolean;\n widthMax?: boolean;\n disabled?: boolean;\n validating?: boolean;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n ({ children, className, id, asButton, stack, onClick, validating, ...props }, ref) => {\n const classStyles = card({ asButton, validating, ...props });\n\n return stack || asButton ? (\n <Flex\n id={id}\n className={cx(classStyles, className)}\n flexDirection=\"column\"\n role={asButton ? 'button' : 'none'}\n onClick={asButton ? onClick : undefined}\n ref={ref}\n >\n {validating ? <LoadingSpinner neutral /> : children}\n </Flex>\n ) : (\n <Box id={id} className={cx(classStyles, className)} ref={ref}>\n {children}\n </Box>\n );\n },\n);\n\nCard.displayName = 'Card';\n"],"names":["Card","forwardRef","children","className","id","asButton","stack","onClick","validating","props","ref","classStyles","card","_jsx","Flex","cx","LoadingSpinner","Box"],"mappings":"
|
|
1
|
+
{"version":3,"file":"card.js","sources":["../../../../src/components/containers/card.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { card } from '@recipes/card';\nimport { cx } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { ComponentProps, forwardRef } from 'react';\n\nexport interface CardProps extends ComponentProps<'div'> {\n className?: string;\n id?: string;\n alt?: boolean;\n asButton?: boolean;\n alignment?: 'center' | 'left' | 'right';\n expand?: boolean;\n gapType?: 'none' | 'sm' | 'md' | 'lg';\n heavyShadow?: boolean;\n paddingType?: 'none' | 'sm' | 'md' | 'lg';\n stack?: boolean;\n widthMax?: boolean;\n disabled?: boolean;\n validating?: boolean;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n ({ children, className, id, asButton, stack, onClick, validating, ...props }, ref) => {\n const classStyles = card({ asButton, validating, ...props });\n\n return stack || asButton ? (\n <Flex\n id={id}\n className={cx(classStyles, className)}\n flexDirection=\"column\"\n role={asButton ? 'button' : 'none'}\n onClick={asButton ? onClick : undefined}\n ref={ref}\n >\n {validating ? <LoadingSpinner neutral /> : children}\n </Flex>\n ) : (\n <Box id={id} className={cx(classStyles, className)} ref={ref}>\n {children}\n </Box>\n );\n },\n);\n\nCard.displayName = 'Card';\n"],"names":["Card","forwardRef","children","className","id","asButton","stack","onClick","validating","props","ref","classStyles","card","_jsx","Flex","cx","LoadingSpinner","Box"],"mappings":"2uBAsBO,MAAMA,EAAOC,EAAAA,WAClB,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAAC,EAAI,SAAAC,EAAU,MAAAC,EAAO,QAAAC,EAAS,WAAAC,EAAY,GAAGC,CAAO,EAAEC,IAAO,CACnF,MAAMC,EAAcC,EAAAA,KAAK,CAAE,SAAAP,EAAU,WAAAG,EAAY,GAAGC,CAAK,CAAE,EAE3D,OAAOH,GAASD,EACdQ,EAAAA,IAACC,EAAI,KAAA,CACH,GAAIV,EACJ,UAAWW,EAAAA,GAAGJ,EAAaR,CAAS,EACpC,cAAc,SACd,KAAME,EAAW,SAAW,OAC5B,QAASA,EAAWE,EAAU,OAC9B,IAAKG,WAEJF,EAAaK,MAACG,EAAAA,eAAe,CAAA,aAAad,CAAQ,CAAA,EAGrDW,MAACI,EAAAA,KAAI,GAAIb,EAAI,UAAWW,KAAGJ,EAAaR,CAAS,EAAG,IAAKO,EACtD,SAAAR,CACG,CAAA,CAEV,CAAC,EAGHF,EAAK,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("../feedback/callout.js");var
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),b=require("@styled/tokens"),n=require("react"),s=require("@styled/jsx"),o=require("@styled/css");require("../feedback/callout.js");var p=require("../feedback/loading-spinner.js");require("../feedback/progress-bar.js"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var g=require("../primitives/text.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var h=require("../logos/logo-pay-pal-wordmark.js"),m=require("../../recipes/button.js"),r=require("react-aria");const l=n.forwardRef((i,d)=>{const{disabled:t,expand:c,validating:u}=i,q=m.button({expand:c,validating:u}),f=n.useRef(null),a=d||f,{buttonProps:v}=r.useButton({...i,isDisabled:t??!1},a),{isFocusVisible:x,focusProps:P}=r.useFocusRing();return e.jsx("button",{className:o.cx(q.button,o.css({bg:"#ffc439!important",outlineColor:"#ffc439!important",outlineWidth:"thick",outlineOffset:.5,outlineStyle:x?"solid":"none"})),ref:a,...r.mergeProps(v,P),"aria-disabled":t,children:u?e.jsx(p.LoadingSpinner,{size:24,strokeWidth:2.5,inverted:!0}):e.jsxs(s.HStack,{w:"full",gap:1,justifyContent:"center",children:[e.jsx(g.default,{fontWeight:"semibold",styles:{color:b.token("colors.ink.90")},children:"Pay with"}),e.jsx(s.Box,{mt:.5,children:e.jsx(h.default,{width:60})})]})})});l.displayName="PayPalButton",exports.PayPalButton=l;
|
|
2
2
|
//# sourceMappingURL=paypal-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paypal-button.js","sources":["../../../../src/components/external/paypal-button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { LogoPayPalWordmark } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { button } from '@recipes/button';\nimport { css, cx } from '@styled/css';\nimport { Box, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport React, { forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, type AriaButtonProps } from 'react-aria';\n\nexport interface PayPalButtonProps extends AriaButtonProps {\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n}\n\nexport const PayPalButton = forwardRef<HTMLButtonElement, PayPalButtonProps>((props, forwardedRef) => {\n const { disabled, expand, validating } = props;\n\n const classes = button({ expand, validating });\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <button\n className={cx(\n classes.button,\n css({\n bg: '#ffc439!important',\n outlineColor: '#ffc439!important',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n }),\n )}\n ref={ref}\n {...mergeProps(buttonProps, focusProps)}\n aria-disabled={disabled}\n >\n {validating ? (\n <LoadingSpinner size={24} strokeWidth={2.5} inverted />\n ) : (\n <HStack w=\"full\" gap={1} justifyContent=\"center\">\n <Text fontWeight=\"semibold\" styles={{ color: token('colors.ink.90') }}>\n Pay with\n </Text>\n <Box mt={0.5}>\n <LogoPayPalWordmark width={60} />\n </Box>\n </HStack>\n )}\n </button>\n );\n});\n\nPayPalButton.displayName = 'PayPalButton';\n"],"names":["PayPalButton","forwardRef","props","forwardedRef","disabled","expand","validating","classes","button","internalRef","useRef","ref","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","_jsx","cx","css","mergeProps","LoadingSpinner","_jsxs","HStack","Text","token","Box","LogoPayPalWordmark"],"mappings":"
|
|
1
|
+
{"version":3,"file":"paypal-button.js","sources":["../../../../src/components/external/paypal-button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { LogoPayPalWordmark } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { button } from '@recipes/button';\nimport { css, cx } from '@styled/css';\nimport { Box, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport React, { forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, type AriaButtonProps } from 'react-aria';\n\nexport interface PayPalButtonProps extends AriaButtonProps {\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n}\n\nexport const PayPalButton = forwardRef<HTMLButtonElement, PayPalButtonProps>((props, forwardedRef) => {\n const { disabled, expand, validating } = props;\n\n const classes = button({ expand, validating });\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <button\n className={cx(\n classes.button,\n css({\n bg: '#ffc439!important',\n outlineColor: '#ffc439!important',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n }),\n )}\n ref={ref}\n {...mergeProps(buttonProps, focusProps)}\n aria-disabled={disabled}\n >\n {validating ? (\n <LoadingSpinner size={24} strokeWidth={2.5} inverted />\n ) : (\n <HStack w=\"full\" gap={1} justifyContent=\"center\">\n <Text fontWeight=\"semibold\" styles={{ color: token('colors.ink.90') }}>\n Pay with\n </Text>\n <Box mt={0.5}>\n <LogoPayPalWordmark width={60} />\n </Box>\n </HStack>\n )}\n </button>\n );\n});\n\nPayPalButton.displayName = 'PayPalButton';\n"],"names":["PayPalButton","forwardRef","props","forwardedRef","disabled","expand","validating","classes","button","internalRef","useRef","ref","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","_jsx","cx","css","mergeProps","LoadingSpinner","_jsxs","HStack","Text","token","Box","LogoPayPalWordmark"],"mappings":"wzBAgBO,MAAMA,EAAeC,EAAiD,WAAA,CAACC,EAAOC,IAAgB,CACnG,KAAM,CAAE,SAAAC,EAAU,OAAAC,EAAQ,WAAAC,CAAU,EAAKJ,EAEnCK,EAAUC,EAAAA,OAAO,CAAE,OAAAH,EAAQ,WAAAC,CAAY,CAAA,EAEvCG,EAAcC,SAAO,IAAI,EACzBC,EAAMR,GAAgBM,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAAA,UACtB,CAAE,GAAGX,EAAO,WAAYE,GAAY,EAAO,EAC3CO,CAAyC,EAGrC,CAAE,eAAAG,EAAgB,WAAAC,GAAeC,iBAEvC,OACEC,MACE,SAAA,CAAA,UAAWC,EAAAA,GACTX,EAAQ,OACRY,EAAAA,IAAI,CACF,GAAI,oBACJ,aAAc,oBACd,aAAc,QACd,cAAe,GACf,aAAcL,EAAiB,QAAU,MAC1C,CAAA,CAAC,EAEJ,IAAKH,EAAG,GACJS,EAAAA,WAAWR,EAAaG,CAAU,kBACvBX,EAAQ,SAEtBE,EACCW,EAAAA,IAACI,iBAAe,CAAA,KAAM,GAAI,YAAa,IAAK,SAAQ,EAAA,CAAA,EAEpDC,OAACC,EAAO,OAAA,CAAA,EAAE,OAAO,IAAK,EAAG,eAAe,SACtC,SAAA,CAAAN,EAAAA,IAACO,EAAAA,QAAK,CAAA,WAAW,WAAW,OAAQ,CAAE,MAAOC,EAAAA,MAAM,eAAe,GAE3D,SAAA,UAAA,CAAA,EACPR,EAAAA,IAACS,EAAAA,IAAG,CAAC,GAAI,YACPT,EAACU,IAAAA,EAAAA,SAAmB,MAAO,EAAM,CAAA,CAAA,CAAA,CAC7B,GAET,CAAA,CAGP,CAAC,EAED3B,EAAa,YAAc"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var r=require("react/jsx-runtime"),l=require("@styled/tokens"),m=require("../icons/ico-checkmark.js"),h=require("../../hooks/useDisplayState.js"),k=require("@styled/jsx");const d={lg:{circleSize:14,checkmarkSize:30},sm:{circleSize:5,checkmarkSize:12}},u=({size:n="lg",isVisible:e=!0,onShown:a=()=>{},onHidden:o=()=>{}})=>{const{circleSize:s,checkmarkSize:i}=d[n],{onHide:t,onShow:c}=h.useDisplayState({animate:!0,show:e,onHidden:o,onShown:a});return r.jsx(k.Circle,{size:s,bg:"positive.lightest",animation:e?"popIn 150ms":"popOut 150ms",animationFillMode:"forwards",onAnimationEnd:e?c:t,children:r.jsx(m.default,{width:i,height:i,color:l.token("colors.positive.base")})})};exports.AnimatedCheckmark=u;
|
|
2
|
+
//# sourceMappingURL=animated-checkmark.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"animated-checkmark.js","sources":["../../../../src/components/feedback/animated-checkmark.tsx"],"sourcesContent":["import { IcoCheckmark } from '@components/icons';\nimport { useDisplayState } from '@hooks/useDisplayState';\nimport { Circle } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nexport interface AnimatedCheckmarkProps {\n size?: 'lg' | 'sm';\n isVisible?: boolean;\n onShown?: () => void;\n onHidden?: () => void;\n}\n\nconst checkmarkSpecs = {\n lg: {\n circleSize: 14,\n checkmarkSize: 30,\n },\n sm: {\n circleSize: 5,\n checkmarkSize: 12,\n },\n};\n\nexport const AnimatedCheckmark = ({\n size = 'lg',\n isVisible = true,\n onShown = () => {},\n onHidden = () => {},\n}: AnimatedCheckmarkProps) => {\n const { circleSize, checkmarkSize } = checkmarkSpecs[size];\n const { onHide, onShow } = useDisplayState({\n animate: true,\n show: isVisible,\n onHidden,\n onShown,\n });\n\n return (\n <Circle\n size={circleSize}\n bg=\"positive.lightest\"\n animation={isVisible ? 'popIn 150ms' : 'popOut 150ms'}\n animationFillMode=\"forwards\"\n onAnimationEnd={isVisible ? onShow : onHide}\n >\n <IcoCheckmark width={checkmarkSize} height={checkmarkSize} color={token('colors.positive.base')} />\n </Circle>\n );\n};\n"],"names":["checkmarkSpecs","AnimatedCheckmark","size","isVisible","onShown","onHidden","circleSize","checkmarkSize","onHide","onShow","useDisplayState","_jsx","Circle","IcoCheckmark","token"],"mappings":"wLAYA,MAAMA,EAAiB,CACrB,GAAI,CACF,WAAY,GACZ,cAAe,EAChB,EACD,GAAI,CACF,WAAY,EACZ,cAAe,EAChB,GAGUC,EAAoB,CAAC,CAChC,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,QAAAC,EAAU,IAAO,CAAA,EACjB,SAAAC,EAAW,IAAK,CAAA,CAAG,IACQ,CAC3B,KAAM,CAAE,WAAAC,EAAY,cAAAC,CAAa,EAAKP,EAAeE,CAAI,EACnD,CAAE,OAAAM,EAAQ,OAAAC,CAAQ,EAAGC,EAAAA,gBAAgB,CACzC,QAAS,GACT,KAAMP,EACN,SAAAE,EACA,QAAAD,CACD,CAAA,EAED,OACEO,EAAAA,IAACC,SAAM,CACL,KAAMN,EACN,GAAG,oBACH,UAAWH,EAAY,cAAgB,eACvC,kBAAkB,WAClB,eAAgBA,EAAYM,EAASD,EAAM,SAE3CG,EAACE,IAAAA,EAAAA,QAAa,CAAA,MAAON,EAAe,OAAQA,EAAe,MAAOO,QAAM,sBAAsB,CAAC,CAAA,CACxF,CAAA,CAEb"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),u=require("../../hooks/useDisplayState.js"),t=require("@styled/css"),p=require("@styled/jsx");const h={lg:{size:56,radius:28,strokeWidth:5,animation:"animateSpinnerLarge"},sm:{size:20,radius:10,strokeWidth:3,animation:"animateSpinnerSmall"}},w=({size:r="lg",isVisible:n=!0,onShown:a=()=>{},onHidden:o=()=>{}})=>{const{size:i,radius:m,strokeWidth:s,animation:d}=h[r],{onHide:l,onShow:c}=u.useDisplayState({animate:!0,show:n,onHidden:o,onShown:a});return e.jsx(p.Center,{inline:!0,animation:n?"popIn 150ms":"popOut 150ms",animationFillMode:"forwards",onAnimationEnd:n?c:l,children:e.jsx("svg",{width:i,height:i,viewBox:`0 0 ${i} ${i}`,fill:"none",stroke:"none",xmlns:"http://www.w3.org/2000/svg",className:t.css({animation:"spin 1.5s linear infinite"}),children:e.jsx("circle",{className:t.css({stroke:"text.primary",transformOrigin:"center center"}),style:{animation:`${d} 2s ease-in-out infinite`},cx:"50%",cy:"50%",r:m-s/2,strokeLinecap:"round",strokeWidth:s})})})};exports.AnimatedSpinner=w;
|
|
2
|
+
//# sourceMappingURL=animated-spinner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"animated-spinner.js","sources":["../../../../src/components/feedback/animated-spinner.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { css } from '@styled/css';\nimport { Center } from '@styled/jsx';\n\nexport interface AnimatedSpinnerProps {\n size?: 'lg' | 'sm';\n isVisible?: boolean;\n onShown?: () => void;\n onHidden?: () => void;\n}\n\nconst spinnerSpecs = {\n lg: {\n size: 56,\n radius: 28,\n strokeWidth: 5,\n animation: 'animateSpinnerLarge',\n },\n sm: {\n size: 20,\n radius: 10,\n strokeWidth: 3,\n animation: 'animateSpinnerSmall',\n },\n};\n\nexport const AnimatedSpinner = ({\n size = 'lg',\n isVisible = true,\n onShown = () => {},\n onHidden = () => {},\n}: AnimatedSpinnerProps) => {\n const { size: spinnerSize, radius, strokeWidth, animation } = spinnerSpecs[size];\n const { onHide, onShow } = useDisplayState({\n animate: true,\n show: isVisible,\n onHidden,\n onShown,\n });\n\n return (\n <Center\n inline\n animation={isVisible ? 'popIn 150ms' : 'popOut 150ms'}\n animationFillMode=\"forwards\"\n onAnimationEnd={isVisible ? onShow : onHide}\n >\n <svg\n width={spinnerSize}\n height={spinnerSize}\n viewBox={`0 0 ${spinnerSize} ${spinnerSize}`}\n fill=\"none\"\n stroke=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={css({ animation: 'spin 1.5s linear infinite' })}\n >\n <circle\n className={css({\n stroke: 'text.primary',\n transformOrigin: 'center center',\n })}\n style={{ animation: `${animation} 2s ease-in-out infinite` }}\n cx=\"50%\"\n cy=\"50%\"\n r={radius - strokeWidth / 2}\n strokeLinecap=\"round\"\n strokeWidth={strokeWidth}\n />\n </svg>\n </Center>\n );\n};\n"],"names":["spinnerSpecs","AnimatedSpinner","size","isVisible","onShown","onHidden","spinnerSize","radius","strokeWidth","animation","onHide","onShow","useDisplayState","_jsx","Center","css"],"mappings":"8IAWA,MAAMA,EAAe,CACnB,GAAI,CACF,KAAM,GACN,OAAQ,GACR,YAAa,EACb,UAAW,qBACZ,EACD,GAAI,CACF,KAAM,GACN,OAAQ,GACR,YAAa,EACb,UAAW,qBACZ,GAGUC,EAAkB,CAAC,CAC9B,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,QAAAC,EAAU,IAAO,CAAA,EACjB,SAAAC,EAAW,IAAK,CAAG,CAAA,IACM,CACzB,KAAM,CAAE,KAAMC,EAAa,OAAAC,EAAQ,YAAAC,EAAa,UAAAC,GAAcT,EAAaE,CAAI,EACzE,CAAE,OAAAQ,EAAQ,OAAAC,CAAQ,EAAGC,EAAAA,gBAAgB,CACzC,QAAS,GACT,KAAMT,EACN,SAAAE,EACA,QAAAD,CACD,CAAA,EAED,OACES,EAAAA,IAACC,EAAAA,OACC,CAAA,UACA,UAAWX,EAAY,cAAgB,eACvC,kBAAkB,WAClB,eAAgBA,EAAYQ,EAASD,WAErCG,EACE,IAAA,MAAA,CAAA,MAAOP,EACP,OAAQA,EACR,QAAS,OAAOA,CAAW,IAAIA,CAAW,GAC1C,KAAK,OACL,OAAO,OACP,MAAM,6BACN,UAAWS,MAAI,CAAE,UAAW,4BAA6B,EAAC,SAE1DF,EAAAA,cACE,UAAWE,EAAI,IAAA,CACb,OAAQ,eACR,gBAAiB,eAClB,CAAA,EACD,MAAO,CAAE,UAAW,GAAGN,CAAS,0BAA0B,EAC1D,GAAG,MACH,GAAG,MACH,EAAGF,EAASC,EAAc,EAC1B,cAAc,QACd,YAAaA,GAEX,CAAA,CAAA,CAAA,CAGZ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime")
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("@styled/tokens"),H=require("../icons/ico-arrow-down.js"),P=require("../icons/ico-arrow-up.js"),A=require("../icons/ico-lightning-fill.js"),I=require("../icons/ico-lock-unlocked-fill.js"),l=require("react"),i=require("@styled/jsx");require("@styled/css"),require("../feedback/callout.js"),require("../feedback/progress-bar.js");var q=require("../feedback/skeleton.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var a=require("../primitives/text.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var L=require("@styled/patterns"),g=require("create-slots"),c=require("react-aria");const N={send:{title:"Send",primaryTextColor:r.token("colors.text.primary"),secondaryTextColor:r.token("colors.text.secondary"),icon:P.default,iconColor:r.token("colors.negative.darker"),skeletonWidth:"89px"},receive:{title:"Receive",primaryTextColor:r.token("colors.positive.base"),secondaryTextColor:`${r.token("colors.positive.lighter")}`,icon:H.default,iconColor:r.token("colors.positive.base"),skeletonWidth:"89px"},networkFee:{title:"Network Fee",primaryTextColor:r.token("colors.text.primary"),secondaryTextColor:r.token("colors.text.secondary"),icon:A.default,iconColor:r.token("colors.brand.base"),skeletonWidth:"54px"},spendingCap:{title:"Spending Cap",primaryTextColor:r.token("colors.warning.base"),secondaryTextColor:r.token("colors.warning.base"),icon:I.default,iconColor:r.token("colors.warning.base"),skeletonWidth:"89px"}},y=g.createSlot(({children:n,...t})=>e.jsx(i.Center,{children:l.Children.map(n,s=>l.cloneElement(s,t))})),O=n=>{const{variant:t,primaryText:s,secondaryText:u,children:C,onPress:d,loading:p,showTitle:v=!0}=n,{title:w,primaryTextColor:x,secondaryTextColor:f,icon:b,iconColor:j,skeletonWidth:h}=N[t],m=t==="send"||t==="networkFee",k=l.useRef(null),T=l.useCallback(()=>{d?.()},[d]),{buttonProps:S}=c.useButton({...n,onPress:T},k),{isFocusVisible:F,focusProps:W}=c.useFocusRing();return g.createHost(C,R=>{const o=R.get(y);return e.jsxs(i.HStack,{w:"full",justify:"space-between",children:[e.jsxs(i.HStack,{gap:2,children:[e.jsx(b,{width:16,height:16,color:j}),v&&e.jsx(a.default,{size:"sm",fontWeight:"medium",children:w})]}),e.jsxs(i.HStack,{gap:4,children:[u&&e.jsx(a.default,{styles:{color:f},children:u}),m?e.jsxs("button",{...c.mergeProps(S,W),ref:k,className:L.hstack({px:4,py:2.5,gap:3,rounded:"xl",bg:"surface.secondary",outlineColor:"brand.base",outlineStyle:F?"solid":"none",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer"}),children:[p?e.jsx(q.Skeleton,{width:h}):e.jsx(a.default,{styles:{color:x},children:s}),o&&{...o,props:{...o.props,width:32,height:32}}]}):e.jsxs(i.HStack,{gap:3,children:[p?e.jsx(q.Skeleton,{width:h}):e.jsx(a.default,{styles:{color:x},children:s}),o&&{...o,props:{...o.props,width:32,height:32}}]})]})]})})},U=Object.assign(O,{TokenIcon:y});exports.TransactionRow=U;
|
|
2
2
|
//# sourceMappingURL=transaction-row.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transaction-row.js","sources":["../../../../src/components/list-items/transaction-row.tsx"],"sourcesContent":["import { Skeleton } from '@components/feedback';\nimport { IcoArrowDown, IcoArrowUp, IcoLightningFill, IcoLockUnlockedFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { Center, HStack } from '@styled/jsx';\nimport { hstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, ReactNode, useCallback, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TransactionRowProps {\n variant: 'send' | 'receive' | 'networkFee' | 'spendingCap';\n primaryText: string;\n secondaryText?: string;\n showTitle?: boolean;\n children: ReactNode;\n onPress?: () => void;\n loading?: boolean;\n}\n\nconst variants = {\n send: {\n title: 'Send',\n primaryTextColor: token('colors.text.primary'),\n secondaryTextColor: token('colors.text.secondary'),\n icon: IcoArrowUp,\n iconColor: token('colors.negative.darker'),\n skeletonWidth: '89px',\n },\n receive: {\n title: 'Receive',\n primaryTextColor: token('colors.positive.base'),\n secondaryTextColor: `${token('colors.positive.lighter')}`,\n icon: IcoArrowDown,\n iconColor: token('colors.positive.base'),\n skeletonWidth: '89px',\n },\n networkFee: {\n title: 'Network Fee',\n primaryTextColor: token('colors.text.primary'),\n secondaryTextColor: token('colors.text.secondary'),\n icon: IcoLightningFill,\n iconColor: token('colors.brand.base'),\n skeletonWidth: '54px',\n },\n spendingCap: {\n title: 'Spending Cap',\n primaryTextColor: token('colors.warning.base'),\n secondaryTextColor: token('colors.warning.base'),\n icon: IcoLockUnlockedFill,\n iconColor: token('colors.warning.base'),\n skeletonWidth: '89px',\n },\n};\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst TransactionRowBase = (props: TransactionRowProps) => {\n const { variant, primaryText, secondaryText, children, onPress, loading, showTitle = true } = props;\n const { title, primaryTextColor, secondaryTextColor, icon: Icon, iconColor, skeletonWidth } = variants[variant];\n const isEditable = variant === 'send' || variant === 'networkFee';\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n return (\n <HStack w=\"full\" justify=\"space-between\">\n <HStack gap={2}>\n <Icon width={16} height={16} color={iconColor} />\n {showTitle && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {title}\n </Text>\n )}\n </HStack>\n\n <HStack gap={4}>\n {secondaryText && <Text styles={{ color: secondaryTextColor }}>{secondaryText}</Text>}\n {isEditable ? (\n <button\n {...mergeProps(buttonProps, focusProps)}\n ref={ref}\n className={hstack({\n px: 4,\n py: 2.5,\n gap: 3,\n rounded: 'xl',\n bg: 'surface.secondary',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n cursor: 'pointer',\n })}\n >\n {loading ? (\n <Skeleton width={skeletonWidth} />\n ) : (\n <Text styles={{ color: primaryTextColor }}>{primaryText}</Text>\n )}\n {tokenIcon && {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 32,\n height: 32,\n },\n }}\n </button>\n ) : (\n <HStack gap={3}>\n {loading ? (\n <Skeleton width={skeletonWidth} />\n ) : (\n <Text styles={{ color: primaryTextColor }}>{primaryText}</Text>\n )}\n {tokenIcon && {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 32,\n height: 32,\n },\n }}\n </HStack>\n )}\n </HStack>\n </HStack>\n );\n });\n};\n\nexport const TransactionRow = Object.assign(TransactionRowBase, { TokenIcon });\n"],"names":["variants","token","IcoArrowUp","IcoArrowDown","IcoLightningFill","IcoLockUnlockedFill","TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TransactionRowBase","variant","primaryText","secondaryText","onPress","loading","showTitle","title","primaryTextColor","secondaryTextColor","Icon","iconColor","skeletonWidth","isEditable","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","tokenIcon","_jsxs","HStack","Text","mergeProps","hstack","Skeleton","TransactionRow"],"mappings":"
|
|
1
|
+
{"version":3,"file":"transaction-row.js","sources":["../../../../src/components/list-items/transaction-row.tsx"],"sourcesContent":["import { Skeleton } from '@components/feedback';\nimport { IcoArrowDown, IcoArrowUp, IcoLightningFill, IcoLockUnlockedFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { Center, HStack } from '@styled/jsx';\nimport { hstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, ReactNode, useCallback, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TransactionRowProps {\n variant: 'send' | 'receive' | 'networkFee' | 'spendingCap';\n primaryText: string;\n secondaryText?: string;\n showTitle?: boolean;\n children: ReactNode;\n onPress?: () => void;\n loading?: boolean;\n}\n\nconst variants = {\n send: {\n title: 'Send',\n primaryTextColor: token('colors.text.primary'),\n secondaryTextColor: token('colors.text.secondary'),\n icon: IcoArrowUp,\n iconColor: token('colors.negative.darker'),\n skeletonWidth: '89px',\n },\n receive: {\n title: 'Receive',\n primaryTextColor: token('colors.positive.base'),\n secondaryTextColor: `${token('colors.positive.lighter')}`,\n icon: IcoArrowDown,\n iconColor: token('colors.positive.base'),\n skeletonWidth: '89px',\n },\n networkFee: {\n title: 'Network Fee',\n primaryTextColor: token('colors.text.primary'),\n secondaryTextColor: token('colors.text.secondary'),\n icon: IcoLightningFill,\n iconColor: token('colors.brand.base'),\n skeletonWidth: '54px',\n },\n spendingCap: {\n title: 'Spending Cap',\n primaryTextColor: token('colors.warning.base'),\n secondaryTextColor: token('colors.warning.base'),\n icon: IcoLockUnlockedFill,\n iconColor: token('colors.warning.base'),\n skeletonWidth: '89px',\n },\n};\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst TransactionRowBase = (props: TransactionRowProps) => {\n const { variant, primaryText, secondaryText, children, onPress, loading, showTitle = true } = props;\n const { title, primaryTextColor, secondaryTextColor, icon: Icon, iconColor, skeletonWidth } = variants[variant];\n const isEditable = variant === 'send' || variant === 'networkFee';\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n return (\n <HStack w=\"full\" justify=\"space-between\">\n <HStack gap={2}>\n <Icon width={16} height={16} color={iconColor} />\n {showTitle && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {title}\n </Text>\n )}\n </HStack>\n\n <HStack gap={4}>\n {secondaryText && <Text styles={{ color: secondaryTextColor }}>{secondaryText}</Text>}\n {isEditable ? (\n <button\n {...mergeProps(buttonProps, focusProps)}\n ref={ref}\n className={hstack({\n px: 4,\n py: 2.5,\n gap: 3,\n rounded: 'xl',\n bg: 'surface.secondary',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n cursor: 'pointer',\n })}\n >\n {loading ? (\n <Skeleton width={skeletonWidth} />\n ) : (\n <Text styles={{ color: primaryTextColor }}>{primaryText}</Text>\n )}\n {tokenIcon && {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 32,\n height: 32,\n },\n }}\n </button>\n ) : (\n <HStack gap={3}>\n {loading ? (\n <Skeleton width={skeletonWidth} />\n ) : (\n <Text styles={{ color: primaryTextColor }}>{primaryText}</Text>\n )}\n {tokenIcon && {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 32,\n height: 32,\n },\n }}\n </HStack>\n )}\n </HStack>\n </HStack>\n );\n });\n};\n\nexport const TransactionRow = Object.assign(TransactionRowBase, { TokenIcon });\n"],"names":["variants","token","IcoArrowUp","IcoArrowDown","IcoLightningFill","IcoLockUnlockedFill","TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TransactionRowBase","variant","primaryText","secondaryText","onPress","loading","showTitle","title","primaryTextColor","secondaryTextColor","Icon","iconColor","skeletonWidth","isEditable","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","tokenIcon","_jsxs","HStack","Text","mergeProps","hstack","Skeleton","TransactionRow"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime");require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime");require("@styled/tokens");var o=require("react"),l=require("@styled/jsx"),I=require("@styled/css");require("../feedback/callout.js");var R=require("../feedback/loading-spinner.js");require("../feedback/progress-bar.js"),require("./checkbox.js"),require("./dropdown-selector.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js"),require("./text.js"),require("./portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var F=require("../../recipes/button.js"),v=require("create-slots"),d=require("react-aria");const f=v.createSlot(({children:r,...t})=>i.jsx(l.Flex,{alignItems:"center",justifyContent:"center",children:o.Children.map(r,e=>o.cloneElement(e,t))})),y=v.createSlot(({children:r,...t})=>i.jsx(l.Flex,{alignItems:"center",justifyContent:"center",children:o.Children.map(r,e=>o.cloneElement(e,t))})),E=({variant:r="primary",size:t="md"})=>{const e=r==="primary"||r==="negative",c=r==="neutral"||r==="tertiary";return i.jsx(R.LoadingSpinner,{size:{sm:20,md:24,lg:28}[t],strokeWidth:2.5,inverted:e,neutral:c})},S=o.forwardRef((r,t)=>{const{label:e,variant:c="primary",textStyle:w,size:p="md",disabled:m,expand:q,validating:g,iconSize:z,onHover:x}=r,u=z||(p==="sm"?16:24),s=F.button({variant:c,textStyle:w,expand:q,size:p,validating:g,iconOnly:!e}),C=o.useRef(null),h=t||C,{buttonProps:N}=d.useButton({...r,isDisabled:m??!1},h),{hoverProps:P}=d.useHover({isDisabled:m??!1}),{isFocusVisible:B,focusProps:H}=d.useFocusRing();return v.createHost(r.children,j=>{const n=j.get(f),a=j.get(y),b=u/4;return i.jsx("button",{className:I.cx(s.button,"group",!e&&s.iconContainer,B&&s.focus),ref:h,...d.mergeProps(N,P,H),"aria-disabled":m,onMouseEnter:x,onTouchStart:x,children:g?i.jsx(E,{variant:c,size:p}):i.jsxs(l.HStack,{w:"full",gap:2,justify:e&&(n||a)?"space-between":"center",children:[n&&{...n,props:{...n.props,className:n.props.color?void 0:s.icon,width:u,height:u}},a&&e&&q&&i.jsx(l.Box,{w:b}),e&&i.jsx("span",{className:s.label,children:e}),n&&e&&q&&i.jsx(l.Box,{w:b}),a&&{...a,props:{...a.props,className:a.props.color?void 0:s.icon,width:u,height:u}}]})})})}),O=Object.assign(S,{LeadingIcon:f,TrailingIcon:y});S.displayName="Button",exports.default=O;
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n label?: string;\n size?: 'sm' | 'md' | 'lg';\n variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent' | 'inverse';\n textStyle?: 'negative' | 'neutral' | 'subtle';\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n iconSize?: number;\n onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n const spinnerInverted = variant === 'primary' || variant === 'negative';\n const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n const spinnerSizes = {\n sm: 20,\n md: 24,\n lg: 28,\n };\n\n return (\n <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n const {\n label,\n variant = 'primary',\n textStyle,\n size = 'md',\n disabled,\n expand,\n validating,\n iconSize: iconSizeOverride,\n onHover,\n } = props;\n\n const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n const classes = button({ variant, textStyle, expand, size, validating, iconOnly: !label });\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n const containerSize = iconSize / 4;\n\n return (\n <button\n className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n ref={ref}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-disabled={disabled}\n onMouseEnter={onHover as MouseEventHandler}\n onTouchStart={onHover as TouchEventHandler}\n >\n {validating ? (\n <Validation variant={variant} size={size} />\n ) : (\n <HStack w=\"full\" gap={2} justify={label && (leadingIcon || trailingIcon) ? 'space-between' : 'center'}>\n {leadingIcon && {\n ...leadingIcon,\n props: {\n ...leadingIcon.props,\n className: !leadingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n },\n }}\n {trailingIcon && label && expand && <Box w={containerSize} />}\n {label && <span className={classes.label}>{label}</span>}\n {leadingIcon && label && expand && <Box w={containerSize} />}\n {trailingIcon && {\n ...trailingIcon,\n props: {\n ...trailingIcon.props,\n className: !trailingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n },\n }}\n </HStack>\n )}\n </button>\n );\n });\n});\n\nconst Button = Object.assign(Component, {\n LeadingIcon,\n TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","textStyle","disabled","expand","validating","iconSizeOverride","onHover","iconSize","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n label?: string;\n size?: 'sm' | 'md' | 'lg';\n variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent' | 'inverse';\n textStyle?: 'negative' | 'neutral' | 'subtle';\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n iconSize?: number;\n onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n const spinnerInverted = variant === 'primary' || variant === 'negative';\n const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n const spinnerSizes = {\n sm: 20,\n md: 24,\n lg: 28,\n };\n\n return (\n <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n const {\n label,\n variant = 'primary',\n textStyle,\n size = 'md',\n disabled,\n expand,\n validating,\n iconSize: iconSizeOverride,\n onHover,\n } = props;\n\n const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n const classes = button({ variant, textStyle, expand, size, validating, iconOnly: !label });\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n const containerSize = iconSize / 4;\n\n return (\n <button\n className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n ref={ref}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-disabled={disabled}\n onMouseEnter={onHover as MouseEventHandler}\n onTouchStart={onHover as TouchEventHandler}\n >\n {validating ? (\n <Validation variant={variant} size={size} />\n ) : (\n <HStack w=\"full\" gap={2} justify={label && (leadingIcon || trailingIcon) ? 'space-between' : 'center'}>\n {leadingIcon && {\n ...leadingIcon,\n props: {\n ...leadingIcon.props,\n className: !leadingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n },\n }}\n {trailingIcon && label && expand && <Box w={containerSize} />}\n {label && <span className={classes.label}>{label}</span>}\n {leadingIcon && label && expand && <Box w={containerSize} />}\n {trailingIcon && {\n ...trailingIcon,\n props: {\n ...trailingIcon.props,\n className: !trailingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n },\n }}\n </HStack>\n )}\n </button>\n );\n });\n});\n\nconst Button = Object.assign(Component, {\n LeadingIcon,\n TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","textStyle","disabled","expand","validating","iconSizeOverride","onHover","iconSize","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var t=require("react/jsx-runtime")
|
|
1
|
+
"use strict";var t=require("react/jsx-runtime"),C=require("@styled/tokens"),L=require("../icons/ico-caret-down.js"),V=require("../icons/ico-caret-up.js"),M=require("../icons/ico-checkmark.js"),T=require("../icons/ico-question-circle-fill.js"),r=require("react"),m=require("@styled/jsx"),E=require("@styled/css");require("../feedback/callout.js"),require("../feedback/progress-bar.js"),require("./button.js"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js");var j=require("./text.js");require("./portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js");var U=require("../feedback/tooltip.js"),w=require("react-aria");const z={sm:{caret:16,check:14,height:"2.625rem",top:48,width:"0.75rem",mult:2.25},md:{caret:17,check:15,height:"2.8125rem",top:52,width:"0.85rem",mult:2.25},lg:{caret:18,check:16,height:"3rem",top:55,width:"1rem",mult:2.5}},A=r.createContext({selectedOption:null,setSelectedOption:()=>{}}),P=({value:o,label:a,size:d="lg",isFocused:y})=>{const{selectedOption:h,setSelectedOption:p}=r.useContext(A),s=h?.value===o,n=z[d],k=r.useCallback(()=>{p({value:o,label:a})},[p,o,a]);return t.jsxs(m.HStack,{py:1.5,gap:2,bg:s?"brand.base":y?"brand.lightest":"",_hover:s?{}:{bg:"brand.lightest"},onClick:k,style:{paddingLeft:n.width,paddingRight:n.width},children:[t.jsx(m.Box,{style:{minWidth:n.width},children:s&&t.jsx(M.default,{width:n.check,height:n.check,color:C.token("colors.text.quaternary")})}),t.jsx(j.default,{size:d,fontWeight:"medium",fontColor:s?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:a})]})},R=({children:o,onSelect:a,label:d,placeholder:y="Select one",selectedValue:h,size:p="lg",tooltipContent:s,disabled:n,viewMax:k=5,...W})=>{const[f,v]=r.useState(!1),[l,b]=r.useState(null),x=r.useRef(null),q=r.useRef(null),u=z[p],F=k*u.mult+1,H=r.useCallback(()=>{v(e=>!e),f||(b(null),setTimeout(()=>{var e;return(e=q.current)===null||e===void 0?void 0:e.focus()}))},[f]),N=r.useCallback(e=>{a(e.value),v(!1)},[a]),S=r.useMemo(()=>{const e=r.Children.toArray(o).find(i=>i.props.value===h);return e?e.props.label:y},[h,o]),{buttonProps:B}=w.useButton({...W,isDisabled:n,onPress:H},x),{focusProps:_,isFocusVisible:I}=w.useFocusRing(),{keyboardProps:K}=w.useKeyboard({onKeyDown:e=>{var i,c;if(!f)return;let g=l;const D=r.Children.toArray(o);switch(e.key){case"ArrowUp":e.preventDefault(),l===null?b(r.Children.count(o)-1):(g=l>0?l-1:r.Children.count(o)-1,b(g));break;case"ArrowDown":e.preventDefault(),l===null?b(0):(g=l<r.Children.count(o)-1?l+1:0,b(g));break;case"Enter":if(e.preventDefault(),(i=x.current)===null||i===void 0||i.focus(),l===null)return;if(l>=0&&l<D.length){const O=D[l];O&&a(O.props.value)}break;case"Escape":v(!1),(c=x.current)===null||c===void 0||c.focus();break}}});return r.useEffect(()=>{const e=i=>{var c;!((c=q.current)===null||c===void 0)&&c.contains(i.target)||v(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(A.Provider,{value:{selectedOption:{value:h??"",label:S},setSelectedOption:N},children:t.jsxs(m.VStack,{gap:2,w:"full",alignItems:"flex-start",children:[(d||s)&&t.jsxs(m.HStack,{gap:2,pointerEvents:n?"none":"auto",opacity:n?.3:"",transition:"all linear 120ms",children:[d&&t.jsx(j.default,{size:"sm",fontWeight:"medium",children:d}),s&&t.jsx(U.default,{content:s,children:t.jsx(T.default,{className:E.css({w:4,h:4,color:"neutral.primary"})})})]}),t.jsxs("button",{className:E.css({w:"full",h:"fit-content",bg:"surface.primary",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:I?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:x,...w.mergeProps(B,_,K),children:[t.jsxs(m.HStack,{w:"full",p:4,justifyContent:"space-between",style:{height:u.height},children:[t.jsx(j.default,{truncate:!0,size:p,fontColor:h?"text.primary":"text.tertiary",children:S}),f?t.jsx(V.default,{width:u.caret,height:u.caret,color:C.token("colors.brand.base")}):t.jsx(L.default,{width:u.caret,height:u.caret,color:C.token("colors.brand.base")})]}),f&&t.jsx(m.Box,{ref:q,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${F}rem`,top:u.top},overflowY:"auto",outline:"none",zIndex:"max",children:r.Children.map(o,(e,i)=>r.cloneElement(e,{isFocused:i===l,size:p}))})]})]})})};P.displayName="DropdownOption",R.displayName="DropdownSelector",exports.DropdownOption=P,exports.DropdownSelector=R;
|
|
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 placeholder?: string;\n selectedValue?: string;\n size?: 'sm' | 'md' | 'lg';\n tooltipContent?: string;\n disabled?: boolean;\n viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\n}\n\ninterface OptionData {\n value: string;\n label: string;\n}\n\nexport interface DropdownContextType {\n selectedOption: OptionData | null;\n setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n selectedOption: null,\n setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused }: DropdownOptionProps) => {\n const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n const isSelected = selectedOption?.value === value;\n const sizeProps = SIZES[size];\n\n const handleSelectOption = useCallback(() => {\n setSelectedOption({ value, label });\n }, [setSelectedOption, value, label]);\n\n return (\n <HStack\n py={1.5}\n gap={2}\n bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <Box style={{ minWidth: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n )}\n </Box>\n <Text\n size={size}\n fontWeight=\"medium\"\n fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n styles={{ textAlign: 'left' }}\n >\n {label}\n </Text>\n </HStack>\n );\n};\n\nexport const DropdownSelector = ({\n children,\n onSelect,\n label,\n placeholder = 'Select one',\n selectedValue,\n size = 'lg',\n tooltipContent,\n disabled,\n viewMax = 5,\n ...props\n}: DropdownSelectorProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const sizeProps = SIZES[size];\n const maxHeight = viewMax * sizeProps.mult + 1;\n\n const toggleDropdown = useCallback(() => {\n setIsOpen(prev => !prev);\n if (!isOpen) {\n setFocusedIndex(null);\n setTimeout(() => dropdownRef.current?.focus());\n }\n }, [isOpen]);\n\n const handleSelect = useCallback(\n (option: OptionData) => {\n onSelect(option.value);\n setIsOpen(false);\n },\n [onSelect],\n );\n\n const selectedLabel = useMemo(() => {\n const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n const matchedChild = childElements.find(child => child.props.value === selectedValue);\n return matchedChild ? matchedChild.props.label : placeholder;\n }, [selectedValue, children]);\n\n const { buttonProps } = useButton(\n {\n ...props,\n isDisabled: disabled,\n onPress: toggleDropdown,\n },\n buttonRef,\n );\n\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: event => {\n if (!isOpen) return;\n\n let newFocusedIndex = focusedIndex;\n const childArray = Children.toArray(children);\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(Children.count(children) - 1);\n } else {\n newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'ArrowDown':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(0);\n } else {\n newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'Enter':\n event.preventDefault();\n buttonRef.current?.focus();\n if (focusedIndex === null) return;\n if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n if (selectedChild) {\n onSelect(selectedChild.props.value);\n }\n }\n break;\n case 'Escape':\n setIsOpen(false);\n buttonRef.current?.focus();\n break;\n default:\n break;\n }\n },\n });\n\n useEffect(() => {\n const handleClick = (event: MouseEvent) => {\n if (!dropdownRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClick);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n };\n }, []);\n\n return (\n <DropdownContext.Provider\n value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n >\n <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n {(label || tooltipContent) && (\n <HStack\n gap={2}\n pointerEvents={disabled ? 'none' : 'auto'}\n opacity={disabled ? 0.3 : ''}\n transition={'all linear 120ms'}\n >\n {label && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip content={tooltipContent}>\n <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n </Tooltip>\n )}\n </HStack>\n )}\n\n <button\n className={css({\n w: 'full',\n h: 'fit-content',\n bg: 'surface.primary',\n borderWidth: 'thin',\n borderColor: 'neutral.secondary',\n rounded: 'xl',\n transition: 'all linear 120ms',\n position: 'relative',\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n _hover: { borderColor: 'neutral.primary' },\n _disabled: { opacity: 0.3, pointerEvents: 'none' },\n })}\n ref={buttonRef}\n {...mergeProps(buttonProps, focusProps, keyboardProps)}\n >\n <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n <Text truncate size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n {selectedLabel}\n </Text>\n {isOpen ? (\n <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n ) : (\n <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n )}\n </HStack>\n\n {isOpen && (\n <Box\n ref={dropdownRef}\n tabIndex={-1}\n py={2}\n bg=\"surface.primary\"\n position=\"absolute\"\n w=\"full\"\n rounded=\"input\"\n boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n overflowY=\"auto\"\n outline=\"none\"\n zIndex=\"max\"\n >\n {Children.map(children, (child, index) =>\n cloneElement(child as ReactElement<DropdownOptionProps>, {\n isFocused: index === focusedIndex,\n size,\n }),\n )}\n </Box>\n )}\n </button>\n </VStack>\n </DropdownContext.Provider>\n );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n Children,\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n children: ReactNode;\n onSelect: (value: string) => void;\n label?: string;\n placeholder?: string;\n selectedValue?: string;\n size?: 'sm' | 'md' | 'lg';\n tooltipContent?: string;\n disabled?: boolean;\n viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\n}\n\ninterface OptionData {\n value: string;\n label: string;\n}\n\nexport interface DropdownContextType {\n selectedOption: OptionData | null;\n setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n selectedOption: null,\n setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused }: DropdownOptionProps) => {\n const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n const isSelected = selectedOption?.value === value;\n const sizeProps = SIZES[size];\n\n const handleSelectOption = useCallback(() => {\n setSelectedOption({ value, label });\n }, [setSelectedOption, value, label]);\n\n return (\n <HStack\n py={1.5}\n gap={2}\n bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <Box style={{ minWidth: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n )}\n </Box>\n <Text\n size={size}\n fontWeight=\"medium\"\n fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n styles={{ textAlign: 'left' }}\n >\n {label}\n </Text>\n </HStack>\n );\n};\n\nexport const DropdownSelector = ({\n children,\n onSelect,\n label,\n placeholder = 'Select one',\n selectedValue,\n size = 'lg',\n tooltipContent,\n disabled,\n viewMax = 5,\n ...props\n}: DropdownSelectorProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const sizeProps = SIZES[size];\n const maxHeight = viewMax * sizeProps.mult + 1;\n\n const toggleDropdown = useCallback(() => {\n setIsOpen(prev => !prev);\n if (!isOpen) {\n setFocusedIndex(null);\n setTimeout(() => dropdownRef.current?.focus());\n }\n }, [isOpen]);\n\n const handleSelect = useCallback(\n (option: OptionData) => {\n onSelect(option.value);\n setIsOpen(false);\n },\n [onSelect],\n );\n\n const selectedLabel = useMemo(() => {\n const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n const matchedChild = childElements.find(child => child.props.value === selectedValue);\n return matchedChild ? matchedChild.props.label : placeholder;\n }, [selectedValue, children]);\n\n const { buttonProps } = useButton(\n {\n ...props,\n isDisabled: disabled,\n onPress: toggleDropdown,\n },\n buttonRef,\n );\n\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: event => {\n if (!isOpen) return;\n\n let newFocusedIndex = focusedIndex;\n const childArray = Children.toArray(children);\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(Children.count(children) - 1);\n } else {\n newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'ArrowDown':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(0);\n } else {\n newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'Enter':\n event.preventDefault();\n buttonRef.current?.focus();\n if (focusedIndex === null) return;\n if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n if (selectedChild) {\n onSelect(selectedChild.props.value);\n }\n }\n break;\n case 'Escape':\n setIsOpen(false);\n buttonRef.current?.focus();\n break;\n default:\n break;\n }\n },\n });\n\n useEffect(() => {\n const handleClick = (event: MouseEvent) => {\n if (!dropdownRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClick);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n };\n }, []);\n\n return (\n <DropdownContext.Provider\n value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n >\n <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n {(label || tooltipContent) && (\n <HStack\n gap={2}\n pointerEvents={disabled ? 'none' : 'auto'}\n opacity={disabled ? 0.3 : ''}\n transition={'all linear 120ms'}\n >\n {label && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip content={tooltipContent}>\n <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n </Tooltip>\n )}\n </HStack>\n )}\n\n <button\n className={css({\n w: 'full',\n h: 'fit-content',\n bg: 'surface.primary',\n borderWidth: 'thin',\n borderColor: 'neutral.secondary',\n rounded: 'xl',\n transition: 'all linear 120ms',\n position: 'relative',\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n _hover: { borderColor: 'neutral.primary' },\n _disabled: { opacity: 0.3, pointerEvents: 'none' },\n })}\n ref={buttonRef}\n {...mergeProps(buttonProps, focusProps, keyboardProps)}\n >\n <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n <Text truncate size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n {selectedLabel}\n </Text>\n {isOpen ? (\n <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n ) : (\n <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n )}\n </HStack>\n\n {isOpen && (\n <Box\n ref={dropdownRef}\n tabIndex={-1}\n py={2}\n bg=\"surface.primary\"\n position=\"absolute\"\n w=\"full\"\n rounded=\"input\"\n boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n overflowY=\"auto\"\n outline=\"none\"\n zIndex=\"max\"\n >\n {Children.map(children, (child, index) =>\n cloneElement(child as ReactElement<DropdownOptionProps>, {\n isFocused: index === focusedIndex,\n size,\n }),\n )}\n </Box>\n )}\n </button>\n </VStack>\n </DropdownContext.Provider>\n );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime")
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),j=require("@styled/tokens"),m=require("../icons/ico-checkmark-circle-fill.js");require("react");var n=require("@styled/jsx");require("@styled/css"),require("../feedback/callout.js");var v=require("../feedback/loading-spinner.js");require("../feedback/progress-bar.js"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var C=require("../primitives/text.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js"),require("../inputs/phone-input.js");var k=require("../inputs/pincode-input.js");require("../inputs/text-input.js");var t=require("create-slots");const u=t.createSlot(({children:r})=>r),S=r=>{const{isPending:o,isSuccess:s,onChange:a,onComplete:c,originName:q,pinLength:d,id:l,autoFocus:g,errorMessage:i,children:h}=r,p=()=>o?e.jsx(v.LoadingSpinner,{size:36,strokeWidth:4}):s?e.jsx(m.default,{color:j.token("colors.brand.base"),width:36,height:36}):e.jsx(k.PinCodeInput,{originName:q,onChange:a,pinLength:d,onComplete:c,id:l,autoFocus:g});return t.createHost(h,x=>e.jsxs(n.VStack,{gap:3,my:3,children:[e.jsx(n.Center,{height:12,children:p()}),i&&e.jsx(C.default,{variant:"error",size:"sm",styles:{textAlign:"center"},children:i}),x.get(u)]}))},y=Object.assign(S,{RetryContent:u});exports.VerifyPincode=y;
|
|
2
2
|
//# sourceMappingURL=verify-pincode.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"verify-pincode.js","sources":["../../../../src/components/sections/verify-pincode.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { IcoCheckmarkCircleFill } from '@components/icons';\nimport { PinCodeInput, PinCodeInputProps } from '@components/inputs';\nimport { Text } from '@components/primitives';\nimport { Center, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\n\nexport interface VerifyPincodeProps extends PinCodeInputProps {\n isPending: boolean;\n isSuccess: boolean;\n errorMessage?: string;\n children?: React.ReactNode;\n}\n\nconst RetryContent = createSlot(({ children }) => {\n return children;\n});\n\nconst VerifyPincodeHost = (props: VerifyPincodeProps) => {\n const { isPending, isSuccess, onChange, onComplete, originName, pinLength, id, autoFocus, errorMessage, children } =\n props;\n\n const renderPincodeOrStatus = () => {\n if (isPending) return <LoadingSpinner size={36} strokeWidth={4} />;\n\n if (isSuccess) return <IcoCheckmarkCircleFill color={token('colors.brand.base')} width={36} height={36} />;\n\n return (\n <PinCodeInput\n originName={originName}\n onChange={onChange}\n pinLength={pinLength}\n onComplete={onComplete}\n id={id}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n />\n );\n };\n\n return createHost(children, slots => {\n return (\n <VStack gap={3} my={3}>\n <Center height={12}>{renderPincodeOrStatus()}</Center>\n {errorMessage && (\n <Text variant=\"error\" size=\"sm\" styles={{ textAlign: 'center' }}>\n {errorMessage}\n </Text>\n )}\n {slots.get(RetryContent)}\n </VStack>\n );\n });\n};\n\nexport const VerifyPincode = Object.assign(VerifyPincodeHost, { RetryContent });\n"],"names":["RetryContent","createSlot","children","VerifyPincodeHost","props","isPending","isSuccess","onChange","onComplete","originName","pinLength","id","autoFocus","errorMessage","renderPincodeOrStatus","_jsx","LoadingSpinner","IcoCheckmarkCircleFill","token","PinCodeInput","createHost","slots","_jsxs","VStack","Center","Text","VerifyPincode"],"mappings":"
|
|
1
|
+
{"version":3,"file":"verify-pincode.js","sources":["../../../../src/components/sections/verify-pincode.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { IcoCheckmarkCircleFill } from '@components/icons';\nimport { PinCodeInput, PinCodeInputProps } from '@components/inputs';\nimport { Text } from '@components/primitives';\nimport { Center, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\n\nexport interface VerifyPincodeProps extends PinCodeInputProps {\n isPending: boolean;\n isSuccess: boolean;\n errorMessage?: string;\n children?: React.ReactNode;\n}\n\nconst RetryContent = createSlot(({ children }) => {\n return children;\n});\n\nconst VerifyPincodeHost = (props: VerifyPincodeProps) => {\n const { isPending, isSuccess, onChange, onComplete, originName, pinLength, id, autoFocus, errorMessage, children } =\n props;\n\n const renderPincodeOrStatus = () => {\n if (isPending) return <LoadingSpinner size={36} strokeWidth={4} />;\n\n if (isSuccess) return <IcoCheckmarkCircleFill color={token('colors.brand.base')} width={36} height={36} />;\n\n return (\n <PinCodeInput\n originName={originName}\n onChange={onChange}\n pinLength={pinLength}\n onComplete={onComplete}\n id={id}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n />\n );\n };\n\n return createHost(children, slots => {\n return (\n <VStack gap={3} my={3}>\n <Center height={12}>{renderPincodeOrStatus()}</Center>\n {errorMessage && (\n <Text variant=\"error\" size=\"sm\" styles={{ textAlign: 'center' }}>\n {errorMessage}\n </Text>\n )}\n {slots.get(RetryContent)}\n </VStack>\n );\n });\n};\n\nexport const VerifyPincode = Object.assign(VerifyPincodeHost, { RetryContent });\n"],"names":["RetryContent","createSlot","children","VerifyPincodeHost","props","isPending","isSuccess","onChange","onComplete","originName","pinLength","id","autoFocus","errorMessage","renderPincodeOrStatus","_jsx","LoadingSpinner","IcoCheckmarkCircleFill","token","PinCodeInput","createHost","slots","_jsxs","VStack","Center","Text","VerifyPincode"],"mappings":"44BAeA,MAAMA,EAAeC,EAAAA,WAAW,CAAC,CAAE,SAAAC,CAAU,IACpCA,CACR,EAEKC,EAAqBC,GAA6B,CACtD,KAAM,CAAE,UAAAC,EAAW,UAAAC,EAAW,SAAAC,EAAU,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,GAAAC,EAAI,UAAAC,EAAW,aAAAC,EAAc,SAAAX,CAAQ,EAC9GE,EAEIU,EAAwB,IACxBT,EAAkBU,EAAAA,IAACC,iBAAc,CAAC,KAAM,GAAI,YAAa,CAAC,CAAA,EAE1DV,EAAkBS,MAACE,EAAAA,QAAsB,CAAC,MAAOC,EAAAA,MAAM,mBAAmB,EAAG,MAAO,GAAI,OAAQ,KAGlGH,MAACI,EAAY,aAAA,CACX,WAAYV,EACZ,SAAUF,EACV,UAAWG,EACX,WAAYF,EACZ,GAAIG,EAEJ,UAAWC,CACX,CAAA,EAIN,OAAOQ,EAAAA,WAAWlB,EAAUmB,GAExBC,EAAAA,KAACC,SAAO,CAAA,IAAK,EAAG,GAAI,EAClB,SAAA,CAAAR,EAAAA,IAACS,EAAAA,OAAO,CAAA,OAAQ,GAAK,SAAAV,GAAuB,CAAA,EAC3CD,GACCE,EAAAA,IAACU,WAAK,QAAQ,QAAQ,KAAK,KAAK,OAAQ,CAAE,UAAW,QAAU,EAAA,SAC5DZ,CAAY,CAAA,EAGhBQ,EAAM,IAAIrB,CAAY,CAAC,CACjB,CAAA,CAEZ,CACH,EAEa0B,EAAgB,OAAO,OAAOvB,EAAmB,CAAE,aAAAH,CAAY,CAAE"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var i=require("./components/containers/card.js"),l=require("./components/containers/content.js"),u=require("./components/containers/drawer.js"),t=require("./components/containers/footer.js"),n=require("./components/containers/header.js"),c=require("./components/containers/menu.js"),d=require("./components/containers/modal.js"),f=require("./components/containers/overlay.js"),v=require("./components/external/paypal-button.js"),q=require("./components/external/social-login-button.js"),g=require("./components/feedback/callout.js"),s=require("./components/feedback/loading-spinner.js"),L=require("./components/feedback/progress-bar.js"),M=require("./components/feedback/skeleton.js"),e=require("./components/feedback/toast-provider.js"),k=require("./components/feedback/tooltip.js"),I=require("./components/icons/ico-add.js"),m=require("./components/icons/ico-alert-circle-fill.js"),p=require("./components/icons/ico-alert-circle.js"),b=require("./components/icons/ico-arrow-down.js"),h=require("./components/icons/ico-arrow-left.js"),w=require("./components/icons/ico-arrow-right.js"),C=require("./components/icons/ico-arrow-up.js"),B=require("./components/icons/ico-asterisk-with-shield.js"),P=require("./components/icons/ico-asterisk.js"),A=require("./components/icons/ico-astronaut.js"),F=require("./components/icons/ico-atom.js"),S=require("./components/icons/ico-bank.js"),y=require("./components/icons/ico-bell-notification.js"),W=require("./components/icons/ico-bell.js"),T=require("./components/icons/ico-block.js"),D=require("./components/icons/ico-branding.js"),E=require("./components/icons/ico-caret-down.js"),G=require("./components/icons/ico-caret-left.js"),x=require("./components/icons/ico-caret-right.js"),R=require("./components/icons/ico-caret-up.js"),O=require("./components/icons/ico-checkmark-circle-fill.js"),z=require("./components/icons/ico-checkmark-circle.js"),H=require("./components/icons/ico-checkmark.js"),Z=require("./components/icons/ico-code-editor.js"),N=require("./components/icons/ico-code-sandbox.js"),U=require("./components/icons/ico-code.js"),X=require("./components/icons/ico-command-line.js"),j=require("./components/icons/ico-comment.js"),V=require("./components/icons/ico-copy.js"),Q=require("./components/icons/ico-credit-card.js"),J=require("./components/icons/ico-dedicated.js"),K=require("./components/icons/ico-diamond.js"),_=require("./components/icons/ico-dismiss-circle-fill.js"),Y=require("./components/icons/ico-dismiss-circle.js"),$=require("./components/icons/ico-dismiss.js"),ee=require("./components/icons/ico-doc.js"),re=require("./components/icons/ico-download.js"),oe=require("./components/icons/ico-edit-email.js"),ae=require("./components/icons/ico-edit.js"),ie=require("./components/icons/ico-email-fill.js"),le=require("./components/icons/ico-email-open.js"),ue=require("./components/icons/ico-email.js"),te=require("./components/icons/ico-expand.js"),ne=require("./components/icons/ico-expiration.js"),ce=require("./components/icons/ico-external-link.js"),de=require("./components/icons/ico-eye-closed.js"),fe=require("./components/icons/ico-eye-opened.js"),ve=require("./components/icons/ico-fingerprint-fill.js"),qe=require("./components/icons/ico-fingerprint.js"),ge=require("./components/icons/ico-gas.js"),se=require("./components/icons/ico-gift.js"),Le=require("./components/icons/ico-globe.js"),Me=require("./components/icons/ico-guide.js"),ke=require("./components/icons/ico-home.js"),Ie=require("./components/icons/ico-hourglass.js"),me=require("./components/icons/ico-info-circle-fill.js"),pe=require("./components/icons/ico-info-circle.js"),be=require("./components/icons/ico-kebab.js"),he=require("./components/icons/ico-key.js"),we=require("./components/icons/ico-lightbulb-fill.js"),Ce=require("./components/icons/ico-lightbulb.js"),Be=require("./components/icons/ico-lightning-fill.js"),Pe=require("./components/icons/ico-lightning.js"),Ae=require("./components/icons/ico-link.js"),Fe=require("./components/icons/ico-loading.js"),Se=require("./components/icons/ico-lock-locked.js"),ye=require("./components/icons/ico-lock-password.js"),We=require("./components/icons/ico-lock-unlocked-fill.js"),Te=require("./components/icons/ico-lock-unlocked.js"),De=require("./components/icons/ico-login-form.js"),Ee=require("./components/icons/ico-magic.js"),Ge=require("./components/icons/ico-megaphone.js"),xe=require("./components/icons/ico-menu.js"),Re=require("./components/icons/ico-message-fill.js"),Oe=require("./components/icons/ico-message.js"),ze=require("./components/icons/ico-mfa.js"),He=require("./components/icons/ico-minimize.js"),Ze=require("./components/icons/ico-mobile2fa.js"),Ne=require("./components/icons/ico-mobile2fafill.js"),Ue=require("./components/icons/ico-open-book.js"),Xe=require("./components/icons/ico-paper-plane.js"),je=require("./components/icons/ico-passport.js"),Ve=require("./components/icons/ico-passwordless.js"),Qe=require("./components/icons/ico-pending-connection.js"),Je=require("./components/icons/ico-phone.js"),Ke=require("./components/icons/ico-polygon-gas-testnet.js"),_e=require("./components/icons/ico-polygon-gas.js"),Ye=require("./components/icons/ico-price.js"),$e=require("./components/icons/ico-qrcode.js"),er=require("./components/icons/ico-question-circle-fill.js"),rr=require("./components/icons/ico-question-circle.js"),or=require("./components/icons/ico-refresh-circle-fill.js"),ar=require("./components/icons/ico-refresh.js"),ir=require("./components/icons/ico-rocket-fill.js"),lr=require("./components/icons/ico-search.js"),ur=require("./components/icons/ico-settings.js"),tr=require("./components/icons/ico-shapes.js"),nr=require("./components/icons/ico-shield-approved.js"),cr=require("./components/icons/ico-shield-rejected.js"),dr=require("./components/icons/ico-shield.js"),fr=require("./components/icons/ico-social.js"),vr=require("./components/icons/ico-sold-out-tag.js"),qr=require("./components/icons/ico-star.js"),gr=require("./components/icons/ico-swap.js"),sr=require("./components/icons/ico-swatches.js"),Lr=require("./components/icons/ico-team.js"),Mr=require("./components/icons/ico-trash.js"),kr=require("./components/icons/ico-users.js"),Ir=require("./components/icons/ico-wallet-fill.js"),mr=require("./components/icons/ico-wallet.js"),pr=require("./components/icons/ico-wand.js"),br=require("./components/icons/ico-warning-fill.js"),hr=require("./components/icons/ico-warning.js"),wr=require("./components/info/copy-button.js"),Cr=require("./components/info/email-wbr.js"),Br=require("./components/info/security-otp.js"),Pr=require("./components/info/text-box.js"),Ar=require("./components/info/wallet-address.js"),Fr=require("./components/inputs/phone-input.js"),Sr=require("./components/inputs/pincode-input.js"),yr=require("./components/inputs/text-input.js"),Wr=require("./components/layouts/dialogue.js"),Tr=require("./components/layouts/error.js"),Dr=require("./components/layouts/page.js"),Er=require("./components/layouts/passport-page.js"),Gr=require("./components/list-items/navigation-button.js"),xr=require("./components/list-items/nft-tile.js"),Rr=require("./components/list-items/token-list-item.js"),Or=require("./components/list-items/transaction-row.js"),zr=require("./components/logos/blc-algorand.js"),Hr=require("./components/logos/blc-aptos.js"),Zr=require("./components/logos/blc-arbitrum.js"),Nr=require("./components/logos/blc-astar.js"),Ur=require("./components/logos/blc-avalanche.js"),Xr=require("./components/logos/blc-base.js"),jr=require("./components/logos/blc-berachain.js"),Vr=require("./components/logos/blc-binance.js"),Qr=require("./components/logos/blc-bitcoin.js"),Jr=require("./components/logos/blc-celo.js"),Kr=require("./components/logos/blc-chiliz.js"),_r=require("./components/logos/blc-cosmos.js"),Yr=require("./components/logos/blc-ethereum.js"),$r=require("./components/logos/blc-etherlink.js"),eo=require("./components/logos/blc-flow.js"),ro=require("./components/logos/blc-harmony.js"),oo=require("./components/logos/blc-icon.js"),ao=require("./components/logos/blc-immutable-x.js"),io=require("./components/logos/blc-loopring.js"),lo=require("./components/logos/blc-moonbeam.js"),uo=require("./components/logos/blc-near.js"),to=require("./components/logos/blc-optimism.js"),no=require("./components/logos/blc-polkadot.js"),co=require("./components/logos/blc-polygon.js"),fo=require("./components/logos/blc-rarichain.js"),vo=require("./components/logos/blc-solana.js"),qo=require("./components/logos/blc-stability.js"),go=require("./components/logos/blc-sui.js"),so=require("./components/logos/blc-tezos.js"),Lo=require("./components/logos/blc-wax.js"),Mo=require("./components/logos/blc-zetachain.js"),ko=require("./components/logos/blc-zilliqa.js"),Io=require("./components/logos/blc-zksync.js"),mo=require("./components/logos/fwk-11ty.js"),po=require("./components/logos/fwk-android.js"),bo=require("./components/logos/fwk-apple.js"),ho=require("./components/logos/fwk-authy.js"),wo=require("./components/logos/fwk-binance-fill.js"),Co=require("./components/logos/fwk-chrome.js"),Bo=require("./components/logos/fwk-electron.js"),Po=require("./components/logos/fwk-express.js"),Ao=require("./components/logos/fwk-fauna.js"),Fo=require("./components/logos/fwk-firebase.js"),So=require("./components/logos/fwk-go.js"),yo=require("./components/logos/fwk-google-authenticator.js"),Wo=require("./components/logos/fwk-hasura.js"),To=require("./components/logos/fwk-javascript.js"),Do=require("./components/logos/fwk-jwt.js"),Eo=require("./components/logos/fwk-laravel.js"),Go=require("./components/logos/fwk-nextjs.js"),xo=require("./components/logos/fwk-nodejs.js"),Ro=require("./components/logos/fwk-nuxtjs.js"),Oo=require("./components/logos/fwk-php.js"),zo=require("./components/logos/fwk-react.js"),Ho=require("./components/logos/fwk-strapi.js"),Zo=require("./components/logos/fwk-stripe.js"),No=require("./components/logos/fwk-vue.js"),Uo=require("./components/logos/fwk-webflow.js"),Xo=require("./components/logos/fwk-wordpress.js"),jo=require("./components/logos/fwk-zapier.js"),Vo=require("./components/logos/icon-art-dark.js"),Qo=require("./components/logos/icon-art.js"),Jo=require("./components/logos/icon-delete.js"),Ko=require("./components/logos/icon-email-globe.js"),_o=require("./components/logos/icon-email.js"),Yo=require("./components/logos/icon-game-controller-dark.js"),$o=require("./components/logos/icon-game-controller.js"),ea=require("./components/logos/icon-generic-token.js"),ra=require("./components/logos/icon-magic-globe.js"),oa=require("./components/logos/icon-magic-logo.js"),aa=require("./components/logos/icon-music-dark.js"),ia=require("./components/logos/icon-music.js"),la=require("./components/logos/icon-person-dark.js"),ua=require("./components/logos/icon-person.js"),ta=require("./components/logos/icon-profile-dark.js"),na=require("./components/logos/icon-profile-light.js"),ca=require("./components/logos/icon-reset.js"),da=require("./components/logos/icon-sms.js"),fa=require("./components/logos/icon-ticket-dark.js"),va=require("./components/logos/icon-ticket.js"),qa=require("./components/logos/icon-warning-dark.js"),ga=require("./components/logos/icon-warning-shield.js"),sa=require("./components/logos/icon-warning.js"),La=require("./components/logos/logo-algorand-mono.js"),Ma=require("./components/logos/logo-algorand.js"),ka=require("./components/logos/logo-apple-mono.js"),Ia=require("./components/logos/logo-apple.js"),ma=require("./components/logos/logo-aptos-mono.js"),pa=require("./components/logos/logo-aptos.js"),ba=require("./components/logos/logo-arbitrum-mono.js"),ha=require("./components/logos/logo-arbitrum-one-mono.js"),wa=require("./components/logos/logo-arbitrum-one.js"),Ca=require("./components/logos/logo-arbitrum.js"),Ba=require("./components/logos/logo-astar-mono.js"),Pa=require("./components/logos/logo-astar.js"),Aa=require("./components/logos/logo-auth0-mono.js"),Fa=require("./components/logos/logo-auth0.js"),Sa=require("./components/logos/logo-avalanche-mono.js"),ya=require("./components/logos/logo-avalanche.js"),Wa=require("./components/logos/logo-azure-mono.js"),Ta=require("./components/logos/logo-azure.js"),Da=require("./components/logos/logo-base-mono.js"),Ea=require("./components/logos/logo-base.js"),Ga=require("./components/logos/logo-berachain-mono.js"),xa=require("./components/logos/logo-berachain.js"),Ra=require("./components/logos/logo-binance-mono.js"),Oa=require("./components/logos/logo-binance.js"),za=require("./components/logos/logo-bit-bucket-mono.js"),Ha=require("./components/logos/logo-bit-bucket.js"),Za=require("./components/logos/logo-bitcoin-mono.js"),Na=require("./components/logos/logo-bitcoin.js"),Ua=require("./components/logos/logo-bnb-mono.js"),Xa=require("./components/logos/logo-bnb.js"),ja=require("./components/logos/logo-celo-mono.js"),Va=require("./components/logos/logo-celo.js"),Qa=require("./components/logos/logo-chiliz-mono.js"),Ja=require("./components/logos/logo-chiliz.js"),Ka=require("./components/logos/logo-cognito-mono.js"),_a=require("./components/logos/logo-cognito.js"),Ya=require("./components/logos/logo-cosmos-mono.js"),$a=require("./components/logos/logo-cosmos.js"),ei=require("./components/logos/logo-discord-mono.js"),ri=require("./components/logos/logo-discord.js"),oi=require("./components/logos/logo-ethereum-mono.js"),ai=require("./components/logos/logo-ethereum.js"),ii=require("./components/logos/logo-etherlink-mono.js"),li=require("./components/logos/logo-etherlink.js"),ui=require("./components/logos/logo-facebook-mono.js"),ti=require("./components/logos/logo-facebook.js"),ni=require("./components/logos/logo-flare-mono.js"),ci=require("./components/logos/logo-flare.js"),di=require("./components/logos/logo-flow-mono.js"),fi=require("./components/logos/logo-flow.js"),vi=require("./components/logos/logo-git-hub-mono.js"),qi=require("./components/logos/logo-git-hub.js"),gi=require("./components/logos/logo-git-lab-mono.js"),si=require("./components/logos/logo-git-lab.js"),Li=require("./components/logos/logo-google-mono.js"),Mi=require("./components/logos/logo-google.js"),ki=require("./components/logos/logo-harmony-mono.js"),Ii=require("./components/logos/logo-harmony.js"),mi=require("./components/logos/logo-horizen-mono.js"),pi=require("./components/logos/logo-horizen.js"),bi=require("./components/logos/logo-icon-mono.js"),hi=require("./components/logos/logo-icon.js"),wi=require("./components/logos/logo-immutable-x-mono.js"),Ci=require("./components/logos/logo-immutable-x.js"),Bi=require("./components/logos/logo-link-by-stripe-mono.js"),Pi=require("./components/logos/logo-link-by-stripe.js"),Ai=require("./components/logos/logo-link-mono.js"),Fi=require("./components/logos/logo-link.js"),Si=require("./components/logos/logo-linked-in-mono.js"),yi=require("./components/logos/logo-linked-in.js"),Wi=require("./components/logos/logo-loopring-mono.js"),Ti=require("./components/logos/logo-loopring.js"),Di=require("./components/logos/logo-microsoft-mono.js"),Ei=require("./components/logos/logo-microsoft.js"),Gi=require("./components/logos/logo-moonbeam-mono.js"),xi=require("./components/logos/logo-moonbeam.js"),Ri=require("./components/logos/logo-near-mono.js"),Oi=require("./components/logos/logo-near.js"),zi=require("./components/logos/logo-onramper-mono.js"),Hi=require("./components/logos/logo-onramper.js"),Zi=require("./components/logos/logo-optimism-mono.js"),Ni=require("./components/logos/logo-optimism.js"),Ui=require("./components/logos/logo-pay-pal-mono.js"),Xi=require("./components/logos/logo-pay-pal-wordmark-mono.js"),ji=require("./components/logos/logo-pay-pal-wordmark.js"),Vi=require("./components/logos/logo-pay-pal.js"),Qi=require("./components/logos/logo-poa-mono.js"),Ji=require("./components/logos/logo-poa.js"),Ki=require("./components/logos/logo-polkadot-mono.js"),_i=require("./components/logos/logo-polkadot.js"),Yi=require("./components/logos/logo-polygon-mono.js"),$i=require("./components/logos/logo-polygon.js"),el=require("./components/logos/logo-rarichain-mono.js"),rl=require("./components/logos/logo-rarichain.js"),ol=require("./components/logos/logo-sardine-mono.js"),al=require("./components/logos/logo-sardine.js"),il=require("./components/logos/logo-sei-mono.js"),ll=require("./components/logos/logo-sei.js"),ul=require("./components/logos/logo-solana-mono.js"),tl=require("./components/logos/logo-solana.js"),nl=require("./components/logos/logo-stability-mono.js"),cl=require("./components/logos/logo-stability.js"),dl=require("./components/logos/logo-sui-mono.js"),fl=require("./components/logos/logo-sui.js"),vl=require("./components/logos/logo-tezos-mono.js"),ql=require("./components/logos/logo-tezos.js"),gl=require("./components/logos/logo-twitch-mono.js"),sl=require("./components/logos/logo-twitch.js"),Ll=require("./components/logos/logo-twitter-mono.js"),Ml=require("./components/logos/logo-twitter.js"),kl=require("./components/logos/logo-wallet-connect-mono.js"),Il=require("./components/logos/logo-wallet-connect.js"),ml=require("./components/logos/logo-warpcast-mono.js"),pl=require("./components/logos/logo-warpcast.js"),bl=require("./components/logos/logo-wax-mono.js"),hl=require("./components/logos/logo-wax.js"),wl=require("./components/logos/logo-xdc-mono.js"),Cl=require("./components/logos/logo-xdc.js"),Bl=require("./components/logos/logo-zetachain-mono.js"),Pl=require("./components/logos/logo-zetachain.js"),Al=require("./components/logos/logo-zilliqa-mono.js"),Fl=require("./components/logos/logo-zilliqa.js"),Sl=require("./components/logos/logo-zksync-mono.js"),yl=require("./components/logos/logo-zksync.js"),Wl=require("./components/logos/pay-amex.js"),Tl=require("./components/logos/pay-discover.js"),Dl=require("./components/logos/pay-mastercard.js"),El=require("./components/logos/pay-visa.js"),Gl=require("./components/logos/presentation-logo.js"),xl=require("./components/logos/website-magic.js"),Rl=require("./components/logos/wlt-coinbase.js"),Ol=require("./components/logos/wlt-mattel.js"),zl=require("./components/logos/wlt-metamask.js"),Hl=require("./components/logos/wlt-phantom.js"),Zl=require("./components/logos/wlt-rainbow.js"),Nl=require("./components/logos/wlt-wallet-connect.js"),Ul=require("./components/primitives/button.js"),Xl=require("./components/primitives/checkbox.js"),r=require("./components/primitives/dropdown-selector.js"),jl=require("./components/primitives/popover.js"),o=require("./components/primitives/radio.js"),a=require("./components/primitives/segmented-control.js"),Vl=require("./components/primitives/switch.js"),Ql=require("./components/primitives/text.js"),Jl=require("./components/sections/verify-pincode.js"),Kl=require("./components/utils/animate.js"),_l=require("./components/utils/client-asset-logo.js"),Yl=require("./components/utils/qr-code.js"),$l=require("./components/utils/secured-by-magic.js"),eu=require("./components/utils/shared-logo.js"),ru=require("./hooks/theme.js"),ou=require("./hooks/useToast.js");exports.Card=i.Card,exports.Content=l.Content,exports.Drawer=u.Drawer,exports.Footer=t.Footer,exports.Header=n.Header,exports.Menu=c.Menu,exports.Modal=d.Modal,exports.Overlay=f.Overlay,exports.PayPalButton=v.PayPalButton,exports.SocialLoginButton=q.SocialLoginButton,exports.Callout=g.Callout,exports.LoadingSpinner=s.LoadingSpinner,exports.ProgressBar=L.ProgressBar,exports.Skeleton=M.Skeleton,exports.Toast=e.Toast,exports.ToastProvider=e.ToastProvider,exports.Tooltip=k.default,exports.IcoAdd=I.default,exports.IcoAlertCircleFill=m.default,exports.IcoAlertCircle=p.default,exports.IcoArrowDown=b.default,exports.IcoArrowLeft=h.default,exports.IcoArrowRight=w.default,exports.IcoArrowUp=C.default,exports.IcoAsteriskWithShield=B.default,exports.IcoAsterisk=P.default,exports.IcoAstronaut=A.default,exports.IcoAtom=F.default,exports.IcoBank=S.default,exports.IcoBellNotification=y.default,exports.IcoBell=W.default,exports.IcoBlock=T.default,exports.IcoBranding=D.default,exports.IcoCaretDown=E.default,exports.IcoCaretLeft=G.default,exports.IcoCaretRight=x.default,exports.IcoCaretUp=R.default,exports.IcoCheckmarkCircleFill=O.default,exports.IcoCheckmarkCircle=z.default,exports.IcoCheckmark=H.default,exports.IcoCodeEditor=Z.default,exports.IcoCodeSandbox=N.default,exports.IcoCode=U.default,exports.IcoCommandLine=X.default,exports.IcoComment=j.default,exports.IcoCopy=V.default,exports.IcoCreditCard=Q.default,exports.IcoDedicated=J.default,exports.IcoDiamond=K.default,exports.IcoDismissCircleFill=_.default,exports.IcoDismissCircle=Y.default,exports.IcoDismiss=$.default,exports.IcoDoc=ee.default,exports.IcoDownload=re.default,exports.IcoEditEmail=oe.default,exports.IcoEdit=ae.default,exports.IcoEmailFill=ie.default,exports.IcoEmailOpen=le.default,exports.IcoEmail=ue.default,exports.IcoExpand=te.default,exports.IcoExpiration=ne.default,exports.IcoExternalLink=ce.default,exports.IcoEyeClosed=de.default,exports.IcoEyeOpened=fe.default,exports.IcoFingerprintFill=ve.default,exports.IcoFingerprint=qe.default,exports.IcoGas=ge.default,exports.IcoGift=se.default,exports.IcoGlobe=Le.default,exports.IcoGuide=Me.default,exports.IcoHome=ke.default,exports.IcoHourglass=Ie.default,exports.IcoInfoCircleFill=me.default,exports.IcoInfoCircle=pe.default,exports.IcoKebab=be.default,exports.IcoKey=he.default,exports.IcoLightbulbFill=we.default,exports.IcoLightbulb=Ce.default,exports.IcoLightningFill=Be.default,exports.IcoLightning=Pe.default,exports.IcoLink=Ae.default,exports.IcoLoading=Fe.default,exports.IcoLockLocked=Se.default,exports.IcoLockPassword=ye.default,exports.IcoLockUnlockedFill=We.default,exports.IcoLockUnlocked=Te.default,exports.IcoLoginForm=De.default,exports.IcoMagic=Ee.default,exports.IcoMegaphone=Ge.default,exports.IcoMenu=xe.default,exports.IcoMessageFill=Re.default,exports.IcoMessage=Oe.default,exports.IcoMfa=ze.default,exports.IcoMinimize=He.default,exports.IcoMobile2fa=Ze.default,exports.IcoMobile2fafill=Ne.default,exports.IcoOpenBook=Ue.default,exports.IcoPaperPlane=Xe.default,exports.IcoPassport=je.default,exports.IcoPasswordless=Ve.default,exports.IcoPendingConnection=Qe.default,exports.IcoPhone=Je.default,exports.IcoPolygonGasTestnet=Ke.default,exports.IcoPolygonGas=_e.default,exports.IcoPrice=Ye.default,exports.IcoQrcode=$e.default,exports.IcoQuestionCircleFill=er.default,exports.IcoQuestionCircle=rr.default,exports.IcoRefreshCircleFill=or.default,exports.IcoRefresh=ar.default,exports.IcoRocketFill=ir.default,exports.IcoSearch=lr.default,exports.IcoSettings=ur.default,exports.IcoShapes=tr.default,exports.IcoShieldApproved=nr.default,exports.IcoShieldRejected=cr.default,exports.IcoShield=dr.default,exports.IcoSocial=fr.default,exports.IcoSoldOutTag=vr.default,exports.IcoStar=qr.default,exports.IcoSwap=gr.default,exports.IcoSwatches=sr.default,exports.IcoTeam=Lr.default,exports.IcoTrash=Mr.default,exports.IcoUsers=kr.default,exports.IcoWalletFill=Ir.default,exports.IcoWallet=mr.default,exports.IcoWand=pr.default,exports.IcoWarningFill=br.default,exports.IcoWarning=hr.default,exports.CopyButton=wr.default,exports.EmailWbr=Cr.default,exports.SecurityOtp=Br.default,exports.TextBox=Pr.default,exports.WalletAddress=Ar.default,exports.PhoneInput=Fr.default,exports.PinCodeInput=Sr.PinCodeInput,exports.TextInput=yr.TextInput,exports.Dialogue=Wr.Dialogue,exports.Error=Tr.Error,exports.Page=Dr.Page,exports.PassportPage=Er.PassportPage,exports.NavigationButton=Gr.default,exports.NFTTile=xr.NFTTile,exports.TokenListItem=Rr.TokenListItem,exports.TransactionRow=Or.TransactionRow,exports.BlcAlgorand=zr.default,exports.BlcAptos=Hr.default,exports.BlcArbitrum=Zr.default,exports.BlcAstar=Nr.default,exports.BlcAvalanche=Ur.default,exports.BlcBase=Xr.default,exports.BlcBerachain=jr.default,exports.BlcBinance=Vr.default,exports.BlcBitcoin=Qr.default,exports.BlcCelo=Jr.default,exports.BlcChiliz=Kr.default,exports.BlcCosmos=_r.default,exports.BlcEthereum=Yr.default,exports.BlcEtherlink=$r.default,exports.BlcFlow=eo.default,exports.BlcHarmony=ro.default,exports.BlcIcon=oo.default,exports.BlcImmutableX=ao.default,exports.BlcLoopring=io.default,exports.BlcMoonbeam=lo.default,exports.BlcNear=uo.default,exports.BlcOptimism=to.default,exports.BlcPolkadot=no.default,exports.BlcPolygon=co.default,exports.BlcRarichain=fo.default,exports.BlcSolana=vo.default,exports.BlcStability=qo.default,exports.BlcSui=go.default,exports.BlcTezos=so.default,exports.BlcWax=Lo.default,exports.BlcZetachain=Mo.default,exports.BlcZilliqa=ko.default,exports.BlcZksync=Io.default,exports.Fwk11ty=mo.default,exports.FwkAndroid=po.default,exports.FwkApple=bo.default,exports.FwkAuthy=ho.default,exports.FwkBinanceFill=wo.default,exports.FwkChrome=Co.default,exports.FwkElectron=Bo.default,exports.FwkExpress=Po.default,exports.FwkFauna=Ao.default,exports.FwkFirebase=Fo.default,exports.FwkGo=So.default,exports.FwkGoogleAuthenticator=yo.default,exports.FwkHasura=Wo.default,exports.FwkJavascript=To.default,exports.FwkJwt=Do.default,exports.FwkLaravel=Eo.default,exports.FwkNextjs=Go.default,exports.FwkNodejs=xo.default,exports.FwkNuxtjs=Ro.default,exports.FwkPhp=Oo.default,exports.FwkReact=zo.default,exports.FwkStrapi=Ho.default,exports.FwkStripe=Zo.default,exports.FwkVue=No.default,exports.FwkWebflow=Uo.default,exports.FwkWordpress=Xo.default,exports.FwkZapier=jo.default,exports.IconArtDark=Vo.default,exports.IconArt=Qo.default,exports.IconDelete=Jo.default,exports.IconEmailGlobe=Ko.default,exports.IconEmail=_o.default,exports.IconGameControllerDark=Yo.default,exports.IconGameController=$o.default,exports.IconGenericToken=ea.default,exports.IconMagicGlobe=ra.default,exports.IconMagicLogo=oa.default,exports.IconMusicDark=aa.default,exports.IconMusic=ia.default,exports.IconPersonDark=la.default,exports.IconPerson=ua.default,exports.IconProfileDark=ta.default,exports.IconProfileLight=na.default,exports.IconReset=ca.default,exports.IconSms=da.default,exports.IconTicketDark=fa.default,exports.IconTicket=va.default,exports.IconWarningDark=qa.default,exports.IconWarningShield=ga.default,exports.IconWarning=sa.default,exports.LogoAlgorandMono=La.default,exports.LogoAlgorand=Ma.default,exports.LogoAppleMono=ka.default,exports.LogoApple=Ia.default,exports.LogoAptosMono=ma.default,exports.LogoAptos=pa.default,exports.LogoArbitrumMono=ba.default,exports.LogoArbitrumOneMono=ha.default,exports.LogoArbitrumOne=wa.default,exports.LogoArbitrum=Ca.default,exports.LogoAstarMono=Ba.default,exports.LogoAstar=Pa.default,exports.LogoAuth0Mono=Aa.default,exports.LogoAuth0=Fa.default,exports.LogoAvalancheMono=Sa.default,exports.LogoAvalanche=ya.default,exports.LogoAzureMono=Wa.default,exports.LogoAzure=Ta.default,exports.LogoBaseMono=Da.default,exports.LogoBase=Ea.default,exports.LogoBerachainMono=Ga.default,exports.LogoBerachain=xa.default,exports.LogoBinanceMono=Ra.default,exports.LogoBinance=Oa.default,exports.LogoBitBucketMono=za.default,exports.LogoBitBucket=Ha.default,exports.LogoBitcoinMono=Za.default,exports.LogoBitcoin=Na.default,exports.LogoBnbMono=Ua.default,exports.LogoBnb=Xa.default,exports.LogoCeloMono=ja.default,exports.LogoCelo=Va.default,exports.LogoChilizMono=Qa.default,exports.LogoChiliz=Ja.default,exports.LogoCognitoMono=Ka.default,exports.LogoCognito=_a.default,exports.LogoCosmosMono=Ya.default,exports.LogoCosmos=$a.default,exports.LogoDiscordMono=ei.default,exports.LogoDiscord=ri.default,exports.LogoEthereumMono=oi.default,exports.LogoEthereum=ai.default,exports.LogoEtherlinkMono=ii.default,exports.LogoEtherlink=li.default,exports.LogoFacebookMono=ui.default,exports.LogoFacebook=ti.default,exports.LogoFlareMono=ni.default,exports.LogoFlare=ci.default,exports.LogoFlowMono=di.default,exports.LogoFlow=fi.default,exports.LogoGitHubMono=vi.default,exports.LogoGitHub=qi.default,exports.LogoGitLabMono=gi.default,exports.LogoGitLab=si.default,exports.LogoGoogleMono=Li.default,exports.LogoGoogle=Mi.default,exports.LogoHarmonyMono=ki.default,exports.LogoHarmony=Ii.default,exports.LogoHorizenMono=mi.default,exports.LogoHorizen=pi.default,exports.LogoIconMono=bi.default,exports.LogoIcon=hi.default,exports.LogoImmutableXMono=wi.default,exports.LogoImmutableX=Ci.default,exports.LogoLinkByStripeMono=Bi.default,exports.LogoLinkByStripe=Pi.default,exports.LogoLinkMono=Ai.default,exports.LogoLink=Fi.default,exports.LogoLinkedInMono=Si.default,exports.LogoLinkedIn=yi.default,exports.LogoLoopringMono=Wi.default,exports.LogoLoopring=Ti.default,exports.LogoMicrosoftMono=Di.default,exports.LogoMicrosoft=Ei.default,exports.LogoMoonbeamMono=Gi.default,exports.LogoMoonbeam=xi.default,exports.LogoNearMono=Ri.default,exports.LogoNear=Oi.default,exports.LogoOnramperMono=zi.default,exports.LogoOnramper=Hi.default,exports.LogoOptimismMono=Zi.default,exports.LogoOptimism=Ni.default,exports.LogoPayPalMono=Ui.default,exports.LogoPayPalWordmarkMono=Xi.default,exports.LogoPayPalWordmark=ji.default,exports.LogoPayPal=Vi.default,exports.LogoPoaMono=Qi.default,exports.LogoPoa=Ji.default,exports.LogoPolkadotMono=Ki.default,exports.LogoPolkadot=_i.default,exports.LogoPolygonMono=Yi.default,exports.LogoPolygon=$i.default,exports.LogoRarichainMono=el.default,exports.LogoRarichain=rl.default,exports.LogoSardineMono=ol.default,exports.LogoSardine=al.default,exports.LogoSeiMono=il.default,exports.LogoSei=ll.default,exports.LogoSolanaMono=ul.default,exports.LogoSolana=tl.default,exports.LogoStabilityMono=nl.default,exports.LogoStability=cl.default,exports.LogoSuiMono=dl.default,exports.LogoSui=fl.default,exports.LogoTezosMono=vl.default,exports.LogoTezos=ql.default,exports.LogoTwitchMono=gl.default,exports.LogoTwitch=sl.default,exports.LogoTwitterMono=Ll.default,exports.LogoTwitter=Ml.default,exports.LogoWalletConnectMono=kl.default,exports.LogoWalletConnect=Il.default,exports.LogoWarpcastMono=ml.default,exports.LogoWarpcast=pl.default,exports.LogoWaxMono=bl.default,exports.LogoWax=hl.default,exports.LogoXdcMono=wl.default,exports.LogoXdc=Cl.default,exports.LogoZetachainMono=Bl.default,exports.LogoZetachain=Pl.default,exports.LogoZilliqaMono=Al.default,exports.LogoZilliqa=Fl.default,exports.LogoZksyncMono=Sl.default,exports.LogoZksync=yl.default,exports.PayAmex=Wl.default,exports.PayDiscover=Tl.default,exports.PayMastercard=Dl.default,exports.PayVisa=El.default,exports.PresentationLogo=Gl.default,exports.WebsiteMagic=xl.default,exports.WltCoinbase=Rl.default,exports.WltMattel=Ol.default,exports.WltMetamask=zl.default,exports.WltPhantom=Hl.default,exports.WltRainbow=Zl.default,exports.WltWalletConnect=Nl.default,exports.Button=Ul.default,exports.Checkbox=Xl.default,exports.DropdownOption=r.DropdownOption,exports.DropdownSelector=r.DropdownSelector,exports.Popover=jl.Popover,exports.Radio=o.Radio,exports.RadioGroup=o.RadioGroup,exports.SegmentedControl=a.SegmentedControl,exports.Tab=a.Tab,exports.Switch=Vl.default,exports.Text=Ql.default,exports.VerifyPincode=Jl.VerifyPincode,exports.Animate=Kl.default,exports.ClientAssetLogo=_l.ClientAssetLogo,exports.QRCode=Yl.default,exports.SecuredByMagic=$l.default,exports.SharedLogo=eu.default,exports.useCustomVars=ru.useCustomVars,exports.useToast=ou.useToast;
|
|
1
|
+
"use strict";var i=require("./components/containers/card.js"),l=require("./components/containers/content.js"),u=require("./components/containers/drawer.js"),t=require("./components/containers/footer.js"),n=require("./components/containers/header.js"),c=require("./components/containers/menu.js"),d=require("./components/containers/modal.js"),f=require("./components/containers/overlay.js"),v=require("./components/external/paypal-button.js"),q=require("./components/external/social-login-button.js"),g=require("./components/feedback/animated-checkmark.js"),s=require("./components/feedback/animated-spinner.js"),L=require("./components/feedback/callout.js"),k=require("./components/feedback/loading-spinner.js"),M=require("./components/feedback/progress-bar.js"),I=require("./components/feedback/skeleton.js"),e=require("./components/feedback/toast-provider.js"),m=require("./components/feedback/tooltip.js"),p=require("./components/icons/ico-add.js"),h=require("./components/icons/ico-alert-circle-fill.js"),b=require("./components/icons/ico-alert-circle.js"),w=require("./components/icons/ico-arrow-down.js"),C=require("./components/icons/ico-arrow-left.js"),B=require("./components/icons/ico-arrow-right.js"),A=require("./components/icons/ico-arrow-up.js"),P=require("./components/icons/ico-asterisk-with-shield.js"),F=require("./components/icons/ico-asterisk.js"),S=require("./components/icons/ico-astronaut.js"),y=require("./components/icons/ico-atom.js"),W=require("./components/icons/ico-bank.js"),T=require("./components/icons/ico-bell-notification.js"),D=require("./components/icons/ico-bell.js"),E=require("./components/icons/ico-block.js"),G=require("./components/icons/ico-branding.js"),x=require("./components/icons/ico-caret-down.js"),R=require("./components/icons/ico-caret-left.js"),O=require("./components/icons/ico-caret-right.js"),z=require("./components/icons/ico-caret-up.js"),H=require("./components/icons/ico-checkmark-circle-fill.js"),Z=require("./components/icons/ico-checkmark-circle.js"),N=require("./components/icons/ico-checkmark.js"),U=require("./components/icons/ico-code-editor.js"),X=require("./components/icons/ico-code-sandbox.js"),j=require("./components/icons/ico-code.js"),V=require("./components/icons/ico-command-line.js"),Q=require("./components/icons/ico-comment.js"),J=require("./components/icons/ico-copy.js"),K=require("./components/icons/ico-credit-card.js"),_=require("./components/icons/ico-dedicated.js"),Y=require("./components/icons/ico-diamond.js"),$=require("./components/icons/ico-dismiss-circle-fill.js"),ee=require("./components/icons/ico-dismiss-circle.js"),re=require("./components/icons/ico-dismiss.js"),oe=require("./components/icons/ico-doc.js"),ae=require("./components/icons/ico-download.js"),ie=require("./components/icons/ico-edit-email.js"),le=require("./components/icons/ico-edit.js"),ue=require("./components/icons/ico-email-fill.js"),te=require("./components/icons/ico-email-open.js"),ne=require("./components/icons/ico-email.js"),ce=require("./components/icons/ico-expand.js"),de=require("./components/icons/ico-expiration.js"),fe=require("./components/icons/ico-external-link.js"),ve=require("./components/icons/ico-eye-closed.js"),qe=require("./components/icons/ico-eye-opened.js"),ge=require("./components/icons/ico-fingerprint-fill.js"),se=require("./components/icons/ico-fingerprint.js"),Le=require("./components/icons/ico-gas.js"),ke=require("./components/icons/ico-gift.js"),Me=require("./components/icons/ico-globe.js"),Ie=require("./components/icons/ico-guide.js"),me=require("./components/icons/ico-home.js"),pe=require("./components/icons/ico-hourglass.js"),he=require("./components/icons/ico-info-circle-fill.js"),be=require("./components/icons/ico-info-circle.js"),we=require("./components/icons/ico-kebab.js"),Ce=require("./components/icons/ico-key.js"),Be=require("./components/icons/ico-lightbulb-fill.js"),Ae=require("./components/icons/ico-lightbulb.js"),Pe=require("./components/icons/ico-lightning-fill.js"),Fe=require("./components/icons/ico-lightning.js"),Se=require("./components/icons/ico-link.js"),ye=require("./components/icons/ico-loading.js"),We=require("./components/icons/ico-lock-locked.js"),Te=require("./components/icons/ico-lock-password.js"),De=require("./components/icons/ico-lock-unlocked-fill.js"),Ee=require("./components/icons/ico-lock-unlocked.js"),Ge=require("./components/icons/ico-login-form.js"),xe=require("./components/icons/ico-magic.js"),Re=require("./components/icons/ico-megaphone.js"),Oe=require("./components/icons/ico-menu.js"),ze=require("./components/icons/ico-message-fill.js"),He=require("./components/icons/ico-message.js"),Ze=require("./components/icons/ico-mfa.js"),Ne=require("./components/icons/ico-minimize.js"),Ue=require("./components/icons/ico-mobile2fa.js"),Xe=require("./components/icons/ico-mobile2fafill.js"),je=require("./components/icons/ico-open-book.js"),Ve=require("./components/icons/ico-paper-plane.js"),Qe=require("./components/icons/ico-passport.js"),Je=require("./components/icons/ico-passwordless.js"),Ke=require("./components/icons/ico-pending-connection.js"),_e=require("./components/icons/ico-phone.js"),Ye=require("./components/icons/ico-polygon-gas-testnet.js"),$e=require("./components/icons/ico-polygon-gas.js"),er=require("./components/icons/ico-price.js"),rr=require("./components/icons/ico-qrcode.js"),or=require("./components/icons/ico-question-circle-fill.js"),ar=require("./components/icons/ico-question-circle.js"),ir=require("./components/icons/ico-refresh-circle-fill.js"),lr=require("./components/icons/ico-refresh.js"),ur=require("./components/icons/ico-rocket-fill.js"),tr=require("./components/icons/ico-search.js"),nr=require("./components/icons/ico-settings.js"),cr=require("./components/icons/ico-shapes.js"),dr=require("./components/icons/ico-shield-approved.js"),fr=require("./components/icons/ico-shield-rejected.js"),vr=require("./components/icons/ico-shield.js"),qr=require("./components/icons/ico-social.js"),gr=require("./components/icons/ico-sold-out-tag.js"),sr=require("./components/icons/ico-star.js"),Lr=require("./components/icons/ico-swap.js"),kr=require("./components/icons/ico-swatches.js"),Mr=require("./components/icons/ico-team.js"),Ir=require("./components/icons/ico-trash.js"),mr=require("./components/icons/ico-users.js"),pr=require("./components/icons/ico-wallet-fill.js"),hr=require("./components/icons/ico-wallet.js"),br=require("./components/icons/ico-wand.js"),wr=require("./components/icons/ico-warning-fill.js"),Cr=require("./components/icons/ico-warning.js"),Br=require("./components/info/copy-button.js"),Ar=require("./components/info/email-wbr.js"),Pr=require("./components/info/security-otp.js"),Fr=require("./components/info/text-box.js"),Sr=require("./components/info/wallet-address.js"),yr=require("./components/inputs/phone-input.js"),Wr=require("./components/inputs/pincode-input.js"),Tr=require("./components/inputs/text-input.js"),Dr=require("./components/layouts/dialogue.js"),Er=require("./components/layouts/error.js"),Gr=require("./components/layouts/page.js"),xr=require("./components/layouts/passport-page.js"),Rr=require("./components/list-items/navigation-button.js"),Or=require("./components/list-items/nft-tile.js"),zr=require("./components/list-items/token-list-item.js"),Hr=require("./components/list-items/transaction-row.js"),Zr=require("./components/logos/blc-algorand.js"),Nr=require("./components/logos/blc-aptos.js"),Ur=require("./components/logos/blc-arbitrum.js"),Xr=require("./components/logos/blc-astar.js"),jr=require("./components/logos/blc-avalanche.js"),Vr=require("./components/logos/blc-base.js"),Qr=require("./components/logos/blc-berachain.js"),Jr=require("./components/logos/blc-binance.js"),Kr=require("./components/logos/blc-bitcoin.js"),_r=require("./components/logos/blc-celo.js"),Yr=require("./components/logos/blc-chiliz.js"),$r=require("./components/logos/blc-cosmos.js"),eo=require("./components/logos/blc-ethereum.js"),ro=require("./components/logos/blc-etherlink.js"),oo=require("./components/logos/blc-flow.js"),ao=require("./components/logos/blc-harmony.js"),io=require("./components/logos/blc-icon.js"),lo=require("./components/logos/blc-immutable-x.js"),uo=require("./components/logos/blc-loopring.js"),to=require("./components/logos/blc-moonbeam.js"),no=require("./components/logos/blc-near.js"),co=require("./components/logos/blc-optimism.js"),fo=require("./components/logos/blc-polkadot.js"),vo=require("./components/logos/blc-polygon.js"),qo=require("./components/logos/blc-rarichain.js"),go=require("./components/logos/blc-solana.js"),so=require("./components/logos/blc-stability.js"),Lo=require("./components/logos/blc-sui.js"),ko=require("./components/logos/blc-tezos.js"),Mo=require("./components/logos/blc-wax.js"),Io=require("./components/logos/blc-zetachain.js"),mo=require("./components/logos/blc-zilliqa.js"),po=require("./components/logos/blc-zksync.js"),ho=require("./components/logos/fwk-11ty.js"),bo=require("./components/logos/fwk-android.js"),wo=require("./components/logos/fwk-apple.js"),Co=require("./components/logos/fwk-authy.js"),Bo=require("./components/logos/fwk-binance-fill.js"),Ao=require("./components/logos/fwk-chrome.js"),Po=require("./components/logos/fwk-electron.js"),Fo=require("./components/logos/fwk-express.js"),So=require("./components/logos/fwk-fauna.js"),yo=require("./components/logos/fwk-firebase.js"),Wo=require("./components/logos/fwk-go.js"),To=require("./components/logos/fwk-google-authenticator.js"),Do=require("./components/logos/fwk-hasura.js"),Eo=require("./components/logos/fwk-javascript.js"),Go=require("./components/logos/fwk-jwt.js"),xo=require("./components/logos/fwk-laravel.js"),Ro=require("./components/logos/fwk-nextjs.js"),Oo=require("./components/logos/fwk-nodejs.js"),zo=require("./components/logos/fwk-nuxtjs.js"),Ho=require("./components/logos/fwk-php.js"),Zo=require("./components/logos/fwk-react.js"),No=require("./components/logos/fwk-strapi.js"),Uo=require("./components/logos/fwk-stripe.js"),Xo=require("./components/logos/fwk-vue.js"),jo=require("./components/logos/fwk-webflow.js"),Vo=require("./components/logos/fwk-wordpress.js"),Qo=require("./components/logos/fwk-zapier.js"),Jo=require("./components/logos/icon-art-dark.js"),Ko=require("./components/logos/icon-art.js"),_o=require("./components/logos/icon-delete.js"),Yo=require("./components/logos/icon-email-globe.js"),$o=require("./components/logos/icon-email.js"),ea=require("./components/logos/icon-game-controller-dark.js"),ra=require("./components/logos/icon-game-controller.js"),oa=require("./components/logos/icon-generic-token.js"),aa=require("./components/logos/icon-magic-globe.js"),ia=require("./components/logos/icon-magic-logo.js"),la=require("./components/logos/icon-music-dark.js"),ua=require("./components/logos/icon-music.js"),ta=require("./components/logos/icon-person-dark.js"),na=require("./components/logos/icon-person.js"),ca=require("./components/logos/icon-profile-dark.js"),da=require("./components/logos/icon-profile-light.js"),fa=require("./components/logos/icon-reset.js"),va=require("./components/logos/icon-sms.js"),qa=require("./components/logos/icon-ticket-dark.js"),ga=require("./components/logos/icon-ticket.js"),sa=require("./components/logos/icon-warning-dark.js"),La=require("./components/logos/icon-warning-shield.js"),ka=require("./components/logos/icon-warning.js"),Ma=require("./components/logos/logo-algorand-mono.js"),Ia=require("./components/logos/logo-algorand.js"),ma=require("./components/logos/logo-apple-mono.js"),pa=require("./components/logos/logo-apple.js"),ha=require("./components/logos/logo-aptos-mono.js"),ba=require("./components/logos/logo-aptos.js"),wa=require("./components/logos/logo-arbitrum-mono.js"),Ca=require("./components/logos/logo-arbitrum-one-mono.js"),Ba=require("./components/logos/logo-arbitrum-one.js"),Aa=require("./components/logos/logo-arbitrum.js"),Pa=require("./components/logos/logo-astar-mono.js"),Fa=require("./components/logos/logo-astar.js"),Sa=require("./components/logos/logo-auth0-mono.js"),ya=require("./components/logos/logo-auth0.js"),Wa=require("./components/logos/logo-avalanche-mono.js"),Ta=require("./components/logos/logo-avalanche.js"),Da=require("./components/logos/logo-azure-mono.js"),Ea=require("./components/logos/logo-azure.js"),Ga=require("./components/logos/logo-base-mono.js"),xa=require("./components/logos/logo-base.js"),Ra=require("./components/logos/logo-berachain-mono.js"),Oa=require("./components/logos/logo-berachain.js"),za=require("./components/logos/logo-binance-mono.js"),Ha=require("./components/logos/logo-binance.js"),Za=require("./components/logos/logo-bit-bucket-mono.js"),Na=require("./components/logos/logo-bit-bucket.js"),Ua=require("./components/logos/logo-bitcoin-mono.js"),Xa=require("./components/logos/logo-bitcoin.js"),ja=require("./components/logos/logo-bnb-mono.js"),Va=require("./components/logos/logo-bnb.js"),Qa=require("./components/logos/logo-celo-mono.js"),Ja=require("./components/logos/logo-celo.js"),Ka=require("./components/logos/logo-chiliz-mono.js"),_a=require("./components/logos/logo-chiliz.js"),Ya=require("./components/logos/logo-cognito-mono.js"),$a=require("./components/logos/logo-cognito.js"),ei=require("./components/logos/logo-cosmos-mono.js"),ri=require("./components/logos/logo-cosmos.js"),oi=require("./components/logos/logo-discord-mono.js"),ai=require("./components/logos/logo-discord.js"),ii=require("./components/logos/logo-ethereum-mono.js"),li=require("./components/logos/logo-ethereum.js"),ui=require("./components/logos/logo-etherlink-mono.js"),ti=require("./components/logos/logo-etherlink.js"),ni=require("./components/logos/logo-facebook-mono.js"),ci=require("./components/logos/logo-facebook.js"),di=require("./components/logos/logo-flare-mono.js"),fi=require("./components/logos/logo-flare.js"),vi=require("./components/logos/logo-flow-mono.js"),qi=require("./components/logos/logo-flow.js"),gi=require("./components/logos/logo-git-hub-mono.js"),si=require("./components/logos/logo-git-hub.js"),Li=require("./components/logos/logo-git-lab-mono.js"),ki=require("./components/logos/logo-git-lab.js"),Mi=require("./components/logos/logo-google-mono.js"),Ii=require("./components/logos/logo-google.js"),mi=require("./components/logos/logo-harmony-mono.js"),pi=require("./components/logos/logo-harmony.js"),hi=require("./components/logos/logo-horizen-mono.js"),bi=require("./components/logos/logo-horizen.js"),wi=require("./components/logos/logo-icon-mono.js"),Ci=require("./components/logos/logo-icon.js"),Bi=require("./components/logos/logo-immutable-x-mono.js"),Ai=require("./components/logos/logo-immutable-x.js"),Pi=require("./components/logos/logo-link-by-stripe-mono.js"),Fi=require("./components/logos/logo-link-by-stripe.js"),Si=require("./components/logos/logo-link-mono.js"),yi=require("./components/logos/logo-link.js"),Wi=require("./components/logos/logo-linked-in-mono.js"),Ti=require("./components/logos/logo-linked-in.js"),Di=require("./components/logos/logo-loopring-mono.js"),Ei=require("./components/logos/logo-loopring.js"),Gi=require("./components/logos/logo-microsoft-mono.js"),xi=require("./components/logos/logo-microsoft.js"),Ri=require("./components/logos/logo-moonbeam-mono.js"),Oi=require("./components/logos/logo-moonbeam.js"),zi=require("./components/logos/logo-near-mono.js"),Hi=require("./components/logos/logo-near.js"),Zi=require("./components/logos/logo-onramper-mono.js"),Ni=require("./components/logos/logo-onramper.js"),Ui=require("./components/logos/logo-optimism-mono.js"),Xi=require("./components/logos/logo-optimism.js"),ji=require("./components/logos/logo-pay-pal-mono.js"),Vi=require("./components/logos/logo-pay-pal-wordmark-mono.js"),Qi=require("./components/logos/logo-pay-pal-wordmark.js"),Ji=require("./components/logos/logo-pay-pal.js"),Ki=require("./components/logos/logo-poa-mono.js"),_i=require("./components/logos/logo-poa.js"),Yi=require("./components/logos/logo-polkadot-mono.js"),$i=require("./components/logos/logo-polkadot.js"),el=require("./components/logos/logo-polygon-mono.js"),rl=require("./components/logos/logo-polygon.js"),ol=require("./components/logos/logo-rarichain-mono.js"),al=require("./components/logos/logo-rarichain.js"),il=require("./components/logos/logo-sardine-mono.js"),ll=require("./components/logos/logo-sardine.js"),ul=require("./components/logos/logo-sei-mono.js"),tl=require("./components/logos/logo-sei.js"),nl=require("./components/logos/logo-solana-mono.js"),cl=require("./components/logos/logo-solana.js"),dl=require("./components/logos/logo-stability-mono.js"),fl=require("./components/logos/logo-stability.js"),vl=require("./components/logos/logo-sui-mono.js"),ql=require("./components/logos/logo-sui.js"),gl=require("./components/logos/logo-tezos-mono.js"),sl=require("./components/logos/logo-tezos.js"),Ll=require("./components/logos/logo-twitch-mono.js"),kl=require("./components/logos/logo-twitch.js"),Ml=require("./components/logos/logo-twitter-mono.js"),Il=require("./components/logos/logo-twitter.js"),ml=require("./components/logos/logo-wallet-connect-mono.js"),pl=require("./components/logos/logo-wallet-connect.js"),hl=require("./components/logos/logo-warpcast-mono.js"),bl=require("./components/logos/logo-warpcast.js"),wl=require("./components/logos/logo-wax-mono.js"),Cl=require("./components/logos/logo-wax.js"),Bl=require("./components/logos/logo-xdc-mono.js"),Al=require("./components/logos/logo-xdc.js"),Pl=require("./components/logos/logo-zetachain-mono.js"),Fl=require("./components/logos/logo-zetachain.js"),Sl=require("./components/logos/logo-zilliqa-mono.js"),yl=require("./components/logos/logo-zilliqa.js"),Wl=require("./components/logos/logo-zksync-mono.js"),Tl=require("./components/logos/logo-zksync.js"),Dl=require("./components/logos/pay-amex.js"),El=require("./components/logos/pay-discover.js"),Gl=require("./components/logos/pay-mastercard.js"),xl=require("./components/logos/pay-visa.js"),Rl=require("./components/logos/presentation-logo.js"),Ol=require("./components/logos/website-magic.js"),zl=require("./components/logos/wlt-coinbase.js"),Hl=require("./components/logos/wlt-mattel.js"),Zl=require("./components/logos/wlt-metamask.js"),Nl=require("./components/logos/wlt-phantom.js"),Ul=require("./components/logos/wlt-rainbow.js"),Xl=require("./components/logos/wlt-wallet-connect.js"),jl=require("./components/primitives/button.js"),Vl=require("./components/primitives/checkbox.js"),r=require("./components/primitives/dropdown-selector.js"),Ql=require("./components/primitives/popover.js"),o=require("./components/primitives/radio.js"),a=require("./components/primitives/segmented-control.js"),Jl=require("./components/primitives/switch.js"),Kl=require("./components/primitives/text.js"),_l=require("./components/sections/verify-pincode.js"),Yl=require("./components/utils/animate.js"),$l=require("./components/utils/client-asset-logo.js"),eu=require("./components/utils/qr-code.js"),ru=require("./components/utils/secured-by-magic.js"),ou=require("./components/utils/shared-logo.js"),au=require("./hooks/theme.js"),iu=require("./hooks/useToast.js");exports.Card=i.Card,exports.Content=l.Content,exports.Drawer=u.Drawer,exports.Footer=t.Footer,exports.Header=n.Header,exports.Menu=c.Menu,exports.Modal=d.Modal,exports.Overlay=f.Overlay,exports.PayPalButton=v.PayPalButton,exports.SocialLoginButton=q.SocialLoginButton,exports.AnimatedCheckmark=g.AnimatedCheckmark,exports.AnimatedSpinner=s.AnimatedSpinner,exports.Callout=L.Callout,exports.LoadingSpinner=k.LoadingSpinner,exports.ProgressBar=M.ProgressBar,exports.Skeleton=I.Skeleton,exports.Toast=e.Toast,exports.ToastProvider=e.ToastProvider,exports.Tooltip=m.default,exports.IcoAdd=p.default,exports.IcoAlertCircleFill=h.default,exports.IcoAlertCircle=b.default,exports.IcoArrowDown=w.default,exports.IcoArrowLeft=C.default,exports.IcoArrowRight=B.default,exports.IcoArrowUp=A.default,exports.IcoAsteriskWithShield=P.default,exports.IcoAsterisk=F.default,exports.IcoAstronaut=S.default,exports.IcoAtom=y.default,exports.IcoBank=W.default,exports.IcoBellNotification=T.default,exports.IcoBell=D.default,exports.IcoBlock=E.default,exports.IcoBranding=G.default,exports.IcoCaretDown=x.default,exports.IcoCaretLeft=R.default,exports.IcoCaretRight=O.default,exports.IcoCaretUp=z.default,exports.IcoCheckmarkCircleFill=H.default,exports.IcoCheckmarkCircle=Z.default,exports.IcoCheckmark=N.default,exports.IcoCodeEditor=U.default,exports.IcoCodeSandbox=X.default,exports.IcoCode=j.default,exports.IcoCommandLine=V.default,exports.IcoComment=Q.default,exports.IcoCopy=J.default,exports.IcoCreditCard=K.default,exports.IcoDedicated=_.default,exports.IcoDiamond=Y.default,exports.IcoDismissCircleFill=$.default,exports.IcoDismissCircle=ee.default,exports.IcoDismiss=re.default,exports.IcoDoc=oe.default,exports.IcoDownload=ae.default,exports.IcoEditEmail=ie.default,exports.IcoEdit=le.default,exports.IcoEmailFill=ue.default,exports.IcoEmailOpen=te.default,exports.IcoEmail=ne.default,exports.IcoExpand=ce.default,exports.IcoExpiration=de.default,exports.IcoExternalLink=fe.default,exports.IcoEyeClosed=ve.default,exports.IcoEyeOpened=qe.default,exports.IcoFingerprintFill=ge.default,exports.IcoFingerprint=se.default,exports.IcoGas=Le.default,exports.IcoGift=ke.default,exports.IcoGlobe=Me.default,exports.IcoGuide=Ie.default,exports.IcoHome=me.default,exports.IcoHourglass=pe.default,exports.IcoInfoCircleFill=he.default,exports.IcoInfoCircle=be.default,exports.IcoKebab=we.default,exports.IcoKey=Ce.default,exports.IcoLightbulbFill=Be.default,exports.IcoLightbulb=Ae.default,exports.IcoLightningFill=Pe.default,exports.IcoLightning=Fe.default,exports.IcoLink=Se.default,exports.IcoLoading=ye.default,exports.IcoLockLocked=We.default,exports.IcoLockPassword=Te.default,exports.IcoLockUnlockedFill=De.default,exports.IcoLockUnlocked=Ee.default,exports.IcoLoginForm=Ge.default,exports.IcoMagic=xe.default,exports.IcoMegaphone=Re.default,exports.IcoMenu=Oe.default,exports.IcoMessageFill=ze.default,exports.IcoMessage=He.default,exports.IcoMfa=Ze.default,exports.IcoMinimize=Ne.default,exports.IcoMobile2fa=Ue.default,exports.IcoMobile2fafill=Xe.default,exports.IcoOpenBook=je.default,exports.IcoPaperPlane=Ve.default,exports.IcoPassport=Qe.default,exports.IcoPasswordless=Je.default,exports.IcoPendingConnection=Ke.default,exports.IcoPhone=_e.default,exports.IcoPolygonGasTestnet=Ye.default,exports.IcoPolygonGas=$e.default,exports.IcoPrice=er.default,exports.IcoQrcode=rr.default,exports.IcoQuestionCircleFill=or.default,exports.IcoQuestionCircle=ar.default,exports.IcoRefreshCircleFill=ir.default,exports.IcoRefresh=lr.default,exports.IcoRocketFill=ur.default,exports.IcoSearch=tr.default,exports.IcoSettings=nr.default,exports.IcoShapes=cr.default,exports.IcoShieldApproved=dr.default,exports.IcoShieldRejected=fr.default,exports.IcoShield=vr.default,exports.IcoSocial=qr.default,exports.IcoSoldOutTag=gr.default,exports.IcoStar=sr.default,exports.IcoSwap=Lr.default,exports.IcoSwatches=kr.default,exports.IcoTeam=Mr.default,exports.IcoTrash=Ir.default,exports.IcoUsers=mr.default,exports.IcoWalletFill=pr.default,exports.IcoWallet=hr.default,exports.IcoWand=br.default,exports.IcoWarningFill=wr.default,exports.IcoWarning=Cr.default,exports.CopyButton=Br.default,exports.EmailWbr=Ar.default,exports.SecurityOtp=Pr.default,exports.TextBox=Fr.default,exports.WalletAddress=Sr.default,exports.PhoneInput=yr.default,exports.PinCodeInput=Wr.PinCodeInput,exports.TextInput=Tr.TextInput,exports.Dialogue=Dr.Dialogue,exports.Error=Er.Error,exports.Page=Gr.Page,exports.PassportPage=xr.PassportPage,exports.NavigationButton=Rr.default,exports.NFTTile=Or.NFTTile,exports.TokenListItem=zr.TokenListItem,exports.TransactionRow=Hr.TransactionRow,exports.BlcAlgorand=Zr.default,exports.BlcAptos=Nr.default,exports.BlcArbitrum=Ur.default,exports.BlcAstar=Xr.default,exports.BlcAvalanche=jr.default,exports.BlcBase=Vr.default,exports.BlcBerachain=Qr.default,exports.BlcBinance=Jr.default,exports.BlcBitcoin=Kr.default,exports.BlcCelo=_r.default,exports.BlcChiliz=Yr.default,exports.BlcCosmos=$r.default,exports.BlcEthereum=eo.default,exports.BlcEtherlink=ro.default,exports.BlcFlow=oo.default,exports.BlcHarmony=ao.default,exports.BlcIcon=io.default,exports.BlcImmutableX=lo.default,exports.BlcLoopring=uo.default,exports.BlcMoonbeam=to.default,exports.BlcNear=no.default,exports.BlcOptimism=co.default,exports.BlcPolkadot=fo.default,exports.BlcPolygon=vo.default,exports.BlcRarichain=qo.default,exports.BlcSolana=go.default,exports.BlcStability=so.default,exports.BlcSui=Lo.default,exports.BlcTezos=ko.default,exports.BlcWax=Mo.default,exports.BlcZetachain=Io.default,exports.BlcZilliqa=mo.default,exports.BlcZksync=po.default,exports.Fwk11ty=ho.default,exports.FwkAndroid=bo.default,exports.FwkApple=wo.default,exports.FwkAuthy=Co.default,exports.FwkBinanceFill=Bo.default,exports.FwkChrome=Ao.default,exports.FwkElectron=Po.default,exports.FwkExpress=Fo.default,exports.FwkFauna=So.default,exports.FwkFirebase=yo.default,exports.FwkGo=Wo.default,exports.FwkGoogleAuthenticator=To.default,exports.FwkHasura=Do.default,exports.FwkJavascript=Eo.default,exports.FwkJwt=Go.default,exports.FwkLaravel=xo.default,exports.FwkNextjs=Ro.default,exports.FwkNodejs=Oo.default,exports.FwkNuxtjs=zo.default,exports.FwkPhp=Ho.default,exports.FwkReact=Zo.default,exports.FwkStrapi=No.default,exports.FwkStripe=Uo.default,exports.FwkVue=Xo.default,exports.FwkWebflow=jo.default,exports.FwkWordpress=Vo.default,exports.FwkZapier=Qo.default,exports.IconArtDark=Jo.default,exports.IconArt=Ko.default,exports.IconDelete=_o.default,exports.IconEmailGlobe=Yo.default,exports.IconEmail=$o.default,exports.IconGameControllerDark=ea.default,exports.IconGameController=ra.default,exports.IconGenericToken=oa.default,exports.IconMagicGlobe=aa.default,exports.IconMagicLogo=ia.default,exports.IconMusicDark=la.default,exports.IconMusic=ua.default,exports.IconPersonDark=ta.default,exports.IconPerson=na.default,exports.IconProfileDark=ca.default,exports.IconProfileLight=da.default,exports.IconReset=fa.default,exports.IconSms=va.default,exports.IconTicketDark=qa.default,exports.IconTicket=ga.default,exports.IconWarningDark=sa.default,exports.IconWarningShield=La.default,exports.IconWarning=ka.default,exports.LogoAlgorandMono=Ma.default,exports.LogoAlgorand=Ia.default,exports.LogoAppleMono=ma.default,exports.LogoApple=pa.default,exports.LogoAptosMono=ha.default,exports.LogoAptos=ba.default,exports.LogoArbitrumMono=wa.default,exports.LogoArbitrumOneMono=Ca.default,exports.LogoArbitrumOne=Ba.default,exports.LogoArbitrum=Aa.default,exports.LogoAstarMono=Pa.default,exports.LogoAstar=Fa.default,exports.LogoAuth0Mono=Sa.default,exports.LogoAuth0=ya.default,exports.LogoAvalancheMono=Wa.default,exports.LogoAvalanche=Ta.default,exports.LogoAzureMono=Da.default,exports.LogoAzure=Ea.default,exports.LogoBaseMono=Ga.default,exports.LogoBase=xa.default,exports.LogoBerachainMono=Ra.default,exports.LogoBerachain=Oa.default,exports.LogoBinanceMono=za.default,exports.LogoBinance=Ha.default,exports.LogoBitBucketMono=Za.default,exports.LogoBitBucket=Na.default,exports.LogoBitcoinMono=Ua.default,exports.LogoBitcoin=Xa.default,exports.LogoBnbMono=ja.default,exports.LogoBnb=Va.default,exports.LogoCeloMono=Qa.default,exports.LogoCelo=Ja.default,exports.LogoChilizMono=Ka.default,exports.LogoChiliz=_a.default,exports.LogoCognitoMono=Ya.default,exports.LogoCognito=$a.default,exports.LogoCosmosMono=ei.default,exports.LogoCosmos=ri.default,exports.LogoDiscordMono=oi.default,exports.LogoDiscord=ai.default,exports.LogoEthereumMono=ii.default,exports.LogoEthereum=li.default,exports.LogoEtherlinkMono=ui.default,exports.LogoEtherlink=ti.default,exports.LogoFacebookMono=ni.default,exports.LogoFacebook=ci.default,exports.LogoFlareMono=di.default,exports.LogoFlare=fi.default,exports.LogoFlowMono=vi.default,exports.LogoFlow=qi.default,exports.LogoGitHubMono=gi.default,exports.LogoGitHub=si.default,exports.LogoGitLabMono=Li.default,exports.LogoGitLab=ki.default,exports.LogoGoogleMono=Mi.default,exports.LogoGoogle=Ii.default,exports.LogoHarmonyMono=mi.default,exports.LogoHarmony=pi.default,exports.LogoHorizenMono=hi.default,exports.LogoHorizen=bi.default,exports.LogoIconMono=wi.default,exports.LogoIcon=Ci.default,exports.LogoImmutableXMono=Bi.default,exports.LogoImmutableX=Ai.default,exports.LogoLinkByStripeMono=Pi.default,exports.LogoLinkByStripe=Fi.default,exports.LogoLinkMono=Si.default,exports.LogoLink=yi.default,exports.LogoLinkedInMono=Wi.default,exports.LogoLinkedIn=Ti.default,exports.LogoLoopringMono=Di.default,exports.LogoLoopring=Ei.default,exports.LogoMicrosoftMono=Gi.default,exports.LogoMicrosoft=xi.default,exports.LogoMoonbeamMono=Ri.default,exports.LogoMoonbeam=Oi.default,exports.LogoNearMono=zi.default,exports.LogoNear=Hi.default,exports.LogoOnramperMono=Zi.default,exports.LogoOnramper=Ni.default,exports.LogoOptimismMono=Ui.default,exports.LogoOptimism=Xi.default,exports.LogoPayPalMono=ji.default,exports.LogoPayPalWordmarkMono=Vi.default,exports.LogoPayPalWordmark=Qi.default,exports.LogoPayPal=Ji.default,exports.LogoPoaMono=Ki.default,exports.LogoPoa=_i.default,exports.LogoPolkadotMono=Yi.default,exports.LogoPolkadot=$i.default,exports.LogoPolygonMono=el.default,exports.LogoPolygon=rl.default,exports.LogoRarichainMono=ol.default,exports.LogoRarichain=al.default,exports.LogoSardineMono=il.default,exports.LogoSardine=ll.default,exports.LogoSeiMono=ul.default,exports.LogoSei=tl.default,exports.LogoSolanaMono=nl.default,exports.LogoSolana=cl.default,exports.LogoStabilityMono=dl.default,exports.LogoStability=fl.default,exports.LogoSuiMono=vl.default,exports.LogoSui=ql.default,exports.LogoTezosMono=gl.default,exports.LogoTezos=sl.default,exports.LogoTwitchMono=Ll.default,exports.LogoTwitch=kl.default,exports.LogoTwitterMono=Ml.default,exports.LogoTwitter=Il.default,exports.LogoWalletConnectMono=ml.default,exports.LogoWalletConnect=pl.default,exports.LogoWarpcastMono=hl.default,exports.LogoWarpcast=bl.default,exports.LogoWaxMono=wl.default,exports.LogoWax=Cl.default,exports.LogoXdcMono=Bl.default,exports.LogoXdc=Al.default,exports.LogoZetachainMono=Pl.default,exports.LogoZetachain=Fl.default,exports.LogoZilliqaMono=Sl.default,exports.LogoZilliqa=yl.default,exports.LogoZksyncMono=Wl.default,exports.LogoZksync=Tl.default,exports.PayAmex=Dl.default,exports.PayDiscover=El.default,exports.PayMastercard=Gl.default,exports.PayVisa=xl.default,exports.PresentationLogo=Rl.default,exports.WebsiteMagic=Ol.default,exports.WltCoinbase=zl.default,exports.WltMattel=Hl.default,exports.WltMetamask=Zl.default,exports.WltPhantom=Nl.default,exports.WltRainbow=Ul.default,exports.WltWalletConnect=Xl.default,exports.Button=jl.default,exports.Checkbox=Vl.default,exports.DropdownOption=r.DropdownOption,exports.DropdownSelector=r.DropdownSelector,exports.Popover=Ql.Popover,exports.Radio=o.Radio,exports.RadioGroup=o.RadioGroup,exports.SegmentedControl=a.SegmentedControl,exports.Tab=a.Tab,exports.Switch=Jl.default,exports.Text=Kl.default,exports.VerifyPincode=_l.VerifyPincode,exports.Animate=Yl.default,exports.ClientAssetLogo=$l.ClientAssetLogo,exports.QRCode=eu.default,exports.SecuredByMagic=ru.default,exports.SharedLogo=ou.default,exports.useCustomVars=au.useCustomVars,exports.useToast=iu.useToast;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|