@magiclabs/ui-components 1.35.2 → 1.35.4

package/dist/cjs/components/containers/modal.js

@@ -1,2 +1,2 @@
-"use strict";var i=require("react/jsx-runtime"),h=require("../../hooks/useDisplayState.js"),v=require("../../recipes/modal.js"),w=require("@styled/jsx");const y=()=>{if(typeof navigator>"u")return!1;const e=navigator.userAgent;return/iPad|iPhone/i.test(e)&&/WebKit/i.test(e)&&!/CriOS/i.test(e)},S=y(),r=({animate:e=!0,paddingType:t="none",gap:s=2.5,isOpen:n=!0,onAnimated:o=()=>{},onClosed:d=()=>{},showBorder:l=!0,fullscreen:u=!1,children:c})=>{const a=v.modal({animate:e,isOpen:n,paddingType:t,showBorder:l,fullscreen:u,isSafariMobile:S}),{displayed:p,onHide:m,onShow:g}=h.useDisplayState({animate:e,show:n,onHidden:d,onShown:o});return p?i.jsx("div",{className:a.wrapper,onAnimationEnd:n?g:m,children:i.jsx(w.VStack,{alignItems:"center",gap:s,className:a.content,children:c})}):null};r.displayName="Modal",exports.Modal=r;
+"use strict";var i=require("react/jsx-runtime"),g=require("../../hooks/useDisplayState.js"),w=require("../../recipes/modal.js"),v=require("@styled/jsx");const y=()=>{if(typeof navigator>"u")return!1;const e=navigator.userAgent;return/Mobi|Android|iPhone|iPad/i.test(e)},M=y(),r=({animate:e=!0,paddingType:o="none",gap:s=2.5,isOpen:n=!0,onAnimated:t=()=>{},onClosed:d=()=>{},showBorder:l=!0,fullscreen:u=!1,children:c})=>{const a=w.modal({animate:e,isOpen:n,paddingType:o,showBorder:l,fullscreen:u,isMobileBrowser:M}),{displayed:p,onHide:m,onShow:h}=g.useDisplayState({animate:e,show:n,onHidden:d,onShown:t});return p?i.jsx("div",{className:a.wrapper,onAnimationEnd:n?h:m,children:i.jsx(v.VStack,{alignItems:"center",gap:s,className:a.content,children:c})}):null};r.displayName="Modal",exports.Modal=r;
 //# sourceMappingURL=modal.js.map

package/dist/cjs/components/containers/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n  animate?: boolean;\n  paddingType?: 'none' | 'sm' | 'md' | 'lg';\n  gap?: number;\n  isOpen?: boolean;\n  onAnimated?: () => void;\n  onClosed?: () => void;\n  showBorder?: boolean;\n  fullscreen?: boolean;\n}\n\nconst isIosSafari = () => {\n  if (typeof navigator === 'undefined') {\n    return false;\n  }\n  const ua = navigator.userAgent;\n  return /iPad|iPhone/i.test(ua) && /WebKit/i.test(ua) && !/CriOS/i.test(ua);\n};\n\nconst isSafariMobile = isIosSafari();\n\nexport const Modal = ({\n  animate = true,\n  paddingType = 'none',\n  gap = 2.5,\n  isOpen = true,\n  onAnimated = () => {},\n  onClosed = () => {},\n  showBorder = true,\n  fullscreen = false,\n  children,\n}: ModalProps) => {\n  const classes = modal({ animate, isOpen, paddingType, showBorder, fullscreen, isSafariMobile });\n  const { displayed, onHide, onShow } = useDisplayState({\n    animate,\n    show: isOpen,\n    onHidden: onClosed,\n    onShown: onAnimated,\n  });\n\n  if (!displayed) {\n    return null;\n  }\n\n  return (\n    <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n      <VStack alignItems=\"center\" gap={gap} className={classes.content}>\n        {children}\n      </VStack>\n    </div>\n  );\n};\n\nModal.displayName = 'Modal';\n"],"names":["isIosSafari","ua","isSafariMobile","Modal","animate","paddingType","gap","isOpen","onAnimated","onClosed","showBorder","fullscreen","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"yJAeA,MAAMA,EAAc,IAAK,CACvB,GAAI,OAAO,UAAc,IACvB,MAAO,GAET,MAAMC,EAAK,UAAU,UACrB,MAAO,eAAe,KAAKA,CAAE,GAAK,UAAU,KAAKA,CAAE,GAAK,CAAC,SAAS,KAAKA,CAAE,CAC3E,EAEMC,EAAiBF,EAEhB,EAAMG,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,IAAAC,EAAM,IACN,OAAAC,EAAS,GACT,WAAAC,EAAa,KAAO,EACpB,SAAAC,EAAW,IAAK,CAAE,EAClB,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,SAAAC,CACW,IAAI,CACf,MAAMC,EAAUC,EAAAA,MAAM,CAAE,QAAAV,EAAS,OAAAG,EAAQ,YAAAF,EAAa,WAAAK,EAAY,WAAAC,EAAY,eAAAT,CAAc,CAAE,EACxF,CAAE,UAAAa,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAAA,gBAAgB,CACpD,QAAAd,EACA,KAAMG,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKO,EAKHI,EAAK,IAAA,MAAA,CAAA,UAAWN,EAAQ,QAAS,eAAgBN,EAASU,EAASD,EAAM,SACvEG,EAAAA,IAACC,UAAO,WAAW,SAAS,IAAKd,EAAK,UAAWO,EAAQ,QAAO,SAC7DD,CACM,CAAA,CAAA,CAAA,EAPJ,IAUX,EAEAT,EAAM,YAAc"}
+{"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n  animate?: boolean;\n  paddingType?: 'none' | 'sm' | 'md' | 'lg';\n  gap?: number;\n  isOpen?: boolean;\n  onAnimated?: () => void;\n  onClosed?: () => void;\n  showBorder?: boolean;\n  fullscreen?: boolean;\n}\n\nconst isMobile = () => {\n  if (typeof navigator === 'undefined') {\n    return false;\n  }\n  const ua = navigator.userAgent;\n  return /Mobi|Android|iPhone|iPad/i.test(ua);\n};\n\nconst isMobileBrowser = isMobile();\n\nexport const Modal = ({\n  animate = true,\n  paddingType = 'none',\n  gap = 2.5,\n  isOpen = true,\n  onAnimated = () => {},\n  onClosed = () => {},\n  showBorder = true,\n  fullscreen = false,\n  children,\n}: ModalProps) => {\n  const classes = modal({ animate, isOpen, paddingType, showBorder, fullscreen, isMobileBrowser });\n  const { displayed, onHide, onShow } = useDisplayState({\n    animate,\n    show: isOpen,\n    onHidden: onClosed,\n    onShown: onAnimated,\n  });\n\n  if (!displayed) {\n    return null;\n  }\n\n  return (\n    <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n      <VStack alignItems=\"center\" gap={gap} className={classes.content}>\n        {children}\n      </VStack>\n    </div>\n  );\n};\n\nModal.displayName = 'Modal';\n"],"names":["isMobile","ua","isMobileBrowser","Modal","animate","paddingType","gap","isOpen","onAnimated","onClosed","showBorder","fullscreen","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"yJAeA,MAAMA,EAAW,IAAK,CACpB,GAAI,OAAO,UAAc,IACvB,MAAO,GAET,MAAMC,EAAK,UAAU,UACrB,MAAO,4BAA4B,KAAKA,CAAE,CAC5C,EAEMC,EAAkBF,IAEXG,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,IAAAC,EAAM,IACN,OAAAC,EAAS,GACT,WAAAC,EAAa,OACb,SAAAC,EAAW,IAAK,CAAA,EAChB,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,SAAAC,CACW,IAAI,CACf,MAAMC,EAAUC,EAAAA,MAAM,CAAE,QAAAV,EAAS,OAAAG,EAAQ,YAAAF,EAAa,WAAAK,EAAY,WAAAC,EAAY,gBAAAT,CAAe,CAAE,EACzF,CAAE,UAAAa,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAAA,gBAAgB,CACpD,QAAAd,EACA,KAAMG,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKO,EAKHI,EAAAA,IAAK,MAAA,CAAA,UAAWN,EAAQ,QAAS,eAAgBN,EAASU,EAASD,EAAM,SACvEG,EAACC,IAAAA,EAAAA,QAAO,WAAW,SAAS,IAAKd,EAAK,UAAWO,EAAQ,QAAO,SAC7DD,CACM,CAAA,CAAA,CAAA,EAPJ,IAUX,EAEAT,EAAM,YAAc"}

package/dist/cjs/components/layouts/wallet-page/connection-menu.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@styled/tokens"),j=require("../../icons/ico-globe.js"),b=require("../../icons/ico-remove.js"),l=require("../../primitives/button.js");require("../../primitives/checkbox.js"),require("../../primitives/dropdown-selector.js");var n=require("../../primitives/popover.js");require("../../primitives/radio.js"),require("../../primitives/segmented-control.js"),require("../../primitives/switch.js");var s=require("../../primitives/text.js"),f=require("@styled/css/css"),t=require("@styled/jsx"),x=require("react");const p=({connected:i,connectedLabel:d="Connected",disconnectLabel:c,disconnectedLabel:u="Not connected",domain:h,logoUrl:o,onDisconnect:v})=>{const[g,a]=x.useState(!1);return x.useEffect(()=>{a(!1)},[o]),e.jsxs(n.Popover,{iconSize:28,variant:"text",children:[e.jsx(n.Popover.LeadingIcon,{color:r.token("colors.text.tertiary"),children:o&&i&&!g?e.jsxs(t.Circle,{position:"relative",maxW:"max-content",maxH:"max-content",children:[e.jsx("img",{style:{borderRadius:"50%"},width:28,height:28,src:o,alt:"app logo",onError:()=>a(!0)}),e.jsx(t.Circle,{size:"7px",position:"absolute",bg:"positive.base",borderWidth:"thin",borderColor:"surface.primary",bottom:"-1px",right:"-1px",boxSizing:"border-box"})]}):e.jsxs("svg",{width:"28",height:"28",children:[e.jsx("circle",{cx:"14",cy:"14",r:"14",fill:r.token("colors.surface.tertiary")}),e.jsx(j.default,{color:r.token("colors.text.tertiary"),x:6,y:6,height:16,width:16})]})}),e.jsxs(n.Popover.Content,{className:f.css({w:"200px"}),children:[e.jsxs(t.Stack,{w:"100%",gap:1,overflow:"hidden",children:[i?e.jsx(s.default,{size:"xs",variant:"success",fontWeight:"normal",children:d}):e.jsx(s.default,{fontColor:"text.tertiary",size:"xs",children:u}),e.jsx(s.default,{truncate:!0,children:h})]}),i&&c&&e.jsxs(e.Fragment,{children:[e.jsx(t.Divider,{color:"surface.quaternary",my:3}),e.jsx(l.default,{label:c,size:"sm",textStyle:"negative",variant:"text",onPress:v,children:e.jsx(l.default.LeadingIcon,{children:e.jsxs("svg",{width:"20",height:"20",children:[e.jsx("circle",{cx:"8",cy:"8",r:"8",fill:r.token("colors.negative.lightest")}),e.jsx(b.default,{color:r.token("colors.negative.base"),x:3,y:3,height:10,width:10})]})})})]})]})]})};exports.ConnectionMenu=p;
+"use strict";var e=require("react/jsx-runtime"),r=require("@styled/tokens"),j=require("../../icons/ico-globe.js"),b=require("../../icons/ico-remove.js"),l=require("../../primitives/button.js");require("../../primitives/checkbox.js"),require("../../primitives/dropdown-selector.js");var s=require("../../primitives/popover.js");require("../../primitives/radio.js"),require("../../primitives/segmented-control.js"),require("../../primitives/switch.js");var n=require("../../primitives/text.js"),f=require("@styled/css/css"),t=require("@styled/jsx"),d=require("react");const p=({connected:i,connectedLabel:x="Connected",disconnectLabel:c,disconnectedLabel:u="Not connected",domain:h,logoUrl:o,onDisconnect:v})=>{const[g,a]=d.useState(!1);return d.useEffect(()=>{a(!1)},[o]),e.jsxs(s.Popover,{iconSize:28,variant:"text",children:[e.jsx(s.Popover.LeadingIcon,{color:r.token("colors.text.tertiary"),children:o&&i&&!g?e.jsxs(t.Circle,{position:"relative",w:7,h:7,children:[e.jsx("img",{style:{borderRadius:"50%"},width:28,height:28,src:o,alt:"app logo",onError:()=>a(!0)}),e.jsx(t.Circle,{size:"7px",position:"absolute",bg:"positive.base",borderWidth:"thin",borderColor:"surface.primary",bottom:"-1px",right:"-1px",boxSizing:"border-box"})]}):e.jsxs("svg",{width:"28",height:"28",children:[e.jsx("circle",{cx:"14",cy:"14",r:"14",fill:r.token("colors.surface.tertiary")}),e.jsx(j.default,{color:r.token("colors.text.tertiary"),x:6,y:6,height:16,width:16})]})}),e.jsxs(s.Popover.Content,{className:f.css({w:"200px"}),children:[e.jsxs(t.Stack,{w:"100%",gap:1,overflow:"hidden",children:[i?e.jsx(n.default,{size:"xs",variant:"success",fontWeight:"normal",children:x}):e.jsx(n.default,{fontColor:"text.tertiary",size:"xs",children:u}),e.jsx(n.default,{truncate:!0,children:h})]}),i&&c&&e.jsxs(e.Fragment,{children:[e.jsx(t.Divider,{color:"surface.quaternary",my:3}),e.jsx(l.default,{label:c,size:"sm",textStyle:"negative",variant:"text",onPress:v,children:e.jsx(l.default.LeadingIcon,{children:e.jsxs("svg",{width:"20",height:"20",children:[e.jsx("circle",{cx:"8",cy:"8",r:"8",fill:r.token("colors.negative.lightest")}),e.jsx(b.default,{color:r.token("colors.negative.base"),x:3,y:3,height:10,width:10})]})})})]})]})]})};exports.ConnectionMenu=p;
 //# sourceMappingURL=connection-menu.js.map

package/dist/cjs/components/layouts/wallet-page/connection-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"connection-menu.js","sources":["../../../../../src/components/layouts/wallet-page/connection-menu.tsx"],"sourcesContent":["import { IcoGlobe, IcoRemove } from '@components/icons';\nimport { Button, Popover, Text } from '@components/primitives';\nimport { css } from '@styled/css/css';\nimport { Circle, Divider, Stack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useEffect, useState } from 'react';\n\nexport interface ConnectionMenuProps {\n  connected?: boolean;\n  connectedLabel?: string;\n  disconnectLabel?: string;\n  disconnectedLabel?: string;\n  domain: string;\n  logoUrl?: string;\n  onDisconnect?: () => void;\n}\n\nexport const ConnectionMenu = ({\n  connected,\n  connectedLabel = 'Connected',\n  disconnectLabel,\n  disconnectedLabel = 'Not connected',\n  domain,\n  logoUrl,\n  onDisconnect,\n}: ConnectionMenuProps) => {\n  const [error, setError] = useState(false);\n\n  useEffect(() => {\n    setError(false);\n  }, [logoUrl]);\n\n  return (\n    <Popover iconSize={28} variant=\"text\">\n      <Popover.LeadingIcon color={token('colors.text.tertiary')}>\n        {logoUrl && connected && !error ? (\n          <Circle position=\"relative\" maxW=\"max-content\" maxH=\"max-content\">\n            <img\n              style={{ borderRadius: '50%' }}\n              width={28}\n              height={28}\n              src={logoUrl}\n              alt=\"app logo\"\n              onError={() => setError(true)}\n            />\n            <Circle\n              size=\"7px\"\n              position=\"absolute\"\n              bg=\"positive.base\"\n              borderWidth=\"thin\"\n              borderColor=\"surface.primary\"\n              bottom=\"-1px\"\n              right=\"-1px\"\n              boxSizing=\"border-box\"\n            />\n          </Circle>\n        ) : (\n          <svg width=\"28\" height=\"28\">\n            <circle cx=\"14\" cy=\"14\" r=\"14\" fill={token('colors.surface.tertiary')} />\n            <IcoGlobe color={token('colors.text.tertiary')} x={6} y={6} height={16} width={16} />\n          </svg>\n        )}\n      </Popover.LeadingIcon>\n      <Popover.Content className={css({ w: '200px' })}>\n        <Stack w=\"100%\" gap={1} overflow=\"hidden\">\n          {!connected ? (\n            <Text fontColor=\"text.tertiary\" size=\"xs\">\n              {disconnectedLabel}\n            </Text>\n          ) : (\n            <Text size=\"xs\" variant=\"success\" fontWeight=\"normal\">\n              {connectedLabel}\n            </Text>\n          )}\n          <Text truncate>{domain}</Text>\n        </Stack>\n        {connected && disconnectLabel && (\n          <>\n            <Divider color=\"surface.quaternary\" my={3} />\n            <Button label={disconnectLabel} size=\"sm\" textStyle=\"negative\" variant=\"text\" onPress={onDisconnect}>\n              <Button.LeadingIcon>\n                <svg width=\"20\" height=\"20\">\n                  <circle cx=\"8\" cy=\"8\" r=\"8\" fill={token('colors.negative.lightest')} />\n                  <IcoRemove color={token('colors.negative.base')} x={3} y={3} height={10} width={10} />\n                </svg>\n              </Button.LeadingIcon>\n            </Button>\n          </>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n};\n"],"names":["ConnectionMenu","connected","connectedLabel","disconnectLabel","disconnectedLabel","domain","logoUrl","onDisconnect","error","setError","useState","useEffect","_jsxs","Popover","_jsx","token","Circle","IcoGlobe","css","Stack","Text","_Fragment","Divider","Button","IcoRemove"],"mappings":"sjBAiBa,MAAAA,EAAiB,CAAC,CAC7B,UAAAC,EACA,eAAAC,EAAiB,YACjB,gBAAAC,EACA,kBAAAC,EAAoB,gBACpB,OAAAC,EACA,QAAAC,EACA,aAAAC,CACoB,IAAI,CACxB,KAAM,CAACC,EAAOC,CAAQ,EAAIC,WAAS,EAAK,EAExC,OAAAC,YAAU,IAAK,CACbF,EAAS,EAAK,CAChB,EAAG,CAACH,CAAO,CAAC,EAGVM,EAAAA,KAACC,EAAAA,SAAQ,SAAU,GAAI,QAAQ,OAAM,SAAA,CACnCC,MAACD,EAAQ,QAAA,YAAY,CAAA,MAAOE,EAAAA,MAAM,sBAAsB,EAAC,SACtDT,GAAWL,GAAa,CAACO,EACxBI,EAACI,KAAAA,EAAAA,QAAO,SAAS,WAAW,KAAK,cAAc,KAAK,wBAClDF,EAAAA,IACE,MAAA,CAAA,MAAO,CAAE,aAAc,KAAK,EAC5B,MAAO,GACP,OAAQ,GACR,IAAKR,EACL,IAAI,WACJ,QAAS,IAAMG,EAAS,EAAI,CAAC,CAAA,EAE/BK,EAACE,IAAAA,EAAAA,QACC,KAAK,MACL,SAAS,WACT,GAAG,gBACH,YAAY,OACZ,YAAY,kBACZ,OAAO,OACP,MAAM,OACN,UAAU,YAAY,CAAA,CACtB,IAGJJ,EAAAA,YAAK,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,EAAAA,cAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAMC,EAAAA,MAAM,yBAAyB,CAAK,CAAA,EACzED,EAAAA,IAACG,EAAAA,QAAQ,CAAC,MAAOF,EAAM,MAAA,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAM,CAAA,CAAA,CAAA,CAAA,CAGrE,CAAA,EACtBH,EAAAA,KAACC,UAAQ,QAAQ,CAAA,UAAWK,EAAAA,IAAI,CAAE,EAAG,OAAS,CAAA,YAC5CN,OAACO,SAAM,EAAE,OAAO,IAAK,EAAG,SAAS,mBAC7BlB,EAKAa,EAAAA,IAACM,EAAAA,SAAK,KAAK,KAAK,QAAQ,UAAU,WAAW,kBAC1ClB,CAAc,CAAA,EALjBY,EAAAA,IAACM,WAAK,UAAU,gBAAgB,KAAK,KAAI,SACtChB,CACI,CAAA,EAMTU,EAAAA,IAACM,UAAK,CAAA,qBAAUf,CAAM,CAAA,CAAQ,IAE/BJ,GAAaE,GACZS,EAAAA,KACES,WAAA,CAAA,SAAA,CAAAP,MAACQ,EAAAA,QAAQ,CAAA,MAAM,qBAAqB,GAAI,IACxCR,EAACS,IAAAA,UAAO,CAAA,MAAOpB,EAAiB,KAAK,KAAK,UAAU,WAAW,QAAQ,OAAO,QAASI,WACrFO,EAAAA,IAACS,EAAAA,QAAO,YAAW,CAAA,SACjBX,cAAK,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,EAAAA,cAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAMC,EAAAA,MAAM,0BAA0B,CAAK,CAAA,EACvED,EAAAA,IAACU,EAAAA,QAAS,CAAC,MAAOT,EAAAA,MAAM,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAM,CAAA,CAAA,CAAA,CAAA,GAGnF,CAAA,CAAA,CAAA,CAAA,CAEZ,CACe,CAAA,CAAA,CAAA,CAAA,CAGxB"}
+{"version":3,"file":"connection-menu.js","sources":["../../../../../src/components/layouts/wallet-page/connection-menu.tsx"],"sourcesContent":["import { IcoGlobe, IcoRemove } from '@components/icons';\nimport { Button, Popover, Text } from '@components/primitives';\nimport { css } from '@styled/css/css';\nimport { Circle, Divider, Stack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useEffect, useState } from 'react';\n\nexport interface ConnectionMenuProps {\n  connected?: boolean;\n  connectedLabel?: string;\n  disconnectLabel?: string;\n  disconnectedLabel?: string;\n  domain: string;\n  logoUrl?: string;\n  onDisconnect?: () => void;\n}\n\nexport const ConnectionMenu = ({\n  connected,\n  connectedLabel = 'Connected',\n  disconnectLabel,\n  disconnectedLabel = 'Not connected',\n  domain,\n  logoUrl,\n  onDisconnect,\n}: ConnectionMenuProps) => {\n  const [error, setError] = useState(false);\n\n  useEffect(() => {\n    setError(false);\n  }, [logoUrl]);\n\n  return (\n    <Popover iconSize={28} variant=\"text\">\n      <Popover.LeadingIcon color={token('colors.text.tertiary')}>\n        {logoUrl && connected && !error ? (\n          <Circle position=\"relative\" w={7} h={7}>\n            <img\n              style={{ borderRadius: '50%' }}\n              width={28}\n              height={28}\n              src={logoUrl}\n              alt=\"app logo\"\n              onError={() => setError(true)}\n            />\n            <Circle\n              size=\"7px\"\n              position=\"absolute\"\n              bg=\"positive.base\"\n              borderWidth=\"thin\"\n              borderColor=\"surface.primary\"\n              bottom=\"-1px\"\n              right=\"-1px\"\n              boxSizing=\"border-box\"\n            />\n          </Circle>\n        ) : (\n          <svg width=\"28\" height=\"28\">\n            <circle cx=\"14\" cy=\"14\" r=\"14\" fill={token('colors.surface.tertiary')} />\n            <IcoGlobe color={token('colors.text.tertiary')} x={6} y={6} height={16} width={16} />\n          </svg>\n        )}\n      </Popover.LeadingIcon>\n      <Popover.Content className={css({ w: '200px' })}>\n        <Stack w=\"100%\" gap={1} overflow=\"hidden\">\n          {!connected ? (\n            <Text fontColor=\"text.tertiary\" size=\"xs\">\n              {disconnectedLabel}\n            </Text>\n          ) : (\n            <Text size=\"xs\" variant=\"success\" fontWeight=\"normal\">\n              {connectedLabel}\n            </Text>\n          )}\n          <Text truncate>{domain}</Text>\n        </Stack>\n        {connected && disconnectLabel && (\n          <>\n            <Divider color=\"surface.quaternary\" my={3} />\n            <Button label={disconnectLabel} size=\"sm\" textStyle=\"negative\" variant=\"text\" onPress={onDisconnect}>\n              <Button.LeadingIcon>\n                <svg width=\"20\" height=\"20\">\n                  <circle cx=\"8\" cy=\"8\" r=\"8\" fill={token('colors.negative.lightest')} />\n                  <IcoRemove color={token('colors.negative.base')} x={3} y={3} height={10} width={10} />\n                </svg>\n              </Button.LeadingIcon>\n            </Button>\n          </>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n};\n"],"names":["ConnectionMenu","connected","connectedLabel","disconnectLabel","disconnectedLabel","domain","logoUrl","onDisconnect","error","setError","useState","useEffect","_jsxs","Popover","_jsx","token","Circle","IcoGlobe","css","Stack","Text","_Fragment","Divider","Button","IcoRemove"],"mappings":"sjBAiBa,MAAAA,EAAiB,CAAC,CAC7B,UAAAC,EACA,eAAAC,EAAiB,YACjB,gBAAAC,EACA,kBAAAC,EAAoB,gBACpB,OAAAC,EACA,QAAAC,EACA,aAAAC,CACoB,IAAI,CACxB,KAAM,CAACC,EAAOC,CAAQ,EAAIC,WAAS,EAAK,EAExC,OAAAC,YAAU,IAAK,CACbF,EAAS,EAAK,CAChB,EAAG,CAACH,CAAO,CAAC,EAGVM,EAAAA,KAACC,EAAAA,SAAQ,SAAU,GAAI,QAAQ,OAAM,SAAA,CACnCC,MAACD,EAAQ,QAAA,YAAY,CAAA,MAAOE,EAAAA,MAAM,sBAAsB,EAAC,SACtDT,GAAWL,GAAa,CAACO,EACxBI,EAACI,KAAAA,EAAAA,QAAO,SAAS,WAAW,EAAG,EAAG,EAAG,YACnCF,EAAAA,IACE,MAAA,CAAA,MAAO,CAAE,aAAc,KAAK,EAC5B,MAAO,GACP,OAAQ,GACR,IAAKR,EACL,IAAI,WACJ,QAAS,IAAMG,EAAS,EAAI,CAAC,CAAA,EAE/BK,EAACE,IAAAA,EAAAA,QACC,KAAK,MACL,SAAS,WACT,GAAG,gBACH,YAAY,OACZ,YAAY,kBACZ,OAAO,OACP,MAAM,OACN,UAAU,YAAY,CAAA,CACtB,IAGJJ,EAAAA,YAAK,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,EAAAA,cAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAMC,EAAAA,MAAM,yBAAyB,CAAK,CAAA,EACzED,EAAAA,IAACG,EAAAA,QAAQ,CAAC,MAAOF,EAAM,MAAA,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAM,CAAA,CAAA,CAAA,CAAA,CAGrE,CAAA,EACtBH,EAAAA,KAACC,UAAQ,QAAQ,CAAA,UAAWK,EAAAA,IAAI,CAAE,EAAG,OAAS,CAAA,YAC5CN,OAACO,SAAM,EAAE,OAAO,IAAK,EAAG,SAAS,mBAC7BlB,EAKAa,EAAAA,IAACM,EAAAA,SAAK,KAAK,KAAK,QAAQ,UAAU,WAAW,kBAC1ClB,CAAc,CAAA,EALjBY,EAAAA,IAACM,WAAK,UAAU,gBAAgB,KAAK,KAAI,SACtChB,CACI,CAAA,EAMTU,EAAAA,IAACM,UAAK,CAAA,qBAAUf,CAAM,CAAA,CAAQ,IAE/BJ,GAAaE,GACZS,EAAAA,KACES,WAAA,CAAA,SAAA,CAAAP,MAACQ,EAAAA,QAAQ,CAAA,MAAM,qBAAqB,GAAI,IACxCR,EAACS,IAAAA,UAAO,CAAA,MAAOpB,EAAiB,KAAK,KAAK,UAAU,WAAW,QAAQ,OAAO,QAASI,WACrFO,EAAAA,IAACS,EAAAA,QAAO,YAAW,CAAA,SACjBX,cAAK,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,EAAAA,cAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAMC,EAAAA,MAAM,0BAA0B,CAAK,CAAA,EACvED,EAAAA,IAACU,EAAAA,QAAS,CAAC,MAAOT,EAAAA,MAAM,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAM,CAAA,CAAA,CAAA,CAAA,GAGnF,CAAA,CAAA,CAAA,CAAA,CAEZ,CACe,CAAA,CAAA,CAAA,CAAA,CAGxB"}

package/dist/cjs/recipes/modal.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@styled/css");const a=e.sva({slots:["content","wrapper"],base:{content:{height:"full",width:"full",boxSizing:"border-box"},wrapper:{height:"full",width:"full",bg:"surface.primary",position:"relative",overflow:"auto",scrollbarWidth:"none"}},variants:{fullscreen:{true:{wrapper:{height:"100vh",width:"100vw"}},false:{wrapper:{"@media (min-width: 48rem)":{top:12,mx:"auto",width:"25rem",height:"fit-content",boxShadow:"0px 12px 56px {colors.ink.70/15}",borderRadius:"container",_dark:{boxShadow:"none"}}}}},animate:{false:{wrapper:{animationName:"none",scale:1}}},isOpen:{true:{}},paddingType:{none:{wrapper:{p:0}},sm:{wrapper:{p:2,pb:0}},md:{wrapper:{p:4,pb:0}},lg:{wrapper:{p:8,pb:0}}},showBorder:{true:{wrapper:{"@media (min-width: 48rem)":{_dark:{borderWidth:1,borderBlock:"solid",borderColor:"neutral.secondary"}}}}},isSafariMobile:{true:{}}},compoundVariants:[{animate:!0,isOpen:!0,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleIn",animationDuration:"250ms",_motionReduce:{scale:1}}}},{animate:!0,isOpen:!1,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}},{fullscreen:!0,isSafariMobile:!0,css:{wrapper:{"@media only screen and (max-width: 767px)":{height:"90vh"}}}}],defaultVariants:{animate:!0,isOpen:!0,paddingType:"none"}});exports.modal=a;
+"use strict";var e=require("@styled/css");const a=e.sva({slots:["content","wrapper"],base:{content:{height:"full",width:"full",boxSizing:"border-box"},wrapper:{height:"full",width:"full",bg:"surface.primary",position:"relative",overflow:"auto",scrollbarWidth:"none"}},variants:{fullscreen:{true:{wrapper:{height:"100vh",width:"100vw"}},false:{wrapper:{"@media (min-width: 48rem)":{top:12,mx:"auto",width:"25rem",height:"fit-content",boxShadow:"0px 12px 56px {colors.ink.70/15}",borderRadius:"container",_dark:{boxShadow:"none"}}}}},animate:{false:{wrapper:{animationName:"none",scale:1}}},isOpen:{true:{}},paddingType:{none:{wrapper:{p:0}},sm:{wrapper:{p:2,pb:0}},md:{wrapper:{p:4,pb:0}},lg:{wrapper:{p:8,pb:0}}},showBorder:{true:{wrapper:{"@media (min-width: 48rem)":{_dark:{borderWidth:1,borderBlock:"solid",borderColor:"neutral.secondary"}}}}},isMobileBrowser:{true:{}}},compoundVariants:[{animate:!0,isOpen:!0,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleIn",animationDuration:"250ms",_motionReduce:{scale:1}}}},{animate:!0,isOpen:!1,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}},{fullscreen:!0,isMobileBrowser:!0,css:{wrapper:{"@media only screen and (max-width: 767px)":{height:"100%"}}}}],defaultVariants:{animate:!0,isOpen:!0,paddingType:"none"}});exports.modal=a;
 //# sourceMappingURL=modal.js.map

package/dist/cjs/recipes/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/recipes/modal.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const modal = sva({\n  slots: ['content', 'wrapper'],\n  base: {\n    content: {\n      height: 'full',\n      width: 'full',\n      boxSizing: 'border-box',\n    },\n    wrapper: {\n      height: 'full',\n      width: 'full',\n      bg: 'surface.primary',\n      position: 'relative',\n      overflow: 'auto',\n      scrollbarWidth: 'none',\n    },\n  },\n  variants: {\n    fullscreen: {\n      true: {\n        wrapper: {\n          height: '100vh',\n          width: '100vw',\n        },\n      },\n      false: {\n        wrapper: {\n          '@media (min-width: 48rem)': {\n            top: 12,\n            mx: 'auto',\n            width: '25rem',\n            height: 'fit-content',\n            boxShadow: '0px 12px 56px {colors.ink.70/15}',\n            borderRadius: 'container',\n            _dark: {\n              boxShadow: 'none',\n            },\n          },\n        },\n      },\n    },\n    animate: {\n      false: {\n        wrapper: {\n          animationName: 'none',\n          scale: 1,\n        },\n      },\n    },\n    isOpen: { true: {} },\n    paddingType: {\n      none: {\n        wrapper: {\n          p: 0,\n        },\n      },\n      sm: {\n        wrapper: {\n          p: 2,\n          pb: 0,\n        },\n      },\n      md: {\n        wrapper: {\n          p: 4,\n          pb: 0,\n        },\n      },\n      lg: {\n        wrapper: {\n          p: 8,\n          pb: 0,\n        },\n      },\n    },\n    showBorder: {\n      true: {\n        wrapper: {\n          '@media (min-width: 48rem)': {\n            _dark: {\n              borderWidth: 1,\n              borderBlock: 'solid',\n              borderColor: 'neutral.secondary',\n            },\n          },\n        },\n      },\n    },\n    isSafariMobile: { true: {} },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      isOpen: true,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleIn',\n          animationDuration: '250ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n    {\n      animate: true,\n      isOpen: false,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleOut',\n          animationDuration: '150ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n    {\n      fullscreen: true,\n      isSafariMobile: true,\n      css: {\n        wrapper: {\n          '@media only screen and (max-width: 767px)': {\n            height: '90vh',\n          },\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    isOpen: true,\n    paddingType: 'none',\n  },\n});\n\nexport type ModalVariants = RecipeVariantProps<typeof modal>;\n"],"names":["modal","sva"],"mappings":"0CAEa,MAAAA,EAAQC,EAAI,IAAA,CACvB,MAAO,CAAC,UAAW,SAAS,EAC5B,KAAM,CACJ,QAAS,CACP,OAAQ,OACR,MAAO,OACP,UAAW,YACZ,EACD,QAAS,CACP,OAAQ,OACR,MAAO,OACP,GAAI,kBACJ,SAAU,WACV,SAAU,OACV,eAAgB,MACjB,CACF,EACD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,QAAS,CACP,OAAQ,QACR,MAAO,OACR,CACF,EACD,MAAO,CACL,QAAS,CACP,4BAA6B,CAC3B,IAAK,GACL,GAAI,OACJ,MAAO,QACP,OAAQ,cACR,UAAW,mCACX,aAAc,YACd,MAAO,CACL,UAAW,MACZ,CACF,CACF,CACF,CACF,EACD,QAAS,CACP,MAAO,CACL,QAAS,CACP,cAAe,OACf,MAAO,CACR,CACF,CACF,EACD,OAAQ,CAAE,KAAM,CAAA,CAAI,EACpB,YAAa,CACX,KAAM,CACJ,QAAS,CACP,EAAG,CACJ,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,CACF,EACD,WAAY,CACV,KAAM,CACJ,QAAS,CACP,4BAA6B,CAC3B,MAAO,CACL,YAAa,EACb,YAAa,QACb,YAAa,mBACd,CACF,CACF,CACF,CACF,EACD,eAAgB,CAAE,KAAM,CAAI,CAAA,CAC7B,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,UACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,WAAY,GACZ,eAAgB,GAChB,IAAK,CACH,QAAS,CACP,4CAA6C,CAC3C,OAAQ,MACT,CACF,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,OAAQ,GACR,YAAa,MACd,CACF,CAAA"}
+{"version":3,"file":"modal.js","sources":["../../../src/recipes/modal.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const modal = sva({\n  slots: ['content', 'wrapper'],\n  base: {\n    content: {\n      height: 'full',\n      width: 'full',\n      boxSizing: 'border-box',\n    },\n    wrapper: {\n      height: 'full',\n      width: 'full',\n      bg: 'surface.primary',\n      position: 'relative',\n      overflow: 'auto',\n      scrollbarWidth: 'none',\n    },\n  },\n  variants: {\n    fullscreen: {\n      true: {\n        wrapper: {\n          height: '100vh',\n          width: '100vw',\n        },\n      },\n      false: {\n        wrapper: {\n          '@media (min-width: 48rem)': {\n            top: 12,\n            mx: 'auto',\n            width: '25rem',\n            height: 'fit-content',\n            boxShadow: '0px 12px 56px {colors.ink.70/15}',\n            borderRadius: 'container',\n            _dark: {\n              boxShadow: 'none',\n            },\n          },\n        },\n      },\n    },\n    animate: {\n      false: {\n        wrapper: {\n          animationName: 'none',\n          scale: 1,\n        },\n      },\n    },\n    isOpen: { true: {} },\n    paddingType: {\n      none: {\n        wrapper: {\n          p: 0,\n        },\n      },\n      sm: {\n        wrapper: {\n          p: 2,\n          pb: 0,\n        },\n      },\n      md: {\n        wrapper: {\n          p: 4,\n          pb: 0,\n        },\n      },\n      lg: {\n        wrapper: {\n          p: 8,\n          pb: 0,\n        },\n      },\n    },\n    showBorder: {\n      true: {\n        wrapper: {\n          '@media (min-width: 48rem)': {\n            _dark: {\n              borderWidth: 1,\n              borderBlock: 'solid',\n              borderColor: 'neutral.secondary',\n            },\n          },\n        },\n      },\n    },\n    isMobileBrowser: { true: {} },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      isOpen: true,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleIn',\n          animationDuration: '250ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n    {\n      animate: true,\n      isOpen: false,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleOut',\n          animationDuration: '150ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n    {\n      fullscreen: true,\n      isMobileBrowser: true,\n      css: {\n        wrapper: {\n          '@media only screen and (max-width: 767px)': {\n            height: '100%',\n          },\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    isOpen: true,\n    paddingType: 'none',\n  },\n});\n\nexport type ModalVariants = RecipeVariantProps<typeof modal>;\n"],"names":["modal","sva"],"mappings":"0CAEa,MAAAA,EAAQC,EAAI,IAAA,CACvB,MAAO,CAAC,UAAW,SAAS,EAC5B,KAAM,CACJ,QAAS,CACP,OAAQ,OACR,MAAO,OACP,UAAW,YACZ,EACD,QAAS,CACP,OAAQ,OACR,MAAO,OACP,GAAI,kBACJ,SAAU,WACV,SAAU,OACV,eAAgB,MACjB,CACF,EACD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,QAAS,CACP,OAAQ,QACR,MAAO,OACR,CACF,EACD,MAAO,CACL,QAAS,CACP,4BAA6B,CAC3B,IAAK,GACL,GAAI,OACJ,MAAO,QACP,OAAQ,cACR,UAAW,mCACX,aAAc,YACd,MAAO,CACL,UAAW,MACZ,CACF,CACF,CACF,CACF,EACD,QAAS,CACP,MAAO,CACL,QAAS,CACP,cAAe,OACf,MAAO,CACR,CACF,CACF,EACD,OAAQ,CAAE,KAAM,CAAA,CAAI,EACpB,YAAa,CACX,KAAM,CACJ,QAAS,CACP,EAAG,CACJ,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,CACF,EACD,WAAY,CACV,KAAM,CACJ,QAAS,CACP,4BAA6B,CAC3B,MAAO,CACL,YAAa,EACb,YAAa,QACb,YAAa,mBACd,CACF,CACF,CACF,CACF,EACD,gBAAiB,CAAE,KAAM,CAAI,CAAA,CAC9B,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,UACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,WAAY,GACZ,gBAAiB,GACjB,IAAK,CACH,QAAS,CACP,4CAA6C,CAC3C,OAAQ,MACT,CACF,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,OAAQ,GACR,YAAa,MACd,CACF,CAAA"}

package/dist/es/components/containers/modal.js

@@ -1,2 +1,2 @@
-import{jsx as i}from"react/jsx-runtime";import{useDisplayState as g}from"../../hooks/useDisplayState.js";import{modal as h}from"../../recipes/modal.js";import{VStack as w}from"@styled/jsx";const y=()=>{if(typeof navigator>"u")return!1;const e=navigator.userAgent;return/iPad|iPhone/i.test(e)&&/WebKit/i.test(e)&&!/CriOS/i.test(e)},S=y(),t=({animate:e=!0,paddingType:a="none",gap:r=2.5,isOpen:n=!0,onAnimated:s=()=>{},onClosed:d=()=>{},showBorder:l=!0,fullscreen:m=!1,children:p})=>{const o=h({animate:e,isOpen:n,paddingType:a,showBorder:l,fullscreen:m,isSafariMobile:S}),{displayed:c,onHide:f,onShow:u}=g({animate:e,show:n,onHidden:d,onShown:s});return c?i("div",{className:o.wrapper,onAnimationEnd:n?u:f,children:i(w,{alignItems:"center",gap:r,className:o.content,children:p})}):null};t.displayName="Modal";export{t as Modal};
+import{jsx as i}from"react/jsx-runtime";import{useDisplayState as h}from"../../hooks/useDisplayState.js";import{modal as g}from"../../recipes/modal.js";import{VStack as w}from"@styled/jsx";const y=()=>{if(typeof navigator>"u")return!1;const n=navigator.userAgent;return/Mobi|Android|iPhone|iPad/i.test(n)},M=y(),r=({animate:n=!0,paddingType:a="none",gap:t=2.5,isOpen:o=!0,onAnimated:s=()=>{},onClosed:d=()=>{},showBorder:l=!0,fullscreen:m=!1,children:p})=>{const e=g({animate:n,isOpen:o,paddingType:a,showBorder:l,fullscreen:m,isMobileBrowser:M}),{displayed:c,onHide:u,onShow:f}=h({animate:n,show:o,onHidden:d,onShown:s});return c?i("div",{className:e.wrapper,onAnimationEnd:o?f:u,children:i(w,{alignItems:"center",gap:t,className:e.content,children:p})}):null};r.displayName="Modal";export{r as Modal};
 //# sourceMappingURL=modal.js.map

package/dist/es/components/containers/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n  animate?: boolean;\n  paddingType?: 'none' | 'sm' | 'md' | 'lg';\n  gap?: number;\n  isOpen?: boolean;\n  onAnimated?: () => void;\n  onClosed?: () => void;\n  showBorder?: boolean;\n  fullscreen?: boolean;\n}\n\nconst isIosSafari = () => {\n  if (typeof navigator === 'undefined') {\n    return false;\n  }\n  const ua = navigator.userAgent;\n  return /iPad|iPhone/i.test(ua) && /WebKit/i.test(ua) && !/CriOS/i.test(ua);\n};\n\nconst isSafariMobile = isIosSafari();\n\nexport const Modal = ({\n  animate = true,\n  paddingType = 'none',\n  gap = 2.5,\n  isOpen = true,\n  onAnimated = () => {},\n  onClosed = () => {},\n  showBorder = true,\n  fullscreen = false,\n  children,\n}: ModalProps) => {\n  const classes = modal({ animate, isOpen, paddingType, showBorder, fullscreen, isSafariMobile });\n  const { displayed, onHide, onShow } = useDisplayState({\n    animate,\n    show: isOpen,\n    onHidden: onClosed,\n    onShown: onAnimated,\n  });\n\n  if (!displayed) {\n    return null;\n  }\n\n  return (\n    <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n      <VStack alignItems=\"center\" gap={gap} className={classes.content}>\n        {children}\n      </VStack>\n    </div>\n  );\n};\n\nModal.displayName = 'Modal';\n"],"names":["isIosSafari","ua","isSafariMobile","Modal","animate","paddingType","gap","isOpen","onAnimated","onClosed","showBorder","fullscreen","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"6LAeA,MAAMA,EAAc,IAAK,CACvB,GAAI,OAAO,UAAc,IACvB,MAAO,GAET,MAAMC,EAAK,UAAU,UACrB,MAAO,eAAe,KAAKA,CAAE,GAAK,UAAU,KAAKA,CAAE,GAAK,CAAC,SAAS,KAAKA,CAAE,CAC3E,EAEMC,EAAiBF,EAEhB,EAAMG,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,IAAAC,EAAM,IACN,OAAAC,EAAS,GACT,WAAAC,EAAa,KAAO,EACpB,SAAAC,EAAW,IAAK,CAAE,EAClB,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,SAAAC,CACW,IAAI,CACf,MAAMC,EAAUC,EAAM,CAAE,QAAAV,EAAS,OAAAG,EAAQ,YAAAF,EAAa,WAAAK,EAAY,WAAAC,EAAY,eAAAT,CAAc,CAAE,EACxF,CAAE,UAAAa,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAgB,CACpD,QAAAd,EACA,KAAMG,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKO,EAKHI,EAAK,MAAA,CAAA,UAAWN,EAAQ,QAAS,eAAgBN,EAASU,EAASD,EAAM,SACvEG,EAACC,GAAO,WAAW,SAAS,IAAKd,EAAK,UAAWO,EAAQ,QAAO,SAC7DD,CACM,CAAA,CAAA,CAAA,EAPJ,IAUX,EAEAT,EAAM,YAAc"}
+{"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n  animate?: boolean;\n  paddingType?: 'none' | 'sm' | 'md' | 'lg';\n  gap?: number;\n  isOpen?: boolean;\n  onAnimated?: () => void;\n  onClosed?: () => void;\n  showBorder?: boolean;\n  fullscreen?: boolean;\n}\n\nconst isMobile = () => {\n  if (typeof navigator === 'undefined') {\n    return false;\n  }\n  const ua = navigator.userAgent;\n  return /Mobi|Android|iPhone|iPad/i.test(ua);\n};\n\nconst isMobileBrowser = isMobile();\n\nexport const Modal = ({\n  animate = true,\n  paddingType = 'none',\n  gap = 2.5,\n  isOpen = true,\n  onAnimated = () => {},\n  onClosed = () => {},\n  showBorder = true,\n  fullscreen = false,\n  children,\n}: ModalProps) => {\n  const classes = modal({ animate, isOpen, paddingType, showBorder, fullscreen, isMobileBrowser });\n  const { displayed, onHide, onShow } = useDisplayState({\n    animate,\n    show: isOpen,\n    onHidden: onClosed,\n    onShown: onAnimated,\n  });\n\n  if (!displayed) {\n    return null;\n  }\n\n  return (\n    <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n      <VStack alignItems=\"center\" gap={gap} className={classes.content}>\n        {children}\n      </VStack>\n    </div>\n  );\n};\n\nModal.displayName = 'Modal';\n"],"names":["isMobile","ua","isMobileBrowser","Modal","animate","paddingType","gap","isOpen","onAnimated","onClosed","showBorder","fullscreen","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"6LAeA,MAAMA,EAAW,IAAK,CACpB,GAAI,OAAO,UAAc,IACvB,MAAO,GAET,MAAMC,EAAK,UAAU,UACrB,MAAO,4BAA4B,KAAKA,CAAE,CAC5C,EAEMC,EAAkBF,IAEXG,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,IAAAC,EAAM,IACN,OAAAC,EAAS,GACT,WAAAC,EAAa,OACb,SAAAC,EAAW,IAAK,CAAA,EAChB,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,SAAAC,CACW,IAAI,CACf,MAAMC,EAAUC,EAAM,CAAE,QAAAV,EAAS,OAAAG,EAAQ,YAAAF,EAAa,WAAAK,EAAY,WAAAC,EAAY,gBAAAT,CAAe,CAAE,EACzF,CAAE,UAAAa,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAgB,CACpD,QAAAd,EACA,KAAMG,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKO,EAKHI,EAAK,MAAA,CAAA,UAAWN,EAAQ,QAAS,eAAgBN,EAASU,EAASD,EAAM,SACvEG,EAACC,GAAO,WAAW,SAAS,IAAKd,EAAK,UAAWO,EAAQ,QAAO,SAC7DD,CACM,CAAA,CAAA,CAAA,EAPJ,IAUX,EAEAT,EAAM,YAAc"}

package/dist/es/components/layouts/wallet-page/connection-menu.js

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as e,Fragment as f}from"react/jsx-runtime";import{token as r}from"@styled/tokens";import b from"../../icons/ico-globe.js";import v from"../../icons/ico-remove.js";import s from"../../primitives/button.js";import"../../primitives/checkbox.js";import"../../primitives/dropdown-selector.js";import{Popover as n}from"../../primitives/popover.js";import"../../primitives/radio.js";import"../../primitives/segmented-control.js";import"../../primitives/switch.js";import c from"../../primitives/text.js";import{css as y}from"@styled/css/css";import{Circle as m,Stack as u,Divider as w}from"@styled/jsx";import{useState as z,useEffect as C}from"react";const L=({connected:o,connectedLabel:d="Connected",disconnectLabel:l,disconnectedLabel:h="Not connected",domain:p,logoUrl:i,onDisconnect:x})=>{const[g,a]=z(!1);return C(()=>{a(!1)},[i]),t(n,{iconSize:28,variant:"text",children:[e(n.LeadingIcon,{color:r("colors.text.tertiary"),children:i&&o&&!g?t(m,{position:"relative",maxW:"max-content",maxH:"max-content",children:[e("img",{style:{borderRadius:"50%"},width:28,height:28,src:i,alt:"app logo",onError:()=>a(!0)}),e(m,{size:"7px",position:"absolute",bg:"positive.base",borderWidth:"thin",borderColor:"surface.primary",bottom:"-1px",right:"-1px",boxSizing:"border-box"})]}):t("svg",{width:"28",height:"28",children:[e("circle",{cx:"14",cy:"14",r:"14",fill:r("colors.surface.tertiary")}),e(b,{color:r("colors.text.tertiary"),x:6,y:6,height:16,width:16})]})}),t(n.Content,{className:y({w:"200px"}),children:[t(u,{w:"100%",gap:1,overflow:"hidden",children:[o?e(c,{size:"xs",variant:"success",fontWeight:"normal",children:d}):e(c,{fontColor:"text.tertiary",size:"xs",children:h}),e(c,{truncate:!0,children:p})]}),o&&l&&t(f,{children:[e(w,{color:"surface.quaternary",my:3}),e(s,{label:l,size:"sm",textStyle:"negative",variant:"text",onPress:x,children:e(s.LeadingIcon,{children:t("svg",{width:"20",height:"20",children:[e("circle",{cx:"8",cy:"8",r:"8",fill:r("colors.negative.lightest")}),e(v,{color:r("colors.negative.base"),x:3,y:3,height:10,width:10})]})})})]})]})]})};export{L as ConnectionMenu};
+import{jsxs as r,jsx as e,Fragment as f}from"react/jsx-runtime";import{token as t}from"@styled/tokens";import b from"../../icons/ico-globe.js";import v from"../../icons/ico-remove.js";import a from"../../primitives/button.js";import"../../primitives/checkbox.js";import"../../primitives/dropdown-selector.js";import{Popover as c}from"../../primitives/popover.js";import"../../primitives/radio.js";import"../../primitives/segmented-control.js";import"../../primitives/switch.js";import n from"../../primitives/text.js";import{css as y}from"@styled/css/css";import{Circle as d,Stack as u,Divider as w}from"@styled/jsx";import{useState as z,useEffect as C}from"react";const L=({connected:o,connectedLabel:h="Connected",disconnectLabel:l,disconnectedLabel:m="Not connected",domain:p,logoUrl:i,onDisconnect:g})=>{const[x,s]=z(!1);return C(()=>{s(!1)},[i]),r(c,{iconSize:28,variant:"text",children:[e(c.LeadingIcon,{color:t("colors.text.tertiary"),children:i&&o&&!x?r(d,{position:"relative",w:7,h:7,children:[e("img",{style:{borderRadius:"50%"},width:28,height:28,src:i,alt:"app logo",onError:()=>s(!0)}),e(d,{size:"7px",position:"absolute",bg:"positive.base",borderWidth:"thin",borderColor:"surface.primary",bottom:"-1px",right:"-1px",boxSizing:"border-box"})]}):r("svg",{width:"28",height:"28",children:[e("circle",{cx:"14",cy:"14",r:"14",fill:t("colors.surface.tertiary")}),e(b,{color:t("colors.text.tertiary"),x:6,y:6,height:16,width:16})]})}),r(c.Content,{className:y({w:"200px"}),children:[r(u,{w:"100%",gap:1,overflow:"hidden",children:[o?e(n,{size:"xs",variant:"success",fontWeight:"normal",children:h}):e(n,{fontColor:"text.tertiary",size:"xs",children:m}),e(n,{truncate:!0,children:p})]}),o&&l&&r(f,{children:[e(w,{color:"surface.quaternary",my:3}),e(a,{label:l,size:"sm",textStyle:"negative",variant:"text",onPress:g,children:e(a.LeadingIcon,{children:r("svg",{width:"20",height:"20",children:[e("circle",{cx:"8",cy:"8",r:"8",fill:t("colors.negative.lightest")}),e(v,{color:t("colors.negative.base"),x:3,y:3,height:10,width:10})]})})})]})]})]})};export{L as ConnectionMenu};
 //# sourceMappingURL=connection-menu.js.map

package/dist/es/components/layouts/wallet-page/connection-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"connection-menu.js","sources":["../../../../../src/components/layouts/wallet-page/connection-menu.tsx"],"sourcesContent":["import { IcoGlobe, IcoRemove } from '@components/icons';\nimport { Button, Popover, Text } from '@components/primitives';\nimport { css } from '@styled/css/css';\nimport { Circle, Divider, Stack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useEffect, useState } from 'react';\n\nexport interface ConnectionMenuProps {\n  connected?: boolean;\n  connectedLabel?: string;\n  disconnectLabel?: string;\n  disconnectedLabel?: string;\n  domain: string;\n  logoUrl?: string;\n  onDisconnect?: () => void;\n}\n\nexport const ConnectionMenu = ({\n  connected,\n  connectedLabel = 'Connected',\n  disconnectLabel,\n  disconnectedLabel = 'Not connected',\n  domain,\n  logoUrl,\n  onDisconnect,\n}: ConnectionMenuProps) => {\n  const [error, setError] = useState(false);\n\n  useEffect(() => {\n    setError(false);\n  }, [logoUrl]);\n\n  return (\n    <Popover iconSize={28} variant=\"text\">\n      <Popover.LeadingIcon color={token('colors.text.tertiary')}>\n        {logoUrl && connected && !error ? (\n          <Circle position=\"relative\" maxW=\"max-content\" maxH=\"max-content\">\n            <img\n              style={{ borderRadius: '50%' }}\n              width={28}\n              height={28}\n              src={logoUrl}\n              alt=\"app logo\"\n              onError={() => setError(true)}\n            />\n            <Circle\n              size=\"7px\"\n              position=\"absolute\"\n              bg=\"positive.base\"\n              borderWidth=\"thin\"\n              borderColor=\"surface.primary\"\n              bottom=\"-1px\"\n              right=\"-1px\"\n              boxSizing=\"border-box\"\n            />\n          </Circle>\n        ) : (\n          <svg width=\"28\" height=\"28\">\n            <circle cx=\"14\" cy=\"14\" r=\"14\" fill={token('colors.surface.tertiary')} />\n            <IcoGlobe color={token('colors.text.tertiary')} x={6} y={6} height={16} width={16} />\n          </svg>\n        )}\n      </Popover.LeadingIcon>\n      <Popover.Content className={css({ w: '200px' })}>\n        <Stack w=\"100%\" gap={1} overflow=\"hidden\">\n          {!connected ? (\n            <Text fontColor=\"text.tertiary\" size=\"xs\">\n              {disconnectedLabel}\n            </Text>\n          ) : (\n            <Text size=\"xs\" variant=\"success\" fontWeight=\"normal\">\n              {connectedLabel}\n            </Text>\n          )}\n          <Text truncate>{domain}</Text>\n        </Stack>\n        {connected && disconnectLabel && (\n          <>\n            <Divider color=\"surface.quaternary\" my={3} />\n            <Button label={disconnectLabel} size=\"sm\" textStyle=\"negative\" variant=\"text\" onPress={onDisconnect}>\n              <Button.LeadingIcon>\n                <svg width=\"20\" height=\"20\">\n                  <circle cx=\"8\" cy=\"8\" r=\"8\" fill={token('colors.negative.lightest')} />\n                  <IcoRemove color={token('colors.negative.base')} x={3} y={3} height={10} width={10} />\n                </svg>\n              </Button.LeadingIcon>\n            </Button>\n          </>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n};\n"],"names":["ConnectionMenu","connected","connectedLabel","disconnectLabel","disconnectedLabel","domain","logoUrl","onDisconnect","error","setError","useState","useEffect","_jsxs","Popover","_jsx","token","Circle","IcoGlobe","css","Stack","Text","_Fragment","Divider","Button","IcoRemove"],"mappings":"ypBAiBa,MAAAA,EAAiB,CAAC,CAC7B,UAAAC,EACA,eAAAC,EAAiB,YACjB,gBAAAC,EACA,kBAAAC,EAAoB,gBACpB,OAAAC,EACA,QAAAC,EACA,aAAAC,CACoB,IAAI,CACxB,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAS,EAAK,EAExC,OAAAC,EAAU,IAAK,CACbF,EAAS,EAAK,CAChB,EAAG,CAACH,CAAO,CAAC,EAGVM,EAACC,GAAQ,SAAU,GAAI,QAAQ,OAAM,SAAA,CACnCC,EAACD,EAAQ,YAAY,CAAA,MAAOE,EAAM,sBAAsB,EAAC,SACtDT,GAAWL,GAAa,CAACO,EACxBI,EAACI,GAAO,SAAS,WAAW,KAAK,cAAc,KAAK,wBAClDF,EACE,MAAA,CAAA,MAAO,CAAE,aAAc,KAAK,EAC5B,MAAO,GACP,OAAQ,GACR,IAAKR,EACL,IAAI,WACJ,QAAS,IAAMG,EAAS,EAAI,CAAC,CAAA,EAE/BK,EAACE,GACC,KAAK,MACL,SAAS,WACT,GAAG,gBACH,YAAY,OACZ,YAAY,kBACZ,OAAO,OACP,MAAM,OACN,UAAU,YAAY,CAAA,CACtB,IAGJJ,SAAK,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,YAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAMC,EAAM,yBAAyB,CAAK,CAAA,EACzED,EAACG,EAAQ,CAAC,MAAOF,EAAM,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAM,CAAA,CAAA,CAAA,CAAA,CAGrE,CAAA,EACtBH,EAACC,EAAQ,QAAQ,CAAA,UAAWK,EAAI,CAAE,EAAG,OAAS,CAAA,YAC5CN,EAACO,GAAM,EAAE,OAAO,IAAK,EAAG,SAAS,mBAC7BlB,EAKAa,EAACM,GAAK,KAAK,KAAK,QAAQ,UAAU,WAAW,kBAC1ClB,CAAc,CAAA,EALjBY,EAACM,GAAK,UAAU,gBAAgB,KAAK,KAAI,SACtChB,CACI,CAAA,EAMTU,EAACM,EAAK,CAAA,qBAAUf,CAAM,CAAA,CAAQ,IAE/BJ,GAAaE,GACZS,EACES,EAAA,CAAA,SAAA,CAAAP,EAACQ,EAAQ,CAAA,MAAM,qBAAqB,GAAI,IACxCR,EAACS,EAAO,CAAA,MAAOpB,EAAiB,KAAK,KAAK,UAAU,WAAW,QAAQ,OAAO,QAASI,WACrFO,EAACS,EAAO,YAAW,CAAA,SACjBX,SAAK,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,YAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAMC,EAAM,0BAA0B,CAAK,CAAA,EACvED,EAACU,EAAS,CAAC,MAAOT,EAAM,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAM,CAAA,CAAA,CAAA,CAAA,GAGnF,CAAA,CAAA,CAAA,CAAA,CAEZ,CACe,CAAA,CAAA,CAAA,CAAA,CAGxB"}
+{"version":3,"file":"connection-menu.js","sources":["../../../../../src/components/layouts/wallet-page/connection-menu.tsx"],"sourcesContent":["import { IcoGlobe, IcoRemove } from '@components/icons';\nimport { Button, Popover, Text } from '@components/primitives';\nimport { css } from '@styled/css/css';\nimport { Circle, Divider, Stack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useEffect, useState } from 'react';\n\nexport interface ConnectionMenuProps {\n  connected?: boolean;\n  connectedLabel?: string;\n  disconnectLabel?: string;\n  disconnectedLabel?: string;\n  domain: string;\n  logoUrl?: string;\n  onDisconnect?: () => void;\n}\n\nexport const ConnectionMenu = ({\n  connected,\n  connectedLabel = 'Connected',\n  disconnectLabel,\n  disconnectedLabel = 'Not connected',\n  domain,\n  logoUrl,\n  onDisconnect,\n}: ConnectionMenuProps) => {\n  const [error, setError] = useState(false);\n\n  useEffect(() => {\n    setError(false);\n  }, [logoUrl]);\n\n  return (\n    <Popover iconSize={28} variant=\"text\">\n      <Popover.LeadingIcon color={token('colors.text.tertiary')}>\n        {logoUrl && connected && !error ? (\n          <Circle position=\"relative\" w={7} h={7}>\n            <img\n              style={{ borderRadius: '50%' }}\n              width={28}\n              height={28}\n              src={logoUrl}\n              alt=\"app logo\"\n              onError={() => setError(true)}\n            />\n            <Circle\n              size=\"7px\"\n              position=\"absolute\"\n              bg=\"positive.base\"\n              borderWidth=\"thin\"\n              borderColor=\"surface.primary\"\n              bottom=\"-1px\"\n              right=\"-1px\"\n              boxSizing=\"border-box\"\n            />\n          </Circle>\n        ) : (\n          <svg width=\"28\" height=\"28\">\n            <circle cx=\"14\" cy=\"14\" r=\"14\" fill={token('colors.surface.tertiary')} />\n            <IcoGlobe color={token('colors.text.tertiary')} x={6} y={6} height={16} width={16} />\n          </svg>\n        )}\n      </Popover.LeadingIcon>\n      <Popover.Content className={css({ w: '200px' })}>\n        <Stack w=\"100%\" gap={1} overflow=\"hidden\">\n          {!connected ? (\n            <Text fontColor=\"text.tertiary\" size=\"xs\">\n              {disconnectedLabel}\n            </Text>\n          ) : (\n            <Text size=\"xs\" variant=\"success\" fontWeight=\"normal\">\n              {connectedLabel}\n            </Text>\n          )}\n          <Text truncate>{domain}</Text>\n        </Stack>\n        {connected && disconnectLabel && (\n          <>\n            <Divider color=\"surface.quaternary\" my={3} />\n            <Button label={disconnectLabel} size=\"sm\" textStyle=\"negative\" variant=\"text\" onPress={onDisconnect}>\n              <Button.LeadingIcon>\n                <svg width=\"20\" height=\"20\">\n                  <circle cx=\"8\" cy=\"8\" r=\"8\" fill={token('colors.negative.lightest')} />\n                  <IcoRemove color={token('colors.negative.base')} x={3} y={3} height={10} width={10} />\n                </svg>\n              </Button.LeadingIcon>\n            </Button>\n          </>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n};\n"],"names":["ConnectionMenu","connected","connectedLabel","disconnectLabel","disconnectedLabel","domain","logoUrl","onDisconnect","error","setError","useState","useEffect","_jsxs","Popover","_jsx","token","Circle","IcoGlobe","css","Stack","Text","_Fragment","Divider","Button","IcoRemove"],"mappings":"ypBAiBa,MAAAA,EAAiB,CAAC,CAC7B,UAAAC,EACA,eAAAC,EAAiB,YACjB,gBAAAC,EACA,kBAAAC,EAAoB,gBACpB,OAAAC,EACA,QAAAC,EACA,aAAAC,CACoB,IAAI,CACxB,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAS,EAAK,EAExC,OAAAC,EAAU,IAAK,CACbF,EAAS,EAAK,CAChB,EAAG,CAACH,CAAO,CAAC,EAGVM,EAACC,GAAQ,SAAU,GAAI,QAAQ,OAAM,SAAA,CACnCC,EAACD,EAAQ,YAAY,CAAA,MAAOE,EAAM,sBAAsB,EAAC,SACtDT,GAAWL,GAAa,CAACO,EACxBI,EAACI,GAAO,SAAS,WAAW,EAAG,EAAG,EAAG,YACnCF,EACE,MAAA,CAAA,MAAO,CAAE,aAAc,KAAK,EAC5B,MAAO,GACP,OAAQ,GACR,IAAKR,EACL,IAAI,WACJ,QAAS,IAAMG,EAAS,EAAI,CAAC,CAAA,EAE/BK,EAACE,GACC,KAAK,MACL,SAAS,WACT,GAAG,gBACH,YAAY,OACZ,YAAY,kBACZ,OAAO,OACP,MAAM,OACN,UAAU,YAAY,CAAA,CACtB,IAGJJ,SAAK,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,YAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAMC,EAAM,yBAAyB,CAAK,CAAA,EACzED,EAACG,EAAQ,CAAC,MAAOF,EAAM,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAM,CAAA,CAAA,CAAA,CAAA,CAGrE,CAAA,EACtBH,EAACC,EAAQ,QAAQ,CAAA,UAAWK,EAAI,CAAE,EAAG,OAAS,CAAA,YAC5CN,EAACO,GAAM,EAAE,OAAO,IAAK,EAAG,SAAS,mBAC7BlB,EAKAa,EAACM,GAAK,KAAK,KAAK,QAAQ,UAAU,WAAW,kBAC1ClB,CAAc,CAAA,EALjBY,EAACM,GAAK,UAAU,gBAAgB,KAAK,KAAI,SACtChB,CACI,CAAA,EAMTU,EAACM,EAAK,CAAA,qBAAUf,CAAM,CAAA,CAAQ,IAE/BJ,GAAaE,GACZS,EACES,EAAA,CAAA,SAAA,CAAAP,EAACQ,EAAQ,CAAA,MAAM,qBAAqB,GAAI,IACxCR,EAACS,EAAO,CAAA,MAAOpB,EAAiB,KAAK,KAAK,UAAU,WAAW,QAAQ,OAAO,QAASI,WACrFO,EAACS,EAAO,YAAW,CAAA,SACjBX,SAAK,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,YAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAMC,EAAM,0BAA0B,CAAK,CAAA,EACvED,EAACU,EAAS,CAAC,MAAOT,EAAM,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAM,CAAA,CAAA,CAAA,CAAA,GAGnF,CAAA,CAAA,CAAA,CAAA,CAEZ,CACe,CAAA,CAAA,CAAA,CAAA,CAGxB"}

package/dist/es/recipes/modal.js

@@ -1,2 +1,2 @@
-import{sva as e}from"@styled/css";const a=e({slots:["content","wrapper"],base:{content:{height:"full",width:"full",boxSizing:"border-box"},wrapper:{height:"full",width:"full",bg:"surface.primary",position:"relative",overflow:"auto",scrollbarWidth:"none"}},variants:{fullscreen:{true:{wrapper:{height:"100vh",width:"100vw"}},false:{wrapper:{"@media (min-width: 48rem)":{top:12,mx:"auto",width:"25rem",height:"fit-content",boxShadow:"0px 12px 56px {colors.ink.70/15}",borderRadius:"container",_dark:{boxShadow:"none"}}}}},animate:{false:{wrapper:{animationName:"none",scale:1}}},isOpen:{true:{}},paddingType:{none:{wrapper:{p:0}},sm:{wrapper:{p:2,pb:0}},md:{wrapper:{p:4,pb:0}},lg:{wrapper:{p:8,pb:0}}},showBorder:{true:{wrapper:{"@media (min-width: 48rem)":{_dark:{borderWidth:1,borderBlock:"solid",borderColor:"neutral.secondary"}}}}},isSafariMobile:{true:{}}},compoundVariants:[{animate:!0,isOpen:!0,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleIn",animationDuration:"250ms",_motionReduce:{scale:1}}}},{animate:!0,isOpen:!1,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}},{fullscreen:!0,isSafariMobile:!0,css:{wrapper:{"@media only screen and (max-width: 767px)":{height:"90vh"}}}}],defaultVariants:{animate:!0,isOpen:!0,paddingType:"none"}});export{a as modal};
+import{sva as e}from"@styled/css";const a=e({slots:["content","wrapper"],base:{content:{height:"full",width:"full",boxSizing:"border-box"},wrapper:{height:"full",width:"full",bg:"surface.primary",position:"relative",overflow:"auto",scrollbarWidth:"none"}},variants:{fullscreen:{true:{wrapper:{height:"100vh",width:"100vw"}},false:{wrapper:{"@media (min-width: 48rem)":{top:12,mx:"auto",width:"25rem",height:"fit-content",boxShadow:"0px 12px 56px {colors.ink.70/15}",borderRadius:"container",_dark:{boxShadow:"none"}}}}},animate:{false:{wrapper:{animationName:"none",scale:1}}},isOpen:{true:{}},paddingType:{none:{wrapper:{p:0}},sm:{wrapper:{p:2,pb:0}},md:{wrapper:{p:4,pb:0}},lg:{wrapper:{p:8,pb:0}}},showBorder:{true:{wrapper:{"@media (min-width: 48rem)":{_dark:{borderWidth:1,borderBlock:"solid",borderColor:"neutral.secondary"}}}}},isMobileBrowser:{true:{}}},compoundVariants:[{animate:!0,isOpen:!0,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleIn",animationDuration:"250ms",_motionReduce:{scale:1}}}},{animate:!0,isOpen:!1,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}},{fullscreen:!0,isMobileBrowser:!0,css:{wrapper:{"@media only screen and (max-width: 767px)":{height:"100%"}}}}],defaultVariants:{animate:!0,isOpen:!0,paddingType:"none"}});export{a as modal};
 //# sourceMappingURL=modal.js.map

package/dist/es/recipes/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/recipes/modal.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const modal = sva({\n  slots: ['content', 'wrapper'],\n  base: {\n    content: {\n      height: 'full',\n      width: 'full',\n      boxSizing: 'border-box',\n    },\n    wrapper: {\n      height: 'full',\n      width: 'full',\n      bg: 'surface.primary',\n      position: 'relative',\n      overflow: 'auto',\n      scrollbarWidth: 'none',\n    },\n  },\n  variants: {\n    fullscreen: {\n      true: {\n        wrapper: {\n          height: '100vh',\n          width: '100vw',\n        },\n      },\n      false: {\n        wrapper: {\n          '@media (min-width: 48rem)': {\n            top: 12,\n            mx: 'auto',\n            width: '25rem',\n            height: 'fit-content',\n            boxShadow: '0px 12px 56px {colors.ink.70/15}',\n            borderRadius: 'container',\n            _dark: {\n              boxShadow: 'none',\n            },\n          },\n        },\n      },\n    },\n    animate: {\n      false: {\n        wrapper: {\n          animationName: 'none',\n          scale: 1,\n        },\n      },\n    },\n    isOpen: { true: {} },\n    paddingType: {\n      none: {\n        wrapper: {\n          p: 0,\n        },\n      },\n      sm: {\n        wrapper: {\n          p: 2,\n          pb: 0,\n        },\n      },\n      md: {\n        wrapper: {\n          p: 4,\n          pb: 0,\n        },\n      },\n      lg: {\n        wrapper: {\n          p: 8,\n          pb: 0,\n        },\n      },\n    },\n    showBorder: {\n      true: {\n        wrapper: {\n          '@media (min-width: 48rem)': {\n            _dark: {\n              borderWidth: 1,\n              borderBlock: 'solid',\n              borderColor: 'neutral.secondary',\n            },\n          },\n        },\n      },\n    },\n    isSafariMobile: { true: {} },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      isOpen: true,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleIn',\n          animationDuration: '250ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n    {\n      animate: true,\n      isOpen: false,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleOut',\n          animationDuration: '150ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n    {\n      fullscreen: true,\n      isSafariMobile: true,\n      css: {\n        wrapper: {\n          '@media only screen and (max-width: 767px)': {\n            height: '90vh',\n          },\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    isOpen: true,\n    paddingType: 'none',\n  },\n});\n\nexport type ModalVariants = RecipeVariantProps<typeof modal>;\n"],"names":["modal","sva"],"mappings":"kCAEa,MAAAA,EAAQC,EAAI,CACvB,MAAO,CAAC,UAAW,SAAS,EAC5B,KAAM,CACJ,QAAS,CACP,OAAQ,OACR,MAAO,OACP,UAAW,YACZ,EACD,QAAS,CACP,OAAQ,OACR,MAAO,OACP,GAAI,kBACJ,SAAU,WACV,SAAU,OACV,eAAgB,MACjB,CACF,EACD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,QAAS,CACP,OAAQ,QACR,MAAO,OACR,CACF,EACD,MAAO,CACL,QAAS,CACP,4BAA6B,CAC3B,IAAK,GACL,GAAI,OACJ,MAAO,QACP,OAAQ,cACR,UAAW,mCACX,aAAc,YACd,MAAO,CACL,UAAW,MACZ,CACF,CACF,CACF,CACF,EACD,QAAS,CACP,MAAO,CACL,QAAS,CACP,cAAe,OACf,MAAO,CACR,CACF,CACF,EACD,OAAQ,CAAE,KAAM,CAAA,CAAI,EACpB,YAAa,CACX,KAAM,CACJ,QAAS,CACP,EAAG,CACJ,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,CACF,EACD,WAAY,CACV,KAAM,CACJ,QAAS,CACP,4BAA6B,CAC3B,MAAO,CACL,YAAa,EACb,YAAa,QACb,YAAa,mBACd,CACF,CACF,CACF,CACF,EACD,eAAgB,CAAE,KAAM,CAAI,CAAA,CAC7B,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,UACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,WAAY,GACZ,eAAgB,GAChB,IAAK,CACH,QAAS,CACP,4CAA6C,CAC3C,OAAQ,MACT,CACF,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,OAAQ,GACR,YAAa,MACd,CACF,CAAA"}
+{"version":3,"file":"modal.js","sources":["../../../src/recipes/modal.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const modal = sva({\n  slots: ['content', 'wrapper'],\n  base: {\n    content: {\n      height: 'full',\n      width: 'full',\n      boxSizing: 'border-box',\n    },\n    wrapper: {\n      height: 'full',\n      width: 'full',\n      bg: 'surface.primary',\n      position: 'relative',\n      overflow: 'auto',\n      scrollbarWidth: 'none',\n    },\n  },\n  variants: {\n    fullscreen: {\n      true: {\n        wrapper: {\n          height: '100vh',\n          width: '100vw',\n        },\n      },\n      false: {\n        wrapper: {\n          '@media (min-width: 48rem)': {\n            top: 12,\n            mx: 'auto',\n            width: '25rem',\n            height: 'fit-content',\n            boxShadow: '0px 12px 56px {colors.ink.70/15}',\n            borderRadius: 'container',\n            _dark: {\n              boxShadow: 'none',\n            },\n          },\n        },\n      },\n    },\n    animate: {\n      false: {\n        wrapper: {\n          animationName: 'none',\n          scale: 1,\n        },\n      },\n    },\n    isOpen: { true: {} },\n    paddingType: {\n      none: {\n        wrapper: {\n          p: 0,\n        },\n      },\n      sm: {\n        wrapper: {\n          p: 2,\n          pb: 0,\n        },\n      },\n      md: {\n        wrapper: {\n          p: 4,\n          pb: 0,\n        },\n      },\n      lg: {\n        wrapper: {\n          p: 8,\n          pb: 0,\n        },\n      },\n    },\n    showBorder: {\n      true: {\n        wrapper: {\n          '@media (min-width: 48rem)': {\n            _dark: {\n              borderWidth: 1,\n              borderBlock: 'solid',\n              borderColor: 'neutral.secondary',\n            },\n          },\n        },\n      },\n    },\n    isMobileBrowser: { true: {} },\n  },\n  compoundVariants: [\n    {\n      animate: true,\n      isOpen: true,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleIn',\n          animationDuration: '250ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n    {\n      animate: true,\n      isOpen: false,\n      css: {\n        wrapper: {\n          animationFillMode: 'forwards',\n          animationName: 'scaleOut',\n          animationDuration: '150ms',\n          _motionReduce: { scale: 1 },\n        },\n      },\n    },\n    {\n      fullscreen: true,\n      isMobileBrowser: true,\n      css: {\n        wrapper: {\n          '@media only screen and (max-width: 767px)': {\n            height: '100%',\n          },\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    animate: true,\n    isOpen: true,\n    paddingType: 'none',\n  },\n});\n\nexport type ModalVariants = RecipeVariantProps<typeof modal>;\n"],"names":["modal","sva"],"mappings":"kCAEa,MAAAA,EAAQC,EAAI,CACvB,MAAO,CAAC,UAAW,SAAS,EAC5B,KAAM,CACJ,QAAS,CACP,OAAQ,OACR,MAAO,OACP,UAAW,YACZ,EACD,QAAS,CACP,OAAQ,OACR,MAAO,OACP,GAAI,kBACJ,SAAU,WACV,SAAU,OACV,eAAgB,MACjB,CACF,EACD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,QAAS,CACP,OAAQ,QACR,MAAO,OACR,CACF,EACD,MAAO,CACL,QAAS,CACP,4BAA6B,CAC3B,IAAK,GACL,GAAI,OACJ,MAAO,QACP,OAAQ,cACR,UAAW,mCACX,aAAc,YACd,MAAO,CACL,UAAW,MACZ,CACF,CACF,CACF,CACF,EACD,QAAS,CACP,MAAO,CACL,QAAS,CACP,cAAe,OACf,MAAO,CACR,CACF,CACF,EACD,OAAQ,CAAE,KAAM,CAAA,CAAI,EACpB,YAAa,CACX,KAAM,CACJ,QAAS,CACP,EAAG,CACJ,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,CACF,EACD,WAAY,CACV,KAAM,CACJ,QAAS,CACP,4BAA6B,CAC3B,MAAO,CACL,YAAa,EACb,YAAa,QACb,YAAa,mBACd,CACF,CACF,CACF,CACF,EACD,gBAAiB,CAAE,KAAM,CAAI,CAAA,CAC9B,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,UACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,WAAY,GACZ,gBAAiB,GACjB,IAAK,CACH,QAAS,CACP,4CAA6C,CAC3C,OAAQ,MACT,CACF,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,OAAQ,GACR,YAAa,MACd,CACF,CAAA"}

package/dist/panda.buildinfo.json

@@ -1 +1 @@
-{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.1s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.1s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.tertiary","mixBlendMode]___[value:multiply]___[cond:_light","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","background]___[value:ink.90","background]___[value:paper]___[cond:_dark","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before<___>_dark","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.lighter]___[cond:_groupHover<___>_dark","color]___[value:chalk","color]___[value:ink.90]___[cond:_dark","color]___[value:positive.base","color]___[value:positive.darker]___[cond:_groupHover","color]___[value:positive.darker]___[cond:_groupHover<___>_dark","color]___[value:negative.darker","color]___[value:negative.base]___[cond:_dark","color]___[value:negative.darkest]___[cond:_groupHover","color]___[value:negative.lighter]___[cond:_groupHover<___>_dark","color]___[value:text.secondary]___[cond:_groupHover","color]___[value:text.secondary]___[cond:_groupHover<___>_dark","color]___[value:text.tertiary","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","width]___[value:fit-content","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","textAlign]___[value:left","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","backgroundColor]___[value:surface.primary","borderRadius]___[value:1rem","cursor]___[value:default","height]___[value:10.75rem","width]___[value:10.75rem","alignItems]___[value:flex-start","alignItems]___[value:flex-end","overflow]___[value:hidden","overflow]___[value:visible","gap]___[value:0","gap]___[value:4","gap]___[value:5","gap]___[value:6","boxShadow]___[value:0px 1px 2px rgba(189, 189, 189, 0.3)","boxShadow]___[value:8px 8px 48px rgba(16, 15, 17, 0.14)","paddingInline]___[value:8","paddingBlock]___[value:6","padding]___[value:12","flex]___[value:1","maxWidth]___[value:29.125rem","maxWidth]___[value:full]___[cond:mdDown","opacity]___[value:0.3","backgroundColor]___[value:surface.tertiary","filter]___[value:brightness(0.9)]___[cond:_hover","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","height]___[value:100vh","width]___[value:100vw","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","height]___[value:90vh]___[cond:@media only screen and (max-width: 767px)","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","maxWidth]___[value:100rem","margin]___[value:0 auto","maxWidth]___[value:none","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:wrap","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","width]___[value:auto","width]___[value:max","maxWidth]___[value:72","background]___[value:surface.tertiary]___[cond:_dark","position]___[value:absolute","paddingInline]___[value:3","borderRadius]___[value:xl","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","display]___[value:none","display]___[value:block","top]___[value:0%","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","right]___[value:100%","transform]___[value:translateX(10%) translateY(calc(-100% - 0.75rem))","left]___[value:100%","transform]___[value:translateX(-10%) translateY(calc(-100% - 0.75rem))","top]___[value:50%","left]___[value:0%","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-50%)","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-75%)","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-25%)","right]___[value:0%","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-50%)","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-75%)","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-25%)","bottom]___[value:0%","transform]___[value:translateX(-50%) translateY(calc(100% + 0.75rem))","transform]___[value:translateX(10%) translateY(calc(100% + 0.75rem))","transform]___[value:translateX(-10%) translateY(calc(100% + 0.75rem))","width]___[value:72","height]___[value:4","bottom]___[value:0","transform]___[value:translateX(-50%) translateY(0.75rem)","transform]___[value:translateX(-50%) translateY(-0.75rem)","width]___[value:4","height]___[value:48","right]___[value:-6","transform]___[value:translateX(-0.75rem) translateY(-50%)","left]___[value:-6","transform]___[value:translateX(0.75rem) translateY(-50%)","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","gap]___[value:10px","flexDirection]___[value:row","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","flexDirection]___[value:column","fill]___[value:white","truncate]___[value:true","opacity]___[value:0.8]___[cond:_disabled","height]___[value:auto","flexShrink]___[value:0","paddingTop]___[value:6","right]___[value:0","background]___[value:text.primary/20","background]___[value:rgba(0, 0, 0, .7)]___[cond:_dark","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","background]___[value:surface.secondary]___[cond:_dark","borderTopRadius]___[value:3xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","zIndex]___[value:10","paddingBottom]___[value:6","justifyContent]___[value:space-between","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","textStyle]___[value:neutral","transform]___[value:translateX(-100%)","transform]___[value:translateX(100%)","transform]___[value:translateX(0)","width]___[value:80","borderRightRadius]___[value:2xl","borderLeftRadius]___[value:2xl","--thickness]___[value:1px","borderBlockEndWidth]___[value:var(--thickness)","borderColor]___[value:surface.quaternary","gap]___[value:2.5","boxShadow]___[value:true","background]___[value:#ffc439","outlineColor]___[value:#ffc439","border]___[value:1px solid transparent","paddingBlock]___[value:2.5","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","flex]___[value:0 0 auto","borderRadius]___[value:9999px","animation]___[value:popIn 150ms","animation]___[value:popOut 150ms","animation]___[value:spin 1.5s linear infinite","stroke]___[value:text.primary","transformOrigin]___[value:center center","gap]___[value:1.5","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","borderRadius]___[value:2rem","borderWidth]___[value:thick","borderColor]___[value:surface.primary","background]___[value:surface.primary]___[cond:_dark","left]___[value:-50%","transform]___[value:skewX(-20deg)","backgroundImage]___[value:linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)","backgroundImage]___[value:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)]___[cond:_dark","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","background]___[value:neutral.quaternary","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","gap]___[value:3","userSelect]___[value:none","userSelect]___[value:auto","filter]___[value:blur(10px)","textWrap]___[value:nowrap","width]___[value:22","height]___[value:22","fontVariant]___[value:no-contextual","transition]___[value:none","gap]___[value:2","width]___[value:16","width]___[value:20","height]___[value:16","height]___[value:20","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","marginTop]___[value:8","marginTop]___[value:4","textStyle]___[value:subtle","height]___[value:24","width]___[value:24","padding]___[value:6","maxWidth]___[value:393","paddingTop]___[value:3","borderBottomColor]___[value:neutral.primary","borderBottomWidth]___[value:1px","width]___[value:6","flexDirection]___[value:column-reverse","borderRadius]___[value:60","height]___[value:11","width]___[value:11","width]___[value:10","left]___[value:9","top]___[value:11","height]___[value:7","width]___[value:7","borderRadius]___[value:30","borderWidth]___[value:2","width]___[value:5","height]___[value:5","borderRadius]___[value:0.375rem","borderRadius]___[value:md","backgroundColor]___[value:neutral.secondary]___[cond:_hover","backgroundColor]___[value:neutral.tertiary","fontWeight]___[value:bold","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","opacity]___[value:0.5","opacity]___[value:1","width]___[value:40","height]___[value:40","minHeight]___[value:16","borderRadius]___[value:0.75rem","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","srOnly]___[value:true","marginLeft]___[value:3","caret]___[value:18","check]___[value:16","height]___[value:3rem","mult]___[value:2.5","display]___[value:inline-block","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:10","transition]___[value:border-color 0.2s ease","height]___[value:6","width]___[value:3","height]___[value:3","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","marginBlock]___[value:3","pointerEvents]___[value:initial","height]___[value:76px","maxWidth]___[value:115px","height]___[value:100%","minWidth]___[value:20","paddingInline]___[value:10","width]___[value:max-content","border]___[value:thin solid transparent","color]___[value:text.primary]___[cond:_groupHover","height]___[value:6.25rem","background]___[value:text.primary/6","borderColor]___[value:text.primary/10","borderWidth]___[value:medium","borderRadius]___[value:52","backdropFilter]___[value:blur(24px)","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","backgroundColor]___[value:text.primary/1","backgroundColor]___[value:text.primary/5","backdropFilter]___[value:blur(8px)","borderColor]___[value:text.primary/6","paddingBlock]___[value:5","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","padding]___[value:10","overflow]___[value:scroll","width]___[value:200px","maxWidth]___[value:200px","minWidth]___[value:88px","textStyle]___[value:negative","width]___[value:114px","height]___[value:48px","maxWidth]___[value:max-content","maxHeight]___[value:max-content","width]___[value:7px","height]___[value:7px","background]___[value:positive.base","bottom]___[value:-1px","right]___[value:-1px","translateX]___[value:6","translateY]___[value:6","translateX]___[value:3","translateY]___[value:3","alignItems]___[value:baseline","margin]___[value:1","backgroundColor]___[value:neutral.secondary","backgroundColor]___[value:negative.lighter","gridTemplateColumns]___[value:2","gap]___[value:8"],"recipes":{}}}
+{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.1s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.1s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.tertiary","mixBlendMode]___[value:multiply]___[cond:_light","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","background]___[value:ink.90","background]___[value:paper]___[cond:_dark","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before<___>_dark","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.lighter]___[cond:_groupHover<___>_dark","color]___[value:chalk","color]___[value:ink.90]___[cond:_dark","color]___[value:positive.base","color]___[value:positive.darker]___[cond:_groupHover","color]___[value:positive.darker]___[cond:_groupHover<___>_dark","color]___[value:negative.darker","color]___[value:negative.base]___[cond:_dark","color]___[value:negative.darkest]___[cond:_groupHover","color]___[value:negative.lighter]___[cond:_groupHover<___>_dark","color]___[value:text.secondary]___[cond:_groupHover","color]___[value:text.secondary]___[cond:_groupHover<___>_dark","color]___[value:text.tertiary","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","width]___[value:fit-content","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","textAlign]___[value:left","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","backgroundColor]___[value:surface.primary","borderRadius]___[value:1rem","cursor]___[value:default","height]___[value:10.75rem","width]___[value:10.75rem","alignItems]___[value:flex-start","alignItems]___[value:flex-end","overflow]___[value:hidden","overflow]___[value:visible","gap]___[value:0","gap]___[value:4","gap]___[value:5","gap]___[value:6","boxShadow]___[value:0px 1px 2px rgba(189, 189, 189, 0.3)","boxShadow]___[value:8px 8px 48px rgba(16, 15, 17, 0.14)","paddingInline]___[value:8","paddingBlock]___[value:6","padding]___[value:12","flex]___[value:1","maxWidth]___[value:29.125rem","maxWidth]___[value:full]___[cond:mdDown","opacity]___[value:0.3","backgroundColor]___[value:surface.tertiary","filter]___[value:brightness(0.9)]___[cond:_hover","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","height]___[value:100vh","width]___[value:100vw","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","height]___[value:100%]___[cond:@media only screen and (max-width: 767px)","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","maxWidth]___[value:100rem","margin]___[value:0 auto","maxWidth]___[value:none","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:wrap","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","width]___[value:auto","width]___[value:max","maxWidth]___[value:72","background]___[value:surface.tertiary]___[cond:_dark","position]___[value:absolute","paddingInline]___[value:3","borderRadius]___[value:xl","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","display]___[value:none","display]___[value:block","top]___[value:0%","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","right]___[value:100%","transform]___[value:translateX(10%) translateY(calc(-100% - 0.75rem))","left]___[value:100%","transform]___[value:translateX(-10%) translateY(calc(-100% - 0.75rem))","top]___[value:50%","left]___[value:0%","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-50%)","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-75%)","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-25%)","right]___[value:0%","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-50%)","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-75%)","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-25%)","bottom]___[value:0%","transform]___[value:translateX(-50%) translateY(calc(100% + 0.75rem))","transform]___[value:translateX(10%) translateY(calc(100% + 0.75rem))","transform]___[value:translateX(-10%) translateY(calc(100% + 0.75rem))","width]___[value:72","height]___[value:4","bottom]___[value:0","transform]___[value:translateX(-50%) translateY(0.75rem)","transform]___[value:translateX(-50%) translateY(-0.75rem)","width]___[value:4","height]___[value:48","right]___[value:-6","transform]___[value:translateX(-0.75rem) translateY(-50%)","left]___[value:-6","transform]___[value:translateX(0.75rem) translateY(-50%)","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","gap]___[value:10px","flexDirection]___[value:row","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","flexDirection]___[value:column","fill]___[value:white","truncate]___[value:true","opacity]___[value:0.8]___[cond:_disabled","height]___[value:auto","flexShrink]___[value:0","paddingTop]___[value:6","right]___[value:0","background]___[value:text.primary/20","background]___[value:rgba(0, 0, 0, .7)]___[cond:_dark","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","background]___[value:surface.secondary]___[cond:_dark","borderTopRadius]___[value:3xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","zIndex]___[value:10","paddingBottom]___[value:6","justifyContent]___[value:space-between","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","textStyle]___[value:neutral","transform]___[value:translateX(-100%)","transform]___[value:translateX(100%)","transform]___[value:translateX(0)","width]___[value:80","borderRightRadius]___[value:2xl","borderLeftRadius]___[value:2xl","--thickness]___[value:1px","borderBlockEndWidth]___[value:var(--thickness)","borderColor]___[value:surface.quaternary","gap]___[value:2.5","boxShadow]___[value:true","background]___[value:#ffc439","outlineColor]___[value:#ffc439","border]___[value:1px solid transparent","paddingBlock]___[value:2.5","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","flex]___[value:0 0 auto","borderRadius]___[value:9999px","animation]___[value:popIn 150ms","animation]___[value:popOut 150ms","animation]___[value:spin 1.5s linear infinite","stroke]___[value:text.primary","transformOrigin]___[value:center center","gap]___[value:1.5","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","borderRadius]___[value:2rem","borderWidth]___[value:thick","borderColor]___[value:surface.primary","background]___[value:surface.primary]___[cond:_dark","left]___[value:-50%","transform]___[value:skewX(-20deg)","backgroundImage]___[value:linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)","backgroundImage]___[value:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)]___[cond:_dark","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","background]___[value:neutral.quaternary","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","gap]___[value:3","userSelect]___[value:none","userSelect]___[value:auto","filter]___[value:blur(10px)","textWrap]___[value:nowrap","width]___[value:22","height]___[value:22","fontVariant]___[value:no-contextual","transition]___[value:none","gap]___[value:2","width]___[value:16","width]___[value:20","height]___[value:16","height]___[value:20","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","marginTop]___[value:8","marginTop]___[value:4","textStyle]___[value:subtle","height]___[value:24","width]___[value:24","padding]___[value:6","maxWidth]___[value:393","paddingTop]___[value:3","borderBottomColor]___[value:neutral.primary","borderBottomWidth]___[value:1px","width]___[value:6","flexDirection]___[value:column-reverse","borderRadius]___[value:60","height]___[value:11","width]___[value:11","width]___[value:10","left]___[value:9","top]___[value:11","height]___[value:7","width]___[value:7","borderRadius]___[value:30","borderWidth]___[value:2","width]___[value:5","height]___[value:5","borderRadius]___[value:0.375rem","borderRadius]___[value:md","backgroundColor]___[value:neutral.secondary]___[cond:_hover","backgroundColor]___[value:neutral.tertiary","fontWeight]___[value:bold","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","opacity]___[value:0.5","opacity]___[value:1","width]___[value:40","height]___[value:40","minHeight]___[value:16","borderRadius]___[value:0.75rem","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","srOnly]___[value:true","marginLeft]___[value:3","caret]___[value:18","check]___[value:16","height]___[value:3rem","mult]___[value:2.5","display]___[value:inline-block","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:10","transition]___[value:border-color 0.2s ease","height]___[value:6","width]___[value:3","height]___[value:3","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","marginBlock]___[value:3","pointerEvents]___[value:initial","height]___[value:76px","maxWidth]___[value:115px","height]___[value:100%","minWidth]___[value:20","paddingInline]___[value:10","width]___[value:max-content","border]___[value:thin solid transparent","color]___[value:text.primary]___[cond:_groupHover","height]___[value:6.25rem","background]___[value:text.primary/6","borderColor]___[value:text.primary/10","borderWidth]___[value:medium","borderRadius]___[value:52","backdropFilter]___[value:blur(24px)","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","backgroundColor]___[value:text.primary/1","backgroundColor]___[value:text.primary/5","backdropFilter]___[value:blur(8px)","borderColor]___[value:text.primary/6","paddingBlock]___[value:5","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","padding]___[value:10","overflow]___[value:scroll","width]___[value:200px","maxWidth]___[value:200px","minWidth]___[value:88px","textStyle]___[value:negative","width]___[value:114px","height]___[value:48px","width]___[value:7px","height]___[value:7px","background]___[value:positive.base","bottom]___[value:-1px","right]___[value:-1px","translateX]___[value:6","translateY]___[value:6","translateX]___[value:3","translateY]___[value:3","alignItems]___[value:baseline","margin]___[value:1","backgroundColor]___[value:neutral.secondary","backgroundColor]___[value:negative.lighter","gridTemplateColumns]___[value:2","gap]___[value:8"],"recipes":{}}}

package/dist/types/recipes/modal.d.ts

@@ -72,7 +72,7 @@ export declare const modal: import("../../styled-system/types").SlotRecipeRuntim
             };
         };
     };
-    isSafariMobile: {
+    isMobileBrowser: {
         true: {};
     };
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magiclabs/ui-components",
-  "version": "1.35.2",
+  "version": "1.35.4",
   "description": "💅 A theme-able library of reusable UI components",
   "author": "Magic Labs <open-source@magic.link>",
   "repository": {