@magiclabs/ui-components 1.18.4 → 1.18.5
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/drawer.js +1 -1
- package/dist/cjs/components/containers/drawer.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/toast-provider.js +1 -1
- package/dist/cjs/components/feedback/toast-provider.js.map +1 -1
- package/dist/cjs/components/feedback/tooltip.js +1 -1
- package/dist/cjs/components/feedback/tooltip.js.map +1 -1
- package/dist/cjs/components/info/security-otp.js +1 -1
- package/dist/cjs/components/info/security-otp.js.map +1 -1
- package/dist/cjs/components/info/text-box.js +1 -1
- package/dist/cjs/components/info/text-box.js.map +1 -1
- package/dist/cjs/components/inputs/phone-input.js +1 -1
- package/dist/cjs/components/inputs/phone-input.js.map +1 -1
- package/dist/cjs/components/inputs/text-input.js +1 -1
- package/dist/cjs/components/inputs/text-input.js.map +1 -1
- package/dist/cjs/components/list-items/navigation-button.js +1 -1
- package/dist/cjs/components/list-items/navigation-button.js.map +1 -1
- package/dist/cjs/components/list-items/token-list-item.js +1 -1
- package/dist/cjs/components/list-items/token-list-item.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 +2 -0
- package/dist/cjs/components/primitives/dropdown-selector.js.map +1 -0
- package/dist/cjs/components/primitives/popover.js +1 -1
- package/dist/cjs/components/primitives/popover.js.map +1 -1
- package/dist/cjs/components/primitives/radio.js +1 -1
- package/dist/cjs/components/primitives/radio.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/es/components/containers/drawer.js +1 -1
- package/dist/es/components/containers/drawer.js.map +1 -1
- package/dist/es/components/external/paypal-button.js +1 -1
- package/dist/es/components/external/paypal-button.js.map +1 -1
- package/dist/es/components/feedback/toast-provider.js +1 -1
- package/dist/es/components/feedback/toast-provider.js.map +1 -1
- package/dist/es/components/feedback/tooltip.js +1 -1
- package/dist/es/components/feedback/tooltip.js.map +1 -1
- package/dist/es/components/info/security-otp.js +1 -1
- package/dist/es/components/info/security-otp.js.map +1 -1
- package/dist/es/components/info/text-box.js +1 -1
- package/dist/es/components/info/text-box.js.map +1 -1
- package/dist/es/components/inputs/phone-input.js +1 -1
- package/dist/es/components/inputs/phone-input.js.map +1 -1
- package/dist/es/components/inputs/text-input.js +1 -1
- package/dist/es/components/inputs/text-input.js.map +1 -1
- package/dist/es/components/list-items/navigation-button.js +1 -1
- package/dist/es/components/list-items/navigation-button.js.map +1 -1
- package/dist/es/components/list-items/token-list-item.js +1 -1
- package/dist/es/components/list-items/token-list-item.js.map +1 -1
- package/dist/es/components/primitives/button.js +1 -1
- package/dist/es/components/primitives/button.js.map +1 -1
- package/dist/es/components/primitives/dropdown-selector.js +2 -0
- package/dist/es/components/primitives/dropdown-selector.js.map +1 -0
- package/dist/es/components/primitives/popover.js +1 -1
- package/dist/es/components/primitives/popover.js.map +1 -1
- package/dist/es/components/primitives/radio.js +1 -1
- package/dist/es/components/primitives/radio.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/panda.buildinfo.json +1 -1
- package/dist/types/components/inputs/index.d.ts +0 -2
- package/dist/types/components/inputs/index.d.ts.map +1 -1
- package/dist/types/components/{inputs → primitives}/dropdown-selector.d.ts +10 -3
- package/dist/types/components/primitives/dropdown-selector.d.ts.map +1 -0
- package/dist/types/components/primitives/index.d.ts +2 -0
- package/dist/types/components/primitives/index.d.ts.map +1 -1
- package/dist/types/components/primitives/radio.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/cjs/components/inputs/dropdown-selector.js +0 -2
- package/dist/cjs/components/inputs/dropdown-selector.js.map +0 -1
- package/dist/es/components/inputs/dropdown-selector.js +0 -2
- package/dist/es/components/inputs/dropdown-selector.js.map +0 -1
- package/dist/types/components/inputs/dropdown-selector.d.ts.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n Children,\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n children: ReactNode;\n onSelect: (value: string) => void;\n label?: string;\n selectedValue?: string;\n tooltipContent?: string;\n disabled?: boolean;\n viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n}\n\ninterface OptionData {\n value: string;\n label: string;\n}\n\nexport interface DropdownContextType {\n selectedOption: OptionData | null;\n setSelectedOption: (option: OptionData) => void;\n}\n\nconst DropdownContext = createContext<DropdownContextType>({\n selectedOption: null,\n setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, isFocused }: DropdownOptionProps) => {\n const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n const isSelected = selectedOption?.value === value;\n\n const handleSelectOption = useCallback(() => {\n setSelectedOption({ value, label });\n }, [setSelectedOption, value, label]);\n\n return (\n <HStack\n px={4}\n py={1.5}\n gap={2}\n bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n >\n <Box w={4}>{isSelected && <IcoCheckmark width={16} height={16} color={token('colors.surface.primary')} />}</Box>\n <Text size=\"lg\" styles={{ fontWeight: 500, color: token(`colors.${isSelected ? 'surface' : 'text'}.primary`) }}>\n {label}\n </Text>\n </HStack>\n );\n};\n\nexport const DropdownSelector = ({\n children,\n onSelect,\n label,\n selectedValue,\n tooltipContent,\n disabled,\n viewMax = 5,\n ...props\n}: DropdownSelectorProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const maxHeight = viewMax * 2.5 + 1;\n\n const toggleDropdown = useCallback(() => {\n setIsOpen(prev => !prev);\n if (!isOpen) {\n setFocusedIndex(null);\n setTimeout(() => dropdownRef.current?.focus());\n }\n }, [isOpen]);\n\n const handleSelect = useCallback(\n (option: OptionData) => {\n onSelect(option.value);\n setIsOpen(false);\n },\n [onSelect],\n );\n\n const selectedLabel = useMemo(() => {\n const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n const matchedChild = childElements.find(child => child.props.value === selectedValue);\n return matchedChild ? matchedChild.props.label : 'Select one';\n }, [selectedValue, children]);\n\n const { buttonProps } = useButton(\n {\n ...props,\n isDisabled: disabled,\n onPress: toggleDropdown,\n },\n buttonRef,\n );\n\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: event => {\n if (!isOpen) return;\n\n let newFocusedIndex = focusedIndex;\n const childArray = Children.toArray(children);\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(Children.count(children) - 1);\n } else {\n newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'ArrowDown':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(0);\n } else {\n newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'Enter':\n event.preventDefault();\n buttonRef.current?.focus();\n if (focusedIndex === null) return;\n if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n if (selectedChild) {\n onSelect(selectedChild.props.value);\n }\n }\n break;\n case 'Escape':\n setIsOpen(false);\n buttonRef.current?.focus();\n break;\n default:\n break;\n }\n },\n });\n\n useEffect(() => {\n const handleClick = (event: MouseEvent) => {\n if (!dropdownRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClick);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n };\n }, []);\n\n return (\n <DropdownContext.Provider\n value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n >\n <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n {label && (\n <Text size=\"sm\" styles={{ fontWeight: 500 }}>\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip isDisabled={disabled} content={tooltipContent}>\n <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n </Tooltip>\n )}\n </HStack>\n\n <button\n className={css({\n w: 'full',\n h: 'fit-content',\n borderWidth: 'thin',\n borderColor: 'neutral.secondary',\n rounded: 'xl',\n transition: 'all linear 120ms',\n position: 'relative',\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n _hover: { borderColor: 'neutral.primary' },\n _disabled: { opacity: 0.3, pointerEvents: 'none' },\n })}\n ref={buttonRef}\n {...mergeProps(buttonProps, focusProps, keyboardProps)}\n >\n <HStack w=\"full\" h={12} p={4} justifyContent=\"space-between\">\n <Text size=\"lg\" styles={{ color: token(`colors.text.${selectedValue ? 'primary' : 'tertiary'}`) }}>\n {selectedLabel}\n </Text>\n {isOpen ? (\n <IcoCaretUp width={18} height={18} color={token('colors.brand.base')} />\n ) : (\n <IcoCaretDown width={18} height={18} color={token('colors.brand.base')} />\n )}\n </HStack>\n\n {isOpen && (\n <Box\n ref={dropdownRef}\n tabIndex={-1}\n py={2}\n bg=\"surface.primary\"\n position=\"absolute\"\n w=\"full\"\n rounded=\"input\"\n top={55}\n boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n style={{ maxHeight: `${maxHeight}rem` }}\n overflowY=\"auto\"\n outline=\"none\"\n zIndex=\"max\"\n >\n {Children.map(children, (child, index) =>\n cloneElement(child as ReactElement<DropdownOptionProps>, {\n isFocused: index === focusedIndex,\n }),\n )}\n </Box>\n )}\n </button>\n </VStack>\n </DropdownContext.Provider>\n );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["DropdownContext","createContext","DropdownOption","value","label","isFocused","selectedOption","setSelectedOption","useContext","isSelected","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"o5BA+CA,MAAMA,EAAkBC,EAAmC,CACzD,eAAgB,KAChB,kBAAmB,IAAK,CACzB,CAAA,CAAA,EAEYC,EAAiB,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,UAAAC,CAAS,IAA2B,CACjF,KAAM,CAAE,eAAAC,EAAgB,kBAAAC,CAAiB,EAAKC,EAAWR,CAAe,EAClES,EAAaH,GAAgB,QAAUH,EAEvCO,EAAqBC,EAAY,IAAK,CAC1CJ,EAAkB,CAAE,MAAAJ,EAAO,MAAAC,CAAK,CAAE,CACpC,EAAG,CAACG,EAAmBJ,EAAOC,CAAK,CAAC,EAEpC,OACEQ,EAACC,EACC,CAAA,GAAI,EACJ,GAAI,IACJ,IAAK,EACL,GAAIJ,EAAa,aAAeJ,EAAY,iBAAmB,GAC/D,OAASI,EAAwC,GAA3B,CAAE,GAAI,gBAAkB,EAC9C,QAASC,EAAkB,SAAA,CAE3BI,EAACC,EAAI,CAAA,EAAG,EAAC,SAAGN,GAAcK,EAACE,EAAa,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOC,EAAM,wBAAwB,CAAC,CAAA,CAAW,CAAA,EAChHH,EAACI,EAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,WAAY,IAAK,MAAOD,EAAM,UAAUR,EAAa,UAAY,MAAM,UAAU,CAAG,EAAA,SAC3GL,CAAK,CAAA,CACD,CACA,CAAA,CAEb,EAEae,EAAmB,CAAC,CAC/B,SAAAC,EACA,SAAAC,EACA,MAAAjB,EACA,cAAAkB,EACA,eAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,EACV,GAAGC,CACmB,IAAI,CAC1B,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAAS,EAAK,EACpC,CAACC,EAAcC,CAAe,EAAIF,EAAwB,IAAI,EAC9DG,EAAYC,EAA0B,IAAI,EAC1CC,EAAcD,EAAuB,IAAI,EACzCE,EAAYV,EAAU,IAAM,EAE5BW,EAAiBzB,EAAY,IAAK,CACtCiB,EAAUS,GAAQ,CAACA,CAAI,EAClBV,IACHI,EAAgB,IAAI,EACpB,WAAW,IAAK,CAAA,IAAAO,EAAC,OAAAA,EAAAJ,EAAY,qCAAS,MAAK,CAAE,CAAA,EAEjD,EAAG,CAACP,CAAM,CAAC,EAELY,EAAe5B,EAClB6B,GAAsB,CACrBnB,EAASmB,EAAO,KAAK,EACrBZ,EAAU,EAAK,CACjB,EACA,CAACP,CAAQ,CAAC,EAGNoB,EAAgBC,EAAQ,IAAK,CAEjC,MAAMC,EADgBC,EAAS,QAAQxB,CAAQ,EACZ,KAAKyB,GAASA,EAAM,MAAM,QAAUvB,CAAa,EACpF,OAAOqB,EAAeA,EAAa,MAAM,MAAQ,YACnD,EAAG,CAACrB,EAAeF,CAAQ,CAAC,EAEtB,CAAE,YAAA0B,CAAa,EAAGC,EACtB,CACE,GAAGrB,EACH,WAAYF,EACZ,QAASY,GAEXJ,CAAS,EAGL,CAAE,WAAAgB,EAAY,eAAAC,GAAmBC,GAAAA,EAEjC,CAAE,cAAAC,CAAe,EAAGC,GAAY,CACpC,UAAWC,GAAQ,SACjB,GAAI,CAAC1B,EAAQ,OAEb,IAAI2B,EAAkBxB,EACtB,MAAMyB,EAAaX,EAAS,QAAQxB,CAAQ,EAE5C,OAAQiC,EAAM,KACZ,IAAK,UACHA,EAAM,eAAA,EACFvB,IAAiB,KACnBC,EAAgBa,EAAS,MAAMxB,CAAQ,EAAI,CAAC,GAE5CkC,EAAkBxB,EAAe,EAAIA,EAAe,EAAIc,EAAS,MAAMxB,CAAQ,EAAI,EACnFW,EAAgBuB,CAAe,GAEjC,MACF,IAAK,YACHD,EAAM,iBACFvB,IAAiB,KACnBC,EAAgB,CAAC,GAEjBuB,EAAkBxB,EAAec,EAAS,MAAMxB,CAAQ,EAAI,EAAIU,EAAe,EAAI,EACnFC,EAAgBuB,CAAe,GAEjC,MACF,IAAK,QAGH,GAFAD,EAAM,eAAc,GACpBf,EAAAN,EAAU,WAAS,MAAAM,IAAA,QAAAA,EAAA,QACfR,IAAiB,KAAM,OAC3B,GAAIA,GAAgB,GAAKA,EAAeyB,EAAW,OAAQ,CACzD,MAAMC,EAAgBD,EAAWzB,CAAY,EACzC0B,GACFnC,EAASmC,EAAc,MAAM,KAAK,CAEtC,CACA,MACF,IAAK,SACH5B,EAAU,EAAK,GACf6B,EAAAzB,EAAU,WAAS,MAAAyB,IAAA,QAAAA,EAAA,QACnB,KAGJ,CACF,CACD,CAAA,EAED,OAAAC,EAAU,IAAK,CACb,MAAMC,EAAeN,GAAqB,OACnC,GAAAf,EAAAJ,EAAY,WAAO,MAAAI,IAAA,SAAAA,EAAE,SAASe,EAAM,MAAc,GACrDzB,EAAU,EAAK,CAEnB,EAEA,gBAAS,iBAAiB,YAAa+B,CAAW,EAE3C,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAW,CACvD,CACF,EAAG,CAAE,CAAA,EAGH7C,EAACd,EAAgB,SAAQ,CACvB,MAAO,CAAE,eAAgB,CAAE,MAAOsB,GAAiB,GAAI,MAAOmB,CAAa,EAAI,kBAAmBF,GAElG,SAAA3B,EAACgD,EAAM,CAAC,IAAK,EAAG,EAAE,OAAO,WAAW,aAAY,SAAA,CAC9ChD,EAACC,EAAM,CAAC,IAAK,EAAG,QAASW,EAAW,GAAM,GAAI,WAAY,mBAAkB,SAAA,CACzEpB,GACCU,EAACI,EAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,GAAG,EACtC,SAAAd,CACI,CAAA,EAGRmB,GACCT,EAAC+C,EAAO,CAAC,WAAYrC,EAAU,QAASD,EACtC,SAAAT,EAACgD,EAAqB,CAAC,UAAWC,EAAI,CAAE,EAAG,EAAG,EAAG,EAAG,MAAO,iBAAiB,CAAE,CAAK,CAAA,CAAA,CAAA,CAEtF,CAAA,CAAA,EAGHnD,EAAA,SAAA,CACE,UAAWmD,EAAI,CACb,EAAG,OACH,EAAG,cACH,YAAa,OACb,YAAa,oBACb,QAAS,KACT,WAAY,mBACZ,SAAU,WACV,OAAQ,UACR,aAAc,aACd,aAAcd,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,GACf,OAAQ,CAAE,YAAa,iBAAmB,EAC1C,UAAW,CAAE,QAAS,GAAK,cAAe,MAAQ,EACnD,EACD,IAAKjB,KACDgC,GAAWlB,EAAaE,EAAYG,CAAa,YAErDvC,EAACC,GAAO,EAAE,OAAO,EAAG,GAAI,EAAG,EAAG,eAAe,gBAC3C,SAAA,CAAAC,EAACI,EAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,MAAOD,EAAM,eAAeK,EAAgB,UAAY,UAAU,EAAE,GAC3F,SAAAmB,IAEFd,EACCb,EAACmD,EAAU,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOhD,EAAM,mBAAmB,CAAC,CAAA,EAEpEH,EAACoD,EAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOjD,EAAM,mBAAmB,GACtE,CAAA,CAAA,EAGFU,GACCb,EAACC,GACC,IAAKmB,EACL,SAAU,GACV,GAAI,EACJ,GAAG,kBACH,SAAS,WACT,EAAE,OACF,QAAQ,QACR,IAAK,GACL,UAAU,uCACV,MAAO,CAAE,UAAW,GAAGC,CAAS,OAChC,UAAU,OACV,QAAQ,OACR,OAAO,eAENS,EAAS,IAAIxB,EAAU,CAACyB,EAAOsB,IAC9BC,EAAavB,EAA4C,CACvD,UAAWsB,IAAUrC,CACtB,CAAA,CAAC,CAEA,CAAA,CACP,GACM,CACF,CAAA,CAAA,CAAA,CAGf,EAEA5B,EAAe,YAAc,iBAC7BiB,EAAiB,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as l,Fragment as T,jsxs as O}from"react/jsx-runtime";import C from"./button.js";import"./checkbox.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import{useToggleState as $}from"../../hooks/useToggleState.js";import{cx as G}from"@styled/css";import{Center as S}from"@styled/jsx";import{vstack as J}from"@styled/patterns";import{token as Q}from"@styled/tokens";import{createSlot as E,createHost as V}from"create-slots";import{Children as L,cloneElement as A,useMemo as ee,useRef as R,useCallback as k,useEffect as oe}from"react";import{useOverlayTrigger as te,usePopover as re,mergeProps as z,Overlay as ne}from"react-aria";const D="bottom left",F=8,P=E(({children:i})=>l(T,{children:i})),N=E(({children:i,...o})=>l(S,{children:L.map(i,t=>A(t,o))})),X=E(({children:i,...o})=>l(S,{children:L.map(i,t=>A(t,o))})),Y=({children:i,...o})=>V(i,t=>{var h;const{isSelected:w,setSelected:v}=$({isOpen:o.isOpen,defaultSelected:o.defaultOpen,onChange:o.onOpenChange,...o}),a=o.isOpen!==void 0?o.isOpen:w,r=24,n=ee(()=>({isOpen:a,open:()=>{v(!0)},close:()=>{v(!1)},setOpen(e){v(e)},toggle(){}}),[a]),I=t.getProps(P),d=R(null),{triggerProps:H,overlayProps:B}=te({type:"dialog"},n,d),s=R(null),{popoverProps:M,underlayProps:U}=re({placement:D,offset:F,popoverRef:s,triggerRef:d,...I},n),m=z(I,M);!((h=m?.style)===null||h===void 0)&&h.zIndex&&(m.style.zIndex=Q("zIndex.max"));const W=k(()=>{n.open()},[n]),x=k(e=>{var b,y;const c=(b=d.current)===null||b===void 0?void 0:b.getBoundingClientRect(),p=(y=s.current)===null||y===void 0?void 0:y.getBoundingClientRect();if(c&&p){const K=e.clientX>=c.left-r&&e.clientX<=c.right+r&&e.clientY>=c.top-r&&e.clientY<=c.bottom+r,Z=e.clientX>=p.left-r&&e.clientX<=p.right+r&&e.clientY>=p.top-r&&e.clientY<=p.bottom+r;!K&&!Z&&n.close()}},[n]),_=()=>{if(s.current){const e=s.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.length>0&&e[0].focus()}},q=e=>{e.key==="Enter"&&(e.preventDefault(),a?n.close():(n.open(),setTimeout(_,0)))};oe(()=>(document.addEventListener("mousemove",x),()=>{document.removeEventListener("mousemove",x)}),[x]);const g=o.size==="sm"?16:24,u=t.get(N),f=t.get(X);return O(T,{children:[O(C,{ref:d,...z(H,o),onHover:W,onKeyDown:q,children:[u&&l(C.LeadingIcon,{children:u&&{...u,props:{...u.props,width:g,height:g}}}),f&&l(C.TrailingIcon,{children:f&&{...f,props:{...f.props,width:g,height:g}}})]}),a&&O(ne,{...B,children:[l("div",{...U,className:"underlay"}),l("div",{ref:s,...m,className:G(J({bg:"surface.primary",p:3,gap:0,color:"text.secondary",borderWidth:1,borderColor:"neutral.secondary",borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",maxW:52,alignItems:"start"}),m.className),children:t.get(P)})]})]})}),j=Object.assign(Y,{LeadingIcon:N,TrailingIcon:X,Content:P});export{F as DEFAULT_OFFSET,D as DEFAULT_PLACEMENT,j as Popover,Y as PopoverHost,j as default};
|
|
1
|
+
import{jsx as l,Fragment as T,jsxs as O}from"react/jsx-runtime";import C from"./button.js";import"./checkbox.js";import"./dropdown-selector.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import{useToggleState as $}from"../../hooks/useToggleState.js";import{cx as G}from"@styled/css";import{Center as S}from"@styled/jsx";import{vstack as J}from"@styled/patterns";import{token as Q}from"@styled/tokens";import{createSlot as E,createHost as V}from"create-slots";import{Children as L,cloneElement as A,useMemo as ee,useRef as R,useCallback as k,useEffect as oe}from"react";import{useOverlayTrigger as te,usePopover as re,mergeProps as z,Overlay as ne}from"react-aria";const D="bottom left",F=8,P=E(({children:i})=>l(T,{children:i})),N=E(({children:i,...o})=>l(S,{children:L.map(i,t=>A(t,o))})),X=E(({children:i,...o})=>l(S,{children:L.map(i,t=>A(t,o))})),Y=({children:i,...o})=>V(i,t=>{var h;const{isSelected:w,setSelected:v}=$({isOpen:o.isOpen,defaultSelected:o.defaultOpen,onChange:o.onOpenChange,...o}),a=o.isOpen!==void 0?o.isOpen:w,r=24,n=ee(()=>({isOpen:a,open:()=>{v(!0)},close:()=>{v(!1)},setOpen(e){v(e)},toggle(){}}),[a]),I=t.getProps(P),d=R(null),{triggerProps:H,overlayProps:B}=te({type:"dialog"},n,d),s=R(null),{popoverProps:M,underlayProps:U}=re({placement:D,offset:F,popoverRef:s,triggerRef:d,...I},n),m=z(I,M);!((h=m?.style)===null||h===void 0)&&h.zIndex&&(m.style.zIndex=Q("zIndex.max"));const W=k(()=>{n.open()},[n]),x=k(e=>{var b,y;const c=(b=d.current)===null||b===void 0?void 0:b.getBoundingClientRect(),p=(y=s.current)===null||y===void 0?void 0:y.getBoundingClientRect();if(c&&p){const K=e.clientX>=c.left-r&&e.clientX<=c.right+r&&e.clientY>=c.top-r&&e.clientY<=c.bottom+r,Z=e.clientX>=p.left-r&&e.clientX<=p.right+r&&e.clientY>=p.top-r&&e.clientY<=p.bottom+r;!K&&!Z&&n.close()}},[n]),_=()=>{if(s.current){const e=s.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.length>0&&e[0].focus()}},q=e=>{e.key==="Enter"&&(e.preventDefault(),a?n.close():(n.open(),setTimeout(_,0)))};oe(()=>(document.addEventListener("mousemove",x),()=>{document.removeEventListener("mousemove",x)}),[x]);const g=o.size==="sm"?16:24,u=t.get(N),f=t.get(X);return O(T,{children:[O(C,{ref:d,...z(H,o),onHover:W,onKeyDown:q,children:[u&&l(C.LeadingIcon,{children:u&&{...u,props:{...u.props,width:g,height:g}}}),f&&l(C.TrailingIcon,{children:f&&{...f,props:{...f.props,width:g,height:g}}})]}),a&&O(ne,{...B,children:[l("div",{...U,className:"underlay"}),l("div",{ref:s,...m,className:G(J({bg:"surface.primary",p:3,gap:0,color:"text.secondary",borderWidth:1,borderColor:"neutral.secondary",borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",maxW:52,alignItems:"start"}),m.className),children:t.get(P)})]})]})}),j=Object.assign(Y,{LeadingIcon:N,TrailingIcon:X,Content:P});export{F as DEFAULT_OFFSET,D as DEFAULT_PLACEMENT,j as Popover,Y as PopoverHost,j as default};
|
|
2
2
|
//# sourceMappingURL=popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n Children,\n ComponentProps,\n PropsWithChildren,\n cloneElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n isOpen?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n}\n\ninterface OverlayTriggerState {\n readonly isOpen: boolean;\n setOpen(isOpen: boolean): void;\n open(): void;\n close(): void;\n toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'> & {\n children?: ReactNode;\n state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n return createHost(children, slots => {\n const { isSelected, setSelected: setOpen } = useToggleState({\n isOpen: props.isOpen,\n defaultSelected: props.defaultOpen,\n onChange: props.onOpenChange,\n ...props,\n });\n\n const isOpen = props.isOpen !== undefined ? props.isOpen : isSelected;\n const safeZoneRadius = 24;\n\n const state = useMemo(\n () => ({\n isOpen,\n open: () => {\n setOpen(true);\n },\n close: () => {\n setOpen(false);\n },\n setOpen(value: boolean) {\n setOpen(value);\n },\n toggle() {},\n }),\n [isOpen],\n );\n\n const popoverContentProps = slots.getProps(PopoverContent);\n\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const { popoverProps, underlayProps } = usePopover(\n {\n placement: DEFAULT_PLACEMENT,\n offset: DEFAULT_OFFSET,\n popoverRef: contentRef,\n triggerRef,\n ...popoverContentProps,\n },\n state,\n );\n\n const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n // Need to override zIndex set by react-aria so popover displays over iframe\n if (contentProps?.style?.zIndex) {\n contentProps.style.zIndex = token('zIndex.max');\n }\n\n const handleMouseEnter = useCallback(() => {\n state.open();\n }, [state]);\n\n const handleMouseLeave = useCallback(\n (event: MouseEvent) => {\n const buttonRect = triggerRef.current?.getBoundingClientRect();\n const popoverRect = contentRef.current?.getBoundingClientRect();\n\n if (buttonRect && popoverRect) {\n const withinButtonSafeZone =\n event.clientX >= buttonRect.left - safeZoneRadius &&\n event.clientX <= buttonRect.right + safeZoneRadius &&\n event.clientY >= buttonRect.top - safeZoneRadius &&\n event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n const withinPopoverSafeZone =\n event.clientX >= popoverRect.left - safeZoneRadius &&\n event.clientX <= popoverRect.right + safeZoneRadius &&\n event.clientY >= popoverRect.top - safeZoneRadius &&\n event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n state.close();\n }\n }\n },\n [state],\n );\n\n const focusFirstInteractiveElement = () => {\n if (contentRef.current) {\n const interactiveElements = contentRef.current.querySelectorAll(\n 'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n if (interactiveElements.length > 0) {\n (interactiveElements[0] as HTMLElement).focus();\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n if (isOpen) {\n state.close();\n } else {\n state.open();\n setTimeout(focusFirstInteractiveElement, 0);\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('mousemove', handleMouseLeave);\n return () => {\n document.removeEventListener('mousemove', handleMouseLeave);\n };\n }, [handleMouseLeave]);\n\n const iconSize = props.size === 'sm' ? 16 : 24;\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n\n return (\n <>\n <Button\n ref={triggerRef}\n {...mergeProps(triggerProps, props)}\n onHover={handleMouseEnter}\n onKeyDown={handleKeyDown}\n >\n {leadingIcon && (\n <Button.LeadingIcon>\n {leadingIcon && { ...leadingIcon, props: { ...leadingIcon.props, width: iconSize, height: iconSize } }}\n </Button.LeadingIcon>\n )}\n {trailingIcon && (\n <Button.TrailingIcon>\n {trailingIcon && { ...trailingIcon, props: { ...trailingIcon.props, width: iconSize, height: iconSize } }}\n </Button.TrailingIcon>\n )}\n </Button>\n {isOpen && (\n <Overlay {...overlayProps}>\n <div {...underlayProps} className=\"underlay\" />\n <div\n ref={contentRef}\n {...contentProps}\n className={cx(\n vstack({\n bg: 'surface.primary',\n p: 3,\n gap: 0,\n color: 'text.secondary',\n borderWidth: 1,\n borderColor: 'neutral.secondary',\n borderRadius: 'xl',\n boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n maxW: 52,\n alignItems: 'start',\n }),\n contentProps.className,\n )}\n >\n {slots.get(PopoverContent)}\n </div>\n </Overlay>\n )}\n </>\n );\n });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n LeadingIcon,\n TrailingIcon,\n Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","PopoverContent","createSlot","children","_jsx","_Fragment","LeadingIcon","props","Center","Children","child","cloneElement","TrailingIcon","PopoverHost","createHost","slots","isSelected","setOpen","useToggleState","isOpen","safeZoneRadius","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","handleMouseEnter","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","iconSize","leadingIcon","trailingIcon","_jsxs","Button","Overlay","cx","vstack","Popover"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n Children,\n ComponentProps,\n PropsWithChildren,\n cloneElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n isOpen?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n}\n\ninterface OverlayTriggerState {\n readonly isOpen: boolean;\n setOpen(isOpen: boolean): void;\n open(): void;\n close(): void;\n toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'> & {\n children?: ReactNode;\n state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n return createHost(children, slots => {\n const { isSelected, setSelected: setOpen } = useToggleState({\n isOpen: props.isOpen,\n defaultSelected: props.defaultOpen,\n onChange: props.onOpenChange,\n ...props,\n });\n\n const isOpen = props.isOpen !== undefined ? props.isOpen : isSelected;\n const safeZoneRadius = 24;\n\n const state = useMemo(\n () => ({\n isOpen,\n open: () => {\n setOpen(true);\n },\n close: () => {\n setOpen(false);\n },\n setOpen(value: boolean) {\n setOpen(value);\n },\n toggle() {},\n }),\n [isOpen],\n );\n\n const popoverContentProps = slots.getProps(PopoverContent);\n\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const { popoverProps, underlayProps } = usePopover(\n {\n placement: DEFAULT_PLACEMENT,\n offset: DEFAULT_OFFSET,\n popoverRef: contentRef,\n triggerRef,\n ...popoverContentProps,\n },\n state,\n );\n\n const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n // Need to override zIndex set by react-aria so popover displays over iframe\n if (contentProps?.style?.zIndex) {\n contentProps.style.zIndex = token('zIndex.max');\n }\n\n const handleMouseEnter = useCallback(() => {\n state.open();\n }, [state]);\n\n const handleMouseLeave = useCallback(\n (event: MouseEvent) => {\n const buttonRect = triggerRef.current?.getBoundingClientRect();\n const popoverRect = contentRef.current?.getBoundingClientRect();\n\n if (buttonRect && popoverRect) {\n const withinButtonSafeZone =\n event.clientX >= buttonRect.left - safeZoneRadius &&\n event.clientX <= buttonRect.right + safeZoneRadius &&\n event.clientY >= buttonRect.top - safeZoneRadius &&\n event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n const withinPopoverSafeZone =\n event.clientX >= popoverRect.left - safeZoneRadius &&\n event.clientX <= popoverRect.right + safeZoneRadius &&\n event.clientY >= popoverRect.top - safeZoneRadius &&\n event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n state.close();\n }\n }\n },\n [state],\n );\n\n const focusFirstInteractiveElement = () => {\n if (contentRef.current) {\n const interactiveElements = contentRef.current.querySelectorAll(\n 'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n if (interactiveElements.length > 0) {\n (interactiveElements[0] as HTMLElement).focus();\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n if (isOpen) {\n state.close();\n } else {\n state.open();\n setTimeout(focusFirstInteractiveElement, 0);\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('mousemove', handleMouseLeave);\n return () => {\n document.removeEventListener('mousemove', handleMouseLeave);\n };\n }, [handleMouseLeave]);\n\n const iconSize = props.size === 'sm' ? 16 : 24;\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n\n return (\n <>\n <Button\n ref={triggerRef}\n {...mergeProps(triggerProps, props)}\n onHover={handleMouseEnter}\n onKeyDown={handleKeyDown}\n >\n {leadingIcon && (\n <Button.LeadingIcon>\n {leadingIcon && { ...leadingIcon, props: { ...leadingIcon.props, width: iconSize, height: iconSize } }}\n </Button.LeadingIcon>\n )}\n {trailingIcon && (\n <Button.TrailingIcon>\n {trailingIcon && { ...trailingIcon, props: { ...trailingIcon.props, width: iconSize, height: iconSize } }}\n </Button.TrailingIcon>\n )}\n </Button>\n {isOpen && (\n <Overlay {...overlayProps}>\n <div {...underlayProps} className=\"underlay\" />\n <div\n ref={contentRef}\n {...contentProps}\n className={cx(\n vstack({\n bg: 'surface.primary',\n p: 3,\n gap: 0,\n color: 'text.secondary',\n borderWidth: 1,\n borderColor: 'neutral.secondary',\n borderRadius: 'xl',\n boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n maxW: 52,\n alignItems: 'start',\n }),\n contentProps.className,\n )}\n >\n {slots.get(PopoverContent)}\n </div>\n </Overlay>\n )}\n </>\n );\n });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n LeadingIcon,\n TrailingIcon,\n Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","PopoverContent","createSlot","children","_jsx","_Fragment","LeadingIcon","props","Center","Children","child","cloneElement","TrailingIcon","PopoverHost","createHost","slots","isSelected","setOpen","useToggleState","isOpen","safeZoneRadius","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","handleMouseEnter","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","iconSize","leadingIcon","trailingIcon","_jsxs","Button","Overlay","cx","vstack","Popover"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as C,jsx as e}from"react/jsx-runtime";import V from"./text.js";import{Flex as c,Circle as v,Box as P}from"@styled/jsx";import{flex as R}from"@styled/patterns";import{createContext as j,forwardRef as k,useContext as S,useRef as w,useCallback as u}from"react";import{useHover as F,useFocusRing as I,usePress as N,VisuallyHidden as W,mergeProps as z}from"react-aria";const p=j({selectedValue:void 0,setSelectedValue:()=>{}}),m=i=>{const{children:s,onChange:t,selectedValue:o,vertical:r}=i,n=u(a=>{t(a)},[t]);return e(c,{direction:r?"column":"row",gap:r?5:10,role:"radiogroup",children:e(p.Provider,{value:{selectedValue:o,setSelectedValue:n},children:s})})},h=k((i,s)=>{const{label:t,value:o}=i,r=S(p),n=w(null),a=s||n,b=u(()=>{r.setSelectedValue(o)},[r,o]),{hoverProps:f}=F({}),{focusProps:x,isFocusVisible:d}=I(),{pressProps:g}=N({onPress:b}),l=r.selectedValue===o,y=l?0:-1;return C("label",{className:R({alignItems:"center"}),children:[e(W,{children:e("input",{...z(g,x,f),ref:a,type:"radio",checked:l,tabIndex:y,readOnly:!0})}),e(c,{justifyContent:"center",alignItems:"center",borderWidth:"thick",borderColor:d||l?"brand.base":"text.tertiary",transition:"border-color 0.2s ease",outlineColor:"brand.base",outlineStyle:d?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"brand.base"},cursor:"pointer",w:6,h:6,rounded:"full","aria-hidden":"true",children:l&&e(v,{size:3,bg:"brand.base"})}),e(P,{ml:3,children:e(V,{size:"lg",styles:{fontWeight:500},children:t})})]})});m.displayName="RadioGroup",h.displayName="Radio";export{h as Radio,m as RadioGroup};
|
|
2
2
|
//# sourceMappingURL=radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","sources":["../../../../src/components/primitives/radio.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { Box, Circle, Flex } from '@styled/jsx';\nimport { flex } from '@styled/patterns';\nimport {
|
|
1
|
+
{"version":3,"file":"radio.js","sources":["../../../../src/components/primitives/radio.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { Box, Circle, Flex } from '@styled/jsx';\nimport { flex } from '@styled/patterns';\nimport { PropsWithChildren, createContext, forwardRef, useCallback, useContext, useRef } from 'react';\nimport {\n AriaRadioGroupProps,\n AriaRadioProps,\n VisuallyHidden,\n mergeProps,\n useFocusRing,\n useHover,\n usePress,\n} from 'react-aria';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, PropsWithChildren {\n onChange: (value: string) => void;\n selectedValue?: string;\n vertical?: boolean;\n}\n\nexport interface RadioProps extends AriaRadioProps {\n label?: string;\n}\n\nconst RadioContext = createContext<{\n selectedValue: string | undefined;\n setSelectedValue: (value: string) => void;\n}>({\n selectedValue: undefined,\n setSelectedValue: () => {},\n});\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n const { children, onChange, selectedValue, vertical } = props;\n\n const handleSelect = useCallback(\n (value: string) => {\n onChange(value);\n },\n [onChange],\n );\n\n return (\n <Flex direction={vertical ? 'column' : 'row'} gap={vertical ? 5 : 10} role=\"radiogroup\">\n <RadioContext.Provider value={{ selectedValue, setSelectedValue: handleSelect }}>\n {children}\n </RadioContext.Provider>\n </Flex>\n );\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>((props, forwardedRef) => {\n const { label, value } = props;\n const state = useContext(RadioContext);\n\n const internalRef = useRef<HTMLInputElement>(null);\n const ref = forwardedRef || internalRef;\n\n const handlePress = useCallback(() => {\n state.setSelectedValue(value);\n }, [state, value]);\n\n const { hoverProps } = useHover({});\n const { focusProps, isFocusVisible } = useFocusRing();\n const { pressProps } = usePress({\n onPress: handlePress,\n });\n\n const isSelected = state.selectedValue === value;\n\n const tabIndex = isSelected ? 0 : -1;\n\n return (\n <label className={flex({ alignItems: 'center' })}>\n <VisuallyHidden>\n <input\n {...mergeProps(pressProps, focusProps, hoverProps)}\n ref={ref}\n type=\"radio\"\n checked={isSelected}\n tabIndex={tabIndex}\n readOnly\n />\n </VisuallyHidden>\n <Flex\n justifyContent=\"center\"\n alignItems=\"center\"\n borderWidth=\"thick\"\n borderColor={isFocusVisible || isSelected ? 'brand.base' : 'text.tertiary'}\n transition=\"border-color 0.2s ease\"\n outlineColor=\"brand.base\"\n outlineStyle={isFocusVisible ? 'solid' : 'none'}\n outlineWidth=\"thick\"\n outlineOffset={0.5}\n _hover={{ borderColor: 'brand.base' }}\n cursor=\"pointer\"\n w={6}\n h={6}\n rounded=\"full\"\n aria-hidden=\"true\"\n >\n {isSelected && <Circle size={3} bg=\"brand.base\" />}\n </Flex>\n <Box ml={3}>\n <Text size=\"lg\" styles={{ fontWeight: 500 }}>\n {label}\n </Text>\n </Box>\n </label>\n );\n});\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"],"names":["RadioContext","createContext","RadioGroup","props","children","onChange","selectedValue","vertical","handleSelect","useCallback","value","_jsx","Flex","Radio","forwardRef","forwardedRef","label","state","useContext","internalRef","useRef","ref","handlePress","hoverProps","useHover","focusProps","isFocusVisible","useFocusRing","pressProps","usePress","isSelected","tabIndex","_jsxs","flex","VisuallyHidden","mergeProps","Circle","Box","Text"],"mappings":"wXAwBA,MAAMA,EAAeC,EAGlB,CACD,cAAe,OACf,iBAAkB,IAAK,CACxB,CAAA,CAAA,EAEYC,EAAcC,GAA0B,CACnD,KAAM,CAAE,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,SAAAC,CAAQ,EAAKJ,EAElDK,EAAeC,EAClBC,GAAiB,CAChBL,EAASK,CAAK,CAChB,EACA,CAACL,CAAQ,CAAC,EAGZ,OACEM,EAACC,EAAI,CAAC,UAAWL,EAAW,SAAW,MAAO,IAAKA,EAAW,EAAI,GAAI,KAAK,aAAY,SACrFI,EAACX,EAAa,SAAQ,CAAC,MAAO,CAAE,cAAAM,EAAe,iBAAkBE,CAAY,WAC1EJ,CAAQ,CAAA,CAEN,CAAA,CAEX,EAEaS,EAAQC,EAAyC,CAACX,EAAOY,IAAgB,CACpF,KAAM,CAAE,MAAAC,EAAO,MAAAN,CAAO,EAAGP,EACnBc,EAAQC,EAAWlB,CAAY,EAE/BmB,EAAcC,EAAyB,IAAI,EAC3CC,EAAMN,GAAgBI,EAEtBG,EAAcb,EAAY,IAAK,CACnCQ,EAAM,iBAAiBP,CAAK,CAC9B,EAAG,CAACO,EAAOP,CAAK,CAAC,EAEX,CAAE,WAAAa,CAAY,EAAGC,EAAS,CAAE,CAAA,EAC5B,CAAE,WAAAC,EAAY,eAAAC,GAAmBC,IACjC,CAAE,WAAAC,CAAY,EAAGC,EAAS,CAC9B,QAASP,CACV,CAAA,EAEKQ,EAAab,EAAM,gBAAkBP,EAErCqB,EAAWD,EAAa,EAAI,GAElC,OACEE,EAAO,QAAA,CAAA,UAAWC,EAAK,CAAE,WAAY,SAAU,EAAC,SAAA,CAC9CtB,EAACuB,EAAc,CAAA,SACbvB,cACMwB,EAAWP,EAAYH,EAAYF,CAAU,EACjD,IAAKF,EACL,KAAK,QACL,QAASS,EACT,SAAUC,EACV,aAEa,CAAA,EACjBpB,EAACC,EAAI,CACH,eAAe,SACf,WAAW,SACX,YAAY,QACZ,YAAac,GAAkBI,EAAa,aAAe,gBAC3D,WAAW,yBACX,aAAa,aACb,aAAcJ,EAAiB,QAAU,OACzC,aAAa,QACb,cAAe,GACf,OAAQ,CAAE,YAAa,cACvB,OAAO,UACP,EAAG,EACH,EAAG,EACH,QAAQ,qBACI,OAAM,SAEjBI,GAAcnB,EAACyB,EAAM,CAAC,KAAM,EAAG,GAAG,YAAY,CAAA,IAEjDzB,EAAC0B,EAAI,CAAA,GAAI,EAAC,SACR1B,EAAC2B,GAAK,KAAK,KAAK,OAAQ,CAAE,WAAY,KACnC,SAAAtB,GAEC,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAEDd,EAAW,YAAc,aACzBW,EAAM,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as f,jsx as o}from"react/jsx-runtime";import"../feedback/callout.js";import{LoadingSpinner as u}from"../feedback/loading-spinner.js";import{token as C}from"@styled/tokens";import j from"../icons/ico-checkmark-circle-fill.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import x from"../primitives/text.js";import"../primitives/portal.js";import"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import{VStack as y,Center as S}from"@styled/jsx";import"../feedback/tooltip.js";import"../inputs/
|
|
1
|
+
import{jsxs as f,jsx as o}from"react/jsx-runtime";import"../feedback/callout.js";import{LoadingSpinner as u}from"../feedback/loading-spinner.js";import{token as C}from"@styled/tokens";import j from"../icons/ico-checkmark-circle-fill.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import x from"../primitives/text.js";import"../primitives/portal.js";import"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import{VStack as y,Center as S}from"@styled/jsx";import"../feedback/tooltip.js";import"../inputs/phone-input.js";import{PinCodeInput as b}from"../inputs/pincode-input.js";import"../inputs/text-input.js";import{createSlot as k,createHost as F}from"create-slots";const i=k(({children:r})=>r),L=r=>{const{isPending:e,isSuccess:n,onChange:m,onComplete:p,originName:s,pinLength:c,id:a,autoFocus:g,errorMessage:t,children:h}=r,d=()=>e?o(u,{size:36,strokeWidth:4}):n?o(j,{color:C("colors.brand.base"),width:36,height:36}):o(b,{originName:s,onChange:m,pinLength:c,onComplete:p,id:a,autoFocus:g});return F(h,l=>f(y,{gap:3,my:3,children:[o(S,{height:12,children:d()}),t&&o(x,{variant:"error",size:"sm",styles:{textAlign:"center"},children:t}),l.get(i)]}))},P=Object.assign(L,{RetryContent:i});export{P as VerifyPincode};
|
|
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":"43BAeA,MAAMA,EAAeC,EAAW,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,EAACC,EAAc,CAAC,KAAM,GAAI,YAAa,CAAC,CAAA,EAE1DV,EAAkBS,EAACE,EAAsB,CAAC,MAAOC,EAAM,mBAAmB,EAAG,MAAO,GAAI,OAAQ,KAGlGH,EAACI,EAAY,CACX,WAAYV,EACZ,SAAUF,EACV,UAAWG,EACX,WAAYF,EACZ,GAAIG,EAEJ,UAAWC,CACX,CAAA,EAIN,OAAOQ,EAAWlB,EAAUmB,GAExBC,EAACC,EAAO,CAAA,IAAK,EAAG,GAAI,EAClB,SAAA,CAAAR,EAACS,EAAO,CAAA,OAAQ,GAAK,SAAAV,GAAuB,CAAA,EAC3CD,GACCE,EAACU,GAAK,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/es/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Content as r}from"./components/containers/content.js";import{Drawer as a}from"./components/containers/drawer.js";import{Footer as l}from"./components/containers/footer.js";import{Header as m}from"./components/containers/header.js";import{Modal as d}from"./components/containers/modal.js";import{Overlay as x}from"./components/containers/overlay.js";import{PayPalButton as n}from"./components/external/paypal-button.js";import{SocialLoginButton as g}from"./components/external/social-login-button.js";import{Callout as I}from"./components/feedback/callout.js";import{LoadingSpinner as k}from"./components/feedback/loading-spinner.js";import{Toast as F,ToastProvider as C}from"./components/feedback/toast-provider.js";import{default as h}from"./components/feedback/tooltip.js";import{default as A}from"./components/icons/ico-add.js";import{default as S}from"./components/icons/ico-alert-circle-fill.js";import{default as W}from"./components/icons/ico-alert-circle.js";import{default as D}from"./components/icons/ico-arrow-down.js";import{default as G}from"./components/icons/ico-arrow-left.js";import{default as R}from"./components/icons/ico-arrow-right.js";import{default as H}from"./components/icons/ico-asterisk.js";import{default as N}from"./components/icons/ico-astronaut.js";import{default as X}from"./components/icons/ico-bank.js";import{default as Q}from"./components/icons/ico-bell-notification.js";import{default as V}from"./components/icons/ico-bell.js";import{default as J}from"./components/icons/ico-branding.js";import{default as Y}from"./components/icons/ico-caret-down.js";import{default as $}from"./components/icons/ico-caret-left.js";import{default as eo}from"./components/icons/ico-caret-right.js";import{default as to}from"./components/icons/ico-caret-up.js";import{default as fo}from"./components/icons/ico-checkmark-circle-fill.js";import{default as so}from"./components/icons/ico-checkmark-circle.js";import{default as po}from"./components/icons/ico-checkmark.js";import{default as xo}from"./components/icons/ico-code-editor.js";import{default as no}from"./components/icons/ico-code-sandbox.js";import{default as go}from"./components/icons/ico-code.js";import{default as Io}from"./components/icons/ico-command-line.js";import{default as ko}from"./components/icons/ico-comment.js";import{default as Fo}from"./components/icons/ico-copy.js";import{default as wo}from"./components/icons/ico-credit-card.js";import{default as Po}from"./components/icons/ico-dedicated.js";import{default as bo}from"./components/icons/ico-diamond.js";import{default as yo}from"./components/icons/ico-dismiss-circle-fill.js";import{default as To}from"./components/icons/ico-dismiss-circle.js";import{default as Eo}from"./components/icons/ico-dismiss.js";import{default as Oo}from"./components/icons/ico-doc.js";import{default as vo}from"./components/icons/ico-download.js";import{default as Zo}from"./components/icons/ico-edit-email.js";import{default as zo}from"./components/icons/ico-edit.js";import{default as jo}from"./components/icons/ico-email-fill.js";import{default as Uo}from"./components/icons/ico-email-open.js";import{default as qo}from"./components/icons/ico-email.js";import{default as Ko}from"./components/icons/ico-expiration.js";import{default as _o}from"./components/icons/ico-external-link.js";import{default as oe}from"./components/icons/ico-eye-closed.js";import{default as re}from"./components/icons/ico-eye-opened.js";import{default as ae}from"./components/icons/ico-fingerprint-fill.js";import{default as le}from"./components/icons/ico-fingerprint.js";import{default as me}from"./components/icons/ico-gas.js";import{default as de}from"./components/icons/ico-gift.js";import{default as xe}from"./components/icons/ico-globe.js";import{default as ne}from"./components/icons/ico-guide.js";import{default as ge}from"./components/icons/ico-home.js";import{default as Ie}from"./components/icons/ico-hourglass.js";import{default as ke}from"./components/icons/ico-info-circle-fill.js";import{default as Fe}from"./components/icons/ico-info-circle.js";import{default as we}from"./components/icons/ico-key.js";import{default as Pe}from"./components/icons/ico-lightbulb-fill.js";import{default as be}from"./components/icons/ico-lightbulb.js";import{default as ye}from"./components/icons/ico-lightning-fill.js";import{default as Te}from"./components/icons/ico-lightning.js";import{default as Ee}from"./components/icons/ico-link.js";import{default as Oe}from"./components/icons/ico-loading.js";import{default as ve}from"./components/icons/ico-lock-locked.js";import{default as Ze}from"./components/icons/ico-lock-password.js";import{default as ze}from"./components/icons/ico-lock-unlocked.js";import{default as je}from"./components/icons/ico-login-form.js";import{default as Ue}from"./components/icons/ico-magic.js";import{default as qe}from"./components/icons/ico-menu.js";import{default as Ke}from"./components/icons/ico-message-fill.js";import{default as _e}from"./components/icons/ico-message.js";import{default as or}from"./components/icons/ico-mfa.js";import{default as rr}from"./components/icons/ico-mobile2fa.js";import{default as ar}from"./components/icons/ico-mobile2fafill.js";import{default as lr}from"./components/icons/ico-open-book.js";import{default as mr}from"./components/icons/ico-paper-plane.js";import{default as dr}from"./components/icons/ico-passport.js";import{default as xr}from"./components/icons/ico-passwordless.js";import{default as nr}from"./components/icons/ico-pending-connection.js";import{default as gr}from"./components/icons/ico-phone.js";import{default as Ir}from"./components/icons/ico-price.js";import{default as kr}from"./components/icons/ico-qrcode.js";import{default as Fr}from"./components/icons/ico-question-circle-fill.js";import{default as wr}from"./components/icons/ico-question-circle.js";import{default as Pr}from"./components/icons/ico-refresh-circle-fill.js";import{default as br}from"./components/icons/ico-refresh.js";import{default as yr}from"./components/icons/ico-rocket-fill.js";import{default as Tr}from"./components/icons/ico-search.js";import{default as Er}from"./components/icons/ico-settings.js";import{default as Or}from"./components/icons/ico-shield-approved.js";import{default as vr}from"./components/icons/ico-shield-rejected.js";import{default as Zr}from"./components/icons/ico-shield.js";import{default as zr}from"./components/icons/ico-social.js";import{default as jr}from"./components/icons/ico-sold-out-tag.js";import{default as Ur}from"./components/icons/ico-star.js";import{default as qr}from"./components/icons/ico-swap.js";import{default as Kr}from"./components/icons/ico-swatches.js";import{default as _r}from"./components/icons/ico-team.js";import{default as ot}from"./components/icons/ico-users.js";import{default as rt}from"./components/icons/ico-wallet-fill.js";import{default as at}from"./components/icons/ico-wallet.js";import{default as lt}from"./components/icons/ico-wand.js";import{default as mt}from"./components/icons/ico-warning-fill.js";import{default as dt}from"./components/icons/ico-warning.js";import{default as xt}from"./components/icons/ico-widget-ui.js";import{default as nt}from"./components/info/copy-button.js";import{default as gt}from"./components/info/email-wbr.js";import{default as It}from"./components/info/security-otp.js";import{default as kt}from"./components/info/text-box.js";import{default as Ft}from"./components/info/wallet-address.js";import{DropdownOption as wt,DropdownSelector as ht}from"./components/inputs/dropdown-selector.js";import{default as At}from"./components/inputs/phone-input.js";import{PinCodeInput as St}from"./components/inputs/pincode-input.js";import{TextInput as Wt}from"./components/inputs/text-input.js";import{Dialogue as Dt}from"./components/layouts/dialogue.js";import{Error as Gt}from"./components/layouts/error.js";import{Page as Rt}from"./components/layouts/page.js";import{default as Ht}from"./components/list-items/navigation-button.js";import{NFTTile as Nt}from"./components/list-items/nft-tile.js";import{TokenListItem as Xt}from"./components/list-items/token-list-item.js";import{default as Qt}from"./components/logos/blc-algorand.js";import{default as Vt}from"./components/logos/blc-aptos.js";import{default as Jt}from"./components/logos/blc-arbitrum.js";import{default as Yt}from"./components/logos/blc-astar.js";import{default as $t}from"./components/logos/blc-avalanche.js";import{default as ea}from"./components/logos/blc-base.js";import{default as ta}from"./components/logos/blc-berachain.js";import{default as fa}from"./components/logos/blc-binance.js";import{default as sa}from"./components/logos/blc-bitcoin.js";import{default as pa}from"./components/logos/blc-celo.js";import{default as ua}from"./components/logos/blc-chiliz.js";import{default as ca}from"./components/logos/blc-cosmos.js";import{default as ia}from"./components/logos/blc-ethereum.js";import{default as La}from"./components/logos/blc-etherlink.js";import{default as Ma}from"./components/logos/blc-flow.js";import{default as Ba}from"./components/logos/blc-harmony.js";import{default as Ca}from"./components/logos/blc-icon.js";import{default as ha}from"./components/logos/blc-immutable-x.js";import{default as Aa}from"./components/logos/blc-loopring.js";import{default as Sa}from"./components/logos/blc-moonbeam.js";import{default as Wa}from"./components/logos/blc-near.js";import{default as Da}from"./components/logos/blc-optimism.js";import{default as Ga}from"./components/logos/blc-polkadot.js";import{default as Ra}from"./components/logos/blc-polygon.js";import{default as Ha}from"./components/logos/blc-rarichain.js";import{default as Na}from"./components/logos/blc-solana.js";import{default as Xa}from"./components/logos/blc-stability.js";import{default as Qa}from"./components/logos/blc-sui.js";import{default as Va}from"./components/logos/blc-tezos.js";import{default as Ja}from"./components/logos/blc-wax.js";import{default as Ya}from"./components/logos/blc-zetachain.js";import{default as $a}from"./components/logos/blc-zilliqa.js";import{default as ef}from"./components/logos/blc-zksync.js";import{default as tf}from"./components/logos/fwk-11ty.js";import{default as ff}from"./components/logos/fwk-android.js";import{default as sf}from"./components/logos/fwk-apple.js";import{default as pf}from"./components/logos/fwk-authy.js";import{default as uf}from"./components/logos/fwk-binance-fill.js";import{default as cf}from"./components/logos/fwk-chrome.js";import{default as gf}from"./components/logos/fwk-electron.js";import{default as If}from"./components/logos/fwk-express.js";import{default as kf}from"./components/logos/fwk-fauna.js";import{default as Ff}from"./components/logos/fwk-firebase.js";import{default as wf}from"./components/logos/fwk-go.js";import{default as Pf}from"./components/logos/fwk-google-authenticator.js";import{default as bf}from"./components/logos/fwk-hasura.js";import{default as yf}from"./components/logos/fwk-javascript.js";import{default as Tf}from"./components/logos/fwk-jwt.js";import{default as Ef}from"./components/logos/fwk-laravel.js";import{default as Of}from"./components/logos/fwk-nextjs.js";import{default as vf}from"./components/logos/fwk-nodejs.js";import{default as Zf}from"./components/logos/fwk-nuxtjs.js";import{default as zf}from"./components/logos/fwk-php.js";import{default as jf}from"./components/logos/fwk-react.js";import{default as Uf}from"./components/logos/fwk-strapi.js";import{default as qf}from"./components/logos/fwk-stripe.js";import{default as Kf}from"./components/logos/fwk-vue.js";import{default as _f}from"./components/logos/fwk-webflow.js";import{default as ol}from"./components/logos/fwk-wordpress.js";import{default as rl}from"./components/logos/fwk-zapier.js";import{default as al}from"./components/logos/icon-art-dark.js";import{default as ll}from"./components/logos/icon-art.js";import{default as ml}from"./components/logos/icon-game-controller-dark.js";import{default as dl}from"./components/logos/icon-game-controller.js";import{default as xl}from"./components/logos/icon-generic-token.js";import{default as nl}from"./components/logos/icon-magic-logo.js";import{default as gl}from"./components/logos/icon-music-dark.js";import{default as Il}from"./components/logos/icon-music.js";import{default as kl}from"./components/logos/icon-profile-dark.js";import{default as Fl}from"./components/logos/icon-profile-light.js";import{default as wl}from"./components/logos/icon-ticket-dark.js";import{default as Pl}from"./components/logos/icon-ticket.js";import{default as bl}from"./components/logos/logo-algorand-mono.js";import{default as yl}from"./components/logos/logo-algorand.js";import{default as Tl}from"./components/logos/logo-apple-mono.js";import{default as El}from"./components/logos/logo-apple.js";import{default as Ol}from"./components/logos/logo-aptos-mono.js";import{default as vl}from"./components/logos/logo-aptos.js";import{default as Zl}from"./components/logos/logo-arbitrum-mono.js";import{default as zl}from"./components/logos/logo-arbitrum-one-mono.js";import{default as jl}from"./components/logos/logo-arbitrum-one.js";import{default as Ul}from"./components/logos/logo-arbitrum.js";import{default as ql}from"./components/logos/logo-astar-mono.js";import{default as Kl}from"./components/logos/logo-astar.js";import{default as _l}from"./components/logos/logo-avalanche-mono.js";import{default as os}from"./components/logos/logo-avalanche.js";import{default as rs}from"./components/logos/logo-base-mono.js";import{default as as}from"./components/logos/logo-base.js";import{default as ls}from"./components/logos/logo-berachain-mono.js";import{default as ms}from"./components/logos/logo-berachain.js";import{default as ds}from"./components/logos/logo-binance-mono.js";import{default as xs}from"./components/logos/logo-binance.js";import{default as ns}from"./components/logos/logo-bit-bucket-mono.js";import{default as gs}from"./components/logos/logo-bit-bucket.js";import{default as Is}from"./components/logos/logo-bitcoin-mono.js";import{default as ks}from"./components/logos/logo-bitcoin.js";import{default as Fs}from"./components/logos/logo-bnb-mono.js";import{default as ws}from"./components/logos/logo-bnb.js";import{default as Ps}from"./components/logos/logo-celo-mono.js";import{default as bs}from"./components/logos/logo-celo.js";import{default as ys}from"./components/logos/logo-chiliz-mono.js";import{default as Ts}from"./components/logos/logo-chiliz.js";import{default as Es}from"./components/logos/logo-cosmos-mono.js";import{default as Os}from"./components/logos/logo-cosmos.js";import{default as vs}from"./components/logos/logo-discord-mono.js";import{default as Zs}from"./components/logos/logo-discord.js";import{default as zs}from"./components/logos/logo-ethereum-mono.js";import{default as js}from"./components/logos/logo-ethereum.js";import{default as Us}from"./components/logos/logo-etherlink-mono.js";import{default as qs}from"./components/logos/logo-etherlink.js";import{default as Ks}from"./components/logos/logo-facebook-mono.js";import{default as _s}from"./components/logos/logo-facebook.js";import{default as om}from"./components/logos/logo-flare-mono.js";import{default as rm}from"./components/logos/logo-flare.js";import{default as am}from"./components/logos/logo-flow-mono.js";import{default as lm}from"./components/logos/logo-flow.js";import{default as mm}from"./components/logos/logo-git-hub-mono.js";import{default as dm}from"./components/logos/logo-git-hub.js";import{default as xm}from"./components/logos/logo-git-lab-mono.js";import{default as nm}from"./components/logos/logo-git-lab.js";import{default as gm}from"./components/logos/logo-google-mono.js";import{default as Im}from"./components/logos/logo-google.js";import{default as km}from"./components/logos/logo-harmony-mono.js";import{default as Fm}from"./components/logos/logo-harmony.js";import{default as wm}from"./components/logos/logo-horizen-mono.js";import{default as Pm}from"./components/logos/logo-horizen.js";import{default as bm}from"./components/logos/logo-icon-mono.js";import{default as ym}from"./components/logos/logo-icon.js";import{default as Tm}from"./components/logos/logo-immutable-x-mono.js";import{default as Em}from"./components/logos/logo-immutable-x.js";import{default as Om}from"./components/logos/logo-link-by-stripe-mono.js";import{default as vm}from"./components/logos/logo-link-by-stripe.js";import{default as Zm}from"./components/logos/logo-link-mono.js";import{default as zm}from"./components/logos/logo-link.js";import{default as jm}from"./components/logos/logo-linked-in-mono.js";import{default as Um}from"./components/logos/logo-linked-in.js";import{default as qm}from"./components/logos/logo-loopring-mono.js";import{default as Km}from"./components/logos/logo-loopring.js";import{default as _m}from"./components/logos/logo-microsoft-mono.js";import{default as op}from"./components/logos/logo-microsoft.js";import{default as rp}from"./components/logos/logo-moonbeam-mono.js";import{default as ap}from"./components/logos/logo-moonbeam.js";import{default as lp}from"./components/logos/logo-near-mono.js";import{default as mp}from"./components/logos/logo-near.js";import{default as dp}from"./components/logos/logo-onramper-mono.js";import{default as xp}from"./components/logos/logo-onramper.js";import{default as np}from"./components/logos/logo-optimism-mono.js";import{default as gp}from"./components/logos/logo-optimism.js";import{default as Ip}from"./components/logos/logo-pay-pal-mono.js";import{default as kp}from"./components/logos/logo-pay-pal-wordmark-mono.js";import{default as Fp}from"./components/logos/logo-pay-pal-wordmark.js";import{default as wp}from"./components/logos/logo-pay-pal.js";import{default as Pp}from"./components/logos/logo-poa-mono.js";import{default as bp}from"./components/logos/logo-poa.js";import{default as yp}from"./components/logos/logo-polkadot-mono.js";import{default as Tp}from"./components/logos/logo-polkadot.js";import{default as Ep}from"./components/logos/logo-polygon-mono.js";import{default as Op}from"./components/logos/logo-polygon.js";import{default as vp}from"./components/logos/logo-rarichain-mono.js";import{default as Zp}from"./components/logos/logo-rarichain.js";import{default as zp}from"./components/logos/logo-sardine-mono.js";import{default as jp}from"./components/logos/logo-sardine.js";import{default as Up}from"./components/logos/logo-sei-mono.js";import{default as qp}from"./components/logos/logo-sei.js";import{default as Kp}from"./components/logos/logo-solana-mono.js";import{default as _p}from"./components/logos/logo-solana.js";import{default as od}from"./components/logos/logo-stability-mono.js";import{default as rd}from"./components/logos/logo-stability.js";import{default as ad}from"./components/logos/logo-sui-mono.js";import{default as ld}from"./components/logos/logo-sui.js";import{default as md}from"./components/logos/logo-tezos-mono.js";import{default as dd}from"./components/logos/logo-tezos.js";import{default as xd}from"./components/logos/logo-twitch-mono.js";import{default as nd}from"./components/logos/logo-twitch.js";import{default as gd}from"./components/logos/logo-twitter-mono.js";import{default as Id}from"./components/logos/logo-twitter.js";import{default as kd}from"./components/logos/logo-wallet-connect-mono.js";import{default as Fd}from"./components/logos/logo-wallet-connect.js";import{default as wd}from"./components/logos/logo-warpcast-mono.js";import{default as Pd}from"./components/logos/logo-warpcast.js";import{default as bd}from"./components/logos/logo-wax-mono.js";import{default as yd}from"./components/logos/logo-wax.js";import{default as Td}from"./components/logos/logo-xdc-mono.js";import{default as Ed}from"./components/logos/logo-xdc.js";import{default as Od}from"./components/logos/logo-zetachain-mono.js";import{default as vd}from"./components/logos/logo-zetachain.js";import{default as Zd}from"./components/logos/logo-zilliqa-mono.js";import{default as zd}from"./components/logos/logo-zilliqa.js";import{default as jd}from"./components/logos/logo-zksync-mono.js";import{default as Ud}from"./components/logos/logo-zksync.js";import{default as qd}from"./components/logos/pay-amex.js";import{default as Kd}from"./components/logos/pay-discover.js";import{default as _d}from"./components/logos/pay-mastercard.js";import{default as ou}from"./components/logos/pay-visa.js";import{default as ru}from"./components/logos/presentation-logo.js";import{default as au}from"./components/logos/wlt-coinbase.js";import{default as lu}from"./components/logos/wlt-mattel.js";import{default as mu}from"./components/logos/wlt-metamask.js";import{default as du}from"./components/logos/wlt-phantom.js";import{default as xu}from"./components/logos/wlt-rainbow.js";import{default as nu}from"./components/logos/wlt-wallet-connect.js";import{default as gu}from"./components/primitives/button.js";import{default as Iu}from"./components/primitives/checkbox.js";import{Popover as ku}from"./components/primitives/popover.js";import{Radio as Fu,RadioGroup as Cu}from"./components/primitives/radio.js";import{SegmentedControl as hu,Tab as Pu}from"./components/primitives/segmented-control.js";import{default as bu}from"./components/primitives/switch.js";import{default as yu}from"./components/primitives/text.js";import{VerifyPincode as Tu}from"./components/sections/verify-pincode.js";import{default as Eu}from"./components/utils/animate.js";import{ClientAssetLogo as Ou}from"./components/utils/client-asset-logo.js";import{default as vu}from"./components/utils/qr-code.js";import{default as Zu}from"./components/utils/secured-by-magic.js";import{default as zu}from"./components/utils/shared-logo.js";import{useCustomVars as ju}from"./hooks/theme.js";import{useToast as Uu}from"./hooks/useToast.js";export{Eu as Animate,Qt as BlcAlgorand,Vt as BlcAptos,Jt as BlcArbitrum,Yt as BlcAstar,$t as BlcAvalanche,ea as BlcBase,ta as BlcBerachain,fa as BlcBinance,sa as BlcBitcoin,pa as BlcCelo,ua as BlcChiliz,ca as BlcCosmos,ia as BlcEthereum,La as BlcEtherlink,Ma as BlcFlow,Ba as BlcHarmony,Ca as BlcIcon,ha as BlcImmutableX,Aa as BlcLoopring,Sa as BlcMoonbeam,Wa as BlcNear,Da as BlcOptimism,Ga as BlcPolkadot,Ra as BlcPolygon,Ha as BlcRarichain,Na as BlcSolana,Xa as BlcStability,Qa as BlcSui,Va as BlcTezos,Ja as BlcWax,Ya as BlcZetachain,$a as BlcZilliqa,ef as BlcZksync,gu as Button,I as Callout,Iu as Checkbox,Ou as ClientAssetLogo,r as Content,nt as CopyButton,Dt as Dialogue,a as Drawer,wt as DropdownOption,ht as DropdownSelector,gt as EmailWbr,Gt as Error,l as Footer,tf as Fwk11ty,ff as FwkAndroid,sf as FwkApple,pf as FwkAuthy,uf as FwkBinanceFill,cf as FwkChrome,gf as FwkElectron,If as FwkExpress,kf as FwkFauna,Ff as FwkFirebase,wf as FwkGo,Pf as FwkGoogleAuthenticator,bf as FwkHasura,yf as FwkJavascript,Tf as FwkJwt,Ef as FwkLaravel,Of as FwkNextjs,vf as FwkNodejs,Zf as FwkNuxtjs,zf as FwkPhp,jf as FwkReact,Uf as FwkStrapi,qf as FwkStripe,Kf as FwkVue,_f as FwkWebflow,ol as FwkWordpress,rl as FwkZapier,m as Header,A as IcoAdd,W as IcoAlertCircle,S as IcoAlertCircleFill,D as IcoArrowDown,G as IcoArrowLeft,R as IcoArrowRight,H as IcoAsterisk,N as IcoAstronaut,X as IcoBank,V as IcoBell,Q as IcoBellNotification,J as IcoBranding,Y as IcoCaretDown,$ as IcoCaretLeft,eo as IcoCaretRight,to as IcoCaretUp,po as IcoCheckmark,so as IcoCheckmarkCircle,fo as IcoCheckmarkCircleFill,go as IcoCode,xo as IcoCodeEditor,no as IcoCodeSandbox,Io as IcoCommandLine,ko as IcoComment,Fo as IcoCopy,wo as IcoCreditCard,Po as IcoDedicated,bo as IcoDiamond,Eo as IcoDismiss,To as IcoDismissCircle,yo as IcoDismissCircleFill,Oo as IcoDoc,vo as IcoDownload,zo as IcoEdit,Zo as IcoEditEmail,qo as IcoEmail,jo as IcoEmailFill,Uo as IcoEmailOpen,Ko as IcoExpiration,_o as IcoExternalLink,oe as IcoEyeClosed,re as IcoEyeOpened,le as IcoFingerprint,ae as IcoFingerprintFill,me as IcoGas,de as IcoGift,xe as IcoGlobe,ne as IcoGuide,ge as IcoHome,Ie as IcoHourglass,Fe as IcoInfoCircle,ke as IcoInfoCircleFill,we as IcoKey,be as IcoLightbulb,Pe as IcoLightbulbFill,Te as IcoLightning,ye as IcoLightningFill,Ee as IcoLink,Oe as IcoLoading,ve as IcoLockLocked,Ze as IcoLockPassword,ze as IcoLockUnlocked,je as IcoLoginForm,Ue as IcoMagic,qe as IcoMenu,_e as IcoMessage,Ke as IcoMessageFill,or as IcoMfa,rr as IcoMobile2fa,ar as IcoMobile2fafill,lr as IcoOpenBook,mr as IcoPaperPlane,dr as IcoPassport,xr as IcoPasswordless,nr as IcoPendingConnection,gr as IcoPhone,Ir as IcoPrice,kr as IcoQrcode,wr as IcoQuestionCircle,Fr as IcoQuestionCircleFill,br as IcoRefresh,Pr as IcoRefreshCircleFill,yr as IcoRocketFill,Tr as IcoSearch,Er as IcoSettings,Zr as IcoShield,Or as IcoShieldApproved,vr as IcoShieldRejected,zr as IcoSocial,jr as IcoSoldOutTag,Ur as IcoStar,qr as IcoSwap,Kr as IcoSwatches,_r as IcoTeam,ot as IcoUsers,at as IcoWallet,rt as IcoWalletFill,lt as IcoWand,dt as IcoWarning,mt as IcoWarningFill,xt as IcoWidgetUi,ll as IconArt,al as IconArtDark,dl as IconGameController,ml as IconGameControllerDark,xl as IconGenericToken,nl as IconMagicLogo,Il as IconMusic,gl as IconMusicDark,kl as IconProfileDark,Fl as IconProfileLight,Pl as IconTicket,wl as IconTicketDark,k as LoadingSpinner,yl as LogoAlgorand,bl as LogoAlgorandMono,El as LogoApple,Tl as LogoAppleMono,vl as LogoAptos,Ol as LogoAptosMono,Ul as LogoArbitrum,Zl as LogoArbitrumMono,jl as LogoArbitrumOne,zl as LogoArbitrumOneMono,Kl as LogoAstar,ql as LogoAstarMono,os as LogoAvalanche,_l as LogoAvalancheMono,as as LogoBase,rs as LogoBaseMono,ms as LogoBerachain,ls as LogoBerachainMono,xs as LogoBinance,ds as LogoBinanceMono,gs as LogoBitBucket,ns as LogoBitBucketMono,ks as LogoBitcoin,Is as LogoBitcoinMono,ws as LogoBnb,Fs as LogoBnbMono,bs as LogoCelo,Ps as LogoCeloMono,Ts as LogoChiliz,ys as LogoChilizMono,Os as LogoCosmos,Es as LogoCosmosMono,Zs as LogoDiscord,vs as LogoDiscordMono,js as LogoEthereum,zs as LogoEthereumMono,qs as LogoEtherlink,Us as LogoEtherlinkMono,_s as LogoFacebook,Ks as LogoFacebookMono,rm as LogoFlare,om as LogoFlareMono,lm as LogoFlow,am as LogoFlowMono,dm as LogoGitHub,mm as LogoGitHubMono,nm as LogoGitLab,xm as LogoGitLabMono,Im as LogoGoogle,gm as LogoGoogleMono,Fm as LogoHarmony,km as LogoHarmonyMono,Pm as LogoHorizen,wm as LogoHorizenMono,ym as LogoIcon,bm as LogoIconMono,Em as LogoImmutableX,Tm as LogoImmutableXMono,zm as LogoLink,vm as LogoLinkByStripe,Om as LogoLinkByStripeMono,Zm as LogoLinkMono,Um as LogoLinkedIn,jm as LogoLinkedInMono,Km as LogoLoopring,qm as LogoLoopringMono,op as LogoMicrosoft,_m as LogoMicrosoftMono,ap as LogoMoonbeam,rp as LogoMoonbeamMono,mp as LogoNear,lp as LogoNearMono,xp as LogoOnramper,dp as LogoOnramperMono,gp as LogoOptimism,np as LogoOptimismMono,wp as LogoPayPal,Ip as LogoPayPalMono,Fp as LogoPayPalWordmark,kp as LogoPayPalWordmarkMono,bp as LogoPoa,Pp as LogoPoaMono,Tp as LogoPolkadot,yp as LogoPolkadotMono,Op as LogoPolygon,Ep as LogoPolygonMono,Zp as LogoRarichain,vp as LogoRarichainMono,jp as LogoSardine,zp as LogoSardineMono,qp as LogoSei,Up as LogoSeiMono,_p as LogoSolana,Kp as LogoSolanaMono,rd as LogoStability,od as LogoStabilityMono,ld as LogoSui,ad as LogoSuiMono,dd as LogoTezos,md as LogoTezosMono,nd as LogoTwitch,xd as LogoTwitchMono,Id as LogoTwitter,gd as LogoTwitterMono,Fd as LogoWalletConnect,kd as LogoWalletConnectMono,Pd as LogoWarpcast,wd as LogoWarpcastMono,yd as LogoWax,bd as LogoWaxMono,Ed as LogoXdc,Td as LogoXdcMono,vd as LogoZetachain,Od as LogoZetachainMono,zd as LogoZilliqa,Zd as LogoZilliqaMono,Ud as LogoZksync,jd as LogoZksyncMono,d as Modal,Nt as NFTTile,Ht as NavigationButton,x as Overlay,Rt as Page,qd as PayAmex,Kd as PayDiscover,_d as PayMastercard,n as PayPalButton,ou as PayVisa,At as PhoneInput,St as PinCodeInput,ku as Popover,ru as PresentationLogo,vu as QRCode,Fu as Radio,Cu as RadioGroup,Zu as SecuredByMagic,It as SecurityOtp,hu as SegmentedControl,zu as SharedLogo,g as SocialLoginButton,bu as Switch,Pu as Tab,yu as Text,kt as TextBox,Wt as TextInput,F as Toast,C as ToastProvider,Xt as TokenListItem,h as Tooltip,Tu as VerifyPincode,Ft as WalletAddress,au as WltCoinbase,lu as WltMattel,mu as WltMetamask,du as WltPhantom,xu as WltRainbow,nu as WltWalletConnect,ju as useCustomVars,Uu as useToast};
|
|
1
|
+
import{Content as r}from"./components/containers/content.js";import{Drawer as a}from"./components/containers/drawer.js";import{Footer as l}from"./components/containers/footer.js";import{Header as m}from"./components/containers/header.js";import{Modal as d}from"./components/containers/modal.js";import{Overlay as x}from"./components/containers/overlay.js";import{PayPalButton as n}from"./components/external/paypal-button.js";import{SocialLoginButton as g}from"./components/external/social-login-button.js";import{Callout as I}from"./components/feedback/callout.js";import{LoadingSpinner as k}from"./components/feedback/loading-spinner.js";import{Toast as F,ToastProvider as C}from"./components/feedback/toast-provider.js";import{default as h}from"./components/feedback/tooltip.js";import{default as A}from"./components/icons/ico-add.js";import{default as S}from"./components/icons/ico-alert-circle-fill.js";import{default as W}from"./components/icons/ico-alert-circle.js";import{default as D}from"./components/icons/ico-arrow-down.js";import{default as G}from"./components/icons/ico-arrow-left.js";import{default as R}from"./components/icons/ico-arrow-right.js";import{default as H}from"./components/icons/ico-asterisk.js";import{default as N}from"./components/icons/ico-astronaut.js";import{default as X}from"./components/icons/ico-bank.js";import{default as Q}from"./components/icons/ico-bell-notification.js";import{default as V}from"./components/icons/ico-bell.js";import{default as J}from"./components/icons/ico-branding.js";import{default as Y}from"./components/icons/ico-caret-down.js";import{default as $}from"./components/icons/ico-caret-left.js";import{default as eo}from"./components/icons/ico-caret-right.js";import{default as to}from"./components/icons/ico-caret-up.js";import{default as fo}from"./components/icons/ico-checkmark-circle-fill.js";import{default as so}from"./components/icons/ico-checkmark-circle.js";import{default as po}from"./components/icons/ico-checkmark.js";import{default as xo}from"./components/icons/ico-code-editor.js";import{default as no}from"./components/icons/ico-code-sandbox.js";import{default as go}from"./components/icons/ico-code.js";import{default as Io}from"./components/icons/ico-command-line.js";import{default as ko}from"./components/icons/ico-comment.js";import{default as Fo}from"./components/icons/ico-copy.js";import{default as wo}from"./components/icons/ico-credit-card.js";import{default as Po}from"./components/icons/ico-dedicated.js";import{default as bo}from"./components/icons/ico-diamond.js";import{default as yo}from"./components/icons/ico-dismiss-circle-fill.js";import{default as To}from"./components/icons/ico-dismiss-circle.js";import{default as Eo}from"./components/icons/ico-dismiss.js";import{default as Oo}from"./components/icons/ico-doc.js";import{default as vo}from"./components/icons/ico-download.js";import{default as Zo}from"./components/icons/ico-edit-email.js";import{default as zo}from"./components/icons/ico-edit.js";import{default as jo}from"./components/icons/ico-email-fill.js";import{default as Uo}from"./components/icons/ico-email-open.js";import{default as qo}from"./components/icons/ico-email.js";import{default as Ko}from"./components/icons/ico-expiration.js";import{default as _o}from"./components/icons/ico-external-link.js";import{default as oe}from"./components/icons/ico-eye-closed.js";import{default as re}from"./components/icons/ico-eye-opened.js";import{default as ae}from"./components/icons/ico-fingerprint-fill.js";import{default as le}from"./components/icons/ico-fingerprint.js";import{default as me}from"./components/icons/ico-gas.js";import{default as de}from"./components/icons/ico-gift.js";import{default as xe}from"./components/icons/ico-globe.js";import{default as ne}from"./components/icons/ico-guide.js";import{default as ge}from"./components/icons/ico-home.js";import{default as Ie}from"./components/icons/ico-hourglass.js";import{default as ke}from"./components/icons/ico-info-circle-fill.js";import{default as Fe}from"./components/icons/ico-info-circle.js";import{default as we}from"./components/icons/ico-key.js";import{default as Pe}from"./components/icons/ico-lightbulb-fill.js";import{default as be}from"./components/icons/ico-lightbulb.js";import{default as ye}from"./components/icons/ico-lightning-fill.js";import{default as Te}from"./components/icons/ico-lightning.js";import{default as Ee}from"./components/icons/ico-link.js";import{default as Oe}from"./components/icons/ico-loading.js";import{default as ve}from"./components/icons/ico-lock-locked.js";import{default as Ze}from"./components/icons/ico-lock-password.js";import{default as ze}from"./components/icons/ico-lock-unlocked.js";import{default as je}from"./components/icons/ico-login-form.js";import{default as Ue}from"./components/icons/ico-magic.js";import{default as qe}from"./components/icons/ico-menu.js";import{default as Ke}from"./components/icons/ico-message-fill.js";import{default as _e}from"./components/icons/ico-message.js";import{default as or}from"./components/icons/ico-mfa.js";import{default as rr}from"./components/icons/ico-mobile2fa.js";import{default as ar}from"./components/icons/ico-mobile2fafill.js";import{default as lr}from"./components/icons/ico-open-book.js";import{default as mr}from"./components/icons/ico-paper-plane.js";import{default as dr}from"./components/icons/ico-passport.js";import{default as xr}from"./components/icons/ico-passwordless.js";import{default as nr}from"./components/icons/ico-pending-connection.js";import{default as gr}from"./components/icons/ico-phone.js";import{default as Ir}from"./components/icons/ico-price.js";import{default as kr}from"./components/icons/ico-qrcode.js";import{default as Fr}from"./components/icons/ico-question-circle-fill.js";import{default as wr}from"./components/icons/ico-question-circle.js";import{default as Pr}from"./components/icons/ico-refresh-circle-fill.js";import{default as br}from"./components/icons/ico-refresh.js";import{default as yr}from"./components/icons/ico-rocket-fill.js";import{default as Tr}from"./components/icons/ico-search.js";import{default as Er}from"./components/icons/ico-settings.js";import{default as Or}from"./components/icons/ico-shield-approved.js";import{default as vr}from"./components/icons/ico-shield-rejected.js";import{default as Zr}from"./components/icons/ico-shield.js";import{default as zr}from"./components/icons/ico-social.js";import{default as jr}from"./components/icons/ico-sold-out-tag.js";import{default as Ur}from"./components/icons/ico-star.js";import{default as qr}from"./components/icons/ico-swap.js";import{default as Kr}from"./components/icons/ico-swatches.js";import{default as _r}from"./components/icons/ico-team.js";import{default as ot}from"./components/icons/ico-users.js";import{default as rt}from"./components/icons/ico-wallet-fill.js";import{default as at}from"./components/icons/ico-wallet.js";import{default as lt}from"./components/icons/ico-wand.js";import{default as mt}from"./components/icons/ico-warning-fill.js";import{default as dt}from"./components/icons/ico-warning.js";import{default as xt}from"./components/icons/ico-widget-ui.js";import{default as nt}from"./components/info/copy-button.js";import{default as gt}from"./components/info/email-wbr.js";import{default as It}from"./components/info/security-otp.js";import{default as kt}from"./components/info/text-box.js";import{default as Ft}from"./components/info/wallet-address.js";import{default as wt}from"./components/inputs/phone-input.js";import{PinCodeInput as Pt}from"./components/inputs/pincode-input.js";import{TextInput as bt}from"./components/inputs/text-input.js";import{Dialogue as yt}from"./components/layouts/dialogue.js";import{Error as Tt}from"./components/layouts/error.js";import{Page as Et}from"./components/layouts/page.js";import{default as Ot}from"./components/list-items/navigation-button.js";import{NFTTile as vt}from"./components/list-items/nft-tile.js";import{TokenListItem as Zt}from"./components/list-items/token-list-item.js";import{default as zt}from"./components/logos/blc-algorand.js";import{default as jt}from"./components/logos/blc-aptos.js";import{default as Ut}from"./components/logos/blc-arbitrum.js";import{default as qt}from"./components/logos/blc-astar.js";import{default as Kt}from"./components/logos/blc-avalanche.js";import{default as _t}from"./components/logos/blc-base.js";import{default as oa}from"./components/logos/blc-berachain.js";import{default as ra}from"./components/logos/blc-binance.js";import{default as aa}from"./components/logos/blc-bitcoin.js";import{default as la}from"./components/logos/blc-celo.js";import{default as ma}from"./components/logos/blc-chiliz.js";import{default as da}from"./components/logos/blc-cosmos.js";import{default as xa}from"./components/logos/blc-ethereum.js";import{default as na}from"./components/logos/blc-etherlink.js";import{default as ga}from"./components/logos/blc-flow.js";import{default as Ia}from"./components/logos/blc-harmony.js";import{default as ka}from"./components/logos/blc-icon.js";import{default as Fa}from"./components/logos/blc-immutable-x.js";import{default as wa}from"./components/logos/blc-loopring.js";import{default as Pa}from"./components/logos/blc-moonbeam.js";import{default as ba}from"./components/logos/blc-near.js";import{default as ya}from"./components/logos/blc-optimism.js";import{default as Ta}from"./components/logos/blc-polkadot.js";import{default as Ea}from"./components/logos/blc-polygon.js";import{default as Oa}from"./components/logos/blc-rarichain.js";import{default as va}from"./components/logos/blc-solana.js";import{default as Za}from"./components/logos/blc-stability.js";import{default as za}from"./components/logos/blc-sui.js";import{default as ja}from"./components/logos/blc-tezos.js";import{default as Ua}from"./components/logos/blc-wax.js";import{default as qa}from"./components/logos/blc-zetachain.js";import{default as Ka}from"./components/logos/blc-zilliqa.js";import{default as _a}from"./components/logos/blc-zksync.js";import{default as of}from"./components/logos/fwk-11ty.js";import{default as rf}from"./components/logos/fwk-android.js";import{default as af}from"./components/logos/fwk-apple.js";import{default as lf}from"./components/logos/fwk-authy.js";import{default as mf}from"./components/logos/fwk-binance-fill.js";import{default as df}from"./components/logos/fwk-chrome.js";import{default as xf}from"./components/logos/fwk-electron.js";import{default as nf}from"./components/logos/fwk-express.js";import{default as Lf}from"./components/logos/fwk-fauna.js";import{default as Mf}from"./components/logos/fwk-firebase.js";import{default as Bf}from"./components/logos/fwk-go.js";import{default as Cf}from"./components/logos/fwk-google-authenticator.js";import{default as hf}from"./components/logos/fwk-hasura.js";import{default as Af}from"./components/logos/fwk-javascript.js";import{default as Sf}from"./components/logos/fwk-jwt.js";import{default as Wf}from"./components/logos/fwk-laravel.js";import{default as Df}from"./components/logos/fwk-nextjs.js";import{default as Gf}from"./components/logos/fwk-nodejs.js";import{default as Rf}from"./components/logos/fwk-nuxtjs.js";import{default as Hf}from"./components/logos/fwk-php.js";import{default as Nf}from"./components/logos/fwk-react.js";import{default as Xf}from"./components/logos/fwk-strapi.js";import{default as Qf}from"./components/logos/fwk-stripe.js";import{default as Vf}from"./components/logos/fwk-vue.js";import{default as Jf}from"./components/logos/fwk-webflow.js";import{default as Yf}from"./components/logos/fwk-wordpress.js";import{default as $f}from"./components/logos/fwk-zapier.js";import{default as el}from"./components/logos/icon-art-dark.js";import{default as tl}from"./components/logos/icon-art.js";import{default as fl}from"./components/logos/icon-game-controller-dark.js";import{default as sl}from"./components/logos/icon-game-controller.js";import{default as pl}from"./components/logos/icon-generic-token.js";import{default as ul}from"./components/logos/icon-magic-logo.js";import{default as cl}from"./components/logos/icon-music-dark.js";import{default as il}from"./components/logos/icon-music.js";import{default as Ll}from"./components/logos/icon-profile-dark.js";import{default as Ml}from"./components/logos/icon-profile-light.js";import{default as Bl}from"./components/logos/icon-ticket-dark.js";import{default as Cl}from"./components/logos/icon-ticket.js";import{default as hl}from"./components/logos/logo-algorand-mono.js";import{default as Al}from"./components/logos/logo-algorand.js";import{default as Sl}from"./components/logos/logo-apple-mono.js";import{default as Wl}from"./components/logos/logo-apple.js";import{default as Dl}from"./components/logos/logo-aptos-mono.js";import{default as Gl}from"./components/logos/logo-aptos.js";import{default as Rl}from"./components/logos/logo-arbitrum-mono.js";import{default as Hl}from"./components/logos/logo-arbitrum-one-mono.js";import{default as Nl}from"./components/logos/logo-arbitrum-one.js";import{default as Xl}from"./components/logos/logo-arbitrum.js";import{default as Ql}from"./components/logos/logo-astar-mono.js";import{default as Vl}from"./components/logos/logo-astar.js";import{default as Jl}from"./components/logos/logo-avalanche-mono.js";import{default as Yl}from"./components/logos/logo-avalanche.js";import{default as $l}from"./components/logos/logo-base-mono.js";import{default as es}from"./components/logos/logo-base.js";import{default as ts}from"./components/logos/logo-berachain-mono.js";import{default as fs}from"./components/logos/logo-berachain.js";import{default as ss}from"./components/logos/logo-binance-mono.js";import{default as ps}from"./components/logos/logo-binance.js";import{default as us}from"./components/logos/logo-bit-bucket-mono.js";import{default as cs}from"./components/logos/logo-bit-bucket.js";import{default as is}from"./components/logos/logo-bitcoin-mono.js";import{default as Ls}from"./components/logos/logo-bitcoin.js";import{default as Ms}from"./components/logos/logo-bnb-mono.js";import{default as Bs}from"./components/logos/logo-bnb.js";import{default as Cs}from"./components/logos/logo-celo-mono.js";import{default as hs}from"./components/logos/logo-celo.js";import{default as As}from"./components/logos/logo-chiliz-mono.js";import{default as Ss}from"./components/logos/logo-chiliz.js";import{default as Ws}from"./components/logos/logo-cosmos-mono.js";import{default as Ds}from"./components/logos/logo-cosmos.js";import{default as Gs}from"./components/logos/logo-discord-mono.js";import{default as Rs}from"./components/logos/logo-discord.js";import{default as Hs}from"./components/logos/logo-ethereum-mono.js";import{default as Ns}from"./components/logos/logo-ethereum.js";import{default as Xs}from"./components/logos/logo-etherlink-mono.js";import{default as Qs}from"./components/logos/logo-etherlink.js";import{default as Vs}from"./components/logos/logo-facebook-mono.js";import{default as Js}from"./components/logos/logo-facebook.js";import{default as Ys}from"./components/logos/logo-flare-mono.js";import{default as $s}from"./components/logos/logo-flare.js";import{default as em}from"./components/logos/logo-flow-mono.js";import{default as tm}from"./components/logos/logo-flow.js";import{default as fm}from"./components/logos/logo-git-hub-mono.js";import{default as sm}from"./components/logos/logo-git-hub.js";import{default as pm}from"./components/logos/logo-git-lab-mono.js";import{default as um}from"./components/logos/logo-git-lab.js";import{default as cm}from"./components/logos/logo-google-mono.js";import{default as im}from"./components/logos/logo-google.js";import{default as Lm}from"./components/logos/logo-harmony-mono.js";import{default as Mm}from"./components/logos/logo-harmony.js";import{default as Bm}from"./components/logos/logo-horizen-mono.js";import{default as Cm}from"./components/logos/logo-horizen.js";import{default as hm}from"./components/logos/logo-icon-mono.js";import{default as Am}from"./components/logos/logo-icon.js";import{default as Sm}from"./components/logos/logo-immutable-x-mono.js";import{default as Wm}from"./components/logos/logo-immutable-x.js";import{default as Dm}from"./components/logos/logo-link-by-stripe-mono.js";import{default as Gm}from"./components/logos/logo-link-by-stripe.js";import{default as Rm}from"./components/logos/logo-link-mono.js";import{default as Hm}from"./components/logos/logo-link.js";import{default as Nm}from"./components/logos/logo-linked-in-mono.js";import{default as Xm}from"./components/logos/logo-linked-in.js";import{default as Qm}from"./components/logos/logo-loopring-mono.js";import{default as Vm}from"./components/logos/logo-loopring.js";import{default as Jm}from"./components/logos/logo-microsoft-mono.js";import{default as Ym}from"./components/logos/logo-microsoft.js";import{default as $m}from"./components/logos/logo-moonbeam-mono.js";import{default as ep}from"./components/logos/logo-moonbeam.js";import{default as tp}from"./components/logos/logo-near-mono.js";import{default as fp}from"./components/logos/logo-near.js";import{default as sp}from"./components/logos/logo-onramper-mono.js";import{default as pp}from"./components/logos/logo-onramper.js";import{default as up}from"./components/logos/logo-optimism-mono.js";import{default as cp}from"./components/logos/logo-optimism.js";import{default as ip}from"./components/logos/logo-pay-pal-mono.js";import{default as Lp}from"./components/logos/logo-pay-pal-wordmark-mono.js";import{default as Mp}from"./components/logos/logo-pay-pal-wordmark.js";import{default as Bp}from"./components/logos/logo-pay-pal.js";import{default as Cp}from"./components/logos/logo-poa-mono.js";import{default as hp}from"./components/logos/logo-poa.js";import{default as Ap}from"./components/logos/logo-polkadot-mono.js";import{default as Sp}from"./components/logos/logo-polkadot.js";import{default as Wp}from"./components/logos/logo-polygon-mono.js";import{default as Dp}from"./components/logos/logo-polygon.js";import{default as Gp}from"./components/logos/logo-rarichain-mono.js";import{default as Rp}from"./components/logos/logo-rarichain.js";import{default as Hp}from"./components/logos/logo-sardine-mono.js";import{default as Np}from"./components/logos/logo-sardine.js";import{default as Xp}from"./components/logos/logo-sei-mono.js";import{default as Qp}from"./components/logos/logo-sei.js";import{default as Vp}from"./components/logos/logo-solana-mono.js";import{default as Jp}from"./components/logos/logo-solana.js";import{default as Yp}from"./components/logos/logo-stability-mono.js";import{default as $p}from"./components/logos/logo-stability.js";import{default as ed}from"./components/logos/logo-sui-mono.js";import{default as td}from"./components/logos/logo-sui.js";import{default as fd}from"./components/logos/logo-tezos-mono.js";import{default as sd}from"./components/logos/logo-tezos.js";import{default as pd}from"./components/logos/logo-twitch-mono.js";import{default as ud}from"./components/logos/logo-twitch.js";import{default as cd}from"./components/logos/logo-twitter-mono.js";import{default as id}from"./components/logos/logo-twitter.js";import{default as Ld}from"./components/logos/logo-wallet-connect-mono.js";import{default as Md}from"./components/logos/logo-wallet-connect.js";import{default as Bd}from"./components/logos/logo-warpcast-mono.js";import{default as Cd}from"./components/logos/logo-warpcast.js";import{default as hd}from"./components/logos/logo-wax-mono.js";import{default as Ad}from"./components/logos/logo-wax.js";import{default as Sd}from"./components/logos/logo-xdc-mono.js";import{default as Wd}from"./components/logos/logo-xdc.js";import{default as Dd}from"./components/logos/logo-zetachain-mono.js";import{default as Gd}from"./components/logos/logo-zetachain.js";import{default as Rd}from"./components/logos/logo-zilliqa-mono.js";import{default as Hd}from"./components/logos/logo-zilliqa.js";import{default as Nd}from"./components/logos/logo-zksync-mono.js";import{default as Xd}from"./components/logos/logo-zksync.js";import{default as Qd}from"./components/logos/pay-amex.js";import{default as Vd}from"./components/logos/pay-discover.js";import{default as Jd}from"./components/logos/pay-mastercard.js";import{default as Yd}from"./components/logos/pay-visa.js";import{default as $d}from"./components/logos/presentation-logo.js";import{default as eu}from"./components/logos/wlt-coinbase.js";import{default as tu}from"./components/logos/wlt-mattel.js";import{default as fu}from"./components/logos/wlt-metamask.js";import{default as su}from"./components/logos/wlt-phantom.js";import{default as pu}from"./components/logos/wlt-rainbow.js";import{default as uu}from"./components/logos/wlt-wallet-connect.js";import{default as cu}from"./components/primitives/button.js";import{default as iu}from"./components/primitives/checkbox.js";import{DropdownOption as Lu,DropdownSelector as Iu}from"./components/primitives/dropdown-selector.js";import{Popover as ku}from"./components/primitives/popover.js";import{Radio as Fu,RadioGroup as Cu}from"./components/primitives/radio.js";import{SegmentedControl as hu,Tab as Pu}from"./components/primitives/segmented-control.js";import{default as bu}from"./components/primitives/switch.js";import{default as yu}from"./components/primitives/text.js";import{VerifyPincode as Tu}from"./components/sections/verify-pincode.js";import{default as Eu}from"./components/utils/animate.js";import{ClientAssetLogo as Ou}from"./components/utils/client-asset-logo.js";import{default as vu}from"./components/utils/qr-code.js";import{default as Zu}from"./components/utils/secured-by-magic.js";import{default as zu}from"./components/utils/shared-logo.js";import{useCustomVars as ju}from"./hooks/theme.js";import{useToast as Uu}from"./hooks/useToast.js";export{Eu as Animate,zt as BlcAlgorand,jt as BlcAptos,Ut as BlcArbitrum,qt as BlcAstar,Kt as BlcAvalanche,_t as BlcBase,oa as BlcBerachain,ra as BlcBinance,aa as BlcBitcoin,la as BlcCelo,ma as BlcChiliz,da as BlcCosmos,xa as BlcEthereum,na as BlcEtherlink,ga as BlcFlow,Ia as BlcHarmony,ka as BlcIcon,Fa as BlcImmutableX,wa as BlcLoopring,Pa as BlcMoonbeam,ba as BlcNear,ya as BlcOptimism,Ta as BlcPolkadot,Ea as BlcPolygon,Oa as BlcRarichain,va as BlcSolana,Za as BlcStability,za as BlcSui,ja as BlcTezos,Ua as BlcWax,qa as BlcZetachain,Ka as BlcZilliqa,_a as BlcZksync,cu as Button,I as Callout,iu as Checkbox,Ou as ClientAssetLogo,r as Content,nt as CopyButton,yt as Dialogue,a as Drawer,Lu as DropdownOption,Iu as DropdownSelector,gt as EmailWbr,Tt as Error,l as Footer,of as Fwk11ty,rf as FwkAndroid,af as FwkApple,lf as FwkAuthy,mf as FwkBinanceFill,df as FwkChrome,xf as FwkElectron,nf as FwkExpress,Lf as FwkFauna,Mf as FwkFirebase,Bf as FwkGo,Cf as FwkGoogleAuthenticator,hf as FwkHasura,Af as FwkJavascript,Sf as FwkJwt,Wf as FwkLaravel,Df as FwkNextjs,Gf as FwkNodejs,Rf as FwkNuxtjs,Hf as FwkPhp,Nf as FwkReact,Xf as FwkStrapi,Qf as FwkStripe,Vf as FwkVue,Jf as FwkWebflow,Yf as FwkWordpress,$f as FwkZapier,m as Header,A as IcoAdd,W as IcoAlertCircle,S as IcoAlertCircleFill,D as IcoArrowDown,G as IcoArrowLeft,R as IcoArrowRight,H as IcoAsterisk,N as IcoAstronaut,X as IcoBank,V as IcoBell,Q as IcoBellNotification,J as IcoBranding,Y as IcoCaretDown,$ as IcoCaretLeft,eo as IcoCaretRight,to as IcoCaretUp,po as IcoCheckmark,so as IcoCheckmarkCircle,fo as IcoCheckmarkCircleFill,go as IcoCode,xo as IcoCodeEditor,no as IcoCodeSandbox,Io as IcoCommandLine,ko as IcoComment,Fo as IcoCopy,wo as IcoCreditCard,Po as IcoDedicated,bo as IcoDiamond,Eo as IcoDismiss,To as IcoDismissCircle,yo as IcoDismissCircleFill,Oo as IcoDoc,vo as IcoDownload,zo as IcoEdit,Zo as IcoEditEmail,qo as IcoEmail,jo as IcoEmailFill,Uo as IcoEmailOpen,Ko as IcoExpiration,_o as IcoExternalLink,oe as IcoEyeClosed,re as IcoEyeOpened,le as IcoFingerprint,ae as IcoFingerprintFill,me as IcoGas,de as IcoGift,xe as IcoGlobe,ne as IcoGuide,ge as IcoHome,Ie as IcoHourglass,Fe as IcoInfoCircle,ke as IcoInfoCircleFill,we as IcoKey,be as IcoLightbulb,Pe as IcoLightbulbFill,Te as IcoLightning,ye as IcoLightningFill,Ee as IcoLink,Oe as IcoLoading,ve as IcoLockLocked,Ze as IcoLockPassword,ze as IcoLockUnlocked,je as IcoLoginForm,Ue as IcoMagic,qe as IcoMenu,_e as IcoMessage,Ke as IcoMessageFill,or as IcoMfa,rr as IcoMobile2fa,ar as IcoMobile2fafill,lr as IcoOpenBook,mr as IcoPaperPlane,dr as IcoPassport,xr as IcoPasswordless,nr as IcoPendingConnection,gr as IcoPhone,Ir as IcoPrice,kr as IcoQrcode,wr as IcoQuestionCircle,Fr as IcoQuestionCircleFill,br as IcoRefresh,Pr as IcoRefreshCircleFill,yr as IcoRocketFill,Tr as IcoSearch,Er as IcoSettings,Zr as IcoShield,Or as IcoShieldApproved,vr as IcoShieldRejected,zr as IcoSocial,jr as IcoSoldOutTag,Ur as IcoStar,qr as IcoSwap,Kr as IcoSwatches,_r as IcoTeam,ot as IcoUsers,at as IcoWallet,rt as IcoWalletFill,lt as IcoWand,dt as IcoWarning,mt as IcoWarningFill,xt as IcoWidgetUi,tl as IconArt,el as IconArtDark,sl as IconGameController,fl as IconGameControllerDark,pl as IconGenericToken,ul as IconMagicLogo,il as IconMusic,cl as IconMusicDark,Ll as IconProfileDark,Ml as IconProfileLight,Cl as IconTicket,Bl as IconTicketDark,k as LoadingSpinner,Al as LogoAlgorand,hl as LogoAlgorandMono,Wl as LogoApple,Sl as LogoAppleMono,Gl as LogoAptos,Dl as LogoAptosMono,Xl as LogoArbitrum,Rl as LogoArbitrumMono,Nl as LogoArbitrumOne,Hl as LogoArbitrumOneMono,Vl as LogoAstar,Ql as LogoAstarMono,Yl as LogoAvalanche,Jl as LogoAvalancheMono,es as LogoBase,$l as LogoBaseMono,fs as LogoBerachain,ts as LogoBerachainMono,ps as LogoBinance,ss as LogoBinanceMono,cs as LogoBitBucket,us as LogoBitBucketMono,Ls as LogoBitcoin,is as LogoBitcoinMono,Bs as LogoBnb,Ms as LogoBnbMono,hs as LogoCelo,Cs as LogoCeloMono,Ss as LogoChiliz,As as LogoChilizMono,Ds as LogoCosmos,Ws as LogoCosmosMono,Rs as LogoDiscord,Gs as LogoDiscordMono,Ns as LogoEthereum,Hs as LogoEthereumMono,Qs as LogoEtherlink,Xs as LogoEtherlinkMono,Js as LogoFacebook,Vs as LogoFacebookMono,$s as LogoFlare,Ys as LogoFlareMono,tm as LogoFlow,em as LogoFlowMono,sm as LogoGitHub,fm as LogoGitHubMono,um as LogoGitLab,pm as LogoGitLabMono,im as LogoGoogle,cm as LogoGoogleMono,Mm as LogoHarmony,Lm as LogoHarmonyMono,Cm as LogoHorizen,Bm as LogoHorizenMono,Am as LogoIcon,hm as LogoIconMono,Wm as LogoImmutableX,Sm as LogoImmutableXMono,Hm as LogoLink,Gm as LogoLinkByStripe,Dm as LogoLinkByStripeMono,Rm as LogoLinkMono,Xm as LogoLinkedIn,Nm as LogoLinkedInMono,Vm as LogoLoopring,Qm as LogoLoopringMono,Ym as LogoMicrosoft,Jm as LogoMicrosoftMono,ep as LogoMoonbeam,$m as LogoMoonbeamMono,fp as LogoNear,tp as LogoNearMono,pp as LogoOnramper,sp as LogoOnramperMono,cp as LogoOptimism,up as LogoOptimismMono,Bp as LogoPayPal,ip as LogoPayPalMono,Mp as LogoPayPalWordmark,Lp as LogoPayPalWordmarkMono,hp as LogoPoa,Cp as LogoPoaMono,Sp as LogoPolkadot,Ap as LogoPolkadotMono,Dp as LogoPolygon,Wp as LogoPolygonMono,Rp as LogoRarichain,Gp as LogoRarichainMono,Np as LogoSardine,Hp as LogoSardineMono,Qp as LogoSei,Xp as LogoSeiMono,Jp as LogoSolana,Vp as LogoSolanaMono,$p as LogoStability,Yp as LogoStabilityMono,td as LogoSui,ed as LogoSuiMono,sd as LogoTezos,fd as LogoTezosMono,ud as LogoTwitch,pd as LogoTwitchMono,id as LogoTwitter,cd as LogoTwitterMono,Md as LogoWalletConnect,Ld as LogoWalletConnectMono,Cd as LogoWarpcast,Bd as LogoWarpcastMono,Ad as LogoWax,hd as LogoWaxMono,Wd as LogoXdc,Sd as LogoXdcMono,Gd as LogoZetachain,Dd as LogoZetachainMono,Hd as LogoZilliqa,Rd as LogoZilliqaMono,Xd as LogoZksync,Nd as LogoZksyncMono,d as Modal,vt as NFTTile,Ot as NavigationButton,x as Overlay,Et as Page,Qd as PayAmex,Vd as PayDiscover,Jd as PayMastercard,n as PayPalButton,Yd as PayVisa,wt as PhoneInput,Pt as PinCodeInput,ku as Popover,$d as PresentationLogo,vu as QRCode,Fu as Radio,Cu as RadioGroup,Zu as SecuredByMagic,It as SecurityOtp,hu as SegmentedControl,zu as SharedLogo,g as SocialLoginButton,bu as Switch,Pu as Tab,yu as Text,kt as TextBox,bt as TextInput,F as Toast,C as ToastProvider,Zt as TokenListItem,h as Tooltip,Tu as VerifyPincode,Ft as WalletAddress,eu as WltCoinbase,tu as WltMattel,fu as WltMetamask,su as WltPhantom,pu as WltRainbow,uu as WltWalletConnect,ju as useCustomVars,Uu as useToast};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.2s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.2s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.quaternary","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.base]___[cond:_groupHover<___>_dark","color]___[value:chalk","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","backgroundColor]___[value:surface.tertiary","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","alignItems]___[value:flex-start","alignItems]___[value:flex-end","opacity]___[value:0.3","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:left","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","color]___[value:negative.darker","color]___[value:positive.base","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","gap]___[value:10px","flexDirection]___[value:column","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","paddingInline]___[value:8","display]___[value:block","display]___[value:none","position]___[value:absolute","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","flexDirection]___[value:row","padding]___[value:6","paddingBottom]___[value:5","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","outlineStyle]___[value:none","background]___[value:#ffc439","outlineColor]___[value:#ffc439","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","gap]___[value:1.5","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","maxWidth]___[value:72","width]___[value:max","backgroundColor]___[value:surface.primary","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","width]___[value:72","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","filter]___[value:blur(10px)","textWrap]___[value:nowrap","overflow]___[value:hidden","textOverflow]___[value:ellipsis","zIndex]___[value:10","gap]___[value:2","width]___[value:20","height]___[value:20","color]___[value:positive.darker","color]___[value:text.tertiary","outlineOffset]___[value:1","fontVariant]___[value:no-contextual","background]___[value:brand.lightest]___[cond:_hover","width]___[value:4","top]___[value:55","overflowY]___[value:auto","width]___[value:16","height]___[value:16","color]___[value:neutral.primary","width]___[value:18","height]___[value:18","width]___[value:1.125rem","height]___[value:1.125rem","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","gap]___[value:4","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","maxHeight]___[value:17.5rem","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","gap]___[value:0","marginTop]___[value:8","marginTop]___[value:4","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","minHeight]___[value:20","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","borderWidth]___[value:thick","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","marginLeft]___[value:3","srOnly]___[value:true","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:5","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","gap]___[value:3","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","borderRadius]___[value:1rem","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","cursor]___[value:default","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","borderColor]___[value:surface.primary","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}
|
|
1
|
+
{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.2s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.2s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.quaternary","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.base]___[cond:_groupHover<___>_dark","color]___[value:chalk","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","backgroundColor]___[value:surface.tertiary","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","alignItems]___[value:flex-start","alignItems]___[value:flex-end","opacity]___[value:0.3","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:left","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","color]___[value:negative.darker","color]___[value:positive.base","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","gap]___[value:10px","flexDirection]___[value:column","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","paddingInline]___[value:8","display]___[value:block","display]___[value:none","position]___[value:absolute","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","flexDirection]___[value:row","padding]___[value:6","paddingBottom]___[value:5","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","outlineStyle]___[value:none","background]___[value:#ffc439","outlineColor]___[value:#ffc439","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","gap]___[value:1.5","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","maxWidth]___[value:72","width]___[value:max","backgroundColor]___[value:surface.primary","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","width]___[value:72","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","filter]___[value:blur(10px)","textWrap]___[value:nowrap","overflow]___[value:hidden","textOverflow]___[value:ellipsis","zIndex]___[value:10","gap]___[value:2","width]___[value:20","height]___[value:20","color]___[value:positive.darker","color]___[value:text.tertiary","outlineOffset]___[value:1","fontVariant]___[value:no-contextual","width]___[value:1.125rem","height]___[value:1.125rem","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","gap]___[value:4","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","gap]___[value:0","marginTop]___[value:8","marginTop]___[value:4","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","minHeight]___[value:20","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","borderWidth]___[value:thick","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","marginLeft]___[value:3","srOnly]___[value:true","height]___[value:16","width]___[value:16","width]___[value:4","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:5","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","gap]___[value:3","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","borderRadius]___[value:1rem","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","cursor]___[value:default","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","borderColor]___[value:surface.primary","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
export { DropdownOption, DropdownSelector } from '../inputs/dropdown-selector';
|
|
2
|
-
export type { DropdownOptionProps, DropdownSelectorProps } from '../inputs/dropdown-selector';
|
|
3
1
|
export { default as PhoneInput } from '../inputs/phone-input';
|
|
4
2
|
export type { PhoneInputProps } from '../inputs/phone-input';
|
|
5
3
|
export { PinCodeInput } from '../inputs/pincode-input';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACvE,YAAY,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,YAAY,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,YAAY,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC"}
|
|
@@ -4,13 +4,14 @@ export interface DropdownSelectorProps extends AriaButtonProps {
|
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
onSelect: (value: string) => void;
|
|
6
6
|
label?: string;
|
|
7
|
+
selectedValue?: string;
|
|
7
8
|
tooltipContent?: string;
|
|
8
9
|
disabled?: boolean;
|
|
9
10
|
viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
|
|
10
11
|
}
|
|
11
12
|
export interface DropdownOptionProps {
|
|
12
13
|
value: string;
|
|
13
|
-
|
|
14
|
+
label: string;
|
|
14
15
|
isFocused?: boolean;
|
|
15
16
|
}
|
|
16
17
|
interface OptionData {
|
|
@@ -21,7 +22,13 @@ export interface DropdownContextType {
|
|
|
21
22
|
selectedOption: OptionData | null;
|
|
22
23
|
setSelectedOption: (option: OptionData) => void;
|
|
23
24
|
}
|
|
24
|
-
export declare const DropdownOption:
|
|
25
|
-
|
|
25
|
+
export declare const DropdownOption: {
|
|
26
|
+
({ value, label, isFocused }: DropdownOptionProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
displayName: string;
|
|
28
|
+
};
|
|
29
|
+
export declare const DropdownSelector: {
|
|
30
|
+
({ children, onSelect, label, selectedValue, tooltipContent, disabled, viewMax, ...props }: DropdownSelectorProps): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
displayName: string;
|
|
32
|
+
};
|
|
26
33
|
export {};
|
|
27
34
|
//# sourceMappingURL=dropdown-selector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dropdown-selector.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"names":[],"mappings":"AAMA,OAAO,EAKL,SAAS,EAOV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAoD,MAAM,YAAY,CAAC;AAE/F,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;CAClD;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACjD;AAOD,eAAO,MAAM,cAAc;kCAAiC,mBAAmB;;CAuB9E,CAAC;AAEF,eAAO,MAAM,gBAAgB;gGAS1B,qBAAqB;;CAkLvB,CAAC"}
|
|
@@ -2,6 +2,8 @@ export { default as Button } from '../primitives/button';
|
|
|
2
2
|
export type { ButtonProps } from '../primitives/button';
|
|
3
3
|
export { default as Checkbox } from '../primitives/checkbox';
|
|
4
4
|
export type { CheckboxProps } from '../primitives/checkbox';
|
|
5
|
+
export { DropdownOption, DropdownSelector } from '../primitives/dropdown-selector';
|
|
6
|
+
export type { DropdownOptionProps, DropdownSelectorProps } from '../primitives/dropdown-selector';
|
|
5
7
|
export { default as Popover } from '../primitives/popover';
|
|
6
8
|
export type { PopoverProps } from '../primitives/popover';
|
|
7
9
|
export { Radio, RadioGroup } from '../primitives/radio';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACtE,YAAY,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACpE,YAAY,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACjE,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,0CAA0C,CAAC;AACjF,YAAY,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAChG,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAC9D,YAAY,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACtE,YAAY,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5F,YAAY,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAC3G,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACpE,YAAY,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACjE,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,0CAA0C,CAAC;AACjF,YAAY,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAChG,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAC9D,YAAY,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/radio.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/radio.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAA8D,MAAM,OAAO,CAAC;AACtG,OAAO,EACL,mBAAmB,EACnB,cAAc,EAMf,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,eAAgB,SAAQ,mBAAmB,EAAE,iBAAiB;IAC7E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAUD,eAAO,MAAM,UAAU;YAAW,eAAe;;CAiBhD,CAAC;AAEF,eAAO,MAAM,KAAK,yGA2DhB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";var t=require("react/jsx-runtime");require("../feedback/callout.js");var O=require("@styled/css"),c=require("@styled/jsx"),h=require("@styled/tokens"),B=require("../icons/ico-caret-down.js"),$=require("../icons/ico-caret-up.js"),I=require("../icons/ico-checkmark.js"),_=require("../icons/ico-question-circle-fill.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var S=require("../primitives/text.js");require("../primitives/portal.js");var r=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var K=require("../feedback/tooltip.js"),k=require("react-aria");const E=r.createContext({selectedOption:null,setSelectedOption:()=>{}}),L=({value:l,children:i,isFocused:v})=>{const{selectedOption:b,setSelectedOption:a}=r.useContext(E),u=b?.value===l,y=r.useCallback(()=>{a({value:l,label:i})},[a,l,i]);return t.jsxs(c.HStack,{px:4,py:1.5,gap:2,bg:u?"brand.base":v?"brand.lightest":"",_hover:u?{}:{bg:"brand.lightest"},onClick:y,children:[t.jsx(c.Box,{w:4,children:u&&t.jsx(I.default,{width:16,height:16,color:h.token("colors.surface.primary")})}),t.jsx(S.default,{size:"lg",styles:{fontWeight:500,color:h.token(`colors.${u?"surface":"text"}.primary`)},children:i})]})},N=({children:l,onSelect:i,label:v,tooltipContent:b,disabled:a,viewMax:u=5,...y})=>{var g;const[d,f]=r.useState(!1),[q,C]=r.useState(null),[o,p]=r.useState(null),x=r.useRef(null),j=r.useRef(null),P=u*2.5+1,z=r.useCallback(()=>{f(e=>!e),d||(p(null),setTimeout(()=>{var e;return(e=j.current)===null||e===void 0?void 0:e.focus()}))},[d]),A=r.useCallback(e=>{C(e),i(e.value),f(!1)},[C]),{buttonProps:F}=k.useButton({...y,isDisabled:a,onPress:z},x),{focusProps:H,isFocusVisible:R}=k.useFocusRing(),{keyboardProps:W}=k.useKeyboard({onKeyDown:e=>{var n,s;if(!d)return;let m=o;const D=r.Children.toArray(l);switch(e.key){case"ArrowUp":e.preventDefault(),o===null?p(r.Children.count(l)-1):(m=o>0?o-1:r.Children.count(l)-1,p(m));break;case"ArrowDown":e.preventDefault(),o===null?p(0):(m=o<r.Children.count(l)-1?o+1:0,p(m));break;case"Enter":if(e.preventDefault(),(n=x.current)===null||n===void 0||n.focus(),o===null)return;if(o>=0&&o<D.length){const w=D[o];w&&(C({label:w.props.children,value:w.props.value}),i(w.props.value))}break;case"Escape":f(!1),(s=x.current)===null||s===void 0||s.focus();break}}});return r.useEffect(()=>{const e=n=>{var s;!((s=j.current)===null||s===void 0)&&s.contains(n.target)||f(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(E.Provider,{value:{selectedOption:q,setSelectedOption:A},children:t.jsxs(c.VStack,{gap:2,w:"full",alignItems:"flex-start",children:[t.jsxs(c.HStack,{gap:2,opacity:a?.3:"",transition:"all linear 120ms",children:[v&&t.jsx(S.default,{size:"sm",styles:{fontWeight:500},children:v}),b&&t.jsx(K.default,{isDisabled:a,content:b,children:t.jsx(_.default,{className:O.css({w:4,h:4,color:"neutral.primary"})})})]}),t.jsxs("button",{className:O.css({w:"full",h:"fit-content",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:R?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:x,...k.mergeProps(F,H,W),children:[t.jsxs(c.HStack,{w:"full",h:12,p:4,justifyContent:"space-between",children:[t.jsx(S.default,{size:"lg",styles:{color:h.token(`colors.text.${q?.label?"primary":"tertiary"}`)},children:(g=q?.label)!==null&&g!==void 0?g:"Select one"}),d?t.jsx($.default,{width:18,height:18,color:h.token("colors.brand.base")}):t.jsx(B.default,{width:18,height:18,color:h.token("colors.brand.base")})]}),d&&t.jsx(c.Box,{ref:j,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",top:55,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${P}rem`},overflowY:"auto",outline:"none",zIndex:"max",children:r.Children.map(l,(e,n)=>r.cloneElement(e,{isFocused:n===o}))})]})]})})};exports.DropdownOption=L,exports.DropdownSelector=N;
|
|
2
|
-
//# sourceMappingURL=dropdown-selector.js.map
|