@magiclabs/ui-components 1.28.3 → 1.30.0

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/es/components/primitives/switch.js

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

package/dist/es/components/primitives/switch.js.map

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

package/dist/es/components/sections/verify-pincode.js

@@ -1,2 +1,2 @@
-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"../feedback/progress-bar.js";import{VStack as C,Center as x}from"@styled/jsx";import{token as y}from"@styled/tokens";import S 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 b from"../primitives/text.js";import"../primitives/portal.js";import"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import"../feedback/tooltip.js";import"../inputs/phone-input.js";import{PinCodeInput as j}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(S,{color:y("colors.brand.base"),width:36,height:36}):o(j,{originName:s,onChange:m,pinLength:c,onComplete:p,id:a,autoFocus:g});return F(h,l=>f(C,{gap:3,my:3,children:[o(x,{height:12,children:d()}),t&&o(b,{variant:"error",size:"sm",styles:{textAlign:"center"},children:t}),l.get(i)]}))},P=Object.assign(L,{RetryContent:i});export{P as VerifyPincode};
+import{jsxs as f,jsx as o}from"react/jsx-runtime";import{token as u}from"@styled/tokens";import C from"../icons/ico-checkmark-circle-fill.js";import"react";import{VStack as x,Center as y}from"@styled/jsx";import"@styled/css";import"../feedback/callout.js";import{LoadingSpinner as S}from"../feedback/loading-spinner.js";import"../feedback/progress-bar.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 b from"../primitives/text.js";import"../primitives/portal.js";import"../../hooks/useToast.js";import"../../recipes/toast.js";import"../feedback/tooltip.js";import"../inputs/phone-input.js";import{PinCodeInput as j}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:m,onChange:n,onComplete:p,originName:s,pinLength:c,id:a,autoFocus:g,errorMessage:t,children:h}=r,d=()=>e?o(S,{size:36,strokeWidth:4}):m?o(C,{color:u("colors.brand.base"),width:36,height:36}):o(j,{originName:s,onChange:n,pinLength:c,onComplete:p,id:a,autoFocus:g});return F(h,l=>f(x,{gap:3,my:3,children:[o(y,{height:12,children:d()}),t&&o(b,{variant:"error",size:"sm",styles:{textAlign:"center"},children:t}),l.get(i)]}))},P=Object.assign(L,{RetryContent:i});export{P as VerifyPincode};
 //# sourceMappingURL=verify-pincode.js.map

package/dist/es/components/sections/verify-pincode.js.map

@@ -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":"g6BAeA,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"}
+{"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":"o7BAeA,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/components/sections/wallet-navigation.js

@@ -0,0 +1,2 @@
+import{jsx as t,jsxs as c}from"react/jsx-runtime";import{token as s}from"@styled/tokens";import p from"../icons/ico-clock-fill.js";import d from"../icons/ico-grid-fill.js";import y from"../icons/ico-home-fill.js";import v from"../icons/ico-settings-fill.js";import l from"../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"../primitives/text.js";import{css as f}from"@styled/css";import{Center as h,HStack as b,Box as g}from"@styled/jsx";const i=({active:r,children:n,label:o,onPress:a})=>t(g,{pointerEvents:r===o?"none":"initial",children:t(l,{variant:"text",onPress:a,children:t(l.LeadingIcon,{className:f({color:r===o?"text.primary":"text.tertiary",_groupHover:{color:r===o?"text.primary":"text.secondary"}}),children:n})})});var e;(function(r){r.Home="home",r.Gallery="gallery",r.Activity="activity",r.Settings="settings"})(e||(e={}));const x=({active:r=e.Home,onActivity:n,onGallery:o,onHome:a,onSettings:m})=>t(h,{bottom:0,pos:"fixed",h:"6.25rem",w:"full",style:{background:`linear-gradient(180deg, transparent 0%, ${s("colors.surface.primary")} 100%)`},children:c(b,{bgColor:"surface.tertiary",borderColor:"neutral.tertiary",borderWidth:"medium",borderStyle:"solid",borderRadius:52,p:1.5,children:[t(i,{active:r,label:e.Home,onPress:a,children:t(y,{})}),t(i,{active:r,label:e.Gallery,onPress:o,children:t(d,{})}),t(i,{active:r,label:e.Activity,onPress:n,children:t(p,{})}),t(i,{active:r,label:e.Settings,onPress:m,children:t(v,{})})]})});export{e as NavSection,x as WalletNavigation};
+//# sourceMappingURL=wallet-navigation.js.map

package/dist/es/components/sections/wallet-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wallet-navigation.js","sources":["../../../../src/components/sections/wallet-navigation.tsx"],"sourcesContent":["import { IcoClockFill, IcoGridFill, IcoHomeFill, IcoSettingsFill } from '@components/icons';\nimport { Button } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, Center, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { PropsWithChildren } from 'react';\n\ninterface ActionProps extends PropsWithChildren {\n  active?: NavSection;\n  label: NavSection;\n  onPress: () => void;\n}\n\nexport interface WalletNavigationProps {\n  active?: NavSection;\n  onActivity: () => void;\n  onGallery: () => void;\n  onHome: () => void;\n  onSettings: () => void;\n}\n\nconst Action = ({ active, children, label, onPress }: ActionProps) => (\n  <Box pointerEvents={active === label ? 'none' : 'initial'}>\n    <Button variant=\"text\" onPress={onPress}>\n      <Button.LeadingIcon\n        className={css({\n          color: active === label ? 'text.primary' : 'text.tertiary',\n          _groupHover: { color: active === label ? 'text.primary' : 'text.secondary' },\n        })}\n      >\n        {children}\n      </Button.LeadingIcon>\n    </Button>\n  </Box>\n);\n\nexport enum NavSection {\n  Home = 'home',\n  Gallery = 'gallery',\n  Activity = 'activity',\n  Settings = 'settings',\n}\n\nexport const WalletNavigation = ({\n  active = NavSection.Home,\n  onActivity,\n  onGallery,\n  onHome,\n  onSettings,\n}: WalletNavigationProps) => {\n  return (\n    <Center\n      bottom={0}\n      pos=\"fixed\"\n      h=\"6.25rem\"\n      w=\"full\"\n      style={{ background: `linear-gradient(180deg, transparent 0%, ${token('colors.surface.primary')} 100%)` }}\n    >\n      <HStack\n        bgColor=\"surface.tertiary\"\n        borderColor=\"neutral.tertiary\"\n        borderWidth=\"medium\"\n        borderStyle=\"solid\"\n        borderRadius={52}\n        p={1.5}\n      >\n        <Action active={active} label={NavSection.Home} onPress={onHome}>\n          <IcoHomeFill />\n        </Action>\n        <Action active={active} label={NavSection.Gallery} onPress={onGallery}>\n          <IcoGridFill />\n        </Action>\n        <Action active={active} label={NavSection.Activity} onPress={onActivity}>\n          <IcoClockFill />\n        </Action>\n        <Action active={active} label={NavSection.Settings} onPress={onSettings}>\n          <IcoSettingsFill />\n        </Action>\n      </HStack>\n    </Center>\n  );\n};\n"],"names":["Action","active","children","label","onPress","_jsx","Box","Button","css","NavSection","WalletNavigation","onActivity","onGallery","onHome","onSettings","Center","token","_jsxs","HStack","IcoHomeFill","IcoGridFill","IcoClockFill","IcoSettingsFill"],"mappings":"2nBAqBA,MAAMA,EAAS,CAAC,CAAE,OAAAC,EAAQ,SAAAC,EAAU,MAAAC,EAAO,QAAAC,CAAO,IAChDC,EAACC,EAAG,CAAC,cAAeL,IAAWE,EAAQ,OAAS,UAAS,SACvDE,EAACE,EAAM,CAAC,QAAQ,OAAO,QAASH,EAC9B,SAAAC,EAACE,EAAO,YACN,CAAA,UAAWC,EAAI,CACb,MAAOP,IAAWE,EAAQ,eAAiB,gBAC3C,YAAa,CAAE,MAAOF,IAAWE,EAAQ,eAAiB,gBAAkB,CAC7E,CAAA,WAEAD,CAAQ,CAAA,CAEJ,CAAA,CAAA,CAAA,EAIb,IAAYO,GAAZ,SAAYA,EAAU,CACpBA,EAAA,KAAA,OACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,SAAA,UACF,GALYA,IAAAA,EAKX,CAAA,EAAA,EAEY,MAAAC,EAAmB,CAAC,CAC/B,OAAAT,EAASQ,EAAW,KACpB,WAAAE,EACA,UAAAC,EACA,OAAAC,EACA,WAAAC,CACsB,IAEpBT,EAACU,EAAM,CACL,OAAQ,EACR,IAAI,QACJ,EAAE,UACF,EAAE,OACF,MAAO,CAAE,WAAY,2CAA2CC,EAAM,wBAAwB,CAAC,QAAU,EAAA,SAEzGC,EAACC,EAAM,CACL,QAAQ,mBACR,YAAY,mBACZ,YAAY,SACZ,YAAY,QACZ,aAAc,GACd,EAAG,IAAG,SAAA,CAENb,EAACL,GAAO,OAAQC,EAAQ,MAAOQ,EAAW,KAAM,QAASI,EAAM,SAC7DR,EAACc,EAAc,EAAA,CAAA,CAAA,EAEjBd,EAACL,EAAO,CAAA,OAAQC,EAAQ,MAAOQ,EAAW,QAAS,QAASG,EAC1D,SAAAP,EAACe,EAAc,CAAA,CAAA,CAAA,CAAA,EAEjBf,EAACL,EAAO,CAAA,OAAQC,EAAQ,MAAOQ,EAAW,SAAU,QAASE,EAC3D,SAAAN,EAACgB,EAAY,EAAA,IAEfhB,EAACL,EAAM,CAAC,OAAQC,EAAQ,MAAOQ,EAAW,SAAU,QAASK,EAC3D,SAAAT,EAACiB,EAAkB,EAAA,CAAA,CAAA,CACZ,CACF,CAAA,CAAA,CAAA"}

package/dist/es/index.js

@@ -1,2 +1,2 @@
-import{Card as r}from"./components/containers/card.js";import{Content as t}from"./components/containers/content.js";import{Drawer as l}from"./components/containers/drawer.js";import{Footer as m}from"./components/containers/footer.js";import{Header as d}from"./components/containers/header.js";import{Menu as x}from"./components/containers/menu.js";import{Modal as n}from"./components/containers/modal.js";import{Overlay as g}from"./components/containers/overlay.js";import{PayPalButton as I}from"./components/external/paypal-button.js";import{SocialLoginButton as k}from"./components/external/social-login-button.js";import{Callout as h}from"./components/feedback/callout.js";import{LoadingSpinner as C}from"./components/feedback/loading-spinner.js";import{ProgressBar as P}from"./components/feedback/progress-bar.js";import{Skeleton as b}from"./components/feedback/skeleton.js";import{Toast as y,ToastProvider as W}from"./components/feedback/toast-provider.js";import{default as D}from"./components/feedback/tooltip.js";import{default as G}from"./components/icons/ico-add.js";import{default as O}from"./components/icons/ico-alert-circle-fill.js";import{default as z}from"./components/icons/ico-alert-circle.js";import{default as Z}from"./components/icons/ico-arrow-down.js";import{default as U}from"./components/icons/ico-arrow-left.js";import{default as j}from"./components/icons/ico-arrow-right.js";import{default as V}from"./components/icons/ico-arrow-up.js";import{default as J}from"./components/icons/ico-asterisk-with-shield.js";import{default as Y}from"./components/icons/ico-asterisk.js";import{default as $}from"./components/icons/ico-astronaut.js";import{default as eo}from"./components/icons/ico-atom.js";import{default as ao}from"./components/icons/ico-bank.js";import{default as fo}from"./components/icons/ico-bell-notification.js";import{default as so}from"./components/icons/ico-bell.js";import{default as po}from"./components/icons/ico-block.js";import{default as xo}from"./components/icons/ico-branding.js";import{default as no}from"./components/icons/ico-caret-down.js";import{default as go}from"./components/icons/ico-caret-left.js";import{default as Io}from"./components/icons/ico-caret-right.js";import{default as ko}from"./components/icons/ico-caret-up.js";import{default as ho}from"./components/icons/ico-checkmark-circle-fill.js";import{default as Co}from"./components/icons/ico-checkmark-circle.js";import{default as Po}from"./components/icons/ico-checkmark.js";import{default as bo}from"./components/icons/ico-code-editor.js";import{default as yo}from"./components/icons/ico-code-sandbox.js";import{default as To}from"./components/icons/ico-code.js";import{default as Eo}from"./components/icons/ico-command-line.js";import{default as Ro}from"./components/icons/ico-comment.js";import{default as vo}from"./components/icons/ico-copy.js";import{default as Ho}from"./components/icons/ico-credit-card.js";import{default as No}from"./components/icons/ico-dedicated.js";import{default as Xo}from"./components/icons/ico-diamond.js";import{default as Qo}from"./components/icons/ico-dismiss-circle-fill.js";import{default as qo}from"./components/icons/ico-dismiss-circle.js";import{default as Ko}from"./components/icons/ico-dismiss.js";import{default as _o}from"./components/icons/ico-doc.js";import{default as oe}from"./components/icons/ico-download.js";import{default as re}from"./components/icons/ico-edit-email.js";import{default as te}from"./components/icons/ico-edit.js";import{default as le}from"./components/icons/ico-email-fill.js";import{default as me}from"./components/icons/ico-email-open.js";import{default as de}from"./components/icons/ico-email.js";import{default as xe}from"./components/icons/ico-expand.js";import{default as ne}from"./components/icons/ico-expiration.js";import{default as ge}from"./components/icons/ico-external-link.js";import{default as Ie}from"./components/icons/ico-eye-closed.js";import{default as ke}from"./components/icons/ico-eye-opened.js";import{default as he}from"./components/icons/ico-fingerprint-fill.js";import{default as Ce}from"./components/icons/ico-fingerprint.js";import{default as Pe}from"./components/icons/ico-gas.js";import{default as be}from"./components/icons/ico-gift.js";import{default as ye}from"./components/icons/ico-globe.js";import{default as Te}from"./components/icons/ico-guide.js";import{default as Ee}from"./components/icons/ico-home.js";import{default as Re}from"./components/icons/ico-hourglass.js";import{default as ve}from"./components/icons/ico-info-circle-fill.js";import{default as He}from"./components/icons/ico-info-circle.js";import{default as Ne}from"./components/icons/ico-kebab.js";import{default as Xe}from"./components/icons/ico-key.js";import{default as Qe}from"./components/icons/ico-lightbulb-fill.js";import{default as qe}from"./components/icons/ico-lightbulb.js";import{default as Ke}from"./components/icons/ico-lightning-fill.js";import{default as _e}from"./components/icons/ico-lightning.js";import{default as or}from"./components/icons/ico-link.js";import{default as rr}from"./components/icons/ico-loading.js";import{default as tr}from"./components/icons/ico-lock-locked.js";import{default as lr}from"./components/icons/ico-lock-password.js";import{default as mr}from"./components/icons/ico-lock-unlocked-fill.js";import{default as dr}from"./components/icons/ico-lock-unlocked.js";import{default as xr}from"./components/icons/ico-login-form.js";import{default as nr}from"./components/icons/ico-magic.js";import{default as gr}from"./components/icons/ico-megaphone.js";import{default as Ir}from"./components/icons/ico-menu.js";import{default as kr}from"./components/icons/ico-message-fill.js";import{default as hr}from"./components/icons/ico-message.js";import{default as Cr}from"./components/icons/ico-mfa.js";import{default as Pr}from"./components/icons/ico-minimize.js";import{default as br}from"./components/icons/ico-mobile2fa.js";import{default as yr}from"./components/icons/ico-mobile2fafill.js";import{default as Tr}from"./components/icons/ico-open-book.js";import{default as Er}from"./components/icons/ico-paper-plane.js";import{default as Rr}from"./components/icons/ico-passport.js";import{default as vr}from"./components/icons/ico-passwordless.js";import{default as Hr}from"./components/icons/ico-pending-connection.js";import{default as Nr}from"./components/icons/ico-phone.js";import{default as Xr}from"./components/icons/ico-polygon-gas-testnet.js";import{default as Qr}from"./components/icons/ico-polygon-gas.js";import{default as qr}from"./components/icons/ico-price.js";import{default as Kr}from"./components/icons/ico-qrcode.js";import{default as _r}from"./components/icons/ico-question-circle-fill.js";import{default as oa}from"./components/icons/ico-question-circle.js";import{default as ra}from"./components/icons/ico-refresh-circle-fill.js";import{default as ta}from"./components/icons/ico-refresh.js";import{default as la}from"./components/icons/ico-rocket-fill.js";import{default as ma}from"./components/icons/ico-search.js";import{default as da}from"./components/icons/ico-settings.js";import{default as xa}from"./components/icons/ico-shapes.js";import{default as na}from"./components/icons/ico-shield-approved.js";import{default as ga}from"./components/icons/ico-shield-rejected.js";import{default as Ia}from"./components/icons/ico-shield.js";import{default as ka}from"./components/icons/ico-social.js";import{default as ha}from"./components/icons/ico-sold-out-tag.js";import{default as Ca}from"./components/icons/ico-star.js";import{default as Pa}from"./components/icons/ico-swap.js";import{default as ba}from"./components/icons/ico-swatches.js";import{default as ya}from"./components/icons/ico-team.js";import{default as Ta}from"./components/icons/ico-trash.js";import{default as Ea}from"./components/icons/ico-users.js";import{default as Ra}from"./components/icons/ico-wallet-fill.js";import{default as va}from"./components/icons/ico-wallet.js";import{default as Ha}from"./components/icons/ico-wand.js";import{default as Na}from"./components/icons/ico-warning-fill.js";import{default as Xa}from"./components/icons/ico-warning.js";import{default as Qa}from"./components/info/copy-button.js";import{default as qa}from"./components/info/email-wbr.js";import{default as Ka}from"./components/info/security-otp.js";import{default as _a}from"./components/info/text-box.js";import{default as ot}from"./components/info/wallet-address.js";import{default as rt}from"./components/inputs/phone-input.js";import{PinCodeInput as tt}from"./components/inputs/pincode-input.js";import{TextInput as lt}from"./components/inputs/text-input.js";import{Dialogue as mt}from"./components/layouts/dialogue.js";import{Error as dt}from"./components/layouts/error.js";import{Page as xt}from"./components/layouts/page.js";import{PassportPage as nt}from"./components/layouts/passport-page.js";import{default as gt}from"./components/list-items/navigation-button.js";import{NFTTile as It}from"./components/list-items/nft-tile.js";import{TokenListItem as kt}from"./components/list-items/token-list-item.js";import{TransactionRow as ht}from"./components/list-items/transaction-row.js";import{default as Ct}from"./components/logos/blc-algorand.js";import{default as Pt}from"./components/logos/blc-aptos.js";import{default as bt}from"./components/logos/blc-arbitrum.js";import{default as yt}from"./components/logos/blc-astar.js";import{default as Tt}from"./components/logos/blc-avalanche.js";import{default as Et}from"./components/logos/blc-base.js";import{default as Rt}from"./components/logos/blc-berachain.js";import{default as vt}from"./components/logos/blc-binance.js";import{default as Ht}from"./components/logos/blc-bitcoin.js";import{default as Nt}from"./components/logos/blc-celo.js";import{default as Xt}from"./components/logos/blc-chiliz.js";import{default as Qt}from"./components/logos/blc-cosmos.js";import{default as qt}from"./components/logos/blc-ethereum.js";import{default as Kt}from"./components/logos/blc-etherlink.js";import{default as _t}from"./components/logos/blc-flow.js";import{default as of}from"./components/logos/blc-harmony.js";import{default as rf}from"./components/logos/blc-icon.js";import{default as tf}from"./components/logos/blc-immutable-x.js";import{default as lf}from"./components/logos/blc-loopring.js";import{default as mf}from"./components/logos/blc-moonbeam.js";import{default as df}from"./components/logos/blc-near.js";import{default as xf}from"./components/logos/blc-optimism.js";import{default as nf}from"./components/logos/blc-polkadot.js";import{default as Lf}from"./components/logos/blc-polygon.js";import{default as Mf}from"./components/logos/blc-rarichain.js";import{default as Bf}from"./components/logos/blc-solana.js";import{default as Ff}from"./components/logos/blc-stability.js";import{default as wf}from"./components/logos/blc-sui.js";import{default as Af}from"./components/logos/blc-tezos.js";import{default as Sf}from"./components/logos/blc-wax.js";import{default as Wf}from"./components/logos/blc-zetachain.js";import{default as Df}from"./components/logos/blc-zilliqa.js";import{default as Gf}from"./components/logos/blc-zksync.js";import{default as Of}from"./components/logos/fwk-11ty.js";import{default as zf}from"./components/logos/fwk-android.js";import{default as Zf}from"./components/logos/fwk-apple.js";import{default as Uf}from"./components/logos/fwk-authy.js";import{default as jf}from"./components/logos/fwk-binance-fill.js";import{default as Vf}from"./components/logos/fwk-chrome.js";import{default as Jf}from"./components/logos/fwk-electron.js";import{default as Yf}from"./components/logos/fwk-express.js";import{default as $f}from"./components/logos/fwk-fauna.js";import{default as el}from"./components/logos/fwk-firebase.js";import{default as al}from"./components/logos/fwk-go.js";import{default as fl}from"./components/logos/fwk-google-authenticator.js";import{default as sl}from"./components/logos/fwk-hasura.js";import{default as pl}from"./components/logos/fwk-javascript.js";import{default as ul}from"./components/logos/fwk-jwt.js";import{default as cl}from"./components/logos/fwk-laravel.js";import{default as il}from"./components/logos/fwk-nextjs.js";import{default as Ll}from"./components/logos/fwk-nodejs.js";import{default as Ml}from"./components/logos/fwk-nuxtjs.js";import{default as Bl}from"./components/logos/fwk-php.js";import{default as Fl}from"./components/logos/fwk-react.js";import{default as wl}from"./components/logos/fwk-strapi.js";import{default as Al}from"./components/logos/fwk-stripe.js";import{default as Sl}from"./components/logos/fwk-vue.js";import{default as Wl}from"./components/logos/fwk-webflow.js";import{default as Dl}from"./components/logos/fwk-wordpress.js";import{default as Gl}from"./components/logos/fwk-zapier.js";import{default as Ol}from"./components/logos/icon-art-dark.js";import{default as zl}from"./components/logos/icon-art.js";import{default as Zl}from"./components/logos/icon-delete.js";import{default as Ul}from"./components/logos/icon-email-globe.js";import{default as jl}from"./components/logos/icon-email.js";import{default as Vl}from"./components/logos/icon-game-controller-dark.js";import{default as Jl}from"./components/logos/icon-game-controller.js";import{default as Yl}from"./components/logos/icon-generic-token.js";import{default as $l}from"./components/logos/icon-magic-globe.js";import{default as es}from"./components/logos/icon-magic-logo.js";import{default as as}from"./components/logos/icon-music-dark.js";import{default as fs}from"./components/logos/icon-music.js";import{default as ss}from"./components/logos/icon-person-dark.js";import{default as ps}from"./components/logos/icon-person.js";import{default as us}from"./components/logos/icon-profile-dark.js";import{default as cs}from"./components/logos/icon-profile-light.js";import{default as is}from"./components/logos/icon-reset.js";import{default as Ls}from"./components/logos/icon-sms.js";import{default as Ms}from"./components/logos/icon-ticket-dark.js";import{default as Bs}from"./components/logos/icon-ticket.js";import{default as Fs}from"./components/logos/icon-warning-dark.js";import{default as ws}from"./components/logos/icon-warning-shield.js";import{default as As}from"./components/logos/icon-warning.js";import{default as Ss}from"./components/logos/logo-algorand-mono.js";import{default as Ws}from"./components/logos/logo-algorand.js";import{default as Ds}from"./components/logos/logo-apple-mono.js";import{default as Gs}from"./components/logos/logo-apple.js";import{default as Os}from"./components/logos/logo-aptos-mono.js";import{default as zs}from"./components/logos/logo-aptos.js";import{default as Zs}from"./components/logos/logo-arbitrum-mono.js";import{default as Us}from"./components/logos/logo-arbitrum-one-mono.js";import{default as js}from"./components/logos/logo-arbitrum-one.js";import{default as Vs}from"./components/logos/logo-arbitrum.js";import{default as Js}from"./components/logos/logo-astar-mono.js";import{default as Ys}from"./components/logos/logo-astar.js";import{default as $s}from"./components/logos/logo-auth0-mono.js";import{default as em}from"./components/logos/logo-auth0.js";import{default as am}from"./components/logos/logo-avalanche-mono.js";import{default as fm}from"./components/logos/logo-avalanche.js";import{default as sm}from"./components/logos/logo-azure-mono.js";import{default as pm}from"./components/logos/logo-azure.js";import{default as um}from"./components/logos/logo-base-mono.js";import{default as cm}from"./components/logos/logo-base.js";import{default as im}from"./components/logos/logo-berachain-mono.js";import{default as Lm}from"./components/logos/logo-berachain.js";import{default as Mm}from"./components/logos/logo-binance-mono.js";import{default as Bm}from"./components/logos/logo-binance.js";import{default as Fm}from"./components/logos/logo-bit-bucket-mono.js";import{default as wm}from"./components/logos/logo-bit-bucket.js";import{default as Am}from"./components/logos/logo-bitcoin-mono.js";import{default as Sm}from"./components/logos/logo-bitcoin.js";import{default as Wm}from"./components/logos/logo-bnb-mono.js";import{default as Dm}from"./components/logos/logo-bnb.js";import{default as Gm}from"./components/logos/logo-celo-mono.js";import{default as Om}from"./components/logos/logo-celo.js";import{default as zm}from"./components/logos/logo-chiliz-mono.js";import{default as Zm}from"./components/logos/logo-chiliz.js";import{default as Um}from"./components/logos/logo-cognito-mono.js";import{default as jm}from"./components/logos/logo-cognito.js";import{default as Vm}from"./components/logos/logo-cosmos-mono.js";import{default as Jm}from"./components/logos/logo-cosmos.js";import{default as Ym}from"./components/logos/logo-discord-mono.js";import{default as $m}from"./components/logos/logo-discord.js";import{default as ep}from"./components/logos/logo-ethereum-mono.js";import{default as ap}from"./components/logos/logo-ethereum.js";import{default as fp}from"./components/logos/logo-etherlink-mono.js";import{default as sp}from"./components/logos/logo-etherlink.js";import{default as pp}from"./components/logos/logo-facebook-mono.js";import{default as up}from"./components/logos/logo-facebook.js";import{default as cp}from"./components/logos/logo-flare-mono.js";import{default as ip}from"./components/logos/logo-flare.js";import{default as Lp}from"./components/logos/logo-flow-mono.js";import{default as Mp}from"./components/logos/logo-flow.js";import{default as Bp}from"./components/logos/logo-git-hub-mono.js";import{default as Fp}from"./components/logos/logo-git-hub.js";import{default as wp}from"./components/logos/logo-git-lab-mono.js";import{default as Ap}from"./components/logos/logo-git-lab.js";import{default as Sp}from"./components/logos/logo-google-mono.js";import{default as Wp}from"./components/logos/logo-google.js";import{default as Dp}from"./components/logos/logo-harmony-mono.js";import{default as Gp}from"./components/logos/logo-harmony.js";import{default as Op}from"./components/logos/logo-horizen-mono.js";import{default as zp}from"./components/logos/logo-horizen.js";import{default as Zp}from"./components/logos/logo-icon-mono.js";import{default as Up}from"./components/logos/logo-icon.js";import{default as jp}from"./components/logos/logo-immutable-x-mono.js";import{default as Vp}from"./components/logos/logo-immutable-x.js";import{default as Jp}from"./components/logos/logo-link-by-stripe-mono.js";import{default as Yp}from"./components/logos/logo-link-by-stripe.js";import{default as $p}from"./components/logos/logo-link-mono.js";import{default as ed}from"./components/logos/logo-link.js";import{default as ad}from"./components/logos/logo-linked-in-mono.js";import{default as fd}from"./components/logos/logo-linked-in.js";import{default as sd}from"./components/logos/logo-loopring-mono.js";import{default as pd}from"./components/logos/logo-loopring.js";import{default as ud}from"./components/logos/logo-microsoft-mono.js";import{default as cd}from"./components/logos/logo-microsoft.js";import{default as id}from"./components/logos/logo-moonbeam-mono.js";import{default as Ld}from"./components/logos/logo-moonbeam.js";import{default as Md}from"./components/logos/logo-near-mono.js";import{default as Bd}from"./components/logos/logo-near.js";import{default as Fd}from"./components/logos/logo-onramper-mono.js";import{default as wd}from"./components/logos/logo-onramper.js";import{default as Ad}from"./components/logos/logo-optimism-mono.js";import{default as Sd}from"./components/logos/logo-optimism.js";import{default as Wd}from"./components/logos/logo-pay-pal-mono.js";import{default as Dd}from"./components/logos/logo-pay-pal-wordmark-mono.js";import{default as Gd}from"./components/logos/logo-pay-pal-wordmark.js";import{default as Od}from"./components/logos/logo-pay-pal.js";import{default as zd}from"./components/logos/logo-poa-mono.js";import{default as Zd}from"./components/logos/logo-poa.js";import{default as Ud}from"./components/logos/logo-polkadot-mono.js";import{default as jd}from"./components/logos/logo-polkadot.js";import{default as Vd}from"./components/logos/logo-polygon-mono.js";import{default as Jd}from"./components/logos/logo-polygon.js";import{default as Yd}from"./components/logos/logo-rarichain-mono.js";import{default as $d}from"./components/logos/logo-rarichain.js";import{default as eu}from"./components/logos/logo-sardine-mono.js";import{default as au}from"./components/logos/logo-sardine.js";import{default as fu}from"./components/logos/logo-sei-mono.js";import{default as su}from"./components/logos/logo-sei.js";import{default as pu}from"./components/logos/logo-solana-mono.js";import{default as uu}from"./components/logos/logo-solana.js";import{default as cu}from"./components/logos/logo-stability-mono.js";import{default as iu}from"./components/logos/logo-stability.js";import{default as Lu}from"./components/logos/logo-sui-mono.js";import{default as Mu}from"./components/logos/logo-sui.js";import{default as Bu}from"./components/logos/logo-tezos-mono.js";import{default as Fu}from"./components/logos/logo-tezos.js";import{default as wu}from"./components/logos/logo-twitch-mono.js";import{default as Au}from"./components/logos/logo-twitch.js";import{default as Su}from"./components/logos/logo-twitter-mono.js";import{default as Wu}from"./components/logos/logo-twitter.js";import{default as Du}from"./components/logos/logo-wallet-connect-mono.js";import{default as Gu}from"./components/logos/logo-wallet-connect.js";import{default as Ou}from"./components/logos/logo-warpcast-mono.js";import{default as zu}from"./components/logos/logo-warpcast.js";import{default as Zu}from"./components/logos/logo-wax-mono.js";import{default as Uu}from"./components/logos/logo-wax.js";import{default as ju}from"./components/logos/logo-xdc-mono.js";import{default as Vu}from"./components/logos/logo-xdc.js";import{default as Ju}from"./components/logos/logo-zetachain-mono.js";import{default as Yu}from"./components/logos/logo-zetachain.js";import{default as $u}from"./components/logos/logo-zilliqa-mono.js";import{default as ex}from"./components/logos/logo-zilliqa.js";import{default as ax}from"./components/logos/logo-zksync-mono.js";import{default as fx}from"./components/logos/logo-zksync.js";import{default as sx}from"./components/logos/pay-amex.js";import{default as px}from"./components/logos/pay-discover.js";import{default as ux}from"./components/logos/pay-mastercard.js";import{default as cx}from"./components/logos/pay-visa.js";import{default as ix}from"./components/logos/presentation-logo.js";import{default as Lx}from"./components/logos/website-magic.js";import{default as Mx}from"./components/logos/wlt-coinbase.js";import{default as Bx}from"./components/logos/wlt-mattel.js";import{default as Fx}from"./components/logos/wlt-metamask.js";import{default as wx}from"./components/logos/wlt-phantom.js";import{default as Ax}from"./components/logos/wlt-rainbow.js";import{default as Sx}from"./components/logos/wlt-wallet-connect.js";import{default as Wx}from"./components/primitives/button.js";import{default as Dx}from"./components/primitives/checkbox.js";import{DropdownOption as Gx,DropdownSelector as Rx}from"./components/primitives/dropdown-selector.js";import{Popover as vx}from"./components/primitives/popover.js";import{Radio as Hx,RadioGroup as Zx}from"./components/primitives/radio.js";import{SegmentedControl as Ux,Tab as Xx}from"./components/primitives/segmented-control.js";import{default as Qx}from"./components/primitives/switch.js";import{default as qx}from"./components/primitives/text.js";import{VerifyPincode as Kx}from"./components/sections/verify-pincode.js";import{default as _x}from"./components/utils/animate.js";import{ClientAssetLogo as oc}from"./components/utils/client-asset-logo.js";import{default as rc}from"./components/utils/qr-code.js";import{default as tc}from"./components/utils/secured-by-magic.js";import{default as lc}from"./components/utils/shared-logo.js";import{useCustomVars as mc}from"./hooks/theme.js";import{useToast as dc}from"./hooks/useToast.js";export{_x as Animate,Ct as BlcAlgorand,Pt as BlcAptos,bt as BlcArbitrum,yt as BlcAstar,Tt as BlcAvalanche,Et as BlcBase,Rt as BlcBerachain,vt as BlcBinance,Ht as BlcBitcoin,Nt as BlcCelo,Xt as BlcChiliz,Qt as BlcCosmos,qt as BlcEthereum,Kt as BlcEtherlink,_t as BlcFlow,of as BlcHarmony,rf as BlcIcon,tf as BlcImmutableX,lf as BlcLoopring,mf as BlcMoonbeam,df as BlcNear,xf as BlcOptimism,nf as BlcPolkadot,Lf as BlcPolygon,Mf as BlcRarichain,Bf as BlcSolana,Ff as BlcStability,wf as BlcSui,Af as BlcTezos,Sf as BlcWax,Wf as BlcZetachain,Df as BlcZilliqa,Gf as BlcZksync,Wx as Button,h as Callout,r as Card,Dx as Checkbox,oc as ClientAssetLogo,t as Content,Qa as CopyButton,mt as Dialogue,l as Drawer,Gx as DropdownOption,Rx as DropdownSelector,qa as EmailWbr,dt as Error,m as Footer,Of as Fwk11ty,zf as FwkAndroid,Zf as FwkApple,Uf as FwkAuthy,jf as FwkBinanceFill,Vf as FwkChrome,Jf as FwkElectron,Yf as FwkExpress,$f as FwkFauna,el as FwkFirebase,al as FwkGo,fl as FwkGoogleAuthenticator,sl as FwkHasura,pl as FwkJavascript,ul as FwkJwt,cl as FwkLaravel,il as FwkNextjs,Ll as FwkNodejs,Ml as FwkNuxtjs,Bl as FwkPhp,Fl as FwkReact,wl as FwkStrapi,Al as FwkStripe,Sl as FwkVue,Wl as FwkWebflow,Dl as FwkWordpress,Gl as FwkZapier,d as Header,G as IcoAdd,z as IcoAlertCircle,O as IcoAlertCircleFill,Z as IcoArrowDown,U as IcoArrowLeft,j as IcoArrowRight,V as IcoArrowUp,Y as IcoAsterisk,J as IcoAsteriskWithShield,$ as IcoAstronaut,eo as IcoAtom,ao as IcoBank,so as IcoBell,fo as IcoBellNotification,po as IcoBlock,xo as IcoBranding,no as IcoCaretDown,go as IcoCaretLeft,Io as IcoCaretRight,ko as IcoCaretUp,Po as IcoCheckmark,Co as IcoCheckmarkCircle,ho as IcoCheckmarkCircleFill,To as IcoCode,bo as IcoCodeEditor,yo as IcoCodeSandbox,Eo as IcoCommandLine,Ro as IcoComment,vo as IcoCopy,Ho as IcoCreditCard,No as IcoDedicated,Xo as IcoDiamond,Ko as IcoDismiss,qo as IcoDismissCircle,Qo as IcoDismissCircleFill,_o as IcoDoc,oe as IcoDownload,te as IcoEdit,re as IcoEditEmail,de as IcoEmail,le as IcoEmailFill,me as IcoEmailOpen,xe as IcoExpand,ne as IcoExpiration,ge as IcoExternalLink,Ie as IcoEyeClosed,ke as IcoEyeOpened,Ce as IcoFingerprint,he as IcoFingerprintFill,Pe as IcoGas,be as IcoGift,ye as IcoGlobe,Te as IcoGuide,Ee as IcoHome,Re as IcoHourglass,He as IcoInfoCircle,ve as IcoInfoCircleFill,Ne as IcoKebab,Xe as IcoKey,qe as IcoLightbulb,Qe as IcoLightbulbFill,_e as IcoLightning,Ke as IcoLightningFill,or as IcoLink,rr as IcoLoading,tr as IcoLockLocked,lr as IcoLockPassword,dr as IcoLockUnlocked,mr as IcoLockUnlockedFill,xr as IcoLoginForm,nr as IcoMagic,gr as IcoMegaphone,Ir as IcoMenu,hr as IcoMessage,kr as IcoMessageFill,Cr as IcoMfa,Pr as IcoMinimize,br as IcoMobile2fa,yr as IcoMobile2fafill,Tr as IcoOpenBook,Er as IcoPaperPlane,Rr as IcoPassport,vr as IcoPasswordless,Hr as IcoPendingConnection,Nr as IcoPhone,Qr as IcoPolygonGas,Xr as IcoPolygonGasTestnet,qr as IcoPrice,Kr as IcoQrcode,oa as IcoQuestionCircle,_r as IcoQuestionCircleFill,ta as IcoRefresh,ra as IcoRefreshCircleFill,la as IcoRocketFill,ma as IcoSearch,da as IcoSettings,xa as IcoShapes,Ia as IcoShield,na as IcoShieldApproved,ga as IcoShieldRejected,ka as IcoSocial,ha as IcoSoldOutTag,Ca as IcoStar,Pa as IcoSwap,ba as IcoSwatches,ya as IcoTeam,Ta as IcoTrash,Ea as IcoUsers,va as IcoWallet,Ra as IcoWalletFill,Ha as IcoWand,Xa as IcoWarning,Na as IcoWarningFill,zl as IconArt,Ol as IconArtDark,Zl as IconDelete,jl as IconEmail,Ul as IconEmailGlobe,Jl as IconGameController,Vl as IconGameControllerDark,Yl as IconGenericToken,$l as IconMagicGlobe,es as IconMagicLogo,fs as IconMusic,as as IconMusicDark,ps as IconPerson,ss as IconPersonDark,us as IconProfileDark,cs as IconProfileLight,is as IconReset,Ls as IconSms,Bs as IconTicket,Ms as IconTicketDark,As as IconWarning,Fs as IconWarningDark,ws as IconWarningShield,C as LoadingSpinner,Ws as LogoAlgorand,Ss as LogoAlgorandMono,Gs as LogoApple,Ds as LogoAppleMono,zs as LogoAptos,Os as LogoAptosMono,Vs as LogoArbitrum,Zs as LogoArbitrumMono,js as LogoArbitrumOne,Us as LogoArbitrumOneMono,Ys as LogoAstar,Js as LogoAstarMono,em as LogoAuth0,$s as LogoAuth0Mono,fm as LogoAvalanche,am as LogoAvalancheMono,pm as LogoAzure,sm as LogoAzureMono,cm as LogoBase,um as LogoBaseMono,Lm as LogoBerachain,im as LogoBerachainMono,Bm as LogoBinance,Mm as LogoBinanceMono,wm as LogoBitBucket,Fm as LogoBitBucketMono,Sm as LogoBitcoin,Am as LogoBitcoinMono,Dm as LogoBnb,Wm as LogoBnbMono,Om as LogoCelo,Gm as LogoCeloMono,Zm as LogoChiliz,zm as LogoChilizMono,jm as LogoCognito,Um as LogoCognitoMono,Jm as LogoCosmos,Vm as LogoCosmosMono,$m as LogoDiscord,Ym as LogoDiscordMono,ap as LogoEthereum,ep as LogoEthereumMono,sp as LogoEtherlink,fp as LogoEtherlinkMono,up as LogoFacebook,pp as LogoFacebookMono,ip as LogoFlare,cp as LogoFlareMono,Mp as LogoFlow,Lp as LogoFlowMono,Fp as LogoGitHub,Bp as LogoGitHubMono,Ap as LogoGitLab,wp as LogoGitLabMono,Wp as LogoGoogle,Sp as LogoGoogleMono,Gp as LogoHarmony,Dp as LogoHarmonyMono,zp as LogoHorizen,Op as LogoHorizenMono,Up as LogoIcon,Zp as LogoIconMono,Vp as LogoImmutableX,jp as LogoImmutableXMono,ed as LogoLink,Yp as LogoLinkByStripe,Jp as LogoLinkByStripeMono,$p as LogoLinkMono,fd as LogoLinkedIn,ad as LogoLinkedInMono,pd as LogoLoopring,sd as LogoLoopringMono,cd as LogoMicrosoft,ud as LogoMicrosoftMono,Ld as LogoMoonbeam,id as LogoMoonbeamMono,Bd as LogoNear,Md as LogoNearMono,wd as LogoOnramper,Fd as LogoOnramperMono,Sd as LogoOptimism,Ad as LogoOptimismMono,Od as LogoPayPal,Wd as LogoPayPalMono,Gd as LogoPayPalWordmark,Dd as LogoPayPalWordmarkMono,Zd as LogoPoa,zd as LogoPoaMono,jd as LogoPolkadot,Ud as LogoPolkadotMono,Jd as LogoPolygon,Vd as LogoPolygonMono,$d as LogoRarichain,Yd as LogoRarichainMono,au as LogoSardine,eu as LogoSardineMono,su as LogoSei,fu as LogoSeiMono,uu as LogoSolana,pu as LogoSolanaMono,iu as LogoStability,cu as LogoStabilityMono,Mu as LogoSui,Lu as LogoSuiMono,Fu as LogoTezos,Bu as LogoTezosMono,Au as LogoTwitch,wu as LogoTwitchMono,Wu as LogoTwitter,Su as LogoTwitterMono,Gu as LogoWalletConnect,Du as LogoWalletConnectMono,zu as LogoWarpcast,Ou as LogoWarpcastMono,Uu as LogoWax,Zu as LogoWaxMono,Vu as LogoXdc,ju as LogoXdcMono,Yu as LogoZetachain,Ju as LogoZetachainMono,ex as LogoZilliqa,$u as LogoZilliqaMono,fx as LogoZksync,ax as LogoZksyncMono,x as Menu,n as Modal,It as NFTTile,gt as NavigationButton,g as Overlay,xt as Page,nt as PassportPage,sx as PayAmex,px as PayDiscover,ux as PayMastercard,I as PayPalButton,cx as PayVisa,rt as PhoneInput,tt as PinCodeInput,vx as Popover,ix as PresentationLogo,P as ProgressBar,rc as QRCode,Hx as Radio,Zx as RadioGroup,tc as SecuredByMagic,Ka as SecurityOtp,Ux as SegmentedControl,lc as SharedLogo,b as Skeleton,k as SocialLoginButton,Qx as Switch,Xx as Tab,qx as Text,_a as TextBox,lt as TextInput,y as Toast,W as ToastProvider,kt as TokenListItem,D as Tooltip,ht as TransactionRow,Kx as VerifyPincode,ot as WalletAddress,Lx as WebsiteMagic,Mx as WltCoinbase,Bx as WltMattel,Fx as WltMetamask,wx as WltPhantom,Ax as WltRainbow,Sx as WltWalletConnect,mc as useCustomVars,dc as useToast};
+import{Card as r}from"./components/containers/card.js";import{Content as a}from"./components/containers/content.js";import{Drawer as l}from"./components/containers/drawer.js";import{Footer as m}from"./components/containers/footer.js";import{Header as d}from"./components/containers/header.js";import{Menu as x}from"./components/containers/menu.js";import{Modal as c}from"./components/containers/modal.js";import{Overlay as g}from"./components/containers/overlay.js";import{PayPalButton as I}from"./components/external/paypal-button.js";import{SocialLoginButton as k}from"./components/external/social-login-button.js";import{AnimatedCheckmark as h}from"./components/feedback/animated-checkmark.js";import{AnimatedSpinner as F}from"./components/feedback/animated-spinner.js";import{Callout as P}from"./components/feedback/callout.js";import{LoadingSpinner as S}from"./components/feedback/loading-spinner.js";import{ProgressBar as y}from"./components/feedback/progress-bar.js";import{Skeleton as E}from"./components/feedback/skeleton.js";import{Toast as D,ToastProvider as G}from"./components/feedback/toast-provider.js";import{default as O}from"./components/feedback/tooltip.js";import{default as H}from"./components/icons/ico-add.js";import{default as N}from"./components/icons/ico-alert-circle-fill.js";import{default as U}from"./components/icons/ico-alert-circle.js";import{default as j}from"./components/icons/ico-arrow-down.js";import{default as V}from"./components/icons/ico-arrow-left.js";import{default as J}from"./components/icons/ico-arrow-right.js";import{default as Y}from"./components/icons/ico-arrow-up.js";import{default as $}from"./components/icons/ico-asterisk-with-shield.js";import{default as eo}from"./components/icons/ico-asterisk.js";import{default as to}from"./components/icons/ico-astronaut.js";import{default as fo}from"./components/icons/ico-atom.js";import{default as so}from"./components/icons/ico-bank.js";import{default as po}from"./components/icons/ico-bell-notification.js";import{default as xo}from"./components/icons/ico-bell.js";import{default as co}from"./components/icons/ico-block.js";import{default as go}from"./components/icons/ico-branding.js";import{default as Io}from"./components/icons/ico-caret-down.js";import{default as ko}from"./components/icons/ico-caret-left.js";import{default as ho}from"./components/icons/ico-caret-right.js";import{default as Fo}from"./components/icons/ico-caret-up.js";import{default as Po}from"./components/icons/ico-checkmark-circle-fill.js";import{default as So}from"./components/icons/ico-checkmark-circle.js";import{default as yo}from"./components/icons/ico-checkmark.js";import{default as Eo}from"./components/icons/ico-clock-fill.js";import{default as Do}from"./components/icons/ico-code-editor.js";import{default as Ro}from"./components/icons/ico-code-sandbox.js";import{default as vo}from"./components/icons/ico-code.js";import{default as zo}from"./components/icons/ico-command-line.js";import{default as Zo}from"./components/icons/ico-comment.js";import{default as Xo}from"./components/icons/ico-copy.js";import{default as Qo}from"./components/icons/ico-credit-card.js";import{default as qo}from"./components/icons/ico-dedicated.js";import{default as Ko}from"./components/icons/ico-diamond.js";import{default as _o}from"./components/icons/ico-dismiss-circle-fill.js";import{default as oe}from"./components/icons/ico-dismiss-circle.js";import{default as re}from"./components/icons/ico-dismiss.js";import{default as ae}from"./components/icons/ico-doc.js";import{default as le}from"./components/icons/ico-download.js";import{default as me}from"./components/icons/ico-edit-email.js";import{default as de}from"./components/icons/ico-edit.js";import{default as xe}from"./components/icons/ico-email-fill.js";import{default as ce}from"./components/icons/ico-email-open.js";import{default as ge}from"./components/icons/ico-email.js";import{default as Ie}from"./components/icons/ico-expand.js";import{default as ke}from"./components/icons/ico-expiration.js";import{default as he}from"./components/icons/ico-external-link.js";import{default as Fe}from"./components/icons/ico-eye-closed.js";import{default as Pe}from"./components/icons/ico-eye-opened.js";import{default as Se}from"./components/icons/ico-fingerprint-fill.js";import{default as ye}from"./components/icons/ico-fingerprint.js";import{default as Ee}from"./components/icons/ico-gas.js";import{default as De}from"./components/icons/ico-gift.js";import{default as Re}from"./components/icons/ico-globe.js";import{default as ve}from"./components/icons/ico-grid-fill.js";import{default as ze}from"./components/icons/ico-guide.js";import{default as Ze}from"./components/icons/ico-home-fill.js";import{default as Xe}from"./components/icons/ico-home.js";import{default as Qe}from"./components/icons/ico-hourglass.js";import{default as qe}from"./components/icons/ico-info-circle-fill.js";import{default as Ke}from"./components/icons/ico-info-circle.js";import{default as _e}from"./components/icons/ico-kebab.js";import{default as or}from"./components/icons/ico-key.js";import{default as rr}from"./components/icons/ico-lightbulb-fill.js";import{default as ar}from"./components/icons/ico-lightbulb.js";import{default as lr}from"./components/icons/ico-lightning-fill.js";import{default as mr}from"./components/icons/ico-lightning.js";import{default as dr}from"./components/icons/ico-link.js";import{default as xr}from"./components/icons/ico-loading.js";import{default as cr}from"./components/icons/ico-lock-locked.js";import{default as gr}from"./components/icons/ico-lock-password.js";import{default as Ir}from"./components/icons/ico-lock-unlocked-fill.js";import{default as kr}from"./components/icons/ico-lock-unlocked.js";import{default as hr}from"./components/icons/ico-login-form.js";import{default as Fr}from"./components/icons/ico-magic.js";import{default as Pr}from"./components/icons/ico-megaphone.js";import{default as Sr}from"./components/icons/ico-menu.js";import{default as yr}from"./components/icons/ico-message-fill.js";import{default as Er}from"./components/icons/ico-message.js";import{default as Dr}from"./components/icons/ico-mfa.js";import{default as Rr}from"./components/icons/ico-minimize.js";import{default as vr}from"./components/icons/ico-mobile2fa.js";import{default as zr}from"./components/icons/ico-mobile2fafill.js";import{default as Zr}from"./components/icons/ico-open-book.js";import{default as Xr}from"./components/icons/ico-paper-plane.js";import{default as Qr}from"./components/icons/ico-passport.js";import{default as qr}from"./components/icons/ico-passwordless.js";import{default as Kr}from"./components/icons/ico-pending-connection.js";import{default as _r}from"./components/icons/ico-phone.js";import{default as ot}from"./components/icons/ico-polygon-gas-testnet.js";import{default as rt}from"./components/icons/ico-polygon-gas.js";import{default as at}from"./components/icons/ico-price.js";import{default as lt}from"./components/icons/ico-qrcode.js";import{default as mt}from"./components/icons/ico-question-circle-fill.js";import{default as dt}from"./components/icons/ico-question-circle.js";import{default as xt}from"./components/icons/ico-refresh-circle-fill.js";import{default as ct}from"./components/icons/ico-refresh.js";import{default as gt}from"./components/icons/ico-remove.js";import{default as It}from"./components/icons/ico-rocket-fill.js";import{default as kt}from"./components/icons/ico-search.js";import{default as ht}from"./components/icons/ico-settings-fill.js";import{default as Ft}from"./components/icons/ico-settings.js";import{default as Pt}from"./components/icons/ico-shapes.js";import{default as St}from"./components/icons/ico-shield-approved.js";import{default as yt}from"./components/icons/ico-shield-rejected.js";import{default as Et}from"./components/icons/ico-shield.js";import{default as Dt}from"./components/icons/ico-social.js";import{default as Rt}from"./components/icons/ico-sold-out-tag.js";import{default as vt}from"./components/icons/ico-star.js";import{default as zt}from"./components/icons/ico-swap.js";import{default as Zt}from"./components/icons/ico-swatches.js";import{default as Xt}from"./components/icons/ico-team.js";import{default as Qt}from"./components/icons/ico-trash.js";import{default as qt}from"./components/icons/ico-users.js";import{default as Kt}from"./components/icons/ico-wallet-fill.js";import{default as _t}from"./components/icons/ico-wallet.js";import{default as oa}from"./components/icons/ico-wand.js";import{default as ra}from"./components/icons/ico-warning-fill.js";import{default as aa}from"./components/icons/ico-warning.js";import{default as la}from"./components/info/copy-button.js";import{default as ma}from"./components/info/email-wbr.js";import{default as da}from"./components/info/security-otp.js";import{default as xa}from"./components/info/text-box.js";import{default as ca}from"./components/info/wallet-address.js";import{default as ga}from"./components/inputs/phone-input.js";import{PinCodeInput as Ia}from"./components/inputs/pincode-input.js";import{TextInput as ka}from"./components/inputs/text-input.js";import{Dialogue as ha}from"./components/layouts/dialogue.js";import{Error as Fa}from"./components/layouts/error.js";import{Page as Pa}from"./components/layouts/page.js";import{PassportPage as Sa}from"./components/layouts/passport-page.js";import{WalletPage as ya}from"./components/layouts/wallet-page/index.js";import{default as Ea}from"./components/list-items/navigation-button.js";import{NFTTile as Da}from"./components/list-items/nft-tile.js";import{TokenListItem as Ra}from"./components/list-items/token-list-item.js";import{TransactionRow as va}from"./components/list-items/transaction-row.js";import{default as za}from"./components/logos/blc-algorand.js";import{default as Za}from"./components/logos/blc-aptos.js";import{default as Xa}from"./components/logos/blc-arbitrum.js";import{default as Qa}from"./components/logos/blc-astar.js";import{default as qa}from"./components/logos/blc-avalanche.js";import{default as Ka}from"./components/logos/blc-base.js";import{default as _a}from"./components/logos/blc-berachain.js";import{default as of}from"./components/logos/blc-binance.js";import{default as rf}from"./components/logos/blc-bitcoin.js";import{default as af}from"./components/logos/blc-celo.js";import{default as lf}from"./components/logos/blc-chiliz.js";import{default as mf}from"./components/logos/blc-cosmos.js";import{default as df}from"./components/logos/blc-ethereum.js";import{default as xf}from"./components/logos/blc-etherlink.js";import{default as cf}from"./components/logos/blc-flow.js";import{default as Lf}from"./components/logos/blc-harmony.js";import{default as Mf}from"./components/logos/blc-icon.js";import{default as Bf}from"./components/logos/blc-immutable-x.js";import{default as Cf}from"./components/logos/blc-loopring.js";import{default as wf}from"./components/logos/blc-moonbeam.js";import{default as Af}from"./components/logos/blc-near.js";import{default as bf}from"./components/logos/blc-optimism.js";import{default as Wf}from"./components/logos/blc-polkadot.js";import{default as Tf}from"./components/logos/blc-polygon.js";import{default as Gf}from"./components/logos/blc-rarichain.js";import{default as Of}from"./components/logos/blc-solana.js";import{default as Hf}from"./components/logos/blc-stability.js";import{default as Nf}from"./components/logos/blc-sui.js";import{default as Uf}from"./components/logos/blc-tezos.js";import{default as jf}from"./components/logos/blc-wax.js";import{default as Vf}from"./components/logos/blc-zetachain.js";import{default as Jf}from"./components/logos/blc-zilliqa.js";import{default as Yf}from"./components/logos/blc-zksync.js";import{default as $f}from"./components/logos/default-cursor.js";import{default as el}from"./components/logos/fwk-11ty.js";import{default as tl}from"./components/logos/fwk-android.js";import{default as fl}from"./components/logos/fwk-apple.js";import{default as sl}from"./components/logos/fwk-authy.js";import{default as pl}from"./components/logos/fwk-binance-fill.js";import{default as ul}from"./components/logos/fwk-chrome.js";import{default as nl}from"./components/logos/fwk-electron.js";import{default as il}from"./components/logos/fwk-express.js";import{default as Ll}from"./components/logos/fwk-fauna.js";import{default as Ml}from"./components/logos/fwk-firebase.js";import{default as Bl}from"./components/logos/fwk-go.js";import{default as Cl}from"./components/logos/fwk-google-authenticator.js";import{default as wl}from"./components/logos/fwk-hasura.js";import{default as Al}from"./components/logos/fwk-javascript.js";import{default as bl}from"./components/logos/fwk-jwt.js";import{default as Wl}from"./components/logos/fwk-laravel.js";import{default as Tl}from"./components/logos/fwk-nextjs.js";import{default as Gl}from"./components/logos/fwk-nodejs.js";import{default as Ol}from"./components/logos/fwk-nuxtjs.js";import{default as Hl}from"./components/logos/fwk-php.js";import{default as Nl}from"./components/logos/fwk-react.js";import{default as Ul}from"./components/logos/fwk-strapi.js";import{default as jl}from"./components/logos/fwk-stripe.js";import{default as Vl}from"./components/logos/fwk-vue.js";import{default as Jl}from"./components/logos/fwk-webflow.js";import{default as Yl}from"./components/logos/fwk-wordpress.js";import{default as $l}from"./components/logos/fwk-zapier.js";import{default as es}from"./components/logos/icon-art-dark.js";import{default as ts}from"./components/logos/icon-art.js";import{default as fs}from"./components/logos/icon-delete.js";import{default as ss}from"./components/logos/icon-email-globe.js";import{default as ps}from"./components/logos/icon-email.js";import{default as us}from"./components/logos/icon-game-controller-dark.js";import{default as ns}from"./components/logos/icon-game-controller.js";import{default as is}from"./components/logos/icon-generic-token.js";import{default as Ls}from"./components/logos/icon-magic-globe.js";import{default as Ms}from"./components/logos/icon-magic-logo.js";import{default as Bs}from"./components/logos/icon-music-dark.js";import{default as Cs}from"./components/logos/icon-music.js";import{default as ws}from"./components/logos/icon-person-dark.js";import{default as As}from"./components/logos/icon-person.js";import{default as bs}from"./components/logos/icon-profile-dark.js";import{default as Ws}from"./components/logos/icon-profile-light.js";import{default as Ts}from"./components/logos/icon-reset.js";import{default as Gs}from"./components/logos/icon-sms.js";import{default as Os}from"./components/logos/icon-ticket-dark.js";import{default as Hs}from"./components/logos/icon-ticket.js";import{default as Ns}from"./components/logos/icon-warning-dark.js";import{default as Us}from"./components/logos/icon-warning-shield.js";import{default as js}from"./components/logos/icon-warning.js";import{default as Vs}from"./components/logos/logo-algorand-mono.js";import{default as Js}from"./components/logos/logo-algorand.js";import{default as Ys}from"./components/logos/logo-apple-mono.js";import{default as $s}from"./components/logos/logo-apple.js";import{default as em}from"./components/logos/logo-aptos-mono.js";import{default as tm}from"./components/logos/logo-aptos.js";import{default as fm}from"./components/logos/logo-arbitrum-mono.js";import{default as sm}from"./components/logos/logo-arbitrum-one-mono.js";import{default as pm}from"./components/logos/logo-arbitrum-one.js";import{default as um}from"./components/logos/logo-arbitrum.js";import{default as nm}from"./components/logos/logo-astar-mono.js";import{default as im}from"./components/logos/logo-astar.js";import{default as Lm}from"./components/logos/logo-auth0-mono.js";import{default as Mm}from"./components/logos/logo-auth0.js";import{default as Bm}from"./components/logos/logo-avalanche-mono.js";import{default as Cm}from"./components/logos/logo-avalanche.js";import{default as wm}from"./components/logos/logo-azure-mono.js";import{default as Am}from"./components/logos/logo-azure.js";import{default as bm}from"./components/logos/logo-base-mono.js";import{default as Wm}from"./components/logos/logo-base.js";import{default as Tm}from"./components/logos/logo-berachain-mono.js";import{default as Gm}from"./components/logos/logo-berachain.js";import{default as Om}from"./components/logos/logo-binance-mono.js";import{default as Hm}from"./components/logos/logo-binance.js";import{default as Nm}from"./components/logos/logo-bit-bucket-mono.js";import{default as Um}from"./components/logos/logo-bit-bucket.js";import{default as jm}from"./components/logos/logo-bitcoin-mono.js";import{default as Vm}from"./components/logos/logo-bitcoin.js";import{default as Jm}from"./components/logos/logo-bnb-mono.js";import{default as Ym}from"./components/logos/logo-bnb.js";import{default as $m}from"./components/logos/logo-celo-mono.js";import{default as ep}from"./components/logos/logo-celo.js";import{default as tp}from"./components/logos/logo-chiliz-mono.js";import{default as fp}from"./components/logos/logo-chiliz.js";import{default as sp}from"./components/logos/logo-cognito-mono.js";import{default as pp}from"./components/logos/logo-cognito.js";import{default as up}from"./components/logos/logo-cosmos-mono.js";import{default as np}from"./components/logos/logo-cosmos.js";import{default as ip}from"./components/logos/logo-discord-mono.js";import{default as Lp}from"./components/logos/logo-discord.js";import{default as Mp}from"./components/logos/logo-ethereum-circle-mono.js";import{default as Bp}from"./components/logos/logo-ethereum-circle.js";import{default as Cp}from"./components/logos/logo-ethereum-mono.js";import{default as wp}from"./components/logos/logo-ethereum.js";import{default as Ap}from"./components/logos/logo-etherlink-mono.js";import{default as bp}from"./components/logos/logo-etherlink.js";import{default as Wp}from"./components/logos/logo-facebook-mono.js";import{default as Tp}from"./components/logos/logo-facebook.js";import{default as Gp}from"./components/logos/logo-flare-mono.js";import{default as Op}from"./components/logos/logo-flare.js";import{default as Hp}from"./components/logos/logo-flow-mono.js";import{default as Np}from"./components/logos/logo-flow.js";import{default as Up}from"./components/logos/logo-git-hub-mono.js";import{default as jp}from"./components/logos/logo-git-hub.js";import{default as Vp}from"./components/logos/logo-git-lab-mono.js";import{default as Jp}from"./components/logos/logo-git-lab.js";import{default as Yp}from"./components/logos/logo-google-mono.js";import{default as $p}from"./components/logos/logo-google.js";import{default as ed}from"./components/logos/logo-harmony-mono.js";import{default as td}from"./components/logos/logo-harmony.js";import{default as fd}from"./components/logos/logo-horizen-mono.js";import{default as sd}from"./components/logos/logo-horizen.js";import{default as pd}from"./components/logos/logo-icon-mono.js";import{default as ud}from"./components/logos/logo-icon.js";import{default as nd}from"./components/logos/logo-immutable-x-mono.js";import{default as id}from"./components/logos/logo-immutable-x.js";import{default as Ld}from"./components/logos/logo-link-by-stripe-mono.js";import{default as Md}from"./components/logos/logo-link-by-stripe.js";import{default as Bd}from"./components/logos/logo-link-mono.js";import{default as Cd}from"./components/logos/logo-link.js";import{default as wd}from"./components/logos/logo-linked-in-mono.js";import{default as Ad}from"./components/logos/logo-linked-in.js";import{default as bd}from"./components/logos/logo-loopring-mono.js";import{default as Wd}from"./components/logos/logo-loopring.js";import{default as Td}from"./components/logos/logo-microsoft-mono.js";import{default as Gd}from"./components/logos/logo-microsoft.js";import{default as Od}from"./components/logos/logo-moonbeam-mono.js";import{default as Hd}from"./components/logos/logo-moonbeam.js";import{default as Nd}from"./components/logos/logo-near-mono.js";import{default as Ud}from"./components/logos/logo-near.js";import{default as jd}from"./components/logos/logo-onramper-mono.js";import{default as Vd}from"./components/logos/logo-onramper.js";import{default as Jd}from"./components/logos/logo-optimism-mono.js";import{default as Yd}from"./components/logos/logo-optimism.js";import{default as $d}from"./components/logos/logo-pay-pal-mono.js";import{default as eu}from"./components/logos/logo-pay-pal-wordmark-mono.js";import{default as tu}from"./components/logos/logo-pay-pal-wordmark.js";import{default as fu}from"./components/logos/logo-pay-pal.js";import{default as su}from"./components/logos/logo-poa-mono.js";import{default as pu}from"./components/logos/logo-poa.js";import{default as uu}from"./components/logos/logo-polkadot-mono.js";import{default as nu}from"./components/logos/logo-polkadot.js";import{default as iu}from"./components/logos/logo-polygon-mono.js";import{default as Lu}from"./components/logos/logo-polygon.js";import{default as Mu}from"./components/logos/logo-rarichain-mono.js";import{default as Bu}from"./components/logos/logo-rarichain.js";import{default as Cu}from"./components/logos/logo-sardine-mono.js";import{default as wu}from"./components/logos/logo-sardine.js";import{default as Au}from"./components/logos/logo-sei-mono.js";import{default as bu}from"./components/logos/logo-sei.js";import{default as Wu}from"./components/logos/logo-solana-mono.js";import{default as Tu}from"./components/logos/logo-solana.js";import{default as Gu}from"./components/logos/logo-soneium-mono.js";import{default as Ou}from"./components/logos/logo-soneium.js";import{default as Hu}from"./components/logos/logo-stability-mono.js";import{default as Nu}from"./components/logos/logo-stability.js";import{default as Uu}from"./components/logos/logo-sui-mono.js";import{default as ju}from"./components/logos/logo-sui.js";import{default as Vu}from"./components/logos/logo-tezos-mono.js";import{default as Ju}from"./components/logos/logo-tezos.js";import{default as Yu}from"./components/logos/logo-twitch-mono.js";import{default as $u}from"./components/logos/logo-twitch.js";import{default as ex}from"./components/logos/logo-twitter-mono.js";import{default as tx}from"./components/logos/logo-twitter.js";import{default as fx}from"./components/logos/logo-wallet-connect-mono.js";import{default as sx}from"./components/logos/logo-wallet-connect.js";import{default as px}from"./components/logos/logo-warpcast-mono.js";import{default as ux}from"./components/logos/logo-warpcast.js";import{default as nx}from"./components/logos/logo-wax-mono.js";import{default as ix}from"./components/logos/logo-wax.js";import{default as Lx}from"./components/logos/logo-xdc-mono.js";import{default as Mx}from"./components/logos/logo-xdc.js";import{default as Bx}from"./components/logos/logo-zetachain-mono.js";import{default as Cx}from"./components/logos/logo-zetachain.js";import{default as wx}from"./components/logos/logo-zilliqa-mono.js";import{default as Ax}from"./components/logos/logo-zilliqa.js";import{default as bx}from"./components/logos/logo-zksync-mono.js";import{default as Wx}from"./components/logos/logo-zksync.js";import{default as Tx}from"./components/logos/pay-amex.js";import{default as Gx}from"./components/logos/pay-discover.js";import{default as Ox}from"./components/logos/pay-mastercard.js";import{default as Hx}from"./components/logos/pay-visa.js";import{default as Nx}from"./components/logos/presentation-logo.js";import{default as Ux}from"./components/logos/website-magic.js";import{default as jx}from"./components/logos/wlt-coinbase.js";import{default as Vx}from"./components/logos/wlt-mattel.js";import{default as Jx}from"./components/logos/wlt-metamask.js";import{default as Yx}from"./components/logos/wlt-phantom.js";import{default as $x}from"./components/logos/wlt-rainbow.js";import{default as en}from"./components/logos/wlt-wallet-connect.js";import{default as tn}from"./components/primitives/button.js";import{default as fn}from"./components/primitives/checkbox.js";import{DropdownOption as sn,DropdownSelector as mn}from"./components/primitives/dropdown-selector.js";import{Popover as dn}from"./components/primitives/popover.js";import{Radio as xn,RadioGroup as nn}from"./components/primitives/radio.js";import{SegmentedControl as gn,Tab as Ln}from"./components/primitives/segmented-control.js";import{default as Mn}from"./components/primitives/switch.js";import{default as Bn}from"./components/primitives/text.js";import{VerifyPincode as Cn}from"./components/sections/verify-pincode.js";import{WalletNavigation as wn}from"./components/sections/wallet-navigation.js";import{default as An}from"./components/utils/animate.js";import{ClientAssetLogo as bn}from"./components/utils/client-asset-logo.js";import{default as Wn}from"./components/utils/qr-code.js";import{default as Tn}from"./components/utils/secured-by-magic.js";import{default as Gn}from"./components/utils/shared-logo.js";import{useCustomVars as On}from"./hooks/theme.js";import{useToast as Hn}from"./hooks/useToast.js";export{An as Animate,h as AnimatedCheckmark,F as AnimatedSpinner,za as BlcAlgorand,Za as BlcAptos,Xa as BlcArbitrum,Qa as BlcAstar,qa as BlcAvalanche,Ka as BlcBase,_a as BlcBerachain,of as BlcBinance,rf as BlcBitcoin,af as BlcCelo,lf as BlcChiliz,mf as BlcCosmos,df as BlcEthereum,xf as BlcEtherlink,cf as BlcFlow,Lf as BlcHarmony,Mf as BlcIcon,Bf as BlcImmutableX,Cf as BlcLoopring,wf as BlcMoonbeam,Af as BlcNear,bf as BlcOptimism,Wf as BlcPolkadot,Tf as BlcPolygon,Gf as BlcRarichain,Of as BlcSolana,Hf as BlcStability,Nf as BlcSui,Uf as BlcTezos,jf as BlcWax,Vf as BlcZetachain,Jf as BlcZilliqa,Yf as BlcZksync,tn as Button,P as Callout,r as Card,fn as Checkbox,bn as ClientAssetLogo,a as Content,la as CopyButton,$f as DefaultCursor,ha as Dialogue,l as Drawer,sn as DropdownOption,mn as DropdownSelector,ma as EmailWbr,Fa as Error,m as Footer,el as Fwk11ty,tl as FwkAndroid,fl as FwkApple,sl as FwkAuthy,pl as FwkBinanceFill,ul as FwkChrome,nl as FwkElectron,il as FwkExpress,Ll as FwkFauna,Ml as FwkFirebase,Bl as FwkGo,Cl as FwkGoogleAuthenticator,wl as FwkHasura,Al as FwkJavascript,bl as FwkJwt,Wl as FwkLaravel,Tl as FwkNextjs,Gl as FwkNodejs,Ol as FwkNuxtjs,Hl as FwkPhp,Nl as FwkReact,Ul as FwkStrapi,jl as FwkStripe,Vl as FwkVue,Jl as FwkWebflow,Yl as FwkWordpress,$l as FwkZapier,d as Header,H as IcoAdd,U as IcoAlertCircle,N as IcoAlertCircleFill,j as IcoArrowDown,V as IcoArrowLeft,J as IcoArrowRight,Y as IcoArrowUp,eo as IcoAsterisk,$ as IcoAsteriskWithShield,to as IcoAstronaut,fo as IcoAtom,so as IcoBank,xo as IcoBell,po as IcoBellNotification,co as IcoBlock,go as IcoBranding,Io as IcoCaretDown,ko as IcoCaretLeft,ho as IcoCaretRight,Fo as IcoCaretUp,yo as IcoCheckmark,So as IcoCheckmarkCircle,Po as IcoCheckmarkCircleFill,Eo as IcoClockFill,vo as IcoCode,Do as IcoCodeEditor,Ro as IcoCodeSandbox,zo as IcoCommandLine,Zo as IcoComment,Xo as IcoCopy,Qo as IcoCreditCard,qo as IcoDedicated,Ko as IcoDiamond,re as IcoDismiss,oe as IcoDismissCircle,_o as IcoDismissCircleFill,ae as IcoDoc,le as IcoDownload,de as IcoEdit,me as IcoEditEmail,ge as IcoEmail,xe as IcoEmailFill,ce as IcoEmailOpen,Ie as IcoExpand,ke as IcoExpiration,he as IcoExternalLink,Fe as IcoEyeClosed,Pe as IcoEyeOpened,ye as IcoFingerprint,Se as IcoFingerprintFill,Ee as IcoGas,De as IcoGift,Re as IcoGlobe,ve as IcoGridFill,ze as IcoGuide,Xe as IcoHome,Ze as IcoHomeFill,Qe as IcoHourglass,Ke as IcoInfoCircle,qe as IcoInfoCircleFill,_e as IcoKebab,or as IcoKey,ar as IcoLightbulb,rr as IcoLightbulbFill,mr as IcoLightning,lr as IcoLightningFill,dr as IcoLink,xr as IcoLoading,cr as IcoLockLocked,gr as IcoLockPassword,kr as IcoLockUnlocked,Ir as IcoLockUnlockedFill,hr as IcoLoginForm,Fr as IcoMagic,Pr as IcoMegaphone,Sr as IcoMenu,Er as IcoMessage,yr as IcoMessageFill,Dr as IcoMfa,Rr as IcoMinimize,vr as IcoMobile2fa,zr as IcoMobile2fafill,Zr as IcoOpenBook,Xr as IcoPaperPlane,Qr as IcoPassport,qr as IcoPasswordless,Kr as IcoPendingConnection,_r as IcoPhone,rt as IcoPolygonGas,ot as IcoPolygonGasTestnet,at as IcoPrice,lt as IcoQrcode,dt as IcoQuestionCircle,mt as IcoQuestionCircleFill,ct as IcoRefresh,xt as IcoRefreshCircleFill,gt as IcoRemove,It as IcoRocketFill,kt as IcoSearch,Ft as IcoSettings,ht as IcoSettingsFill,Pt as IcoShapes,Et as IcoShield,St as IcoShieldApproved,yt as IcoShieldRejected,Dt as IcoSocial,Rt as IcoSoldOutTag,vt as IcoStar,zt as IcoSwap,Zt as IcoSwatches,Xt as IcoTeam,Qt as IcoTrash,qt as IcoUsers,_t as IcoWallet,Kt as IcoWalletFill,oa as IcoWand,aa as IcoWarning,ra as IcoWarningFill,ts as IconArt,es as IconArtDark,fs as IconDelete,ps as IconEmail,ss as IconEmailGlobe,ns as IconGameController,us as IconGameControllerDark,is as IconGenericToken,Ls as IconMagicGlobe,Ms as IconMagicLogo,Cs as IconMusic,Bs as IconMusicDark,As as IconPerson,ws as IconPersonDark,bs as IconProfileDark,Ws as IconProfileLight,Ts as IconReset,Gs as IconSms,Hs as IconTicket,Os as IconTicketDark,js as IconWarning,Ns as IconWarningDark,Us as IconWarningShield,S as LoadingSpinner,Js as LogoAlgorand,Vs as LogoAlgorandMono,$s as LogoApple,Ys as LogoAppleMono,tm as LogoAptos,em as LogoAptosMono,um as LogoArbitrum,fm as LogoArbitrumMono,pm as LogoArbitrumOne,sm as LogoArbitrumOneMono,im as LogoAstar,nm as LogoAstarMono,Mm as LogoAuth0,Lm as LogoAuth0Mono,Cm as LogoAvalanche,Bm as LogoAvalancheMono,Am as LogoAzure,wm as LogoAzureMono,Wm as LogoBase,bm as LogoBaseMono,Gm as LogoBerachain,Tm as LogoBerachainMono,Hm as LogoBinance,Om as LogoBinanceMono,Um as LogoBitBucket,Nm as LogoBitBucketMono,Vm as LogoBitcoin,jm as LogoBitcoinMono,Ym as LogoBnb,Jm as LogoBnbMono,ep as LogoCelo,$m as LogoCeloMono,fp as LogoChiliz,tp as LogoChilizMono,pp as LogoCognito,sp as LogoCognitoMono,np as LogoCosmos,up as LogoCosmosMono,Lp as LogoDiscord,ip as LogoDiscordMono,wp as LogoEthereum,Bp as LogoEthereumCircle,Mp as LogoEthereumCircleMono,Cp as LogoEthereumMono,bp as LogoEtherlink,Ap as LogoEtherlinkMono,Tp as LogoFacebook,Wp as LogoFacebookMono,Op as LogoFlare,Gp as LogoFlareMono,Np as LogoFlow,Hp as LogoFlowMono,jp as LogoGitHub,Up as LogoGitHubMono,Jp as LogoGitLab,Vp as LogoGitLabMono,$p as LogoGoogle,Yp as LogoGoogleMono,td as LogoHarmony,ed as LogoHarmonyMono,sd as LogoHorizen,fd as LogoHorizenMono,ud as LogoIcon,pd as LogoIconMono,id as LogoImmutableX,nd as LogoImmutableXMono,Cd as LogoLink,Md as LogoLinkByStripe,Ld as LogoLinkByStripeMono,Bd as LogoLinkMono,Ad as LogoLinkedIn,wd as LogoLinkedInMono,Wd as LogoLoopring,bd as LogoLoopringMono,Gd as LogoMicrosoft,Td as LogoMicrosoftMono,Hd as LogoMoonbeam,Od as LogoMoonbeamMono,Ud as LogoNear,Nd as LogoNearMono,Vd as LogoOnramper,jd as LogoOnramperMono,Yd as LogoOptimism,Jd as LogoOptimismMono,fu as LogoPayPal,$d as LogoPayPalMono,tu as LogoPayPalWordmark,eu as LogoPayPalWordmarkMono,pu as LogoPoa,su as LogoPoaMono,nu as LogoPolkadot,uu as LogoPolkadotMono,Lu as LogoPolygon,iu as LogoPolygonMono,Bu as LogoRarichain,Mu as LogoRarichainMono,wu as LogoSardine,Cu as LogoSardineMono,bu as LogoSei,Au as LogoSeiMono,Tu as LogoSolana,Wu as LogoSolanaMono,Ou as LogoSoneium,Gu as LogoSoneiumMono,Nu as LogoStability,Hu as LogoStabilityMono,ju as LogoSui,Uu as LogoSuiMono,Ju as LogoTezos,Vu as LogoTezosMono,$u as LogoTwitch,Yu as LogoTwitchMono,tx as LogoTwitter,ex as LogoTwitterMono,sx as LogoWalletConnect,fx as LogoWalletConnectMono,ux as LogoWarpcast,px as LogoWarpcastMono,ix as LogoWax,nx as LogoWaxMono,Mx as LogoXdc,Lx as LogoXdcMono,Cx as LogoZetachain,Bx as LogoZetachainMono,Ax as LogoZilliqa,wx as LogoZilliqaMono,Wx as LogoZksync,bx as LogoZksyncMono,x as Menu,c as Modal,Da as NFTTile,Ea as NavigationButton,g as Overlay,Pa as Page,Sa as PassportPage,Tx as PayAmex,Gx as PayDiscover,Ox as PayMastercard,I as PayPalButton,Hx as PayVisa,ga as PhoneInput,Ia as PinCodeInput,dn as Popover,Nx as PresentationLogo,y as ProgressBar,Wn as QRCode,xn as Radio,nn as RadioGroup,Tn as SecuredByMagic,da as SecurityOtp,gn as SegmentedControl,Gn as SharedLogo,E as Skeleton,k as SocialLoginButton,Mn as Switch,Ln as Tab,Bn as Text,xa as TextBox,ka as TextInput,D as Toast,G as ToastProvider,Ra as TokenListItem,O as Tooltip,va as TransactionRow,Cn as VerifyPincode,ca as WalletAddress,wn as WalletNavigation,ya as WalletPage,Ux as WebsiteMagic,jx as WltCoinbase,Vx as WltMattel,Jx as WltMetamask,Yx as WltPhantom,$x as WltRainbow,en as WltWalletConnect,On as useCustomVars,Hn as useToast};
 //# sourceMappingURL=index.js.map

package/dist/es/styles/keyframes.js

@@ -1,2 +1,2 @@
-import{defineKeyframes as t}from"@pandacss/dev";const a=t({fadeIn:{"0%":{opacity:"0"}},fadeOut:{"100%":{opacity:"0"}},scaleIn:{"0%":{opacity:"0"},"100%":{opacity:"1",scale:"1"}},scaleOut:{"0%":{opacity:"1",scale:"1"},"100%":{opacity:"0",scale:"0.9"}},slideIn:{"0%":{opacity:"0",transform:"translateY(1.25rem)"},"100%":{opacity:"1",transform:"translateY(0)"}},slideOut:{"0%":{opacity:"1",transform:"translateY(0)"},"100%":{opacity:"0",transform:"translateY(1.25rem)"}},slideRight:{"0% ":{left:"-150%"},"100%":{left:"175%"}},moveRight:{"0%":{transform:"translateX(0rem)"},"80%":{transform:"translateX(1.25rem)"},"100%":{transform:"translateX(1.2rem)"}},moveLeft:{"0%":{transform:"translateX(0rem)"},"80%":{transform:"translateX(-1.25rem)"},"100%":{transform:"translateX(-1.2rem)"}}});export{a as keyframes};
+import{defineKeyframes as a}from"@pandacss/dev";const t=a({fadeIn:{"0%":{opacity:"0"}},fadeOut:{"100%":{opacity:"0"}},scaleIn:{"0%":{opacity:"0"},"100%":{opacity:"1",scale:"1"}},scaleOut:{"0%":{opacity:"1",scale:"1"},"100%":{opacity:"0",scale:"0.9"}},slideIn:{"0%":{opacity:"0",transform:"translateY(1.25rem)"},"100%":{opacity:"1",transform:"translateY(0)"}},slideOut:{"0%":{opacity:"1",transform:"translateY(0)"},"100%":{opacity:"0",transform:"translateY(1.25rem)"}},slideRight:{"0% ":{left:"-150%"},"100%":{left:"175%"}},moveRight:{"0%":{transform:"translateX(0rem)"},"80%":{transform:"translateX(1.25rem)"},"100%":{transform:"translateX(1.2rem)"}},moveLeft:{"0%":{transform:"translateX(0rem)"},"80%":{transform:"translateX(-1.25rem)"},"100%":{transform:"translateX(-1.2rem)"}},animateSpinnerSmall:{"0%":{strokeDasharray:"0.4, 60",strokeDashoffset:"0"},"50%":{strokeDasharray:"36, 60",strokeDashoffset:"-14"},"100%":{strokeDasharray:"36, 60",strokeDashoffset:"-52"}},animateSpinnerLarge:{"0%":{strokeDasharray:"0.875, 175",strokeDashoffset:"0"},"50%":{strokeDasharray:"78.75, 131.25",strokeDashoffset:"-31"},"100%":{strokeDasharray:"0.875, 175",strokeDashoffset:"-158"}},popIn:{"0%":{scale:0},"100%":{scale:1}},popOut:{"0%":{scale:1},"100%":{scale:0}}});export{t as keyframes};
 //# sourceMappingURL=keyframes.js.map