@magiclabs/ui-components 1.52.1 → 2.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sources":["../../../../src/components/primitives/radio.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { Box, Circle, Flex } from '@styled/jsx';\nimport { flex } from '@styled/patterns';\nimport { PropsWithChildren, createContext, forwardRef, useCallback, useContext, useRef } from 'react';\nimport {\n  AriaRadioGroupProps,\n  AriaRadioProps,\n  VisuallyHidden,\n  mergeProps,\n  useFocusRing,\n  useHover,\n  usePress,\n} from 'react-aria';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, PropsWithChildren {\n  onChange: (value: string) => void;\n  selectedValue?: string;\n  vertical?: boolean;\n}\n\nexport interface RadioProps extends AriaRadioProps {\n  label?: string;\n}\n\nconst RadioContext = createContext<{\n  selectedValue: string | undefined;\n  setSelectedValue: (value: string) => void;\n}>({\n  selectedValue: undefined,\n  setSelectedValue: () => {},\n});\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n  const { children, onChange, selectedValue, vertical } = props;\n\n  const handleSelect = useCallback(\n    (value: string) => {\n      onChange(value);\n    },\n    [onChange],\n  );\n\n  return (\n    <Flex direction={vertical ? 'column' : 'row'} gap={vertical ? 5 : 10} role=\"radiogroup\">\n      <RadioContext.Provider value={{ selectedValue, setSelectedValue: handleSelect }}>\n        {children}\n      </RadioContext.Provider>\n    </Flex>\n  );\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>((props, forwardedRef) => {\n  const { label, value } = props;\n  const state = useContext(RadioContext);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  const handlePress = useCallback(() => {\n    state.setSelectedValue(value);\n  }, [state, value]);\n\n  const { hoverProps } = useHover({});\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { pressProps } = usePress({\n    onPress: handlePress,\n  });\n\n  const isSelected = state.selectedValue === value;\n\n  const tabIndex = isSelected ? 0 : -1;\n\n  return (\n    <label className={flex({ alignItems: 'center' })}>\n      <VisuallyHidden>\n        <input\n          {...mergeProps(pressProps, focusProps, hoverProps)}\n          ref={ref}\n          type=\"radio\"\n          checked={isSelected}\n          tabIndex={tabIndex}\n          readOnly\n        />\n      </VisuallyHidden>\n      <Flex\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        borderWidth=\"thick\"\n        borderColor={isFocusVisible || isSelected ? 'brand.base' : 'text.tertiary'}\n        transition=\"border-color 0.2s ease\"\n        outlineColor=\"brand.base\"\n        outlineStyle={isFocusVisible ? 'solid' : 'none'}\n        outlineWidth=\"thick\"\n        outlineOffset={0.5}\n        _hover={{ borderColor: 'brand.base' }}\n        cursor=\"pointer\"\n        w={6}\n        h={6}\n        rounded=\"full\"\n        aria-hidden=\"true\"\n      >\n        {isSelected && <Circle size={3} bg=\"brand.base\" />}\n      </Flex>\n      <Box ml={3}>\n        <Text size=\"lg\" fontWeight=\"medium\">\n          {label}\n        </Text>\n      </Box>\n    </label>\n  );\n});\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"],"names":["RadioContext","createContext","RadioGroup","props","children","onChange","selectedValue","vertical","handleSelect","useCallback","value","_jsx","Flex","Radio","forwardRef","forwardedRef","label","state","useContext","internalRef","useRef","ref","handlePress","hoverProps","useHover","focusProps","isFocusVisible","useFocusRing","pressProps","usePress","isSelected","tabIndex","_jsxs","flex","VisuallyHidden","mergeProps","Circle","Box","Text"],"mappings":"wXAwBA,MAAMA,EAAeC,EAGlB,CACD,cAAe,OACf,iBAAkB,IAAK,CACxB,CAAA,CAAA,EAEYC,EAAcC,GAA0B,CACnD,KAAM,CAAE,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,SAAAC,CAAQ,EAAKJ,EAElDK,EAAeC,EAClBC,GAAiB,CAChBL,EAASK,CAAK,CAChB,EACA,CAACL,CAAQ,CAAC,EAGZ,OACEM,EAACC,EAAI,CAAC,UAAWL,EAAW,SAAW,MAAO,IAAKA,EAAW,EAAI,GAAI,KAAK,aAAY,SACrFI,EAACX,EAAa,SAAQ,CAAC,MAAO,CAAE,cAAAM,EAAe,iBAAkBE,CAAY,WAC1EJ,CAAQ,CAAA,CAEN,CAAA,CAEX,EAEaS,EAAQC,EAAyC,CAACX,EAAOY,IAAgB,CACpF,KAAM,CAAE,MAAAC,EAAO,MAAAN,CAAO,EAAGP,EACnBc,EAAQC,EAAWlB,CAAY,EAE/BmB,EAAcC,EAAyB,IAAI,EAC3CC,EAAMN,GAAgBI,EAEtBG,EAAcb,EAAY,IAAK,CACnCQ,EAAM,iBAAiBP,CAAK,CAC9B,EAAG,CAACO,EAAOP,CAAK,CAAC,EAEX,CAAE,WAAAa,CAAY,EAAGC,EAAS,CAAE,CAAA,EAC5B,CAAE,WAAAC,EAAY,eAAAC,GAAmBC,IACjC,CAAE,WAAAC,CAAY,EAAGC,EAAS,CAC9B,QAASP,CACV,CAAA,EAEKQ,EAAab,EAAM,gBAAkBP,EAErCqB,EAAWD,EAAa,EAAI,GAElC,OACEE,EAAO,QAAA,CAAA,UAAWC,EAAK,CAAE,WAAY,SAAU,EAAC,SAAA,CAC9CtB,EAACuB,EAAc,CAAA,SACbvB,cACMwB,EAAWP,EAAYH,EAAYF,CAAU,EACjD,IAAKF,EACL,KAAK,QACL,QAASS,EACT,SAAUC,EACV,SACA,EAAA,CAAA,CAAA,CAAA,EAEJpB,EAACC,EACC,CAAA,eAAe,SACf,WAAW,SACX,YAAY,QACZ,YAAac,GAAkBI,EAAa,aAAe,gBAC3D,WAAW,yBACX,aAAa,aACb,aAAcJ,EAAiB,QAAU,OACzC,aAAa,QACb,cAAe,GACf,OAAQ,CAAE,YAAa,cACvB,OAAO,UACP,EAAG,EACH,EAAG,EACH,QAAQ,OACI,cAAA,gBAEXI,GAAcnB,EAACyB,GAAO,KAAM,EAAG,GAAG,cAC9B,CAAA,EACPzB,EAAC0B,EAAG,CAAC,GAAI,EACP,SAAA1B,EAAC2B,EAAK,CAAA,KAAK,KAAK,WAAW,SACxB,SAAAtB,GAEC,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAEDd,EAAW,YAAc,aACzBW,EAAM,YAAc"}
+{"version":3,"file":"radio.js","sources":["../../../../src/components/primitives/radio.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { cn } from '@lib/cn';\nimport { PropsWithChildren, createContext, forwardRef, useCallback, useContext, useRef } from 'react';\nimport {\n  AriaRadioGroupProps,\n  AriaRadioProps,\n  VisuallyHidden,\n  mergeProps,\n  useFocusRing,\n  useHover,\n  usePress,\n} from 'react-aria';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, PropsWithChildren {\n  onChange: (value: string) => void;\n  selectedValue?: string;\n  vertical?: boolean;\n}\n\nexport interface RadioProps extends AriaRadioProps {\n  label?: string;\n}\n\nconst RadioContext = createContext<{\n  selectedValue: string | undefined;\n  setSelectedValue: (value: string) => void;\n}>({\n  selectedValue: undefined,\n  setSelectedValue: () => {},\n});\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n  const { children, onChange, selectedValue, vertical } = props;\n\n  const handleSelect = useCallback(\n    (value: string) => {\n      onChange(value);\n    },\n    [onChange],\n  );\n\n  return (\n    <div className={cn('flex', vertical ? 'flex-col gap-5' : 'flex-row gap-10')} role=\"radiogroup\">\n      <RadioContext.Provider value={{ selectedValue, setSelectedValue: handleSelect }}>\n        {children}\n      </RadioContext.Provider>\n    </div>\n  );\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>((props, forwardedRef) => {\n  const { label, value } = props;\n  const state = useContext(RadioContext);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  const handlePress = useCallback(() => {\n    state.setSelectedValue(value);\n  }, [state, value]);\n\n  const { hoverProps } = useHover({});\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { pressProps } = usePress({\n    onPress: handlePress,\n  });\n\n  const isSelected = state.selectedValue === value;\n\n  const tabIndex = isSelected ? 0 : -1;\n\n  return (\n    <label className=\"flex items-center\">\n      <VisuallyHidden>\n        <input\n          {...mergeProps(pressProps, focusProps, hoverProps)}\n          ref={ref}\n          type=\"radio\"\n          checked={isSelected}\n          tabIndex={tabIndex}\n          readOnly\n        />\n      </VisuallyHidden>\n      <div\n        className={cn(\n          'flex justify-center items-center border-thick transition-colors duration-200 ease-in-out cursor-pointer w-6 h-6 rounded-full hover:border-brand-base',\n          isFocusVisible || isSelected ? 'border-brand-base' : 'border-text-tertiary',\n          isFocusVisible ? 'outline outline-thick outline-brand-base outline-offset-[0.125rem]' : 'outline-none',\n        )}\n        aria-hidden=\"true\"\n      >\n        {isSelected && <div className=\"rounded-full w-3 h-3 bg-brand-base\" />}\n      </div>\n      <div className=\"ml-3\">\n        <Text size=\"lg\" fontWeight=\"medium\">\n          {label}\n        </Text>\n      </div>\n    </label>\n  );\n});\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"],"names":["RadioContext","createContext","RadioGroup","props","children","onChange","selectedValue","vertical","handleSelect","useCallback","value","_jsx","cn","Radio","forwardRef","forwardedRef","label","state","useContext","internalRef","useRef","ref","handlePress","hoverProps","useHover","focusProps","isFocusVisible","useFocusRing","pressProps","usePress","isSelected","tabIndex","_jsxs","VisuallyHidden","mergeProps","Text"],"mappings":"6TAuBA,MAAMA,EAAeC,EAGlB,CACD,cAAe,OACf,iBAAkB,IAAK,EACxB,CAAA,EAEYC,EAAcC,GAA0B,CACnD,KAAM,CAAE,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,SAAAC,CAAQ,EAAKJ,EAElDK,EAAeC,EAClBC,GAAiB,CAChBL,EAASK,CAAK,CAChB,EACA,CAACL,CAAQ,CAAC,EAGZ,OACEM,EAAK,MAAA,CAAA,UAAWC,EAAG,OAAQL,EAAW,iBAAmB,iBAAiB,EAAG,KAAK,aAAY,SAC5FI,EAACX,EAAa,SAAS,CAAA,MAAO,CAAE,cAAAM,EAAe,iBAAkBE,CAAc,EAAA,SAC5EJ,CACqB,CAAA,CAAA,CAAA,CAG9B,EAEaS,EAAQC,EAAyC,CAACX,EAAOY,IAAgB,CACpF,KAAM,CAAE,MAAAC,EAAO,MAAAN,CAAO,EAAGP,EACnBc,EAAQC,EAAWlB,CAAY,EAE/BmB,EAAcC,EAAyB,IAAI,EAC3CC,EAAMN,GAAgBI,EAEtBG,EAAcb,EAAY,IAAK,CACnCQ,EAAM,iBAAiBP,CAAK,CAC9B,EAAG,CAACO,EAAOP,CAAK,CAAC,EAEX,CAAE,WAAAa,CAAY,EAAGC,EAAS,EAAE,EAC5B,CAAE,WAAAC,EAAY,eAAAC,GAAmBC,EACjC,EAAA,CAAE,WAAAC,CAAY,EAAGC,EAAS,CAC9B,QAASP,CACV,CAAA,EAEKQ,EAAab,EAAM,gBAAkBP,EAErCqB,EAAWD,EAAa,EAAI,GAElC,OACEE,WAAO,UAAU,oBACf,SAAA,CAAArB,EAACsB,EAAc,CAAA,SACbtB,EACM,QAAA,CAAA,GAAAuB,EAAWN,EAAYH,EAAYF,CAAU,EACjD,IAAKF,EACL,KAAK,QACL,QAASS,EACT,SAAUC,EACV,SAAQ,EAAA,CAAA,IAGZpB,EAAA,MAAA,CACE,UAAWC,EACT,uJACAc,GAAkBI,EAAa,oBAAsB,uBACrDJ,EAAiB,qEAAuE,cAAc,EACvG,cACW,OAEX,SAAAI,GAAcnB,EAAA,MAAA,CAAK,UAAU,oCAAuC,CAAA,CAAA,CAAA,EAEvEA,EAAK,MAAA,CAAA,UAAU,OAAM,SACnBA,EAACwB,EAAK,CAAA,KAAK,KAAK,WAAW,SAAQ,SAChCnB,CACI,CAAA,CAAA,CAAA,CACH,CACA,CAAA,CAEZ,CAAC,EAEDd,EAAW,YAAc,aACzBW,EAAM,YAAc"}

package/dist/es/components/primitives/segmented-control.js

@@ -1,2 +1,2 @@
-import{jsx as f,jsxs as v}from"react/jsx-runtime";import{css as k}from"@styled/css";import{Flex as y,Box as N}from"@styled/jsx";import{createSlot as W,createHost as E}from"create-slots";import{createContext as F,Children as X,cloneElement as B,forwardRef as L,useContext as O,useRef as C,useEffect as m,useCallback as w,useState as S}from"react";import{useButton as D,useHover as V,useFocusRing as q,mergeProps as A}from"react-aria";const T=F({currentTab:void 0,setCurrentTab:()=>{},tabRefs:{current:{}},disabled:!1}),j=W(({children:i,...l})=>f(y,{alignItems:"center",justifyContent:"center",children:X.map(i,a=>B(a,l))})),P=i=>{const{children:l,onChange:a,selectedTab:n,size:p="md",disabled:b=!1}=i,[e,o]=S(n),s=C({}),t=C(),[h,c]=S({transform:"translateX(4px)",width:"",height:""});m(()=>{n!==void 0&&o(n)},[n]),m(()=>(t.current||(t.current=new ResizeObserver(()=>{const{offsetLeft:r,clientWidth:d,clientHeight:u}=s.current[e];c({transform:`translateX(${r}px)`,width:`${d}px`,height:`${u}px`})})),t.current.observe(s.current[e]),()=>{t.current&&s.current[e]&&t.current.unobserve(s.current[e])}),[]),m(()=>{if(e&&s.current[e]){const{offsetLeft:r,clientWidth:d,clientHeight:u}=s.current[e];c({transform:`translateX(${r}px)`,width:`${d}px`,height:`${u}px`})}},[e,p]);const g=w(r=>{o(r),a(r)},[o,a]);return v(y,{w:"full",role:"tablist",p:1,rounded:"full",bg:"ink.10",_dark:{bg:"slate.2"},"aria-label":"Segmented Control",position:"relative",children:[f(N,{position:"absolute",bg:"paper",_dark:{bg:"slate.4"},boxShadow:"0px 4px 20px 0px {colors.ink.90/10}",transition:"transform 0.2s ease",rounded:"inherit",ml:-1,style:{...h}}),f(T.Provider,{value:{currentTab:e,setCurrentTab:g,size:p,tabRefs:s,disabled:b},children:l})]})},R=L((i,l)=>{const{label:a,id:n}=i,{currentTab:p,setCurrentTab:b,tabRefs:e,size:o,disabled:s}=O(T),t=p===n,h=o==="sm"?8:o==="md"?10:13,c=o==="sm"?16:20,g=C(null),r=l||g;m(()=>{typeof r=="object"&&e.current&&(e.current[n]=r.current)},[n]);const d=w(()=>{b(n)},[b,n]),{buttonProps:u,isPressed:z}=D({onPress:d,isDisabled:s},r),{hoverProps:$}=V({}),{isFocusVisible:_,focusProps:H}=q();return E(i.children,I=>{const x=I.get(j);return f("button",{className:k({display:"flex",justifyContent:"center",alignItems:"center",h,w:"full",rounded:"button",zIndex:0,cursor:"pointer",color:t?"text.primary":"text.secondary",fontSize:o,fontWeight:"semibold",whiteSpace:"nowrap",bg:"transparent",outlineColor:_?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",transition:t?"background 0s":"background 0.2s ease",_disabled:{opacity:"0.3",pointerEvents:"none"},_hover:{bg:t?"transparent":"ink.20",_dark:{bg:t?"transparent":"slate.1"}}}),ref:r,...A(u,$,H),disabled:s,children:v(y,{opacity:z&&!t?.5:1,align:"center",justify:"center",children:[x&&{...x,props:{...x.props,className:k({mr:1,color:t?"text.primary":"text.secondary"}),width:c,height:c}},a]})})})}),G=Object.assign(R,{Icon:j});R.displayName="Tab",P.displayName="SegmentedControl";export{P as SegmentedControl,G as Tab};
+import{jsx as p,jsxs as y}from"react/jsx-runtime";import{cn as w}from"../../lib/cn.js";import{createSlot as H,createHost as X}from"create-slots";import{createContext as E,Children as F,cloneElement as L,forwardRef as O,useContext as W,useRef as v,useEffect as h,useCallback as C,useState as k}from"react";import{useButton as B,useHover as D,useFocusRing as I,mergeProps as V}from"react-aria";const T=E({currentTab:void 0,setCurrentTab:()=>{},tabRefs:{current:{}},disabled:!1}),N=H(({children:i,...l})=>p("div",{className:"flex items-center justify-center",children:F.map(i,a=>L(a,l))})),j=i=>{const{children:l,onChange:a,selectedTab:n,size:b="md",disabled:m=!1}=i,[e,o]=k(n),s=v({}),t=v(),[f,c]=k({transform:"translateX(4px)",width:"",height:""});h(()=>{n!==void 0&&o(n)},[n]),h(()=>(t.current||(t.current=new ResizeObserver(()=>{const{offsetLeft:r,clientWidth:d,clientHeight:u}=s.current[e];c({transform:`translateX(${r}px)`,width:`${d}px`,height:`${u}px`})})),t.current.observe(s.current[e]),()=>{t.current&&s.current[e]&&t.current.unobserve(s.current[e])}),[]),h(()=>{if(e&&s.current[e]){const{offsetLeft:r,clientWidth:d,clientHeight:u}=s.current[e];c({transform:`translateX(${r}px)`,width:`${d}px`,height:`${u}px`})}},[e,b]);const x=C(r=>{o(r),a(r)},[o,a]);return y("div",{className:"flex w-full p-1 rounded-full bg-ink-10 dark:bg-slate-2 relative",role:"tablist","aria-label":"Segmented Control",children:[p("div",{className:"absolute bg-paper dark:bg-slate-4 shadow-[0px_4px_20px_0px_rgba(24,23,26,0.1)] transition-transform duration-200 ease-in-out rounded-[inherit] -ml-1",style:{...f}}),p(T.Provider,{value:{currentTab:e,setCurrentTab:x,size:b,tabRefs:s,disabled:m},children:l})]})},P=O((i,l)=>{const{label:a,id:n}=i,{currentTab:b,setCurrentTab:m,tabRefs:e,size:o,disabled:s}=W(T),t=b===n,f=o==="sm"?"h-8":o==="md"?"h-10":"h-[3.25rem]",c=o==="sm"?16:20,x=v(null),r=l||x;h(()=>{typeof r=="object"&&e.current&&(e.current[n]=r.current)},[n]);const d=C(()=>{m(n)},[m,n]),{buttonProps:u,isPressed:R}=B({onPress:d,isDisabled:s},r),{hoverProps:$}=D({}),{isFocusVisible:z,focusProps:S}=I();return X(i.children,_=>{const g=_.get(N);return p("button",{className:w("flex justify-center items-center w-full rounded-button z-0 cursor-pointer font-semibold whitespace-nowrap bg-transparent outline disabled:opacity-30 disabled:pointer-events-none",f,o==="sm"?"text-sm":o==="md"?"text-md":"text-lg",t?"text-text-primary":"text-text-secondary",z?"outline-brand-base outline-thick":"outline-transparent outline-thick",t?"transition-none":"transition-colors duration-200 ease-in-out",t?"hover:bg-transparent dark:hover:bg-transparent":"hover:bg-ink-20 dark:hover:bg-slate-1"),ref:r,...V(u,$,S),disabled:s,children:y("div",{className:"flex items-center justify-center",style:{opacity:R&&!t?.5:1},children:[g&&{...g,props:{...g.props,className:w("mr-1",t?"text-text-primary":"text-text-secondary"),width:c,height:c}},a]})})})}),q=Object.assign(P,{Icon:N});P.displayName="Tab",j.displayName="SegmentedControl";export{j as SegmentedControl,q as Tab};
 //# sourceMappingURL=segmented-control.js.map

package/dist/es/components/primitives/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","sources":["../../../../src/components/primitives/segmented-control.tsx"],"sourcesContent":["import { css } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, {\n  Children,\n  PropsWithChildren,\n  RefObject,\n  cloneElement,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useHover } from 'react-aria';\n\nexport interface SegmentedControlProps extends PropsWithChildren {\n  onChange: (value: string) => void;\n  selectedTab: string;\n  size?: 'sm' | 'md' | 'lg';\n  disabled?: boolean;\n}\n\nexport interface TabProps extends AriaButtonProps {\n  label: string;\n  id: string;\n}\n\ntype TabRefs = {\n  [key: string]: HTMLButtonElement | null;\n};\n\nconst SegmentedControlContext = createContext<{\n  currentTab: string | undefined;\n  setCurrentTab: (id: string) => void;\n  size?: 'sm' | 'md' | 'lg';\n  tabRefs: RefObject<TabRefs>;\n  disabled: boolean;\n}>({\n  currentTab: undefined,\n  setCurrentTab: () => {},\n  tabRefs: { current: {} },\n  disabled: false,\n});\n\nconst Icon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nexport const SegmentedControl = (props: SegmentedControlProps) => {\n  const { children, onChange, selectedTab, size = 'md', disabled = false } = props;\n  const [currentTab, setCurrentTab] = useState(selectedTab);\n  const tabRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});\n  const observer = useRef<ResizeObserver>();\n  const [indicatorStyle, setIndicatorStyle] = useState({ transform: 'translateX(4px)', width: '', height: '' });\n\n  useEffect(() => {\n    if (selectedTab !== undefined) {\n      setCurrentTab(selectedTab);\n    }\n  }, [selectedTab]);\n\n  useEffect(() => {\n    if (!observer.current) {\n      observer.current = new ResizeObserver(() => {\n        const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n        setIndicatorStyle({\n          transform: `translateX(${offsetLeft}px)`,\n          width: `${clientWidth}px`,\n          height: `${clientHeight}px`,\n        });\n      });\n    }\n\n    observer.current.observe(tabRefs.current[currentTab]!);\n\n    return () => {\n      if (observer.current && tabRefs.current[currentTab]) {\n        observer.current.unobserve(tabRefs.current[currentTab]!);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    if (currentTab && tabRefs.current[currentTab]) {\n      const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n      setIndicatorStyle({\n        transform: `translateX(${offsetLeft}px)`,\n        width: `${clientWidth}px`,\n        height: `${clientHeight}px`,\n      });\n    }\n  }, [currentTab, size]);\n\n  const handleSelect = useCallback(\n    (id: string) => {\n      setCurrentTab(id);\n      onChange(id);\n    },\n    [setCurrentTab, onChange],\n  );\n\n  return (\n    <Flex\n      w=\"full\"\n      role=\"tablist\"\n      p={1}\n      rounded=\"full\"\n      bg=\"ink.10\"\n      _dark={{ bg: 'slate.2' }}\n      aria-label=\"Segmented Control\"\n      position=\"relative\"\n    >\n      <Box\n        position=\"absolute\"\n        bg=\"paper\"\n        _dark={{ bg: 'slate.4' }}\n        boxShadow=\"0px 4px 20px 0px {colors.ink.90/10}\"\n        transition=\"transform 0.2s ease\"\n        rounded=\"inherit\"\n        ml={-1}\n        style={{ ...indicatorStyle }}\n      />\n      <SegmentedControlContext.Provider value={{ currentTab, setCurrentTab: handleSelect, size, tabRefs, disabled }}>\n        {children}\n      </SegmentedControlContext.Provider>\n    </Flex>\n  );\n};\n\nconst TabComponent = forwardRef<HTMLButtonElement, TabProps>((props, forwardedRef) => {\n  const { label, id } = props;\n  const { currentTab, setCurrentTab, tabRefs, size, disabled } = useContext(SegmentedControlContext);\n\n  const isSelected = currentTab === id;\n  const height = size === 'sm' ? 8 : size === 'md' ? 10 : 13;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef<HTMLButtonElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  useEffect(() => {\n    if (typeof ref === 'object' && tabRefs.current) {\n      tabRefs.current[id] = ref.current;\n    }\n  }, [id]);\n\n  const handlePress = useCallback(() => {\n    setCurrentTab(id);\n  }, [setCurrentTab, id]);\n\n  const { buttonProps, isPressed } = useButton(\n    { onPress: handlePress, isDisabled: disabled },\n    ref as React.RefObject<HTMLButtonElement>,\n  );\n  const { hoverProps } = useHover({});\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const icon = slots.get(Icon);\n\n    return (\n      <button\n        className={css({\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          h: height,\n          w: 'full',\n          rounded: 'button',\n          zIndex: 0,\n          cursor: 'pointer',\n          color: isSelected ? 'text.primary' : 'text.secondary',\n          fontSize: size,\n          fontWeight: 'semibold',\n          whiteSpace: 'nowrap',\n          bg: 'transparent',\n          outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n          outlineStyle: 'solid',\n          outlineWidth: 'thick',\n          transition: isSelected ? 'background 0s' : 'background 0.2s ease',\n          _disabled: { opacity: '0.3', pointerEvents: 'none' },\n          _hover: {\n            bg: isSelected ? 'transparent' : 'ink.20',\n            _dark: { bg: isSelected ? 'transparent' : 'slate.1' },\n          },\n        })}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n        disabled={disabled}\n      >\n        <Flex opacity={isPressed && !isSelected ? 0.5 : 1} align=\"center\" justify=\"center\">\n          {icon && {\n            ...icon,\n            props: {\n              ...icon.props,\n              className: css({ mr: 1, color: isSelected ? 'text.primary' : 'text.secondary' }),\n              width: iconSize,\n              height: iconSize,\n            },\n          }}\n          {label}\n        </Flex>\n      </button>\n    );\n  });\n});\n\nexport const Tab = Object.assign(TabComponent, {\n  Icon,\n});\n\nTabComponent.displayName = 'Tab';\nSegmentedControl.displayName = 'SegmentedControl';\n"],"names":["SegmentedControlContext","createContext","Icon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","SegmentedControl","onChange","selectedTab","size","disabled","currentTab","setCurrentTab","useState","tabRefs","useRef","observer","indicatorStyle","setIndicatorStyle","useEffect","offsetLeft","clientWidth","clientHeight","handleSelect","useCallback","id","_jsxs","Box","TabComponent","forwardRef","forwardedRef","label","useContext","isSelected","height","iconSize","internalRef","ref","handlePress","buttonProps","isPressed","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","icon","css","mergeProps","Tab"],"mappings":"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"}
+{"version":3,"file":"segmented-control.js","sources":["../../../../src/components/primitives/segmented-control.tsx"],"sourcesContent":["import { cn } from '@lib/cn';\nimport { createHost, createSlot } from 'create-slots';\nimport React, {\n  Children,\n  PropsWithChildren,\n  RefObject,\n  cloneElement,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useHover } from 'react-aria';\n\nexport interface SegmentedControlProps extends PropsWithChildren {\n  onChange: (value: string) => void;\n  selectedTab: string;\n  size?: 'sm' | 'md' | 'lg';\n  disabled?: boolean;\n}\n\nexport interface TabProps extends AriaButtonProps {\n  label: string;\n  id: string;\n}\n\ntype TabRefs = {\n  [key: string]: HTMLButtonElement | null;\n};\n\nconst SegmentedControlContext = createContext<{\n  currentTab: string | undefined;\n  setCurrentTab: (id: string) => void;\n  size?: 'sm' | 'md' | 'lg';\n  tabRefs: RefObject<TabRefs>;\n  disabled: boolean;\n}>({\n  currentTab: undefined,\n  setCurrentTab: () => {},\n  tabRefs: { current: {} },\n  disabled: false,\n});\n\nconst Icon = createSlot(({ children, ...props }) => {\n  return (\n    <div className=\"flex items-center justify-center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </div>\n  );\n});\n\nexport const SegmentedControl = (props: SegmentedControlProps) => {\n  const { children, onChange, selectedTab, size = 'md', disabled = false } = props;\n  const [currentTab, setCurrentTab] = useState(selectedTab);\n  const tabRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});\n  const observer = useRef<ResizeObserver>();\n  const [indicatorStyle, setIndicatorStyle] = useState({ transform: 'translateX(4px)', width: '', height: '' });\n\n  useEffect(() => {\n    if (selectedTab !== undefined) {\n      setCurrentTab(selectedTab);\n    }\n  }, [selectedTab]);\n\n  useEffect(() => {\n    if (!observer.current) {\n      observer.current = new ResizeObserver(() => {\n        const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n        setIndicatorStyle({\n          transform: `translateX(${offsetLeft}px)`,\n          width: `${clientWidth}px`,\n          height: `${clientHeight}px`,\n        });\n      });\n    }\n\n    observer.current.observe(tabRefs.current[currentTab]!);\n\n    return () => {\n      if (observer.current && tabRefs.current[currentTab]) {\n        observer.current.unobserve(tabRefs.current[currentTab]!);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    if (currentTab && tabRefs.current[currentTab]) {\n      const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n      setIndicatorStyle({\n        transform: `translateX(${offsetLeft}px)`,\n        width: `${clientWidth}px`,\n        height: `${clientHeight}px`,\n      });\n    }\n  }, [currentTab, size]);\n\n  const handleSelect = useCallback(\n    (id: string) => {\n      setCurrentTab(id);\n      onChange(id);\n    },\n    [setCurrentTab, onChange],\n  );\n\n  return (\n    <div\n      className=\"flex w-full p-1 rounded-full bg-ink-10 dark:bg-slate-2 relative\"\n      role=\"tablist\"\n      aria-label=\"Segmented Control\"\n    >\n      <div\n        className=\"absolute bg-paper dark:bg-slate-4 shadow-[0px_4px_20px_0px_rgba(24,23,26,0.1)] transition-transform duration-200 ease-in-out rounded-[inherit] -ml-1\"\n        style={{ ...indicatorStyle }}\n      />\n      <SegmentedControlContext.Provider value={{ currentTab, setCurrentTab: handleSelect, size, tabRefs, disabled }}>\n        {children}\n      </SegmentedControlContext.Provider>\n    </div>\n  );\n};\n\nconst TabComponent = forwardRef<HTMLButtonElement, TabProps>((props, forwardedRef) => {\n  const { label, id } = props;\n  const { currentTab, setCurrentTab, tabRefs, size, disabled } = useContext(SegmentedControlContext);\n\n  const isSelected = currentTab === id;\n  const height = size === 'sm' ? 'h-8' : size === 'md' ? 'h-10' : 'h-[3.25rem]';\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef<HTMLButtonElement>(null);\n  const ref = forwardedRef || internalRef;\n\n  useEffect(() => {\n    if (typeof ref === 'object' && tabRefs.current) {\n      tabRefs.current[id] = ref.current;\n    }\n  }, [id]);\n\n  const handlePress = useCallback(() => {\n    setCurrentTab(id);\n  }, [setCurrentTab, id]);\n\n  const { buttonProps, isPressed } = useButton(\n    { onPress: handlePress, isDisabled: disabled },\n    ref as React.RefObject<HTMLButtonElement>,\n  );\n  const { hoverProps } = useHover({});\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const icon = slots.get(Icon);\n\n    return (\n      <button\n        className={cn(\n          'flex justify-center items-center w-full rounded-button z-0 cursor-pointer font-semibold whitespace-nowrap bg-transparent outline disabled:opacity-30 disabled:pointer-events-none',\n          height,\n          size === 'sm' ? 'text-sm' : size === 'md' ? 'text-md' : 'text-lg',\n          isSelected ? 'text-text-primary' : 'text-text-secondary',\n          isFocusVisible ? 'outline-brand-base outline-thick' : 'outline-transparent outline-thick',\n          isSelected ? 'transition-none' : 'transition-colors duration-200 ease-in-out',\n          isSelected ? 'hover:bg-transparent dark:hover:bg-transparent' : 'hover:bg-ink-20 dark:hover:bg-slate-1',\n        )}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n        disabled={disabled}\n      >\n        <div className=\"flex items-center justify-center\" style={{ opacity: isPressed && !isSelected ? 0.5 : 1 }}>\n          {icon && {\n            ...icon,\n            props: {\n              ...icon.props,\n              className: cn('mr-1', isSelected ? 'text-text-primary' : 'text-text-secondary'),\n              width: iconSize,\n              height: iconSize,\n            },\n          }}\n          {label}\n        </div>\n      </button>\n    );\n  });\n});\n\nexport const Tab = Object.assign(TabComponent, {\n  Icon,\n});\n\nTabComponent.displayName = 'Tab';\nSegmentedControl.displayName = 'SegmentedControl';\n"],"names":["SegmentedControlContext","createContext","Icon","createSlot","children","props","_jsx","Children","child","cloneElement","SegmentedControl","onChange","selectedTab","size","disabled","currentTab","setCurrentTab","useState","tabRefs","useRef","observer","indicatorStyle","setIndicatorStyle","useEffect","offsetLeft","clientWidth","clientHeight","handleSelect","useCallback","id","_jsxs","TabComponent","forwardRef","forwardedRef","label","useContext","isSelected","height","iconSize","internalRef","ref","handlePress","buttonProps","isPressed","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","icon","cn","mergeProps","Tab"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{jsxs as b,jsx as t}from"react/jsx-runtime";import g from"./text.js";import{useToggleState as h}from"../../hooks/useToggleState.js";import{cx as S,css as x}from"@styled/css";import{Box as k}from"@styled/jsx";import{Flex as y}from"@styled/jsx/flex";import{circle as w}from"@styled/patterns";import{forwardRef as N,useRef as v}from"react";import{useToggleButton as B,useFocusRing as F,mergeProps as P}from"react-aria";const s=N((r,i)=>{const{checked:l,disabled:n=!1,label:o,className:a,...c}=r,d=v(null),m=i||d,e=h({...r,isSelected:l}),{buttonProps:p}=B({...c,isDisabled:n},e,m),{isFocusVisible:u,focusProps:f}=F();return b(y,{alignItems:"center",children:[o&&t(k,{mr:2,children:t(g,{fontWeight:"medium",styles:{lineHeight:1},children:o})}),t("button",{...P(p,f),className:S(x({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"}),a),children:t("span",{className:w({h:4,w:4,bg:"paper",position:"relative",left:e.isSelected?6:0,transition:"left 0.2s ease"})})})]})});s.displayName="Switch";export{s as default};
+import{jsxs as h,jsx as e}from"react/jsx-runtime";import g from"./text.js";import{useToggleState as v}from"../../hooks/useToggleState.js";import{cn as r}from"../../lib/cn.js";import{forwardRef as k,useRef as N}from"react";import{useToggleButton as x,useFocusRing as S,mergeProps as w}from"react-aria";const s=k((o,l)=>{const{checked:n,disabled:a=!1,label:i,className:d,...u}=o,c=N(null),m=l||c,t=v({...o,isSelected:n}),{buttonProps:b}=x({...u,isDisabled:a},t,m),{isFocusVisible:f,focusProps:p}=S();return h("div",{className:"flex items-center",children:[i&&e("div",{className:"mr-2",children:e(g,{fontWeight:"medium",styles:{lineHeight:1},children:i})}),e("button",{...w(b,p),className:r("px-0.5 h-5 w-11 disabled:opacity-30 disabled:pointer-events-none transition-colors duration-200 ease-in-out rounded-full cursor-pointer outline outline-offset-[0.125rem]",t.isSelected?"bg-brand-base hover:bg-brand-base":"bg-neutral-primary hover:bg-ink-70 dark:hover:bg-slate-4",f?"outline-brand-base outline-thick":"outline-transparent outline-thick",d),children:e("span",{className:r("block rounded-full h-4 w-4 bg-paper relative transition-[left] duration-200 ease-in-out",t.isSelected?"left-6":"left-0")})})]})});s.displayName="Switch";export{s 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, cx } 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  className?: string;\n};\n\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, forwardedRef) => {\n  const { checked, disabled = false, label, className, ...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={cx(\n          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          className,\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","className","otherProps","internalRef","useRef","ref","state","useToggleState","buttonProps","useToggleButton","isFocusVisible","focusProps","useFocusRing","_jsxs","Flex","_jsx","Box","Text","mergeProps","cx","css","circle"],"mappings":"saAgBMA,MAAAA,EAASC,EAA2C,CAACC,EAAOC,IAAgB,CAChF,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAW,GAAO,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAY,EAAGN,EAEjEO,EAAcC,EAAO,IAAI,EACzBC,EAAMR,GAAgBM,EAEtBG,EAAQC,EAAe,CAAE,GAAGX,EAAO,WAAYE,CAAO,CAAE,EAExD,CAAE,YAAAU,CAAW,EAAKC,EACtB,CAAE,GAAGP,EAAY,WAAYH,CAAU,EACvCO,EACAD,CAAyC,EAErC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,IAEvC,OACEC,EAACC,EAAI,CAAC,WAAW,SACd,SAAA,CAAAd,GACCe,EAACC,EAAG,CAAC,GAAI,EAAC,SACRD,EAACE,EAAI,CAAC,WAAW,SAAS,OAAQ,CAAE,WAAY,CAAC,WAC9CjB,CAAK,CAAA,CAEJ,CAAA,EAERe,EAAA,SAAA,CAAA,GACMG,EAAWV,EAAaG,CAAU,EACtC,UAAWQ,EACTC,EAAI,CACF,GAAI,GACJ,EAAG,EACH,MAAO,GACP,UAAW,CACT,QAAS,GACT,cAAe,MAChB,EACD,GAAId,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,UACT,EACDT,CAAS,EACV,SAEDc,UACE,UAAWM,EAAO,CAChB,EAAG,EACH,EAAG,EACH,GAAI,QACJ,SAAU,WACV,KAAMf,EAAM,WAAa,EAAI,EAC7B,WAAY,gBACb,CAAA,CACD,CAAA,CAAA,CAAA,CACK,CACJ,CAAA,CAEX,CAAC,EAEDZ,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 { cn } from '@lib/cn';\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  className?: string;\n};\n\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, forwardedRef) => {\n  const { checked, disabled = false, label, className, ...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    <div className=\"flex items-center\">\n      {label && (\n        <div className=\"mr-2\">\n          <Text fontWeight=\"medium\" styles={{ lineHeight: 1 }}>\n            {label}\n          </Text>\n        </div>\n      )}\n      <button\n        {...mergeProps(buttonProps, focusProps)}\n        className={cn(\n          'px-0.5 h-5 w-11 disabled:opacity-30 disabled:pointer-events-none transition-colors duration-200 ease-in-out rounded-full cursor-pointer outline outline-offset-[0.125rem]',\n          state.isSelected\n            ? 'bg-brand-base hover:bg-brand-base'\n            : 'bg-neutral-primary hover:bg-ink-70 dark:hover:bg-slate-4',\n          isFocusVisible ? 'outline-brand-base outline-thick' : 'outline-transparent outline-thick',\n          className,\n        )}\n      >\n        <span\n          className={cn(\n            'block rounded-full h-4 w-4 bg-paper relative transition-[left] duration-200 ease-in-out',\n            state.isSelected ? 'left-6' : 'left-0',\n          )}\n        />\n      </button>\n    </div>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["Switch","forwardRef","props","forwardedRef","checked","disabled","label","className","otherProps","internalRef","useRef","ref","state","useToggleState","buttonProps","useToggleButton","isFocusVisible","focusProps","useFocusRing","_jsxs","_jsx","Text","mergeProps","cn"],"mappings":"6SAaA,MAAMA,EAASC,EAA2C,CAACC,EAAOC,IAAgB,CAChF,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAW,GAAO,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAY,EAAGN,EAEjEO,EAAcC,EAAO,IAAI,EACzBC,EAAMR,GAAgBM,EAEtBG,EAAQC,EAAe,CAAE,GAAGX,EAAO,WAAYE,CAAO,CAAE,EAExD,CAAE,YAAAU,CAAW,EAAKC,EACtB,CAAE,GAAGP,EAAY,WAAYH,CAAU,EACvCO,EACAD,CAAyC,EAErC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,IAEvC,OACEC,SAAK,UAAU,oBACZ,SAAA,CAAAb,GACCc,EAAK,MAAA,CAAA,UAAU,OAAM,SACnBA,EAACC,EAAK,CAAA,WAAW,SAAS,OAAQ,CAAE,WAAY,CAAC,WAC9Cf,CAAK,CAAA,IAIZc,EACM,SAAA,CAAA,GAAAE,EAAWR,EAAaG,CAAU,EACtC,UAAWM,EACT,4KACAX,EAAM,WACF,oCACA,2DACJI,EAAiB,mCAAqC,oCACtDT,CAAS,EACV,SAEDa,UACE,UAAWG,EACT,0FACAX,EAAM,WAAa,SAAW,QAAQ,GAGnC,CAAA,CAAA,CAAA,CAAA,CAGf,CAAC,EAEDZ,EAAO,YAAc"}

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

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{text as v}from"../../recipes/text.js";import{css as n,cx as z}from"@styled/css";import{forwardRef as c}from"react";const i="text.primary",m=c(({children:e,styles:l={},scale:s,fontColor:o=i,...a},t)=>r("h1",{ref:t,className:n({textStyle:s?"h1-scaled":"h1",color:o,...a}),style:l,children:e})),y=c(({children:e,styles:l={},scale:s,fontColor:o=i,...a},t)=>r("h2",{ref:t,className:n({textStyle:s?"h2-scaled":"h2",color:o,...a}),style:l,children:e})),f=c(({children:e,styles:l={},scale:s,fontColor:o=i,...a},t)=>r("h3",{ref:t,className:n({textStyle:s?"h3-scaled":"h3",color:o,...a}),style:l,children:e})),x=c(({children:e,styles:l={},scale:s,fontColor:o=i,...a},t)=>r("h4",{ref:t,className:n({textStyle:s?"h4-scaled":"h4",color:o,...a}),style:l,children:e})),p=c(({children:e,styles:l={},scale:s,fontColor:o=i,...a},t)=>r("h5",{ref:t,className:n({textStyle:s?"h5-scaled":"h5",color:o,...a}),style:l,children:e})),N=c(({children:e,styles:l={},scale:s,fontColor:o="text.secondary",...a},t)=>r("h6",{ref:t,className:n({textStyle:s?"h6-scaled":"h6",color:o,...a}),style:l,children:e})),h=c(({children:e,styles:l={},scale:s,inline:o=!1,mono:a=!1,variant:t="text",size:T="md",truncate:C=!1,fontWeight:S,fontColor:u,...g},b)=>{const j=v({mono:a,variant:t,size:T,scale:s}),d={ref:b,className:z(j,n({truncate:C,fontWeight:S??(t!=="text"?"medium":"normal"),color:u,...g})),style:l};return o?r("span",{...d,children:e}):r("p",{...d,children:e})}),H=c((e,l)=>r(h,{ref:l,mono:!0,...e})),M=Object.assign(h,{H1:m,H2:y,H3:f,H4:x,H5:p,H6:N,Mono:H});h.displayName="Text",m.displayName="Text.H1",y.displayName="Text.H2",f.displayName="Text.H3",x.displayName="Text.H4",p.displayName="Text.H5",N.displayName="Text.H6",H.displayName="Text.Mono";export{M as default};
+import{jsx as a}from"react/jsx-runtime";import{text as q}from"../../recipes/text.js";import{cn as n}from"../../lib/cn.js";import{forwardRef as o}from"react";const i={"text.primary":"text-text-primary","text.secondary":"text-text-secondary","text.tertiary":"text-text-tertiary","text.quaternary":"text-text-quaternary"},v={normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extrabold:"font-extrabold"},d=o(({children:e,styles:t={},scale:l,fontColor:s="text.primary"},r)=>a("h1",{ref:r,className:n(l?"text-style-h1-scaled":"text-style-h1",i[s]),style:t,children:e})),h=o(({children:e,styles:t={},scale:l,fontColor:s="text.primary"},r)=>a("h2",{ref:r,className:n(l?"text-style-h2-scaled":"text-style-h2",i[s]),style:t,children:e})),f=o(({children:e,styles:t={},scale:l,fontColor:s="text.primary"},r)=>a("h3",{ref:r,className:n(l?"text-style-h3-scaled":"text-style-h3",i[s]),style:t,children:e})),p=o(({children:e,styles:t={},scale:l,fontColor:s="text.primary"},r)=>a("h4",{ref:r,className:n(l?"text-style-h4-scaled":"text-style-h4",i[s]),style:t,children:e})),N=o(({children:e,styles:t={},scale:l,fontColor:s="text.primary"},r)=>a("h5",{ref:r,className:n(l?"text-style-h5-scaled":"text-style-h5",i[s]),style:t,children:e})),H=o(({children:e,styles:t={},scale:l,fontColor:s="text.secondary"},r)=>a("h6",{ref:r,className:n(l?"text-style-h6-scaled":"text-style-h6",i[s]),style:t,children:e})),y=o(({children:e,styles:t={},scale:l,inline:s=!1,mono:r=!1,variant:m="text",size:T="md",truncate:b=!1,fontWeight:C,fontColor:x},g)=>{const j=q({mono:r,variant:m,size:T,scale:l}),c={ref:g,className:n(j,v[C??(m!=="text"?"medium":"normal")],x&&i[x],b&&"truncate"),style:t};return s?a("span",{...c,children:e}):a("p",{...c,children:e})}),u=o((e,t)=>a(y,{ref:t,mono:!0,...e})),z=Object.assign(y,{H1:d,H2:h,H3:f,H4:p,H5:N,H6:H,Mono:u});y.displayName="Text",d.displayName="Text.H1",h.displayName="Text.H2",f.displayName="Text.H3",p.displayName="Text.H4",N.displayName="Text.H5",H.displayName="Text.H6",u.displayName="Text.Mono";export{z as default};
 //# sourceMappingURL=text.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../../src/components/primitives/text.tsx"],"sourcesContent":["import { text } from '@recipes/text';\nimport { css, cx } from '@styled/css';\nimport { CSSProperties, PropsWithChildren, forwardRef } from 'react';\n\nexport type TextStyles = {\n  color?: CSSProperties['color'];\n  fontWeight?: CSSProperties['fontWeight'];\n  fontSize?: CSSProperties['fontSize'];\n  lineHeight?: CSSProperties['lineHeight'];\n  letterSpacing?: CSSProperties['letterSpacing'];\n  textAlign?: CSSProperties['textAlign'];\n  textDecoration?: CSSProperties['textDecoration'];\n  textTransform?: CSSProperties['textTransform'];\n  textWrap?: CSSProperties['textWrap'];\n  maxWidth?: CSSProperties['maxWidth'];\n};\n\nexport interface TextProps extends PropsWithChildren {\n  styles?: TextStyles;\n  scale?: boolean;\n  fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';\n  fontColor?: 'text.primary' | 'text.secondary' | 'text.tertiary' | 'text.quaternary';\n}\n\nexport interface BodyProps extends TextProps {\n  inline?: boolean;\n  mono?: boolean;\n  variant?: 'text' | 'error' | 'info' | 'success' | 'warning';\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  truncate?: boolean;\n}\n\nconst defaultColor = 'text.primary';\n\nconst TextH1 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = defaultColor, ...props }, ref) => (\n    <h1 ref={ref} className={css({ textStyle: scale ? 'h1-scaled' : 'h1', color, ...props })} style={styles}>\n      {children}\n    </h1>\n  ),\n);\n\nconst TextH2 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = defaultColor, ...props }, ref) => (\n    <h2 ref={ref} className={css({ textStyle: scale ? 'h2-scaled' : 'h2', color, ...props })} style={styles}>\n      {children}\n    </h2>\n  ),\n);\n\nconst TextH3 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = defaultColor, ...props }, ref) => (\n    <h3 ref={ref} className={css({ textStyle: scale ? 'h3-scaled' : 'h3', color, ...props })} style={styles}>\n      {children}\n    </h3>\n  ),\n);\n\nconst TextH4 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = defaultColor, ...props }, ref) => (\n    <h4 ref={ref} className={css({ textStyle: scale ? 'h4-scaled' : 'h4', color, ...props })} style={styles}>\n      {children}\n    </h4>\n  ),\n);\n\nconst TextH5 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = defaultColor, ...props }, ref) => (\n    <h5 ref={ref} className={css({ textStyle: scale ? 'h5-scaled' : 'h5', color, ...props })} style={styles}>\n      {children}\n    </h5>\n  ),\n);\n\nconst TextH6 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = 'text.secondary', ...props }, ref) => (\n    <h6 ref={ref} className={css({ textStyle: scale ? 'h6-scaled' : 'h6', color, ...props })} style={styles}>\n      {children}\n    </h6>\n  ),\n);\n\nconst Body = forwardRef<HTMLParagraphElement, BodyProps>(\n  (\n    {\n      children,\n      styles = {},\n      scale,\n      inline = false,\n      mono = false,\n      variant = 'text',\n      size = 'md',\n      truncate = false,\n      fontWeight,\n      fontColor: color,\n      ...props\n    },\n    ref,\n  ) => {\n    const classStyles = text({ mono, variant, size, scale });\n    const fontWeightStyle = fontWeight ?? (variant !== 'text' ? 'medium' : 'normal');\n    const bodyProps = {\n      ref,\n      className: cx(classStyles, css({ truncate, fontWeight: fontWeightStyle, color, ...props })),\n      style: styles,\n    };\n\n    if (inline) {\n      return <span {...bodyProps}>{children}</span>;\n    }\n\n    return <p {...bodyProps}>{children}</p>;\n  },\n);\n\nconst TextMono = forwardRef<HTMLParagraphElement, BodyProps>((props, ref) => {\n  return <Body ref={ref} mono {...props} />;\n});\n\nconst Text = Object.assign(Body, {\n  H1: TextH1,\n  H2: TextH2,\n  H3: TextH3,\n  H4: TextH4,\n  H5: TextH5,\n  H6: TextH6,\n  Mono: TextMono,\n});\n\nBody.displayName = 'Text';\nTextH1.displayName = 'Text.H1';\nTextH2.displayName = 'Text.H2';\nTextH3.displayName = 'Text.H3';\nTextH4.displayName = 'Text.H4';\nTextH5.displayName = 'Text.H5';\nTextH6.displayName = 'Text.H6';\nTextMono.displayName = 'Text.Mono';\n\nexport default Text;\n"],"names":["defaultColor","TextH1","forwardRef","children","styles","scale","color","props","ref","_jsx","css","TextH2","TextH3","TextH4","TextH5","TextH6","Body","inline","mono","variant","size","truncate","fontWeight","classStyles","text","bodyProps","cx","TextMono","Text"],"mappings":"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"}
+{"version":3,"file":"text.js","sources":["../../../../src/components/primitives/text.tsx"],"sourcesContent":["import { text } from '@recipes/text';\nimport { cn } from '@lib/cn';\nimport { CSSProperties, PropsWithChildren, forwardRef } from 'react';\n\nexport type TextStyles = {\n  color?: CSSProperties['color'];\n  fontWeight?: CSSProperties['fontWeight'];\n  fontSize?: CSSProperties['fontSize'];\n  lineHeight?: CSSProperties['lineHeight'];\n  letterSpacing?: CSSProperties['letterSpacing'];\n  textAlign?: CSSProperties['textAlign'];\n  textDecoration?: CSSProperties['textDecoration'];\n  textTransform?: CSSProperties['textTransform'];\n  textWrap?: CSSProperties['textWrap'];\n  maxWidth?: CSSProperties['maxWidth'];\n};\n\nexport interface TextProps extends PropsWithChildren {\n  styles?: TextStyles;\n  scale?: boolean;\n  fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';\n  fontColor?: 'text.primary' | 'text.secondary' | 'text.tertiary' | 'text.quaternary';\n}\n\nexport interface BodyProps extends TextProps {\n  inline?: boolean;\n  mono?: boolean;\n  variant?: 'text' | 'error' | 'info' | 'success' | 'warning';\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  truncate?: boolean;\n}\n\nconst fontColorMap: Record<string, string> = {\n  'text.primary': 'text-text-primary',\n  'text.secondary': 'text-text-secondary',\n  'text.tertiary': 'text-text-tertiary',\n  'text.quaternary': 'text-text-quaternary',\n};\n\nconst fontWeightMap: Record<string, string> = {\n  normal: 'font-normal',\n  medium: 'font-medium',\n  semibold: 'font-semibold',\n  bold: 'font-bold',\n  extrabold: 'font-extrabold',\n};\n\nconst TextH1 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = 'text.primary' }, ref) => (\n    <h1 ref={ref} className={cn(scale ? 'text-style-h1-scaled' : 'text-style-h1', fontColorMap[color])} style={styles}>\n      {children}\n    </h1>\n  ),\n);\n\nconst TextH2 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = 'text.primary' }, ref) => (\n    <h2 ref={ref} className={cn(scale ? 'text-style-h2-scaled' : 'text-style-h2', fontColorMap[color])} style={styles}>\n      {children}\n    </h2>\n  ),\n);\n\nconst TextH3 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = 'text.primary' }, ref) => (\n    <h3 ref={ref} className={cn(scale ? 'text-style-h3-scaled' : 'text-style-h3', fontColorMap[color])} style={styles}>\n      {children}\n    </h3>\n  ),\n);\n\nconst TextH4 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = 'text.primary' }, ref) => (\n    <h4 ref={ref} className={cn(scale ? 'text-style-h4-scaled' : 'text-style-h4', fontColorMap[color])} style={styles}>\n      {children}\n    </h4>\n  ),\n);\n\nconst TextH5 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = 'text.primary' }, ref) => (\n    <h5 ref={ref} className={cn(scale ? 'text-style-h5-scaled' : 'text-style-h5', fontColorMap[color])} style={styles}>\n      {children}\n    </h5>\n  ),\n);\n\nconst TextH6 = forwardRef<HTMLHeadingElement, TextProps>(\n  ({ children, styles = {}, scale, fontColor: color = 'text.secondary' }, ref) => (\n    <h6 ref={ref} className={cn(scale ? 'text-style-h6-scaled' : 'text-style-h6', fontColorMap[color])} style={styles}>\n      {children}\n    </h6>\n  ),\n);\n\nconst Body = forwardRef<HTMLParagraphElement, BodyProps>(\n  (\n    {\n      children,\n      styles = {},\n      scale,\n      inline = false,\n      mono = false,\n      variant = 'text',\n      size = 'md',\n      truncate = false,\n      fontWeight,\n      fontColor: color,\n    },\n    ref,\n  ) => {\n    const classStyles = text({ mono, variant, size, scale });\n    const fontWeightStyle = fontWeight ?? (variant !== 'text' ? 'medium' : 'normal');\n    const bodyProps = {\n      ref,\n      className: cn(classStyles, fontWeightMap[fontWeightStyle], color && fontColorMap[color], truncate && 'truncate'),\n      style: styles,\n    };\n\n    if (inline) {\n      return <span {...bodyProps}>{children}</span>;\n    }\n\n    return <p {...bodyProps}>{children}</p>;\n  },\n);\n\nconst TextMono = forwardRef<HTMLParagraphElement, BodyProps>((props, ref) => {\n  return <Body ref={ref} mono {...props} />;\n});\n\nconst Text = Object.assign(Body, {\n  H1: TextH1,\n  H2: TextH2,\n  H3: TextH3,\n  H4: TextH4,\n  H5: TextH5,\n  H6: TextH6,\n  Mono: TextMono,\n});\n\nBody.displayName = 'Text';\nTextH1.displayName = 'Text.H1';\nTextH2.displayName = 'Text.H2';\nTextH3.displayName = 'Text.H3';\nTextH4.displayName = 'Text.H4';\nTextH5.displayName = 'Text.H5';\nTextH6.displayName = 'Text.H6';\nTextMono.displayName = 'Text.Mono';\n\nexport default Text;\n"],"names":["fontColorMap","fontWeightMap","TextH1","forwardRef","children","styles","scale","color","ref","_jsx","cn","TextH2","TextH3","TextH4","TextH5","TextH6","Body","inline","mono","variant","size","truncate","fontWeight","classStyles","text","bodyProps","TextMono","props","Text"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-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};
+import{jsxs as f,jsx as o}from"react/jsx-runtime";import u from"../icons/ico-checkmark-circle-fill.js";import"react";import"../../lib/cn.js";import"../feedback/callout.js";import{LoadingSpinner as x}from"../feedback/loading-spinner.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 C from"../primitives/text.js";import"../primitives/portal.js";import"../../hooks/useToast.js";import"../feedback/tooltip.js";import"../inputs/phone-input.js";import{PinCodeInput as v}from"../inputs/pincode-input.js";import"../inputs/text-input.js";import{createSlot as y,createHost as j}from"create-slots";const i=y(({children:r})=>r),N=r=>{const{isPending:e,isSuccess:n,onChange:m,onComplete:s,originName:p,pinLength:c,id:a,autoFocus:l,errorMessage:t,children:d}=r,g=()=>e?o(x,{size:36,strokeWidth:4}):n?o(u,{color:"var(--color-brand-base)",width:36,height:36}):o(v,{originName:p,onChange:m,pinLength:c,onComplete:s,id:a,autoFocus:l});return j(d,h=>f("div",{className:"flex flex-col gap-3 my-3",children:[o("div",{className:"flex items-center justify-center h-12",children:g()}),t&&o(C,{variant:"error",size:"sm",styles:{textAlign:"center"},children:t}),h.get(i)]}))},b=Object.assign(N,{RetryContent:i});export{b 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":"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"}
+{"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 { 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=\"var(--color-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      <div className=\"flex flex-col gap-3 my-3\">\n        <div className=\"flex items-center justify-center h-12\">{renderPincodeOrStatus()}</div>\n        {errorMessage && (\n          <Text variant=\"error\" size=\"sm\" styles={{ textAlign: 'center' }}>\n            {errorMessage}\n          </Text>\n        )}\n        {slots.get(RetryContent)}\n      </div>\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","PinCodeInput","createHost","slots","_jsxs","Text","VerifyPincode"],"mappings":"6xBAaA,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,EAAuB,CAAA,MAAM,0BAA0B,MAAO,GAAI,OAAQ,KAG/FF,EAACG,EAAY,CACX,WAAYT,EACZ,SAAUF,EACV,UAAWG,EACX,WAAYF,EACZ,GAAIG,EAEJ,UAAWC,CACX,CAAA,EAIN,OAAOO,EAAWjB,EAAUkB,GAExBC,SAAK,UAAU,2BACb,SAAA,CAAAN,EAAA,MAAA,CAAK,UAAU,wCAAuC,SAAED,EAAuB,CAAA,CAAA,EAC9ED,GACCE,EAACO,EAAK,CAAA,QAAQ,QAAQ,KAAK,KAAK,OAAQ,CAAE,UAAW,QAAU,EAAA,SAC5DT,CACI,CAAA,EAERO,EAAM,IAAIpB,CAAY,CAAC,CACpB,CAAA,CAET,CACH,EAEauB,EAAgB,OAAO,OAAOpB,EAAmB,CAAE,aAAAH,CAAY,CAAE"}

package/dist/es/components/utils/client-asset-logo.js

@@ -1,2 +1,2 @@
-import{jsx as e,Fragment as n}from"react/jsx-runtime";import{token as m}from"@styled/tokens";import l from"../icons/ico-rocket-fill.js";import{css as h}from"@styled/css";import{Center as a}from"@styled/jsx";import{createSlot as p,createHost as g}from"create-slots";import{Children as d,cloneElement as f}from"react";const b="https://assets.fortmatic.com/MagicLogos/blank.png",o="2.625rem",c=p(({children:t,...r})=>e(a,{children:d.map(t,i=>f(i,r))})),w=t=>{const{assetUri:r}=t;return g(t.children,i=>{const s=i.get(c);return e(n,{children:!r||r===b?s?{...s,props:{...s.props,width:o,height:o}}:e(l,{height:o,width:o,color:m("colors.brand.lighter")}):e("img",{className:h({height:o,width:o,overflow:"hidden"}),alt:"logo",src:r})})})},u=Object.assign(w,{PlaceholderIcon:c});export{u as ClientAssetLogo};
+import{jsx as r,Fragment as n}from"react/jsx-runtime";import l from"../icons/ico-rocket-fill.js";import{createSlot as m,createHost as a}from"create-slots";import{Children as h,cloneElement as g}from"react";const p="https://assets.fortmatic.com/MagicLogos/blank.png",o="2.625rem",i=m(({children:t,...e})=>r("div",{className:"flex items-center justify-center",children:h.map(t,s=>g(s,e))})),d=t=>{const{assetUri:e}=t;return a(t.children,s=>{const c=s.get(i);return r(n,{children:!e||e===p?c?{...c,props:{...c.props,width:o,height:o}}:r(l,{height:o,width:o,color:"var(--color-brand-lighter)"}):r("img",{className:"h-[2.625rem] w-[2.625rem] overflow-hidden",alt:"logo",src:e})})})},f=Object.assign(d,{PlaceholderIcon:i});export{f as ClientAssetLogo};
 //# sourceMappingURL=client-asset-logo.js.map

package/dist/es/components/utils/client-asset-logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"client-asset-logo.js","sources":["../../../../src/components/utils/client-asset-logo.tsx"],"sourcesContent":["import { IcoRocketFill } from '@components/icons';\nimport { css } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement } from 'react';\n\nconst blankLogoUrl = 'https://assets.fortmatic.com/MagicLogos/blank.png';\n\nexport interface ClientAssetLogoProps {\n  assetUri: string | null;\n  children?: React.ReactNode;\n}\n\nconst iconSize = '2.625rem';\n\nconst PlaceholderIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst Component = (props: ClientAssetLogoProps) => {\n  const { assetUri } = props;\n\n  return createHost(props.children, slots => {\n    const placeholderIcon = slots.get(PlaceholderIcon);\n\n    const renderPlaceholder = () => {\n      if (placeholderIcon) {\n        return { ...placeholderIcon, props: { ...placeholderIcon.props, width: iconSize, height: iconSize } };\n      }\n\n      return <IcoRocketFill height={iconSize} width={iconSize} color={token('colors.brand.lighter')} />;\n    };\n\n    return (\n      <>\n        {!assetUri || assetUri === blankLogoUrl ? (\n          renderPlaceholder()\n        ) : (\n          <img className={css({ height: iconSize, width: iconSize, overflow: 'hidden' })} alt=\"logo\" src={assetUri} />\n        )}\n      </>\n    );\n  });\n};\n\nexport const ClientAssetLogo = Object.assign(Component, { PlaceholderIcon });\n"],"names":["blankLogoUrl","iconSize","PlaceholderIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","Component","assetUri","createHost","slots","placeholderIcon","IcoRocketFill","token","css","ClientAssetLogo"],"mappings":"4TAOA,MAAMA,EAAe,oDAOfC,EAAW,WAEXC,EAAkBC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEtDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAaN,GAA+B,CAChD,KAAM,CAAE,SAAAO,CAAU,EAAGP,EAErB,OAAOQ,EAAWR,EAAM,SAAUS,GAAQ,CACxC,MAAMC,EAAkBD,EAAM,IAAIZ,CAAe,EAUjD,OACEI,cACG,CAACM,GAAYA,IAAaZ,EATzBe,EACK,CAAE,GAAGA,EAAiB,MAAO,CAAE,GAAGA,EAAgB,MAAO,MAAOd,EAAU,OAAQA,CAAU,CAAA,EAG9FK,EAACU,EAAa,CAAC,OAAQf,EAAU,MAAOA,EAAU,MAAOgB,EAAM,sBAAsB,IAQxFX,EAAK,MAAA,CAAA,UAAWY,EAAI,CAAE,OAAQjB,EAAU,MAAOA,EAAU,SAAU,QAAU,CAAA,EAAG,IAAI,OAAO,IAAKW,CAAY,CAAA,CAE7G,CAAA,CAEP,CAAC,CACH,EAEaO,EAAkB,OAAO,OAAOR,EAAW,CAAE,gBAAAT,CAAe,CAAE"}
+{"version":3,"file":"client-asset-logo.js","sources":["../../../../src/components/utils/client-asset-logo.tsx"],"sourcesContent":["import { IcoRocketFill } from '@components/icons';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement } from 'react';\n\nconst blankLogoUrl = 'https://assets.fortmatic.com/MagicLogos/blank.png';\n\nexport interface ClientAssetLogoProps {\n  assetUri: string | null;\n  children?: React.ReactNode;\n}\n\nconst iconSize = '2.625rem';\n\nconst PlaceholderIcon = createSlot(({ children, ...props }) => {\n  return (\n    <div className=\"flex items-center justify-center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </div>\n  );\n});\n\nconst Component = (props: ClientAssetLogoProps) => {\n  const { assetUri } = props;\n\n  return createHost(props.children, slots => {\n    const placeholderIcon = slots.get(PlaceholderIcon);\n\n    const renderPlaceholder = () => {\n      if (placeholderIcon) {\n        return { ...placeholderIcon, props: { ...placeholderIcon.props, width: iconSize, height: iconSize } };\n      }\n\n      return <IcoRocketFill height={iconSize} width={iconSize} color={'var(--color-brand-lighter)'} />;\n    };\n\n    return (\n      <>\n        {!assetUri || assetUri === blankLogoUrl ? (\n          renderPlaceholder()\n        ) : (\n          <img className=\"h-[2.625rem] w-[2.625rem] overflow-hidden\" alt=\"logo\" src={assetUri} />\n        )}\n      </>\n    );\n  });\n};\n\nexport const ClientAssetLogo = Object.assign(Component, { PlaceholderIcon });\n"],"names":["blankLogoUrl","iconSize","PlaceholderIcon","createSlot","children","props","_jsx","Children","child","cloneElement","Component","assetUri","createHost","slots","placeholderIcon","_Fragment","IcoRocketFill","ClientAssetLogo"],"mappings":"8MAIA,MAAMA,EAAe,oDAOfC,EAAW,WAEXC,EAAkBC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEtDC,EAAA,MAAA,CAAK,UAAU,mCACZ,SAAAC,EAAS,IAAIH,EAAUI,GACfC,EAAaD,EAAOH,CAAK,CACjC,CACG,CAAA,CAET,EAEKK,EAAaL,GAA+B,CAChD,KAAM,CAAE,SAAAM,CAAU,EAAGN,EAErB,OAAOO,EAAWP,EAAM,SAAUQ,GAAQ,CACxC,MAAMC,EAAkBD,EAAM,IAAIX,CAAe,EAUjD,OACEI,EAAAS,EAAA,CAAA,SACG,CAACJ,GAAYA,IAAaX,EATzBc,EACK,CAAE,GAAGA,EAAiB,MAAO,CAAE,GAAGA,EAAgB,MAAO,MAAOb,EAAU,OAAQA,CAAU,CAAA,EAG9FK,EAACU,EAAc,CAAA,OAAQf,EAAU,MAAOA,EAAU,MAAO,+BAQ5DK,SAAK,UAAU,4CAA4C,IAAI,OAAO,IAAKK,CAAQ,CAAA,CACpF,CAAA,CAGP,CAAC,CACH,EAEaM,EAAkB,OAAO,OAAOP,EAAW,CAAE,gBAAAR,CAAe,CAAE"}

package/dist/es/components/utils/qr-code.js

@@ -1,2 +1,2 @@
-import{jsx as l}from"react/jsx-runtime";import{css as O}from"@styled/css";import{Flex as R}from"@styled/jsx";import{token as o}from"@styled/tokens";import{QRCode as S}from"react-qrcode-logo";function b({value:r,ecLevel:i="H",qrStyle:d="dots",eyeRadius:t=0,eyeColor:g=o("colors.ink.90"),size:a=160,logoImage:n=void 0,logoHeight:s=32,logoWidth:m=32,logoOpacity:c=1,logoPadding:y=0,logoPaddingStyle:u="square",logoOnLoad:C=void 0,removeQrCodeBehindLogo:f=!1,enableCORS:h=!1,quietZone:v=5,bgColor:p=o("colors.chalk"),fgColor:q=o("colors.ink.90"),style:L=void 0,id:e="qr-code"}){return l(R,{alignItems:"center",justifyContent:"center",className:O({shadow:"0.125rem 0.125rem 1.5rem {colors.ink.70/15}",overflow:"hidden",padding:1,borderRadius:"1rem"}),children:l(S,{value:r,ecLevel:i,qrStyle:d,eyeRadius:t,eyeColor:g,size:a,logoImage:n,logoHeight:s,logoWidth:m,logoOpacity:c,logoPadding:y,logoPaddingStyle:u,logoOnLoad:C,removeQrCodeBehindLogo:f,enableCORS:h,quietZone:v,bgColor:p,fgColor:q,style:L,id:e,"data-testid":e})})}export{b as default};
+import{jsx as e}from"react/jsx-runtime";import{QRCode as F}from"react-qrcode-logo";function L({value:l,ecLevel:d="H",qrStyle:i="dots",eyeRadius:r=0,eyeColor:g="#18171A",size:t=160,logoImage:a=void 0,logoHeight:n=32,logoWidth:s=32,logoOpacity:m=1,logoPadding:y=0,logoPaddingStyle:u="square",logoOnLoad:v=void 0,removeQrCodeBehindLogo:C=!1,enableCORS:c=!1,quietZone:f=5,bgColor:h="#FFFFFF",fgColor:q="#18171A",style:p=void 0,id:o="qr-code"}){return e("div",{className:"flex items-center justify-center shadow-[0.125rem_0.125rem_1.5rem_rgba(119,118,122,0.15)] overflow-hidden p-1 rounded-[1rem]",children:e(F,{value:l,ecLevel:d,qrStyle:i,eyeRadius:r,eyeColor:g,size:t,logoImage:a,logoHeight:n,logoWidth:s,logoOpacity:m,logoPadding:y,logoPaddingStyle:u,logoOnLoad:v,removeQrCodeBehindLogo:C,enableCORS:c,quietZone:f,bgColor:h,fgColor:q,style:p,id:o,"data-testid":o})})}export{L as default};
 //# sourceMappingURL=qr-code.js.map

package/dist/es/components/utils/qr-code.js.map

@@ -1 +1 @@
-{"version":3,"file":"qr-code.js","sources":["../../../../src/components/utils/qr-code.tsx"],"sourcesContent":["import { css } from '@styled/css';\nimport { Flex } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { IProps, QRCode as LogoQRCode } from 'react-qrcode-logo';\n\nexport interface QRCodeProps extends IProps {\n  value: string;\n}\n\nexport default function QRCode({\n  value,\n  ecLevel = 'H',\n  qrStyle = 'dots',\n  eyeRadius = 0,\n  eyeColor = token('colors.ink.90'),\n  size = 160,\n  logoImage = undefined,\n  logoHeight = 32,\n  logoWidth = 32,\n  logoOpacity = 1,\n  logoPadding = 0,\n  logoPaddingStyle = 'square',\n  logoOnLoad = undefined,\n  removeQrCodeBehindLogo = false,\n  enableCORS = false,\n  quietZone = 5,\n  bgColor = token('colors.chalk'),\n  fgColor = token('colors.ink.90'),\n  style = undefined,\n  id = 'qr-code',\n}: QRCodeProps) {\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      className={css({\n        shadow: '0.125rem 0.125rem 1.5rem {colors.ink.70/15}',\n        overflow: 'hidden',\n        padding: 1,\n        borderRadius: '1rem',\n      })}\n    >\n      <LogoQRCode\n        value={value}\n        ecLevel={ecLevel}\n        qrStyle={qrStyle}\n        eyeRadius={eyeRadius}\n        eyeColor={eyeColor}\n        size={size}\n        logoImage={logoImage}\n        logoHeight={logoHeight}\n        logoWidth={logoWidth}\n        logoOpacity={logoOpacity}\n        logoPadding={logoPadding}\n        logoPaddingStyle={logoPaddingStyle}\n        logoOnLoad={logoOnLoad}\n        removeQrCodeBehindLogo={removeQrCodeBehindLogo}\n        enableCORS={enableCORS}\n        quietZone={quietZone}\n        bgColor={bgColor}\n        fgColor={fgColor}\n        style={style}\n        id={id}\n        // This practice is discouraged. It is recommended to use this only\n        // after the other queries don't work for your use case.\n        // https://testing-library.com/docs/queries/bytestid\n        data-testid={id}\n      />\n    </Flex>\n  );\n}\n"],"names":["QRCode","value","ecLevel","qrStyle","eyeRadius","eyeColor","token","size","logoImage","logoHeight","logoWidth","logoOpacity","logoPadding","logoPaddingStyle","logoOnLoad","removeQrCodeBehindLogo","enableCORS","quietZone","bgColor","fgColor","style","id","_jsx","Flex","css","LogoQRCode"],"mappings":"+LASA,SAAwBA,EAAO,CAC7B,MAAAC,EACA,QAAAC,EAAU,IACV,QAAAC,EAAU,OACV,UAAAC,EAAY,EACZ,SAAAC,EAAWC,EAAM,eAAe,EAChC,KAAAC,EAAO,IACP,UAAAC,EAAY,OACZ,WAAAC,EAAa,GACb,UAAAC,EAAY,GACZ,YAAAC,EAAc,EACd,YAAAC,EAAc,EACd,iBAAAC,EAAmB,SACnB,WAAAC,EAAa,OACb,uBAAAC,EAAyB,GACzB,WAAAC,EAAa,GACb,UAAAC,EAAY,EACZ,QAAAC,EAAUZ,EAAM,cAAc,EAC9B,QAAAa,EAAUb,EAAM,eAAe,EAC/B,MAAAc,EAAQ,OACR,GAAAC,EAAK,SACO,EAAA,CACZ,OACEC,EAACC,EAAI,CACH,WAAW,SACX,eAAe,SACf,UAAWC,EAAI,CACb,OAAQ,8CACR,SAAU,SACV,QAAS,EACT,aAAc,MACf,CAAA,WAEDF,EAACG,GACC,MAAOxB,EACP,QAASC,EACT,QAASC,EACT,UAAWC,EACX,SAAUC,EACV,KAAME,EACN,UAAWC,EACX,WAAYC,EACZ,UAAWC,EACX,YAAaC,EACb,YAAaC,EACb,iBAAkBC,EAClB,WAAYC,EACZ,uBAAwBC,EACxB,WAAYC,EACZ,UAAWC,EACX,QAASC,EACT,QAASC,EACT,MAAOC,EACP,GAAIC,EAAE,cAIOA,CACb,CAAA,CAAA,CAAA,CAGR"}
+{"version":3,"file":"qr-code.js","sources":["../../../../src/components/utils/qr-code.tsx"],"sourcesContent":["import { IProps, QRCode as LogoQRCode } from 'react-qrcode-logo';\n\nexport interface QRCodeProps extends IProps {\n  value: string;\n}\n\nexport default function QRCode({\n  value,\n  ecLevel = 'H',\n  qrStyle = 'dots',\n  eyeRadius = 0,\n  eyeColor = '#18171A',\n  size = 160,\n  logoImage = undefined,\n  logoHeight = 32,\n  logoWidth = 32,\n  logoOpacity = 1,\n  logoPadding = 0,\n  logoPaddingStyle = 'square',\n  logoOnLoad = undefined,\n  removeQrCodeBehindLogo = false,\n  enableCORS = false,\n  quietZone = 5,\n  bgColor = '#FFFFFF',\n  fgColor = '#18171A',\n  style = undefined,\n  id = 'qr-code',\n}: QRCodeProps) {\n  return (\n    <div className=\"flex items-center justify-center shadow-[0.125rem_0.125rem_1.5rem_rgba(119,118,122,0.15)] overflow-hidden p-1 rounded-[1rem]\">\n      <LogoQRCode\n        value={value}\n        ecLevel={ecLevel}\n        qrStyle={qrStyle}\n        eyeRadius={eyeRadius}\n        eyeColor={eyeColor}\n        size={size}\n        logoImage={logoImage}\n        logoHeight={logoHeight}\n        logoWidth={logoWidth}\n        logoOpacity={logoOpacity}\n        logoPadding={logoPadding}\n        logoPaddingStyle={logoPaddingStyle}\n        logoOnLoad={logoOnLoad}\n        removeQrCodeBehindLogo={removeQrCodeBehindLogo}\n        enableCORS={enableCORS}\n        quietZone={quietZone}\n        bgColor={bgColor}\n        fgColor={fgColor}\n        style={style}\n        id={id}\n        // This practice is discouraged. It is recommended to use this only\n        // after the other queries don't work for your use case.\n        // https://testing-library.com/docs/queries/bytestid\n        data-testid={id}\n      />\n    </div>\n  );\n}\n"],"names":["QRCode","value","ecLevel","qrStyle","eyeRadius","eyeColor","size","logoImage","logoHeight","logoWidth","logoOpacity","logoPadding","logoPaddingStyle","logoOnLoad","removeQrCodeBehindLogo","enableCORS","quietZone","bgColor","fgColor","style","id","_jsx","LogoQRCode"],"mappings":"mFAMA,SAAwBA,EAAO,CAC7B,MAAAC,EACA,QAAAC,EAAU,IACV,QAAAC,EAAU,OACV,UAAAC,EAAY,EACZ,SAAAC,EAAW,UACX,KAAAC,EAAO,IACP,UAAAC,EAAY,OACZ,WAAAC,EAAa,GACb,UAAAC,EAAY,GACZ,YAAAC,EAAc,EACd,YAAAC,EAAc,EACd,iBAAAC,EAAmB,SACnB,WAAAC,EAAa,OACb,uBAAAC,EAAyB,GACzB,WAAAC,EAAa,GACb,UAAAC,EAAY,EACZ,QAAAC,EAAU,UACV,QAAAC,EAAU,UACV,MAAAC,EAAQ,OACR,GAAAC,EAAK,SACO,EAAA,CACZ,OACEC,SAAK,UAAU,+HACb,SAAAA,EAACC,EACC,CAAA,MAAOrB,EACP,QAASC,EACT,QAASC,EACT,UAAWC,EACX,SAAUC,EACV,KAAMC,EACN,UAAWC,EACX,WAAYC,EACZ,UAAWC,EACX,YAAaC,EACb,YAAaC,EACb,iBAAkBC,EAClB,WAAYC,EACZ,uBAAwBC,EACxB,WAAYC,EACZ,UAAWC,EACX,QAASC,EACT,QAASC,EACT,MAAOC,EACP,GAAIC,gBAISA,CAAE,CAAA,CAEb,CAAA,CAEV"}

package/dist/es/components/utils/secured-by-magic.js

@@ -1,2 +1,2 @@
-import{jsxs as C,jsx as e}from"react/jsx-runtime";import{css as o}from"@styled/css";import{Flex as c}from"@styled/jsx";const l=({enableLink:r=!0,label:n="Secured by",onClickOverride:i})=>{const t=r?{fill:'url("#logo-gradient")'}:{},s=C("svg",{width:62,height:23,viewBox:"0 0 83 31",xmlns:"http://www.w3.org/2000/svg",children:[e("defs",{children:C("linearGradient",{id:"logo-gradient",x1:"-100%",y1:"0%",x2:"100%",y2:"0%",gradientUnits:"userSpaceOnUse",children:[e("stop",{offset:"0%",stopColor:"#402FC3"}),e("stop",{offset:"33%",stopColor:"#C970FF"}),e("stop",{offset:"67%",stopColor:"#C970FF"}),e("stop",{offset:"100%",stopColor:"#402FC3"}),e("animate",{attributeName:"x1",from:"-100%",to:"100%",dur:"4s",repeatCount:"indefinite"}),e("animate",{attributeName:"x2",from:"0%",to:"200%",dur:"4s",repeatCount:"indefinite"})]})}),C("g",{children:[e("path",{d:"M45.1797 20.8929H47.7932V8.70022H44.1379L41.1771 16.3047L38.2163 8.70022H34.5792V20.8929H37.1745V12.1186L40.6105 20.8929H41.7437L45.1797 12.1186V20.8929Z"}),e("path",{d:"M55.4597 20.8929H57.7808V15.1896C57.7808 12.6487 55.9349 11.8444 53.9245 11.8444C52.5354 11.8444 51.1464 12.2831 50.0681 13.2336L50.9454 14.7874C51.6947 14.0928 52.572 13.7455 53.5224 13.7455C54.6921 13.7455 55.4597 14.3304 55.4597 15.2262V16.4509C54.8748 15.738 53.8331 15.3724 52.6634 15.3724C51.2561 15.3724 49.5929 16.1219 49.5929 18.1875C49.5929 20.1617 51.2561 21.1123 52.6634 21.1123C53.8148 21.1123 54.8566 20.6918 55.4597 19.9789V20.8929ZM55.4597 18.7725C55.0759 19.2843 54.3448 19.5402 53.5955 19.5402C52.6816 19.5402 51.9323 19.0649 51.9323 18.2423C51.9323 17.4015 52.6816 16.9079 53.5955 16.9079C54.3448 16.9079 55.0759 17.1638 55.4597 17.6757V18.7725Z"}),e("path",{d:"M59.9003 23.1596C60.9969 24.1285 62.1849 24.4758 63.7019 24.4758C65.8768 24.4758 68.4721 23.6532 68.4721 20.2897V12.0637H66.1327V13.1971C65.4199 12.3014 64.4695 11.8444 63.4094 11.8444C61.1797 11.8444 59.5165 13.453 59.5165 16.3412C59.5165 19.2843 61.198 20.8381 63.4094 20.8381C64.4878 20.8381 65.4382 20.3262 66.1327 19.4488V20.3445C66.1327 22.0811 64.8167 22.5747 63.7019 22.5747C62.587 22.5747 61.6549 22.2639 60.9421 21.4779L59.9003 23.1596ZM66.1327 17.7671C65.7489 18.3337 64.9081 18.7725 64.1405 18.7725C62.8246 18.7725 61.9108 17.8585 61.9108 16.3412C61.9108 14.824 62.8246 13.91 64.1405 13.91C64.9081 13.91 65.7489 14.3304 66.1327 14.9154V17.7671Z"}),e("path",{d:"M71.9256 10.7659C72.6933 10.7659 73.3147 10.1443 73.3147 9.37658C73.3147 8.60882 72.6933 7.9873 71.9256 7.9873C71.1763 7.9873 70.5366 8.60882 70.5366 9.37658C70.5366 10.1443 71.1763 10.7659 71.9256 10.7659ZM70.7742 20.8929H73.0953V12.0637H70.7742V20.8929Z"}),e("path",{d:"M74.8303 16.4692C74.8303 19.1929 76.7859 21.1123 79.5092 21.1123C81.3185 21.1123 82.4151 20.3262 83 19.5037L81.483 18.0961C81.0627 18.6811 80.423 19.0467 79.6188 19.0467C78.2115 19.0467 77.2246 18.0047 77.2246 16.4692C77.2246 14.9337 78.2115 13.91 79.6188 13.91C80.423 13.91 81.0627 14.2573 81.483 14.8606L83 13.453C82.4151 12.6304 81.3185 11.8444 79.5092 11.8444C76.7859 11.8444 74.8303 13.7638 74.8303 16.4692Z"}),e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12.7002 -5.55184e-07C14.0256 1.62362 15.4875 3.13142 17.0683 4.50592C16.0151 7.92275 15.4481 11.5529 15.4481 15.3154C15.4481 19.078 16.0151 22.7082 17.0684 26.125C15.4876 27.4995 14.0257 29.0073 12.7003 30.6309C11.375 29.0075 9.91333 27.4998 8.33271 26.1255C9.38605 22.7085 9.95313 19.0782 9.95313 15.3154C9.95313 11.5527 9.38605 7.92237 8.3327 4.50537C9.9133 3.13103 11.375 1.6234 12.7002 -5.55184e-07ZM5.3107 23.7627C3.63771 22.5899 1.86221 21.5534 0.000311902 20.6694C0.516837 18.976 0.794702 17.1784 0.794702 15.316C0.794702 13.4532 0.516736 11.6553 3.00821e-05 9.9616C1.86203 9.07753 3.63762 8.04101 5.3107 6.86817C5.95048 9.57999 6.28902 12.4082 6.28902 15.3154C6.28902 18.2227 5.95049 21.0509 5.3107 23.7627ZM19.1114 15.3154C19.1114 18.2227 19.4499 21.051 20.0897 23.7628C21.763 22.5898 23.5388 21.5531 25.4011 20.669C24.8847 18.9757 24.6069 17.1783 24.6069 15.3159C24.6069 13.4534 24.8848 11.6557 25.4014 9.96213C23.539 9.07794 21.7631 8.04124 20.0897 6.86817C19.4499 9.57999 19.1114 12.4082 19.1114 15.3154Z"})]})]}),a=C(c,{className:o({display:"flex",justifyContent:"center",alignItems:"center",fill:"ink.50",_dark:{fill:"ink.70"},_hover:{...t},_active:{...t},_focus:{...t}}),children:[e("p",{className:o({color:"ink.50",_dark:{color:"ink.70"},_groupHover:r?{color:"text.tertiary"}:{},fontSize:"xs",mr:2}),children:n}),s]});return C("div",{className:o({cursor:r?"pointer":"default"})+" group",children:[r&&e("a",{onClick:d=>{i&&(d.preventDefault(),i())},tabIndex:0,"aria-label":"Secured by Magic",href:"https://magic.link/",target:"_blank",rel:"noopener noreferrer",children:a}),!r&&a]})};l.displayName="SecuredByMagic";export{l as default};
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import{cn as C}from"../../lib/cn.js";const l=({enableLink:t=!0,label:a="Secured by",onClickOverride:i})=>{const n=r("svg",{width:62,height:23,viewBox:"0 0 83 31",xmlns:"http://www.w3.org/2000/svg",children:[e("defs",{children:r("linearGradient",{id:"logo-gradient",x1:"-100%",y1:"0%",x2:"100%",y2:"0%",gradientUnits:"userSpaceOnUse",children:[e("stop",{offset:"0%",stopColor:"#402FC3"}),e("stop",{offset:"33%",stopColor:"#C970FF"}),e("stop",{offset:"67%",stopColor:"#C970FF"}),e("stop",{offset:"100%",stopColor:"#402FC3"}),e("animate",{attributeName:"x1",from:"-100%",to:"100%",dur:"4s",repeatCount:"indefinite"}),e("animate",{attributeName:"x2",from:"0%",to:"200%",dur:"4s",repeatCount:"indefinite"})]})}),r("g",{children:[e("path",{d:"M45.1797 20.8929H47.7932V8.70022H44.1379L41.1771 16.3047L38.2163 8.70022H34.5792V20.8929H37.1745V12.1186L40.6105 20.8929H41.7437L45.1797 12.1186V20.8929Z"}),e("path",{d:"M55.4597 20.8929H57.7808V15.1896C57.7808 12.6487 55.9349 11.8444 53.9245 11.8444C52.5354 11.8444 51.1464 12.2831 50.0681 13.2336L50.9454 14.7874C51.6947 14.0928 52.572 13.7455 53.5224 13.7455C54.6921 13.7455 55.4597 14.3304 55.4597 15.2262V16.4509C54.8748 15.738 53.8331 15.3724 52.6634 15.3724C51.2561 15.3724 49.5929 16.1219 49.5929 18.1875C49.5929 20.1617 51.2561 21.1123 52.6634 21.1123C53.8148 21.1123 54.8566 20.6918 55.4597 19.9789V20.8929ZM55.4597 18.7725C55.0759 19.2843 54.3448 19.5402 53.5955 19.5402C52.6816 19.5402 51.9323 19.0649 51.9323 18.2423C51.9323 17.4015 52.6816 16.9079 53.5955 16.9079C54.3448 16.9079 55.0759 17.1638 55.4597 17.6757V18.7725Z"}),e("path",{d:"M59.9003 23.1596C60.9969 24.1285 62.1849 24.4758 63.7019 24.4758C65.8768 24.4758 68.4721 23.6532 68.4721 20.2897V12.0637H66.1327V13.1971C65.4199 12.3014 64.4695 11.8444 63.4094 11.8444C61.1797 11.8444 59.5165 13.453 59.5165 16.3412C59.5165 19.2843 61.198 20.8381 63.4094 20.8381C64.4878 20.8381 65.4382 20.3262 66.1327 19.4488V20.3445C66.1327 22.0811 64.8167 22.5747 63.7019 22.5747C62.587 22.5747 61.6549 22.2639 60.9421 21.4779L59.9003 23.1596ZM66.1327 17.7671C65.7489 18.3337 64.9081 18.7725 64.1405 18.7725C62.8246 18.7725 61.9108 17.8585 61.9108 16.3412C61.9108 14.824 62.8246 13.91 64.1405 13.91C64.9081 13.91 65.7489 14.3304 66.1327 14.9154V17.7671Z"}),e("path",{d:"M71.9256 10.7659C72.6933 10.7659 73.3147 10.1443 73.3147 9.37658C73.3147 8.60882 72.6933 7.9873 71.9256 7.9873C71.1763 7.9873 70.5366 8.60882 70.5366 9.37658C70.5366 10.1443 71.1763 10.7659 71.9256 10.7659ZM70.7742 20.8929H73.0953V12.0637H70.7742V20.8929Z"}),e("path",{d:"M74.8303 16.4692C74.8303 19.1929 76.7859 21.1123 79.5092 21.1123C81.3185 21.1123 82.4151 20.3262 83 19.5037L81.483 18.0961C81.0627 18.6811 80.423 19.0467 79.6188 19.0467C78.2115 19.0467 77.2246 18.0047 77.2246 16.4692C77.2246 14.9337 78.2115 13.91 79.6188 13.91C80.423 13.91 81.0627 14.2573 81.483 14.8606L83 13.453C82.4151 12.6304 81.3185 11.8444 79.5092 11.8444C76.7859 11.8444 74.8303 13.7638 74.8303 16.4692Z"}),e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12.7002 -5.55184e-07C14.0256 1.62362 15.4875 3.13142 17.0683 4.50592C16.0151 7.92275 15.4481 11.5529 15.4481 15.3154C15.4481 19.078 16.0151 22.7082 17.0684 26.125C15.4876 27.4995 14.0257 29.0073 12.7003 30.6309C11.375 29.0075 9.91333 27.4998 8.33271 26.1255C9.38605 22.7085 9.95313 19.0782 9.95313 15.3154C9.95313 11.5527 9.38605 7.92237 8.3327 4.50537C9.9133 3.13103 11.375 1.6234 12.7002 -5.55184e-07ZM5.3107 23.7627C3.63771 22.5899 1.86221 21.5534 0.000311902 20.6694C0.516837 18.976 0.794702 17.1784 0.794702 15.316C0.794702 13.4532 0.516736 11.6553 3.00821e-05 9.9616C1.86203 9.07753 3.63762 8.04101 5.3107 6.86817C5.95048 9.57999 6.28902 12.4082 6.28902 15.3154C6.28902 18.2227 5.95049 21.0509 5.3107 23.7627ZM19.1114 15.3154C19.1114 18.2227 19.4499 21.051 20.0897 23.7628C21.763 22.5898 23.5388 21.5531 25.4011 20.669C24.8847 18.9757 24.6069 17.1783 24.6069 15.3159C24.6069 13.4534 24.8848 11.6557 25.4014 9.96213C23.539 9.07794 21.7631 8.04124 20.0897 6.86817C19.4499 9.57999 19.1114 12.4082 19.1114 15.3154Z"})]})]}),o=r("div",{className:C("flex items-center justify-center fill-ink-50 dark:fill-ink-70",t&&"hover:fill-[url(#logo-gradient)] active:fill-[url(#logo-gradient)] focus:fill-[url(#logo-gradient)]"),children:[e("p",{className:C("text-ink-50 dark:text-ink-70 text-xs mr-2",t&&"group-hover:text-text-tertiary"),children:a}),n]});return r("div",{className:C(t?"cursor-pointer":"cursor-default","group"),children:[t&&e("a",{onClick:d=>{i&&(d.preventDefault(),i())},tabIndex:0,"aria-label":"Secured by Magic",href:"https://magic.link/",target:"_blank",rel:"noopener noreferrer",children:o}),!t&&o]})};l.displayName="SecuredByMagic";export{l as default};
 //# sourceMappingURL=secured-by-magic.js.map

package/dist/es/components/utils/secured-by-magic.js.map

@@ -1 +1 @@
-{"version":3,"file":"secured-by-magic.js","sources":["../../../../src/components/utils/secured-by-magic.tsx"],"sourcesContent":["import { css } from '@styled/css';\nimport { Flex } from '@styled/jsx';\n\nexport type SecuredByMagicProps = {\n  enableLink?: boolean;\n  label?: string;\n  onClickOverride?: () => void;\n};\n\nconst SecuredByMagic = ({ enableLink = true, label = 'Secured by', onClickOverride }: SecuredByMagicProps) => {\n  const gradientFill = enableLink ? { fill: 'url(\"#logo-gradient\")' } : {};\n\n  const logoSVG = (\n    <svg width={62} height={23} viewBox=\"0 0 83 31\" xmlns=\"http://www.w3.org/2000/svg\">\n      <defs>\n        <linearGradient id=\"logo-gradient\" x1=\"-100%\" y1=\"0%\" x2=\"100%\" y2=\"0%\" gradientUnits=\"userSpaceOnUse\">\n          <stop offset=\"0%\" stopColor=\"#402FC3\" />\n          <stop offset=\"33%\" stopColor=\"#C970FF\" />\n          <stop offset=\"67%\" stopColor=\"#C970FF\" />\n          <stop offset=\"100%\" stopColor=\"#402FC3\" />\n          <animate attributeName=\"x1\" from=\"-100%\" to=\"100%\" dur=\"4s\" repeatCount=\"indefinite\" />\n          <animate attributeName=\"x2\" from=\"0%\" to=\"200%\" dur=\"4s\" repeatCount=\"indefinite\" />\n        </linearGradient>\n      </defs>\n\n      <g>\n        <path d=\"M45.1797 20.8929H47.7932V8.70022H44.1379L41.1771 16.3047L38.2163 8.70022H34.5792V20.8929H37.1745V12.1186L40.6105 20.8929H41.7437L45.1797 12.1186V20.8929Z\" />\n        <path d=\"M55.4597 20.8929H57.7808V15.1896C57.7808 12.6487 55.9349 11.8444 53.9245 11.8444C52.5354 11.8444 51.1464 12.2831 50.0681 13.2336L50.9454 14.7874C51.6947 14.0928 52.572 13.7455 53.5224 13.7455C54.6921 13.7455 55.4597 14.3304 55.4597 15.2262V16.4509C54.8748 15.738 53.8331 15.3724 52.6634 15.3724C51.2561 15.3724 49.5929 16.1219 49.5929 18.1875C49.5929 20.1617 51.2561 21.1123 52.6634 21.1123C53.8148 21.1123 54.8566 20.6918 55.4597 19.9789V20.8929ZM55.4597 18.7725C55.0759 19.2843 54.3448 19.5402 53.5955 19.5402C52.6816 19.5402 51.9323 19.0649 51.9323 18.2423C51.9323 17.4015 52.6816 16.9079 53.5955 16.9079C54.3448 16.9079 55.0759 17.1638 55.4597 17.6757V18.7725Z\" />\n        <path d=\"M59.9003 23.1596C60.9969 24.1285 62.1849 24.4758 63.7019 24.4758C65.8768 24.4758 68.4721 23.6532 68.4721 20.2897V12.0637H66.1327V13.1971C65.4199 12.3014 64.4695 11.8444 63.4094 11.8444C61.1797 11.8444 59.5165 13.453 59.5165 16.3412C59.5165 19.2843 61.198 20.8381 63.4094 20.8381C64.4878 20.8381 65.4382 20.3262 66.1327 19.4488V20.3445C66.1327 22.0811 64.8167 22.5747 63.7019 22.5747C62.587 22.5747 61.6549 22.2639 60.9421 21.4779L59.9003 23.1596ZM66.1327 17.7671C65.7489 18.3337 64.9081 18.7725 64.1405 18.7725C62.8246 18.7725 61.9108 17.8585 61.9108 16.3412C61.9108 14.824 62.8246 13.91 64.1405 13.91C64.9081 13.91 65.7489 14.3304 66.1327 14.9154V17.7671Z\" />\n        <path d=\"M71.9256 10.7659C72.6933 10.7659 73.3147 10.1443 73.3147 9.37658C73.3147 8.60882 72.6933 7.9873 71.9256 7.9873C71.1763 7.9873 70.5366 8.60882 70.5366 9.37658C70.5366 10.1443 71.1763 10.7659 71.9256 10.7659ZM70.7742 20.8929H73.0953V12.0637H70.7742V20.8929Z\" />\n        <path d=\"M74.8303 16.4692C74.8303 19.1929 76.7859 21.1123 79.5092 21.1123C81.3185 21.1123 82.4151 20.3262 83 19.5037L81.483 18.0961C81.0627 18.6811 80.423 19.0467 79.6188 19.0467C78.2115 19.0467 77.2246 18.0047 77.2246 16.4692C77.2246 14.9337 78.2115 13.91 79.6188 13.91C80.423 13.91 81.0627 14.2573 81.483 14.8606L83 13.453C82.4151 12.6304 81.3185 11.8444 79.5092 11.8444C76.7859 11.8444 74.8303 13.7638 74.8303 16.4692Z\" />\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M12.7002 -5.55184e-07C14.0256 1.62362 15.4875 3.13142 17.0683 4.50592C16.0151 7.92275 15.4481 11.5529 15.4481 15.3154C15.4481 19.078 16.0151 22.7082 17.0684 26.125C15.4876 27.4995 14.0257 29.0073 12.7003 30.6309C11.375 29.0075 9.91333 27.4998 8.33271 26.1255C9.38605 22.7085 9.95313 19.0782 9.95313 15.3154C9.95313 11.5527 9.38605 7.92237 8.3327 4.50537C9.9133 3.13103 11.375 1.6234 12.7002 -5.55184e-07ZM5.3107 23.7627C3.63771 22.5899 1.86221 21.5534 0.000311902 20.6694C0.516837 18.976 0.794702 17.1784 0.794702 15.316C0.794702 13.4532 0.516736 11.6553 3.00821e-05 9.9616C1.86203 9.07753 3.63762 8.04101 5.3107 6.86817C5.95048 9.57999 6.28902 12.4082 6.28902 15.3154C6.28902 18.2227 5.95049 21.0509 5.3107 23.7627ZM19.1114 15.3154C19.1114 18.2227 19.4499 21.051 20.0897 23.7628C21.763 22.5898 23.5388 21.5531 25.4011 20.669C24.8847 18.9757 24.6069 17.1783 24.6069 15.3159C24.6069 13.4534 24.8848 11.6557 25.4014 9.96213C23.539 9.07794 21.7631 8.04124 20.0897 6.86817C19.4499 9.57999 19.1114 12.4082 19.1114 15.3154Z\"\n        />\n      </g>\n    </svg>\n  );\n\n  const logoWithLabel = (\n    <Flex\n      className={css({\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        fill: 'ink.50',\n        _dark: { fill: 'ink.70' },\n        _hover: { ...gradientFill },\n        _active: { ...gradientFill },\n        _focus: { ...gradientFill },\n      })}\n    >\n      <p\n        className={css({\n          color: 'ink.50',\n          _dark: { color: 'ink.70' },\n          _groupHover: enableLink ? { color: 'text.tertiary' } : {},\n          fontSize: 'xs',\n          mr: 2,\n        })}\n      >\n        {label}\n      </p>\n      {logoSVG}\n    </Flex>\n  );\n\n  return (\n    <div className={css({ cursor: enableLink ? 'pointer' : 'default' }) + ' group'}>\n      {enableLink && (\n        <a\n          onClick={e => {\n            if (onClickOverride) {\n              e.preventDefault();\n              onClickOverride();\n            }\n          }}\n          tabIndex={0}\n          aria-label=\"Secured by Magic\"\n          href=\"https://magic.link/\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {logoWithLabel}\n        </a>\n      )}\n\n      {!enableLink && logoWithLabel}\n    </div>\n  );\n};\n\nSecuredByMagic.displayName = 'SecuredByMagic';\n\nexport default SecuredByMagic;\n"],"names":["SecuredByMagic","enableLink","label","onClickOverride","gradientFill","logoSVG","_jsxs","_jsx","logoWithLabel","Flex","css","e"],"mappings":"uHASMA,MAAAA,EAAiB,CAAC,CAAE,WAAAC,EAAa,GAAM,MAAAC,EAAQ,aAAc,gBAAAC,CAAe,IAA2B,CAC3G,MAAMC,EAAeH,EAAa,CAAE,KAAM,uBAAyB,EAAG,GAEhEI,EACJC,SAAK,MAAO,GAAI,OAAQ,GAAI,QAAQ,YAAY,MAAM,6BAA4B,SAAA,CAChFC,EACE,OAAA,CAAA,SAAAD,EAAA,iBAAA,CAAgB,GAAG,gBAAgB,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,cAAc,2BACpFC,EAAM,OAAA,CAAA,OAAO,KAAK,UAAU,YAC5BA,EAAA,OAAA,CAAM,OAAO,MAAM,UAAU,SAAY,CAAA,EACzCA,EAAM,OAAA,CAAA,OAAO,MAAM,UAAU,YAC7BA,EAAA,OAAA,CAAM,OAAO,OAAO,UAAU,SAAY,CAAA,EAC1CA,aAAS,cAAc,KAAK,KAAK,QAAQ,GAAG,OAAO,IAAI,KAAK,YAAY,eACxEA,EAAA,UAAA,CAAS,cAAc,KAAK,KAAK,KAAK,GAAG,OAAO,IAAI,KAAK,YAAY,YAAY,CAAA,CAAG,GAEjF,CAAA,EAEPD,iBACEC,EAAM,OAAA,CAAA,EAAE,8JACRA,EAAA,OAAA,CAAM,EAAE,6pBACRA,EAAA,OAAA,CAAM,EAAE,qpBACRA,EAAA,OAAA,CAAM,EAAE,oQACRA,EAAA,OAAA,CAAM,EAAE,8ZAAia,CAAA,EACzaA,UACE,SAAS,UACT,SAAS,UACT,EAAE,6/BACF,CACA,CAAA,CAAA,CAAA,CAAA,EAIFC,EACJF,EAACG,EACC,CAAA,UAAWC,EAAI,CACb,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,KAAM,SACN,MAAO,CAAE,KAAM,QAAU,EACzB,OAAQ,CAAE,GAAGN,CAAc,EAC3B,QAAS,CAAE,GAAGA,CAAc,EAC5B,OAAQ,CAAE,GAAGA,CAAc,CAC5B,CAAA,EAED,SAAA,CAAAG,EAAA,IAAA,CACE,UAAWG,EAAI,CACb,MAAO,SACP,MAAO,CAAE,MAAO,QAAU,EAC1B,YAAaT,EAAa,CAAE,MAAO,eAAe,EAAK,CAAA,EACvD,SAAU,KACV,GAAI,CACL,CAAA,WAEAC,CAAK,CAAA,EAEPG,CAAO,CAAA,CAAA,EAIZ,OACEC,EAAA,MAAA,CAAK,UAAWI,EAAI,CAAE,OAAQT,EAAa,UAAY,SAAS,CAAE,EAAI,SACnE,SAAA,CAAAA,GACCM,EACE,IAAA,CAAA,QAASI,GAAI,CACPR,IACFQ,EAAE,iBACFR,IAEJ,EACA,SAAU,EACC,aAAA,mBACX,KAAK,sBACL,OAAO,SACP,IAAI,sBAEH,SAAAK,CACC,CAAA,EAGL,CAACP,GAAcO,CAAa,CAAA,CAAA,CAGnC,EAEAR,EAAe,YAAc"}
+{"version":3,"file":"secured-by-magic.js","sources":["../../../../src/components/utils/secured-by-magic.tsx"],"sourcesContent":["import { cn } from '@lib/cn';\n\nexport type SecuredByMagicProps = {\n  enableLink?: boolean;\n  label?: string;\n  onClickOverride?: () => void;\n};\n\nconst SecuredByMagic = ({ enableLink = true, label = 'Secured by', onClickOverride }: SecuredByMagicProps) => {\n  const logoSVG = (\n    <svg width={62} height={23} viewBox=\"0 0 83 31\" xmlns=\"http://www.w3.org/2000/svg\">\n      <defs>\n        <linearGradient id=\"logo-gradient\" x1=\"-100%\" y1=\"0%\" x2=\"100%\" y2=\"0%\" gradientUnits=\"userSpaceOnUse\">\n          <stop offset=\"0%\" stopColor=\"#402FC3\" />\n          <stop offset=\"33%\" stopColor=\"#C970FF\" />\n          <stop offset=\"67%\" stopColor=\"#C970FF\" />\n          <stop offset=\"100%\" stopColor=\"#402FC3\" />\n          <animate attributeName=\"x1\" from=\"-100%\" to=\"100%\" dur=\"4s\" repeatCount=\"indefinite\" />\n          <animate attributeName=\"x2\" from=\"0%\" to=\"200%\" dur=\"4s\" repeatCount=\"indefinite\" />\n        </linearGradient>\n      </defs>\n\n      <g>\n        <path d=\"M45.1797 20.8929H47.7932V8.70022H44.1379L41.1771 16.3047L38.2163 8.70022H34.5792V20.8929H37.1745V12.1186L40.6105 20.8929H41.7437L45.1797 12.1186V20.8929Z\" />\n        <path d=\"M55.4597 20.8929H57.7808V15.1896C57.7808 12.6487 55.9349 11.8444 53.9245 11.8444C52.5354 11.8444 51.1464 12.2831 50.0681 13.2336L50.9454 14.7874C51.6947 14.0928 52.572 13.7455 53.5224 13.7455C54.6921 13.7455 55.4597 14.3304 55.4597 15.2262V16.4509C54.8748 15.738 53.8331 15.3724 52.6634 15.3724C51.2561 15.3724 49.5929 16.1219 49.5929 18.1875C49.5929 20.1617 51.2561 21.1123 52.6634 21.1123C53.8148 21.1123 54.8566 20.6918 55.4597 19.9789V20.8929ZM55.4597 18.7725C55.0759 19.2843 54.3448 19.5402 53.5955 19.5402C52.6816 19.5402 51.9323 19.0649 51.9323 18.2423C51.9323 17.4015 52.6816 16.9079 53.5955 16.9079C54.3448 16.9079 55.0759 17.1638 55.4597 17.6757V18.7725Z\" />\n        <path d=\"M59.9003 23.1596C60.9969 24.1285 62.1849 24.4758 63.7019 24.4758C65.8768 24.4758 68.4721 23.6532 68.4721 20.2897V12.0637H66.1327V13.1971C65.4199 12.3014 64.4695 11.8444 63.4094 11.8444C61.1797 11.8444 59.5165 13.453 59.5165 16.3412C59.5165 19.2843 61.198 20.8381 63.4094 20.8381C64.4878 20.8381 65.4382 20.3262 66.1327 19.4488V20.3445C66.1327 22.0811 64.8167 22.5747 63.7019 22.5747C62.587 22.5747 61.6549 22.2639 60.9421 21.4779L59.9003 23.1596ZM66.1327 17.7671C65.7489 18.3337 64.9081 18.7725 64.1405 18.7725C62.8246 18.7725 61.9108 17.8585 61.9108 16.3412C61.9108 14.824 62.8246 13.91 64.1405 13.91C64.9081 13.91 65.7489 14.3304 66.1327 14.9154V17.7671Z\" />\n        <path d=\"M71.9256 10.7659C72.6933 10.7659 73.3147 10.1443 73.3147 9.37658C73.3147 8.60882 72.6933 7.9873 71.9256 7.9873C71.1763 7.9873 70.5366 8.60882 70.5366 9.37658C70.5366 10.1443 71.1763 10.7659 71.9256 10.7659ZM70.7742 20.8929H73.0953V12.0637H70.7742V20.8929Z\" />\n        <path d=\"M74.8303 16.4692C74.8303 19.1929 76.7859 21.1123 79.5092 21.1123C81.3185 21.1123 82.4151 20.3262 83 19.5037L81.483 18.0961C81.0627 18.6811 80.423 19.0467 79.6188 19.0467C78.2115 19.0467 77.2246 18.0047 77.2246 16.4692C77.2246 14.9337 78.2115 13.91 79.6188 13.91C80.423 13.91 81.0627 14.2573 81.483 14.8606L83 13.453C82.4151 12.6304 81.3185 11.8444 79.5092 11.8444C76.7859 11.8444 74.8303 13.7638 74.8303 16.4692Z\" />\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M12.7002 -5.55184e-07C14.0256 1.62362 15.4875 3.13142 17.0683 4.50592C16.0151 7.92275 15.4481 11.5529 15.4481 15.3154C15.4481 19.078 16.0151 22.7082 17.0684 26.125C15.4876 27.4995 14.0257 29.0073 12.7003 30.6309C11.375 29.0075 9.91333 27.4998 8.33271 26.1255C9.38605 22.7085 9.95313 19.0782 9.95313 15.3154C9.95313 11.5527 9.38605 7.92237 8.3327 4.50537C9.9133 3.13103 11.375 1.6234 12.7002 -5.55184e-07ZM5.3107 23.7627C3.63771 22.5899 1.86221 21.5534 0.000311902 20.6694C0.516837 18.976 0.794702 17.1784 0.794702 15.316C0.794702 13.4532 0.516736 11.6553 3.00821e-05 9.9616C1.86203 9.07753 3.63762 8.04101 5.3107 6.86817C5.95048 9.57999 6.28902 12.4082 6.28902 15.3154C6.28902 18.2227 5.95049 21.0509 5.3107 23.7627ZM19.1114 15.3154C19.1114 18.2227 19.4499 21.051 20.0897 23.7628C21.763 22.5898 23.5388 21.5531 25.4011 20.669C24.8847 18.9757 24.6069 17.1783 24.6069 15.3159C24.6069 13.4534 24.8848 11.6557 25.4014 9.96213C23.539 9.07794 21.7631 8.04124 20.0897 6.86817C19.4499 9.57999 19.1114 12.4082 19.1114 15.3154Z\"\n        />\n      </g>\n    </svg>\n  );\n\n  const logoWithLabel = (\n    <div\n      className={cn(\n        'flex items-center justify-center fill-ink-50 dark:fill-ink-70',\n        enableLink &&\n          'hover:fill-[url(#logo-gradient)] active:fill-[url(#logo-gradient)] focus:fill-[url(#logo-gradient)]',\n      )}\n    >\n      <p className={cn('text-ink-50 dark:text-ink-70 text-xs mr-2', enableLink && 'group-hover:text-text-tertiary')}>\n        {label}\n      </p>\n      {logoSVG}\n    </div>\n  );\n\n  return (\n    <div className={cn(enableLink ? 'cursor-pointer' : 'cursor-default', 'group')}>\n      {enableLink && (\n        <a\n          onClick={e => {\n            if (onClickOverride) {\n              e.preventDefault();\n              onClickOverride();\n            }\n          }}\n          tabIndex={0}\n          aria-label=\"Secured by Magic\"\n          href=\"https://magic.link/\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {logoWithLabel}\n        </a>\n      )}\n\n      {!enableLink && logoWithLabel}\n    </div>\n  );\n};\n\nSecuredByMagic.displayName = 'SecuredByMagic';\n\nexport default SecuredByMagic;\n"],"names":["SecuredByMagic","enableLink","label","onClickOverride","logoSVG","_jsxs","_jsx","logoWithLabel","cn","e"],"mappings":"uFAQA,MAAMA,EAAiB,CAAC,CAAE,WAAAC,EAAa,GAAM,MAAAC,EAAQ,aAAc,gBAAAC,CAAe,IAA2B,CAC3G,MAAMC,EACJC,SAAK,MAAO,GAAI,OAAQ,GAAI,QAAQ,YAAY,MAAM,6BAA4B,SAAA,CAChFC,EACE,OAAA,CAAA,SAAAD,EAAA,iBAAA,CAAgB,GAAG,gBAAgB,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,cAAc,2BACpFC,EAAM,OAAA,CAAA,OAAO,KAAK,UAAU,YAC5BA,EAAA,OAAA,CAAM,OAAO,MAAM,UAAU,SAAY,CAAA,EACzCA,EAAM,OAAA,CAAA,OAAO,MAAM,UAAU,YAC7BA,EAAA,OAAA,CAAM,OAAO,OAAO,UAAU,SAAY,CAAA,EAC1CA,aAAS,cAAc,KAAK,KAAK,QAAQ,GAAG,OAAO,IAAI,KAAK,YAAY,eACxEA,EAAA,UAAA,CAAS,cAAc,KAAK,KAAK,KAAK,GAAG,OAAO,IAAI,KAAK,YAAY,YAAY,CAAA,CAAG,GAEjF,CAAA,EAEPD,iBACEC,EAAM,OAAA,CAAA,EAAE,8JACRA,EAAA,OAAA,CAAM,EAAE,6pBACRA,EAAA,OAAA,CAAM,EAAE,qpBACRA,EAAA,OAAA,CAAM,EAAE,oQACRA,EAAA,OAAA,CAAM,EAAE,8ZAAia,CAAA,EACzaA,UACE,SAAS,UACT,SAAS,UACT,EAAE,6/BACF,CACA,CAAA,CAAA,CAAA,CAAA,EAIFC,EACJF,EACE,MAAA,CAAA,UAAWG,EACT,gEACAP,GACE,qGAAqG,YAGzGK,EAAG,IAAA,CAAA,UAAWE,EAAG,4CAA6CP,GAAc,gCAAgC,WACzGC,CAAK,CAAA,EAEPE,CAAO,CAAA,CAAA,EAIZ,OACEC,EAAK,MAAA,CAAA,UAAWG,EAAGP,EAAa,iBAAmB,iBAAkB,OAAO,EAAC,SAAA,CAC1EA,GACCK,EAAA,IAAA,CACE,QAASG,GAAI,CACPN,IACFM,EAAE,eACFN,EAAAA,EAAAA,EAEJ,EACA,SAAU,EACC,aAAA,mBACX,KAAK,sBACL,OAAO,SACP,IAAI,sBAEH,SAAAI,CACC,CAAA,EAGL,CAACN,GAAcM,CAAa,CAAA,CAAA,CAGnC,EAEAP,EAAe,YAAc"}

package/dist/es/components/utils/shared-logo.js

@@ -1,2 +1,2 @@
-import{jsxs as m,jsx as r}from"react/jsx-runtime";import{token as a}from"@styled/tokens";import n from"../icons/ico-rocket-fill.js";import d from"../logos/icon-magic-logo.js";import{css as i}from"@styled/css";import{Flex as t,Box as c}from"@styled/jsx";const l=({assetUri:e})=>{const s=e?.includes("blank.png"),o=!e||s;return m(t,{children:[r(t,{className:i({animation:"fadeIn 0.5s, moveRight 1s 0.5s forwards",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:o?"magic.10":"surface.primary",borderRadius:"50%",borderWidth:"3px",borderStyle:"solid",borderColor:"surface.primary",height:"3.875rem",width:"3.875rem",marginTop:"-3px",marginRight:"0.9rem",overflow:"hidden",zIndex:1}),children:o?r(n,{height:34,width:34,color:a("colors.magic.30")}):r("img",{alt:"logo",height:56,width:56,src:e})}),r(c,{className:i({marginLeft:"0.9rem",animation:"fadeIn 0.5s, moveLeft 1s  0.5s forwards"}),children:r(d,{height:56,width:56})})]})};export{l as default};
+import{jsxs as m,jsx as r}from"react/jsx-runtime";import o from"../icons/ico-rocket-fill.js";import a from"../logos/icon-magic-logo.js";import{cn as t}from"../../lib/cn.js";const d=({assetUri:e})=>{const s=e?.includes("blank.png"),i=!e||s;return m("div",{className:"flex",children:[r("div",{className:t("flex items-center justify-center rounded-full border-[3px] border-solid border-surface-primary h-[3.875rem] w-[3.875rem] -mt-[3px] mr-[0.9rem] overflow-hidden z-[1] animate-[fadeIn_0.5s,moveRight_1s_0.5s_forwards]",i?"bg-magic-10":"bg-surface-primary"),children:i?r(o,{height:34,width:34,color:"var(--color-magic-30)"}):r("img",{alt:"logo",height:56,width:56,src:e})}),r("div",{className:"ml-[0.9rem] animate-[fadeIn_0.5s,moveLeft_1s_0.5s_forwards]",children:r(a,{height:56,width:56})})]})};export{d as default};
 //# sourceMappingURL=shared-logo.js.map

package/dist/es/components/utils/shared-logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared-logo.js","sources":["../../../../src/components/utils/shared-logo.tsx"],"sourcesContent":["import { IcoRocketFill } from '@components/icons';\nimport { IconMagicLogo } from '@components/logos';\nimport { css } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nexport interface SharedLogoProps {\n  assetUri: string | undefined | null;\n}\n\nconst SharedLogo = ({ assetUri }: SharedLogoProps) => {\n  const isBlankLogoUrl = assetUri?.includes('blank.png');\n  const useFallbackImage = !assetUri || isBlankLogoUrl;\n\n  const styles = {\n    animation: 'fadeIn 0.5s, moveRight 1s 0.5s forwards',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: useFallbackImage ? 'magic.10' : 'surface.primary',\n    borderRadius: '50%',\n    borderWidth: '3px',\n    borderStyle: 'solid',\n    borderColor: 'surface.primary',\n    height: '3.875rem',\n    width: '3.875rem',\n    marginTop: '-3px',\n    marginRight: '0.9rem',\n    overflow: 'hidden',\n    zIndex: 1,\n  };\n\n  return (\n    <Flex>\n      <Flex className={css(styles)}>\n        {useFallbackImage ? (\n          <IcoRocketFill height={34} width={34} color={token('colors.magic.30')} />\n        ) : (\n          <img alt=\"logo\" height={56} width={56} src={assetUri} />\n        )}\n      </Flex>\n      <Box\n        className={css({\n          marginLeft: '0.9rem',\n          animation: 'fadeIn 0.5s, moveLeft 1s  0.5s forwards',\n        })}\n      >\n        <IconMagicLogo height={56} width={56} />\n      </Box>\n    </Flex>\n  );\n};\n\nexport default SharedLogo;\n"],"names":["SharedLogo","assetUri","isBlankLogoUrl","useFallbackImage","_jsxs","Flex","_jsx","css","IcoRocketFill","token","Box","IconMagicLogo"],"mappings":"6PAUA,MAAMA,EAAa,CAAC,CAAE,SAAAC,CAAQ,IAAuB,CACnD,MAAMC,EAAiBD,GAAU,SAAS,WAAW,EAC/CE,EAAmB,CAACF,GAAYC,EAoBtC,OACEE,EAACC,EAAI,CAAA,SAAA,CACHC,EAACD,EAAI,CAAC,UAAWE,EApBN,CACb,UAAW,0CACX,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,gBAAiBJ,EAAmB,WAAa,kBACjD,aAAc,MACd,YAAa,MACb,YAAa,QACb,YAAa,kBACb,OAAQ,WACR,MAAO,WACP,UAAW,OACX,YAAa,SACb,SAAU,SACV,OAAQ,EAKqB,WACxBA,EACCG,EAACE,EAAa,CAAC,OAAQ,GAAI,MAAO,GAAI,MAAOC,EAAM,iBAAiB,CAAK,CAAA,EAEzEH,EAAA,MAAA,CAAK,IAAI,OAAO,OAAQ,GAAI,MAAO,GAAI,IAAKL,GAC7C,CAAA,EAEHK,EAACI,EAAG,CACF,UAAWH,EAAI,CACb,WAAY,SACZ,UAAW,yCACZ,CAAA,EAED,SAAAD,EAACK,EAAa,CAAC,OAAQ,GAAI,MAAO,EAAE,CAAA,CAChC,CAAA,CAAA,CAAA,CAAA,CAGZ"}
+{"version":3,"file":"shared-logo.js","sources":["../../../../src/components/utils/shared-logo.tsx"],"sourcesContent":["import { IcoRocketFill } from '@components/icons';\nimport { IconMagicLogo } from '@components/logos';\nimport { cn } from '@lib/cn';\n\nexport interface SharedLogoProps {\n  assetUri: string | undefined | null;\n}\n\nconst SharedLogo = ({ assetUri }: SharedLogoProps) => {\n  const isBlankLogoUrl = assetUri?.includes('blank.png');\n  const useFallbackImage = !assetUri || isBlankLogoUrl;\n\n  return (\n    <div className=\"flex\">\n      <div\n        className={cn(\n          'flex items-center justify-center rounded-full border-[3px] border-solid border-surface-primary h-[3.875rem] w-[3.875rem] -mt-[3px] mr-[0.9rem] overflow-hidden z-[1] animate-[fadeIn_0.5s,moveRight_1s_0.5s_forwards]',\n          useFallbackImage ? 'bg-magic-10' : 'bg-surface-primary',\n        )}\n      >\n        {useFallbackImage ? (\n          <IcoRocketFill height={34} width={34} color={'var(--color-magic-30)'} />\n        ) : (\n          <img alt=\"logo\" height={56} width={56} src={assetUri} />\n        )}\n      </div>\n      <div className=\"ml-[0.9rem] animate-[fadeIn_0.5s,moveLeft_1s_0.5s_forwards]\">\n        <IconMagicLogo height={56} width={56} />\n      </div>\n    </div>\n  );\n};\n\nexport default SharedLogo;\n"],"names":["SharedLogo","assetUri","isBlankLogoUrl","useFallbackImage","_jsxs","_jsx","cn","IcoRocketFill","IconMagicLogo"],"mappings":"mLAQMA,EAAa,CAAC,CAAE,SAAAC,CAAQ,IAAuB,CACnD,MAAMC,EAAiBD,GAAU,SAAS,WAAW,EAC/CE,EAAmB,CAACF,GAAYC,EAEtC,OACEE,EAAK,MAAA,CAAA,UAAU,OAAM,SAAA,CACnBC,SACE,UAAWC,EACT,wNACAH,EAAmB,cAAgB,oBAAoB,WAGxDA,EACCE,EAACE,EAAa,CAAC,OAAQ,GAAI,MAAO,GAAI,MAAO,uBAAuB,CAAA,EAEpEF,SAAK,IAAI,OAAO,OAAQ,GAAI,MAAO,GAAI,IAAKJ,CAAY,CAAA,CAEtD,CAAA,EACNI,SAAK,UAAU,8DACb,SAAAA,EAACG,EAAc,CAAA,OAAQ,GAAI,MAAO,IAC9B,CAAA,CAAA,CAAA,CAAA,CAGZ"}