@magiclabs/ui-components 1.34.21 → 1.34.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("react/jsx-runtime"),f=require("../containers/button.js");require("../containers/card.js");var a=require("@styled/css");require("@styled/jsx"),require("@styled/tokens"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js"),require("../primitives/text.js");var t=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");const n=t.forwardRef((c,q)=>{const{address:r,onCopy:i}=c,[e,u]=t.useState(!1),o=`${r.slice(0,6)}...${r?.slice(-4)}`,l=t.useCallback(()=>{i&&i(r),u(!0)},[r]);return t.useEffect(()=>{if(e){const d=setTimeout(()=>{u(!1)},1500);return()=>clearTimeout(d)}},[e]),i?s.jsx(f.ButtonContainer,{className:a.css({fontSize:"md",color:e?"positive.darker":"text.tertiary",fontWeight:e?"medium":"normal",rounded:"button",fontVariant:"no-contextual"}),onPress:l,ref:q,children:e?"Copied!":o}):s.jsx("span",{className:a.css({fontSize:"md",color:"text.tertiary",fontWeight:"normal",fontVariant:"no-contextual"}),children:o})});n.displayName="WalletAddress",exports.default=n;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),j=require("../containers/button.js");require("../containers/card.js");var q=require("@styled/css"),C=require("@styled/jsx"),f=require("@styled/tokens"),g=require("../icons/ico-checkmark.js"),k=require("../icons/ico-copy.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js"),require("../primitives/text.js");var o=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");const h=o.forwardRef((m,x)=>{const{address:t,onCopy:s,size:u="md",icon:a,fontColor:n="text.tertiary",fontWeight:c="normal"}=m,[r,l]=o.useState(!1),d=`${t.slice(0,6)}...${t?.slice(-4)}`,i=u==="sm"?16:20,p=o.useCallback(()=>{s&&s(t),l(!0)},[t]);return o.useEffect(()=>{if(r){const v=setTimeout(()=>{l(!1)},1500);return()=>clearTimeout(v)}},[r]),s?e.jsx(j.ButtonContainer,{className:q.css({fontSize:u,color:r?"positive.base":n,fontWeight:r?"medium":c,rounded:"button",fontVariant:"no-contextual",transition:"none"}),onPress:p,ref:x,children:e.jsxs(C.HStack,{gap:2,children:[r?a?"Copied":"Copied!":d,a&&e.jsx(e.Fragment,{children:r?e.jsx(g.default,{width:i,height:i,color:f.token("colors.positive.base")}):e.jsx(k.default,{width:i,height:i,color:f.token("colors.text.tertiary")})})]})}):e.jsx("span",{className:q.css({fontSize:u,color:n,fontWeight:c,fontVariant:"no-contextual"}),children:d})});h.displayName="WalletAddress",exports.default=h;
2
2
  //# sourceMappingURL=wallet-address.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"wallet-address.js","sources":["../../../../src/components/info/wallet-address.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { css } from '@styled/css';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface WalletAddressProps extends AriaButtonProps {\n address: string;\n onCopy?: (address: string) => void;\n}\n\nconst WalletAddress = forwardRef<HTMLButtonElement, WalletAddressProps>((props, forwardedRef) => {\n const { address, onCopy } = props;\n const [isCopied, setIsCopied] = useState(false);\n const truncatedAddress = `${address.slice(0, 6)}...${address?.slice(-4)}`;\n\n const handleOnCopy = useCallback(() => {\n if (onCopy) {\n onCopy(address);\n }\n setIsCopied(true);\n }, [address]);\n\n useEffect(() => {\n if (isCopied) {\n const timeoutId = setTimeout(() => {\n setIsCopied(false);\n }, 1500);\n\n return () => clearTimeout(timeoutId);\n }\n }, [isCopied]);\n\n if (!onCopy) {\n return (\n <span\n className={css({\n fontSize: 'md',\n color: 'text.tertiary',\n fontWeight: 'normal',\n fontVariant: 'no-contextual',\n })}\n >\n {truncatedAddress}\n </span>\n );\n }\n\n return (\n <ButtonContainer\n className={css({\n fontSize: 'md',\n color: isCopied ? 'positive.darker' : 'text.tertiary',\n fontWeight: isCopied ? 'medium' : 'normal',\n rounded: 'button',\n fontVariant: 'no-contextual',\n })}\n onPress={handleOnCopy}\n ref={forwardedRef}\n >\n {isCopied ? 'Copied!' : truncatedAddress}\n </ButtonContainer>\n );\n});\n\nWalletAddress.displayName = 'WalletAddress';\n\nexport default WalletAddress;\n"],"names":["WalletAddress","forwardRef","props","forwardedRef","address","onCopy","isCopied","setIsCopied","useState","truncatedAddress","handleOnCopy","useCallback","useEffect","timeoutId","_jsx","ButtonContainer","css"],"mappings":"wzBAUMA,MAAAA,EAAgBC,EAAAA,WAAkD,CAACC,EAAOC,IAAgB,CAC9F,KAAM,CAAE,QAAAC,EAAS,OAAAC,CAAQ,EAAGH,EACtB,CAACI,EAAUC,CAAW,EAAIC,WAAS,EAAK,EACxCC,EAAmB,GAAGL,EAAQ,MAAM,EAAG,CAAC,CAAC,MAAMA,GAAS,MAAM,EAAE,CAAC,GAEjEM,EAAeC,cAAY,IAAK,CAChCN,GACFA,EAAOD,CAAO,EAEhBG,EAAY,EAAI,CAClB,EAAG,CAACH,CAAO,CAAC,EAYZ,OAVAQ,YAAU,IAAK,CACb,GAAIN,EAAU,CACZ,MAAMO,EAAY,WAAW,IAAK,CAChCN,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaM,CAAS,CACrC,CACF,EAAG,CAACP,CAAQ,CAAC,EAERD,EAgBHS,EAACC,IAAAA,EAAAA,iBACC,UAAWC,MAAI,CACb,SAAU,KACV,MAAOV,EAAW,kBAAoB,gBACtC,WAAYA,EAAW,SAAW,SAClC,QAAS,SACT,YAAa,gBACd,EACD,QAASI,EACT,IAAKP,EAEJ,SAAAG,EAAW,UAAYG,CAAgB,CAAA,EAzBxCK,EAAAA,IAAA,OAAA,CACE,UAAWE,EAAAA,IAAI,CACb,SAAU,KACV,MAAO,gBACP,WAAY,SACZ,YAAa,eACd,CAAA,EAEA,SAAAP,CACI,CAAA,CAmBb,CAAC,EAEDT,EAAc,YAAc"}
1
+ {"version":3,"file":"wallet-address.js","sources":["../../../../src/components/info/wallet-address.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { IcoCheckmark, IcoCopy } from '@components/icons';\nimport { css } from '@styled/css';\nimport { HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface WalletAddressProps extends AriaButtonProps {\n address: string;\n onCopy?: (address: string) => void;\n size?: 'sm' | 'md';\n icon?: boolean;\n fontColor?: 'text.primary' | 'text.secondary' | 'text.tertiary';\n fontWeight?: 'normal' | 'medium';\n}\n\nconst WalletAddress = forwardRef<HTMLButtonElement, WalletAddressProps>((props, forwardedRef) => {\n const { address, onCopy, size = 'md', icon, fontColor = 'text.tertiary', fontWeight = 'normal' } = props;\n const [isCopied, setIsCopied] = useState(false);\n const truncatedAddress = `${address.slice(0, 6)}...${address?.slice(-4)}`;\n const iconSize = size === 'sm' ? 16 : 20;\n\n const handleOnCopy = useCallback(() => {\n if (onCopy) {\n onCopy(address);\n }\n setIsCopied(true);\n }, [address]);\n\n useEffect(() => {\n if (isCopied) {\n const timeoutId = setTimeout(() => {\n setIsCopied(false);\n }, 1500);\n\n return () => clearTimeout(timeoutId);\n }\n }, [isCopied]);\n\n if (!onCopy) {\n return (\n <span\n className={css({\n fontSize: size,\n color: fontColor,\n fontWeight,\n fontVariant: 'no-contextual',\n })}\n >\n {truncatedAddress}\n </span>\n );\n }\n\n return (\n <ButtonContainer\n className={css({\n fontSize: size,\n color: isCopied ? 'positive.base' : fontColor,\n fontWeight: isCopied ? 'medium' : fontWeight,\n rounded: 'button',\n fontVariant: 'no-contextual',\n transition: 'none',\n })}\n onPress={handleOnCopy}\n ref={forwardedRef}\n >\n <HStack gap={2}>\n {isCopied ? (icon ? 'Copied' : 'Copied!') : truncatedAddress}\n {icon && (\n <>\n {isCopied ? (\n <IcoCheckmark width={iconSize} height={iconSize} color={token('colors.positive.base')} />\n ) : (\n <IcoCopy width={iconSize} height={iconSize} color={token('colors.text.tertiary')} />\n )}\n </>\n )}\n </HStack>\n </ButtonContainer>\n );\n});\n\nWalletAddress.displayName = 'WalletAddress';\n\nexport default WalletAddress;\n"],"names":["WalletAddress","forwardRef","props","forwardedRef","address","onCopy","size","icon","fontColor","fontWeight","isCopied","setIsCopied","useState","truncatedAddress","iconSize","handleOnCopy","useCallback","useEffect","timeoutId","_jsx","ButtonContainer","css","_jsxs","HStack","_Fragment","IcoCheckmark","token","IcoCopy"],"mappings":"q4BAiBMA,MAAAA,EAAgBC,EAAAA,WAAkD,CAACC,EAAOC,IAAgB,CAC9F,KAAM,CAAE,QAAAC,EAAS,OAAAC,EAAQ,KAAAC,EAAO,KAAM,KAAAC,EAAM,UAAAC,EAAY,gBAAiB,WAAAC,EAAa,QAAQ,EAAKP,EAC7F,CAACQ,EAAUC,CAAW,EAAIC,EAAAA,SAAS,EAAK,EACxCC,EAAmB,GAAGT,EAAQ,MAAM,EAAG,CAAC,CAAC,MAAMA,GAAS,MAAM,EAAE,CAAC,GACjEU,EAAWR,IAAS,KAAO,GAAK,GAEhCS,EAAeC,EAAAA,YAAY,IAAK,CAChCX,GACFA,EAAOD,CAAO,EAEhBO,EAAY,EAAI,CAClB,EAAG,CAACP,CAAO,CAAC,EAYZ,OAVAa,EAAAA,UAAU,IAAK,CACb,GAAIP,EAAU,CACZ,MAAMQ,EAAY,WAAW,IAAK,CAChCP,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaO,CAAS,CACrC,CACF,EAAG,CAACR,CAAQ,CAAC,EAERL,EAgBHc,MAACC,EAAAA,iBACC,UAAWC,EAAI,IAAA,CACb,SAAUf,EACV,MAAOI,EAAW,gBAAkBF,EACpC,WAAYE,EAAW,SAAWD,EAClC,QAAS,SACT,YAAa,gBACb,WAAY,OACb,EACD,QAASM,EACT,IAAKZ,EAEL,SAAAmB,EAACC,KAAAA,EAAAA,OAAO,CAAA,IAAK,EAAC,SAAA,CACXb,EAAYH,EAAO,SAAW,UAAaM,EAC3CN,GACCY,EAAAA,IAAAK,WAAA,CAAA,SACGd,EACCS,EAAAA,IAACM,EAAa,QAAA,CAAA,MAAOX,EAAU,OAAQA,EAAU,MAAOY,EAAAA,MAAM,sBAAsB,CAAK,CAAA,EAEzFP,MAACQ,EAAAA,SAAQ,MAAOb,EAAU,OAAQA,EAAU,MAAOY,EAAAA,MAAM,sBAAsB,GAChF,CAAA,CAEJ,CACM,CAAA,CAAA,CAAA,EArCTP,MAAA,OAAA,CACE,UAAWE,EAAAA,IAAI,CACb,SAAUf,EACV,MAAOE,EACP,WAAAC,EACA,YAAa,eACd,CAAA,EAEA,SAAAI,CACI,CAAA,CA+Bb,CAAC,EAEDb,EAAc,YAAc"}
@@ -1,2 +1,2 @@
1
- "use strict";var r=require("react/jsx-runtime");require("../../info/copy-button.js"),require("../../info/email-wbr.js"),require("../../info/security-otp.js"),require("../../info/text-box.js");var o=require("../../info/wallet-address.js"),s=require("@styled/jsx"),e=require("@styled/tokens");const l=({address:i,onAddressCopy:t})=>r.jsxs(s.HStack,{gap:0,style:{filter:`drop-shadow(0px 0px 0.5px color-mix(in srgb, ${e.token("colors.text.primary")}, transparent 20%)`},children:[r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",children:r.jsx("path",{d:"M0 0L48 0V48H47.4146C37.829 48 29.1682 42.28 25.4052 33.4639L16.4163 12.405C13.533 5.65001 7.28559 0.929159 0 0Z",fill:e.token("colors.surface.primary")})}),r.jsx(s.Center,{bgColor:"surface.primary",w:"114px",h:"48px",children:r.jsx(o.default,{address:i,onCopy:t})}),r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",children:r.jsx("path",{d:"M48 0L0 0V48H0.299999C9.94709 48 18.6672 42.2544 22.4737 33.39L31.4615 12.4594C34.3773 5.66924 40.669 0.929361 48 0Z",fill:e.token("colors.surface.primary")})})]});exports.Address=l;
1
+ "use strict";var r=require("react/jsx-runtime");require("../../info/copy-button.js"),require("../../info/email-wbr.js"),require("../../info/security-otp.js"),require("../../info/text-box.js");var t=require("../../info/wallet-address.js"),s=require("@styled/jsx"),e=require("@styled/tokens");const n=({address:i,onAddressCopy:o})=>r.jsxs(s.HStack,{gap:0,style:{filter:`drop-shadow(0px 0px 0.5px color-mix(in srgb, ${e.token("colors.text.primary")}, transparent 20%)`},children:[r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",children:r.jsx("path",{d:"M0 0L48 0V48H47.4146C37.829 48 29.1682 42.28 25.4052 33.4639L16.4163 12.405C13.533 5.65001 7.28559 0.929159 0 0Z",fill:e.token("colors.surface.primary")})}),r.jsx(s.Center,{bgColor:"surface.primary",w:"114px",h:"48px",children:r.jsx(t.default,{address:i,onCopy:o,size:"sm",icon:!0,fontColor:"text.secondary",fontWeight:"medium"})}),r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",children:r.jsx("path",{d:"M48 0L0 0V48H0.299999C9.94709 48 18.6672 42.2544 22.4737 33.39L31.4615 12.4594C34.3773 5.66924 40.669 0.929361 48 0Z",fill:e.token("colors.surface.primary")})})]});exports.Address=n;
2
2
  //# sourceMappingURL=address.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"address.js","sources":["../../../../../src/components/layouts/wallet-page/address.tsx"],"sourcesContent":["import { WalletAddress } from '@components/info';\nimport { Center, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nexport interface AddressProps {\n address: string;\n onAddressCopy?: (address: string) => void;\n}\n\nexport const Address = ({ address, onAddressCopy }: AddressProps) => (\n <HStack\n gap={0}\n style={{ filter: `drop-shadow(0px 0px 0.5px color-mix(in srgb, ${token('colors.text.primary')}, transparent 20%)` }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\n <path\n d=\"M0 0L48 0V48H47.4146C37.829 48 29.1682 42.28 25.4052 33.4639L16.4163 12.405C13.533 5.65001 7.28559 0.929159 0 0Z\"\n fill={token('colors.surface.primary')}\n />\n </svg>\n <Center bgColor=\"surface.primary\" w=\"114px\" h=\"48px\">\n <WalletAddress address={address} onCopy={onAddressCopy} />\n </Center>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\n <path\n d=\"M48 0L0 0V48H0.299999C9.94709 48 18.6672 42.2544 22.4737 33.39L31.4615 12.4594C34.3773 5.66924 40.669 0.929361 48 0Z\"\n fill={token('colors.surface.primary')}\n />\n </svg>\n </HStack>\n);\n"],"names":["Address","address","onAddressCopy","_jsxs","HStack","token","_jsx","Center","WalletAddress"],"mappings":"mSASa,MAAAA,EAAU,CAAC,CAAE,QAAAC,EAAS,cAAAC,CAAa,IAC9CC,EAAAA,KAACC,SAAM,CACL,IAAK,EACL,MAAO,CAAE,OAAQ,gDAAgDC,EAAAA,MAAM,qBAAqB,CAAC,oBAAsB,EAAA,SAAA,CAEnHC,EAAK,IAAA,MAAA,CAAA,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAM,SAC5FA,MACE,OAAA,CAAA,EAAE,mHACF,KAAMD,QAAM,wBAAwB,CACpC,CAAA,CAAA,CAAA,EAEJC,EAACC,IAAAA,SAAM,CAAC,QAAQ,kBAAkB,EAAE,QAAQ,EAAE,OAC5C,SAAAD,EAACE,IAAAA,UAAa,CAAC,QAASP,EAAS,OAAQC,CAAa,CAAA,CAC/C,CAAA,EACTI,aAAK,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAA,IAAA,OAAA,CACE,EAAE,uHACF,KAAMD,EAAM,MAAA,wBAAwB,CAAC,CAAA,CAEnC,CAAA,CAAA,CAAA,CAAA"}
1
+ {"version":3,"file":"address.js","sources":["../../../../../src/components/layouts/wallet-page/address.tsx"],"sourcesContent":["import { WalletAddress } from '@components/info';\nimport { Center, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nexport interface AddressProps {\n address: string;\n onAddressCopy?: (address: string) => void;\n}\n\nexport const Address = ({ address, onAddressCopy }: AddressProps) => (\n <HStack\n gap={0}\n style={{ filter: `drop-shadow(0px 0px 0.5px color-mix(in srgb, ${token('colors.text.primary')}, transparent 20%)` }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\n <path\n d=\"M0 0L48 0V48H47.4146C37.829 48 29.1682 42.28 25.4052 33.4639L16.4163 12.405C13.533 5.65001 7.28559 0.929159 0 0Z\"\n fill={token('colors.surface.primary')}\n />\n </svg>\n <Center bgColor=\"surface.primary\" w=\"114px\" h=\"48px\">\n <WalletAddress\n address={address}\n onCopy={onAddressCopy}\n size=\"sm\"\n icon\n fontColor=\"text.secondary\"\n fontWeight=\"medium\"\n />\n </Center>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\n <path\n d=\"M48 0L0 0V48H0.299999C9.94709 48 18.6672 42.2544 22.4737 33.39L31.4615 12.4594C34.3773 5.66924 40.669 0.929361 48 0Z\"\n fill={token('colors.surface.primary')}\n />\n </svg>\n </HStack>\n);\n"],"names":["Address","address","onAddressCopy","_jsxs","HStack","token","_jsx","Center","WalletAddress"],"mappings":"mSASO,MAAMA,EAAU,CAAC,CAAE,QAAAC,EAAS,cAAAC,CAA6B,IAC9DC,OAACC,EAAAA,OACC,CAAA,IAAK,EACL,MAAO,CAAE,OAAQ,gDAAgDC,EAAAA,MAAM,qBAAqB,CAAC,sBAE7F,SAAA,CAAAC,EAAAA,IAAA,MAAA,CAAK,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAAA,IAAA,OAAA,CACE,EAAE,mHACF,KAAMD,EAAM,MAAA,wBAAwB,CACpC,CAAA,CAAA,CAAA,EAEJC,EAAAA,IAACC,SAAO,CAAA,QAAQ,kBAAkB,EAAE,QAAQ,EAAE,OAAM,SAClDD,EAAAA,IAACE,EAAa,QAAA,CACZ,QAASP,EACT,OAAQC,EACR,KAAK,KACL,KAAI,GACJ,UAAU,iBACV,WAAW,UAEN,CAAA,EACTI,MAAK,MAAA,CAAA,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAM,SAC5FA,MACE,OAAA,CAAA,EAAE,uHACF,KAAMD,EAAAA,MAAM,wBAAwB,CAAC,CAAA,CAEnC,CAAA,CAAA,CAAA,CAAA"}
@@ -1,2 +1,2 @@
1
- "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",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;
1
+ "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;
2
2
  //# sourceMappingURL=connection-menu.js.map
@@ -1 +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\">\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,EAAAA,UAAU,IAAK,CACbF,EAAS,EAAK,CAChB,EAAG,CAACH,CAAO,CAAC,EAGVM,OAACC,WAAQ,SAAU,GAAI,QAAQ,OAAM,SAAA,CACnCC,EAACD,IAAAA,EAAAA,QAAQ,YAAY,CAAA,MAAOE,EAAAA,MAAM,sBAAsB,WACrDT,GAAWL,GAAa,CAACO,EACxBI,OAACI,EAAO,OAAA,CAAA,SAAS,WAAU,SAAA,CACzBF,EAAAA,WACE,MAAO,CAAE,aAAc,KAAK,EAC5B,MAAO,GACP,OAAQ,GACR,IAAKR,EACL,IAAI,WACJ,QAAS,IAAMG,EAAS,EAAI,CAAC,CAAA,EAE/BK,EAAAA,IAACE,UACC,KAAK,MACL,SAAS,WACT,GAAG,gBACH,YAAY,OACZ,YAAY,kBACZ,OAAO,OACP,MAAM,OACN,UAAU,cACV,CACK,CAAA,EAETJ,EAAAA,KAAK,MAAA,CAAA,MAAM,KAAK,OAAO,eACrBE,EAAAA,IAAQ,SAAA,CAAA,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAMC,EAAAA,MAAM,yBAAyB,IACpED,EAACG,IAAAA,UAAS,CAAA,MAAOF,EAAAA,MAAM,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,IAAM,CACjF,CAAA,IAGVH,EAAAA,KAACC,EAAAA,QAAQ,SAAQ,UAAWK,MAAI,CAAE,EAAG,OAAS,CAAA,YAC5CN,EAAAA,KAACO,EAAAA,OAAM,EAAE,OAAO,IAAK,EAAG,SAAS,mBAC7BlB,EAKAa,MAACM,EAAK,QAAA,CAAA,KAAK,KAAK,QAAQ,UAAU,WAAW,SAC1C,SAAAlB,IALHY,EAACM,IAAAA,EAAAA,SAAK,UAAU,gBAAgB,KAAK,KAAI,SACtChB,CACI,CAAA,EAMTU,EAACM,IAAAA,EAAAA,QAAI,CAAC,SAAU,GAAA,SAAAf,GAAc,CACxB,CAAA,EACPJ,GAAaE,GACZS,EAAAS,KAAAA,EAAAA,SAAA,CAAA,SAAA,CACEP,MAACQ,UAAO,CAAC,MAAM,qBAAqB,GAAI,CAAK,CAAA,EAC7CR,EAACS,IAAAA,EAAAA,SAAO,MAAOpB,EAAiB,KAAK,KAAK,UAAU,WAAW,QAAQ,OAAO,QAASI,EAAY,SACjGO,EAACS,IAAAA,EAAAA,QAAO,YACN,CAAA,SAAAX,EAAAA,KAAA,MAAA,CAAK,MAAM,KAAK,OAAO,KACrB,SAAA,CAAAE,MAAA,SAAA,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"}
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"}
@@ -1,2 +1,2 @@
1
- import{jsx as m}from"react/jsx-runtime";import{ButtonContainer as f}from"../containers/button.js";import"../containers/card.js";import{css as n}from"@styled/css";import"@styled/jsx";import"@styled/tokens";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import"../primitives/text.js";import{forwardRef as d,useState as u,useCallback as x,useEffect as h}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";const a=d((p,s)=>{const{address:o,onCopy:r}=p,[t,i]=u(!1),e=`${o.slice(0,6)}...${o?.slice(-4)}`,l=x(()=>{r&&r(o),i(!0)},[o]);return h(()=>{if(t){const c=setTimeout(()=>{i(!1)},1500);return()=>clearTimeout(c)}},[t]),r?m(f,{className:n({fontSize:"md",color:t?"positive.darker":"text.tertiary",fontWeight:t?"medium":"normal",rounded:"button",fontVariant:"no-contextual"}),onPress:l,ref:s,children:t?"Copied!":e}):m("span",{className:n({fontSize:"md",color:"text.tertiary",fontWeight:"normal",fontVariant:"no-contextual"}),children:e})});a.displayName="WalletAddress";export{a as default};
1
+ import{jsx as t,jsxs as C,Fragment as b}from"react/jsx-runtime";import{ButtonContainer as y}from"../containers/button.js";import"../containers/card.js";import{css as l}from"@styled/css";import{HStack as S}from"@styled/jsx";import{token as f}from"@styled/tokens";import W from"../icons/ico-checkmark.js";import $ from"../icons/ico-copy.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import"../primitives/text.js";import{forwardRef as k,useState as w,useCallback as z,useEffect as N}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";const d=k((u,h)=>{const{address:r,onCopy:e,size:m="md",icon:n,fontColor:s="text.tertiary",fontWeight:p="normal"}=u,[o,a]=w(!1),c=`${r.slice(0,6)}...${r?.slice(-4)}`,i=m==="sm"?16:20,x=z(()=>{e&&e(r),a(!0)},[r]);return N(()=>{if(o){const g=setTimeout(()=>{a(!1)},1500);return()=>clearTimeout(g)}},[o]),e?t(y,{className:l({fontSize:m,color:o?"positive.base":s,fontWeight:o?"medium":p,rounded:"button",fontVariant:"no-contextual",transition:"none"}),onPress:x,ref:h,children:C(S,{gap:2,children:[o?n?"Copied":"Copied!":c,n&&t(b,{children:o?t(W,{width:i,height:i,color:f("colors.positive.base")}):t($,{width:i,height:i,color:f("colors.text.tertiary")})})]})}):t("span",{className:l({fontSize:m,color:s,fontWeight:p,fontVariant:"no-contextual"}),children:c})});d.displayName="WalletAddress";export{d as default};
2
2
  //# sourceMappingURL=wallet-address.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"wallet-address.js","sources":["../../../../src/components/info/wallet-address.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { css } from '@styled/css';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface WalletAddressProps extends AriaButtonProps {\n address: string;\n onCopy?: (address: string) => void;\n}\n\nconst WalletAddress = forwardRef<HTMLButtonElement, WalletAddressProps>((props, forwardedRef) => {\n const { address, onCopy } = props;\n const [isCopied, setIsCopied] = useState(false);\n const truncatedAddress = `${address.slice(0, 6)}...${address?.slice(-4)}`;\n\n const handleOnCopy = useCallback(() => {\n if (onCopy) {\n onCopy(address);\n }\n setIsCopied(true);\n }, [address]);\n\n useEffect(() => {\n if (isCopied) {\n const timeoutId = setTimeout(() => {\n setIsCopied(false);\n }, 1500);\n\n return () => clearTimeout(timeoutId);\n }\n }, [isCopied]);\n\n if (!onCopy) {\n return (\n <span\n className={css({\n fontSize: 'md',\n color: 'text.tertiary',\n fontWeight: 'normal',\n fontVariant: 'no-contextual',\n })}\n >\n {truncatedAddress}\n </span>\n );\n }\n\n return (\n <ButtonContainer\n className={css({\n fontSize: 'md',\n color: isCopied ? 'positive.darker' : 'text.tertiary',\n fontWeight: isCopied ? 'medium' : 'normal',\n rounded: 'button',\n fontVariant: 'no-contextual',\n })}\n onPress={handleOnCopy}\n ref={forwardedRef}\n >\n {isCopied ? 'Copied!' : truncatedAddress}\n </ButtonContainer>\n );\n});\n\nWalletAddress.displayName = 'WalletAddress';\n\nexport default WalletAddress;\n"],"names":["WalletAddress","forwardRef","props","forwardedRef","address","onCopy","isCopied","setIsCopied","useState","truncatedAddress","handleOnCopy","useCallback","useEffect","timeoutId","_jsx","ButtonContainer","css"],"mappings":"uxBAUMA,MAAAA,EAAgBC,EAAkD,CAACC,EAAOC,IAAgB,CAC9F,KAAM,CAAE,QAAAC,EAAS,OAAAC,CAAQ,EAAGH,EACtB,CAACI,EAAUC,CAAW,EAAIC,EAAS,EAAK,EACxCC,EAAmB,GAAGL,EAAQ,MAAM,EAAG,CAAC,CAAC,MAAMA,GAAS,MAAM,EAAE,CAAC,GAEjEM,EAAeC,EAAY,IAAK,CAChCN,GACFA,EAAOD,CAAO,EAEhBG,EAAY,EAAI,CAClB,EAAG,CAACH,CAAO,CAAC,EAYZ,OAVAQ,EAAU,IAAK,CACb,GAAIN,EAAU,CACZ,MAAMO,EAAY,WAAW,IAAK,CAChCN,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaM,CAAS,CACrC,CACF,EAAG,CAACP,CAAQ,CAAC,EAERD,EAgBHS,EAACC,GACC,UAAWC,EAAI,CACb,SAAU,KACV,MAAOV,EAAW,kBAAoB,gBACtC,WAAYA,EAAW,SAAW,SAClC,QAAS,SACT,YAAa,gBACd,EACD,QAASI,EACT,IAAKP,EAEJ,SAAAG,EAAW,UAAYG,CAAgB,CAAA,EAzBxCK,EAAA,OAAA,CACE,UAAWE,EAAI,CACb,SAAU,KACV,MAAO,gBACP,WAAY,SACZ,YAAa,eACd,CAAA,EAEA,SAAAP,CACI,CAAA,CAmBb,CAAC,EAEDT,EAAc,YAAc"}
1
+ {"version":3,"file":"wallet-address.js","sources":["../../../../src/components/info/wallet-address.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { IcoCheckmark, IcoCopy } from '@components/icons';\nimport { css } from '@styled/css';\nimport { HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface WalletAddressProps extends AriaButtonProps {\n address: string;\n onCopy?: (address: string) => void;\n size?: 'sm' | 'md';\n icon?: boolean;\n fontColor?: 'text.primary' | 'text.secondary' | 'text.tertiary';\n fontWeight?: 'normal' | 'medium';\n}\n\nconst WalletAddress = forwardRef<HTMLButtonElement, WalletAddressProps>((props, forwardedRef) => {\n const { address, onCopy, size = 'md', icon, fontColor = 'text.tertiary', fontWeight = 'normal' } = props;\n const [isCopied, setIsCopied] = useState(false);\n const truncatedAddress = `${address.slice(0, 6)}...${address?.slice(-4)}`;\n const iconSize = size === 'sm' ? 16 : 20;\n\n const handleOnCopy = useCallback(() => {\n if (onCopy) {\n onCopy(address);\n }\n setIsCopied(true);\n }, [address]);\n\n useEffect(() => {\n if (isCopied) {\n const timeoutId = setTimeout(() => {\n setIsCopied(false);\n }, 1500);\n\n return () => clearTimeout(timeoutId);\n }\n }, [isCopied]);\n\n if (!onCopy) {\n return (\n <span\n className={css({\n fontSize: size,\n color: fontColor,\n fontWeight,\n fontVariant: 'no-contextual',\n })}\n >\n {truncatedAddress}\n </span>\n );\n }\n\n return (\n <ButtonContainer\n className={css({\n fontSize: size,\n color: isCopied ? 'positive.base' : fontColor,\n fontWeight: isCopied ? 'medium' : fontWeight,\n rounded: 'button',\n fontVariant: 'no-contextual',\n transition: 'none',\n })}\n onPress={handleOnCopy}\n ref={forwardedRef}\n >\n <HStack gap={2}>\n {isCopied ? (icon ? 'Copied' : 'Copied!') : truncatedAddress}\n {icon && (\n <>\n {isCopied ? (\n <IcoCheckmark width={iconSize} height={iconSize} color={token('colors.positive.base')} />\n ) : (\n <IcoCopy width={iconSize} height={iconSize} color={token('colors.text.tertiary')} />\n )}\n </>\n )}\n </HStack>\n </ButtonContainer>\n );\n});\n\nWalletAddress.displayName = 'WalletAddress';\n\nexport default WalletAddress;\n"],"names":["WalletAddress","forwardRef","props","forwardedRef","address","onCopy","size","icon","fontColor","fontWeight","isCopied","setIsCopied","useState","truncatedAddress","iconSize","handleOnCopy","useCallback","useEffect","timeoutId","_jsx","ButtonContainer","css","_jsxs","HStack","_Fragment","IcoCheckmark","token","IcoCopy"],"mappings":"65BAiBMA,MAAAA,EAAgBC,EAAkD,CAACC,EAAOC,IAAgB,CAC9F,KAAM,CAAE,QAAAC,EAAS,OAAAC,EAAQ,KAAAC,EAAO,KAAM,KAAAC,EAAM,UAAAC,EAAY,gBAAiB,WAAAC,EAAa,QAAQ,EAAKP,EAC7F,CAACQ,EAAUC,CAAW,EAAIC,EAAS,EAAK,EACxCC,EAAmB,GAAGT,EAAQ,MAAM,EAAG,CAAC,CAAC,MAAMA,GAAS,MAAM,EAAE,CAAC,GACjEU,EAAWR,IAAS,KAAO,GAAK,GAEhCS,EAAeC,EAAY,IAAK,CAChCX,GACFA,EAAOD,CAAO,EAEhBO,EAAY,EAAI,CAClB,EAAG,CAACP,CAAO,CAAC,EAYZ,OAVAa,EAAU,IAAK,CACb,GAAIP,EAAU,CACZ,MAAMQ,EAAY,WAAW,IAAK,CAChCP,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaO,CAAS,CACrC,CACF,EAAG,CAACR,CAAQ,CAAC,EAERL,EAgBHc,EAACC,GACC,UAAWC,EAAI,CACb,SAAUf,EACV,MAAOI,EAAW,gBAAkBF,EACpC,WAAYE,EAAW,SAAWD,EAClC,QAAS,SACT,YAAa,gBACb,WAAY,OACb,EACD,QAASM,EACT,IAAKZ,EAEL,SAAAmB,EAACC,EAAO,CAAA,IAAK,EAAC,SAAA,CACXb,EAAYH,EAAO,SAAW,UAAaM,EAC3CN,GACCY,EAAAK,EAAA,CAAA,SACGd,EACCS,EAACM,EAAa,CAAA,MAAOX,EAAU,OAAQA,EAAU,MAAOY,EAAM,sBAAsB,CAAK,CAAA,EAEzFP,EAACQ,GAAQ,MAAOb,EAAU,OAAQA,EAAU,MAAOY,EAAM,sBAAsB,GAChF,CAAA,CAEJ,CACM,CAAA,CAAA,CAAA,EArCTP,EAAA,OAAA,CACE,UAAWE,EAAI,CACb,SAAUf,EACV,MAAOE,EACP,WAAAC,EACA,YAAa,eACd,CAAA,EAEA,SAAAI,CACI,CAAA,CA+Bb,CAAC,EAEDb,EAAc,YAAc"}
@@ -1,2 +1,2 @@
1
- import{jsx as r,jsxs as n}from"react/jsx-runtime";import"../containers/button.js";import"../containers/card.js";import"@styled/css";import{VStack as d,Center as K,HStack as g,Box as y,Flex as P}from"@styled/jsx";import{Drawer as v}from"../containers/drawer.js";import{Children as O}from"react";import"../utils/client-asset-logo.js";import{token as B}from"@styled/tokens";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import U from"../icons/ico-caret-left.js";import j from"../icons/ico-magic.js";import V from"../icons/ico-question-circle-fill.js";import"../containers/header.js";import{Menu as z}from"../containers/menu.js";import{Modal as $}from"../containers/modal.js";import"../containers/overlay.js";import"../info/copy-button.js";import"../info/email-wbr.js";import"../info/security-otp.js";import"../info/text-box.js";import q from"../info/wallet-address.js";import l from"../primitives/button.js";import{Popover as u}from"../primitives/popover.js";import x from"../primitives/text.js";import{createSlot as i,createHost as E}from"create-slots";const S=i(({children:e})=>O.map(e,t=>r(l,{expand:!0,...t.props}))),k=i(l),W=i(l),D=i(({children:e})=>n(u,{textStyle:"subtle",variant:"text",children:[r(u.TrailingIcon,{children:r(V,{})}),r(u.Content,{children:e})]})),H=i(({branding:e,title:t})=>t?r(x,{size:"sm",fontColor:"text.secondary",children:t}):r(j,{color:B(e==="light"?"colors.text.primary":"colors.neutral.primary")})),M=i(({children:e})=>r(d,{w:"full",justify:"center",children:e})),T=i(z),F=i(v),I=i(({children:e})=>r(K,{pt:3,w:"full",children:e})),A=i(({children:e,domain:t,name:a,logoUrl:m})=>n(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[m?r("img",{src:m,alt:a,width:24,height:24}):r(j,{color:B("colors.brand.base"),height:24,width:24}),r(x,{size:"sm",fontWeight:"semibold",children:a}),t&&r(x,{size:"sm",fontColor:"text.tertiary",children:t}),e]})),G=({actionDirection:e="row",address:t,children:a,onBack:m,onCancel:p,...L})=>E(a,o=>{const c=o.getProps(k),s=o.getProps(W),w=o.getProps(F),h=o.getProps(T),C=o.get(S),b=o.get(D),J=o.get(H),f=e==="row";return n($,{...L,fullscreen:!0,paddingType:"none",gap:0,children:[n(d,{gap:0,width:"full",children:[n(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[m&&r(l,{onPress:m,size:"md",textStyle:"neutral",variant:"text",children:r(l.LeadingIcon,{children:r(U,{})})}),p&&r(l,{onPress:p,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(m||p)&&r(y,{w:6}),J,t||b||h?n(g,{children:[t&&r(q,{address:t}),b,h&&r(z,{...h})]}):r(y,{w:6})]}),o.get(A)]}),n(d,{h:"full",w:"full",justify:"space-between",p:6,maxW:393,children:[o.get(M),n(d,{w:"full",gap:3,children:[o.get(I),(c||s)&&n(P,{direction:f?"row":"column-reverse",gap:f?4:3,width:"full",children:[c&&r(l,{expand:!0,label:"Cancel",variant:"neutral",...c}),s&&r(l,{expand:!0,label:"Confirm",variant:"inverse",...s})]}),C&&r(P,{direction:e,gap:f?4:3,width:"full",children:C})]})]}),w&&r(v,{...w})]})}),N=Object.assign(G,{Actions:S,Cancel:k,Confirm:W,Content:M,Menu:T,Drawer:F,Footer:I,Header:A,Info:D,Title:H});export{N as PassportPage};
1
+ import{jsx as r,jsxs as n}from"react/jsx-runtime";import"../containers/button.js";import"../containers/card.js";import"@styled/css";import{VStack as d,Center as K,HStack as g,Box as y,Flex as P}from"@styled/jsx";import{Drawer as v}from"../containers/drawer.js";import{Children as O}from"react";import"../utils/client-asset-logo.js";import{token as B}from"@styled/tokens";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import U from"../icons/ico-caret-left.js";import j from"../icons/ico-magic.js";import V from"../icons/ico-question-circle-fill.js";import"../containers/header.js";import{Menu as z}from"../containers/menu.js";import{Modal as q}from"../containers/modal.js";import"../containers/overlay.js";import"../info/copy-button.js";import"../info/email-wbr.js";import"../info/security-otp.js";import"../info/text-box.js";import E from"../info/wallet-address.js";import l from"../primitives/button.js";import{Popover as u}from"../primitives/popover.js";import x from"../primitives/text.js";import{createSlot as i,createHost as G}from"create-slots";const S=i(({children:e})=>O.map(e,t=>r(l,{expand:!0,...t.props}))),k=i(l),W=i(l),D=i(({children:e})=>n(u,{textStyle:"subtle",variant:"text",children:[r(u.TrailingIcon,{children:r(V,{})}),r(u.Content,{children:e})]})),H=i(({branding:e,title:t})=>t?r(x,{size:"sm",fontColor:"text.secondary",children:t}):r(j,{color:B(e==="light"?"colors.text.primary":"colors.neutral.primary")})),M=i(({children:e})=>r(d,{w:"full",justify:"center",children:e})),T=i(z),F=i(v),I=i(({children:e})=>r(K,{pt:3,w:"full",children:e})),A=i(({children:e,domain:t,name:a,logoUrl:m})=>n(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[m?r("img",{src:m,alt:a,width:24,height:24}):r(j,{color:B("colors.brand.base"),height:24,width:24}),r(x,{size:"sm",fontWeight:"semibold",children:a}),t&&r(x,{size:"sm",fontColor:"text.tertiary",children:t}),e]})),N=({actionDirection:e="row",address:t,children:a,onBack:m,onCancel:p,...L})=>G(a,o=>{const c=o.getProps(k),s=o.getProps(W),w=o.getProps(F),h=o.getProps(T),C=o.get(S),b=o.get(D),J=o.get(H),f=e==="row";return n(q,{...L,fullscreen:!0,paddingType:"none",gap:0,children:[n(d,{gap:0,width:"full",children:[n(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[m&&r(l,{onPress:m,size:"md",textStyle:"neutral",variant:"text",children:r(l.LeadingIcon,{children:r(U,{})})}),p&&r(l,{onPress:p,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(m||p)&&r(y,{w:6}),J,t||b||h?n(g,{children:[t&&r(E,{address:t}),b,h&&r(z,{...h})]}):r(y,{w:6})]}),o.get(A)]}),n(d,{h:"full",w:"full",justify:"space-between",p:6,maxW:393,children:[o.get(M),n(d,{w:"full",gap:3,children:[o.get(I),(c||s)&&n(P,{direction:f?"row":"column-reverse",gap:f?4:3,width:"full",children:[c&&r(l,{expand:!0,label:"Cancel",variant:"neutral",...c}),s&&r(l,{expand:!0,label:"Confirm",variant:"inverse",...s})]}),C&&r(P,{direction:e,gap:f?4:3,width:"full",children:C})]})]}),w&&r(v,{...w})]})}),Q=Object.assign(N,{Actions:S,Cancel:k,Confirm:W,Content:M,Menu:T,Drawer:F,Footer:I,Header:A,Info:D,Title:H});export{Q as PassportPage};
2
2
  //# sourceMappingURL=passport-page.js.map
@@ -1,2 +1,2 @@
1
- import{jsxs as s,jsx as r}from"react/jsx-runtime";import"../../info/copy-button.js";import"../../info/email-wbr.js";import"../../info/security-otp.js";import"../../info/text-box.js";import p from"../../info/wallet-address.js";import{HStack as e,Center as l}from"@styled/jsx";import{token as o}from"@styled/tokens";const m=({address:i,onAddressCopy:t})=>s(e,{gap:0,style:{filter:`drop-shadow(0px 0px 0.5px color-mix(in srgb, ${o("colors.text.primary")}, transparent 20%)`},children:[r("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",children:r("path",{d:"M0 0L48 0V48H47.4146C37.829 48 29.1682 42.28 25.4052 33.4639L16.4163 12.405C13.533 5.65001 7.28559 0.929159 0 0Z",fill:o("colors.surface.primary")})}),r(l,{bgColor:"surface.primary",w:"114px",h:"48px",children:r(p,{address:i,onCopy:t})}),r("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",children:r("path",{d:"M48 0L0 0V48H0.299999C9.94709 48 18.6672 42.2544 22.4737 33.39L31.4615 12.4594C34.3773 5.66924 40.669 0.929361 48 0Z",fill:o("colors.surface.primary")})})]});export{m as Address};
1
+ import{jsxs as s,jsx as r}from"react/jsx-runtime";import"../../info/copy-button.js";import"../../info/email-wbr.js";import"../../info/security-otp.js";import"../../info/text-box.js";import e from"../../info/wallet-address.js";import{HStack as p,Center as l}from"@styled/jsx";import{token as o}from"@styled/tokens";const m=({address:t,onAddressCopy:i})=>s(p,{gap:0,style:{filter:`drop-shadow(0px 0px 0.5px color-mix(in srgb, ${o("colors.text.primary")}, transparent 20%)`},children:[r("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",children:r("path",{d:"M0 0L48 0V48H47.4146C37.829 48 29.1682 42.28 25.4052 33.4639L16.4163 12.405C13.533 5.65001 7.28559 0.929159 0 0Z",fill:o("colors.surface.primary")})}),r(l,{bgColor:"surface.primary",w:"114px",h:"48px",children:r(e,{address:t,onCopy:i,size:"sm",icon:!0,fontColor:"text.secondary",fontWeight:"medium"})}),r("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",children:r("path",{d:"M48 0L0 0V48H0.299999C9.94709 48 18.6672 42.2544 22.4737 33.39L31.4615 12.4594C34.3773 5.66924 40.669 0.929361 48 0Z",fill:o("colors.surface.primary")})})]});export{m as Address};
2
2
  //# sourceMappingURL=address.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"address.js","sources":["../../../../../src/components/layouts/wallet-page/address.tsx"],"sourcesContent":["import { WalletAddress } from '@components/info';\nimport { Center, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nexport interface AddressProps {\n address: string;\n onAddressCopy?: (address: string) => void;\n}\n\nexport const Address = ({ address, onAddressCopy }: AddressProps) => (\n <HStack\n gap={0}\n style={{ filter: `drop-shadow(0px 0px 0.5px color-mix(in srgb, ${token('colors.text.primary')}, transparent 20%)` }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\n <path\n d=\"M0 0L48 0V48H47.4146C37.829 48 29.1682 42.28 25.4052 33.4639L16.4163 12.405C13.533 5.65001 7.28559 0.929159 0 0Z\"\n fill={token('colors.surface.primary')}\n />\n </svg>\n <Center bgColor=\"surface.primary\" w=\"114px\" h=\"48px\">\n <WalletAddress address={address} onCopy={onAddressCopy} />\n </Center>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\n <path\n d=\"M48 0L0 0V48H0.299999C9.94709 48 18.6672 42.2544 22.4737 33.39L31.4615 12.4594C34.3773 5.66924 40.669 0.929361 48 0Z\"\n fill={token('colors.surface.primary')}\n />\n </svg>\n </HStack>\n);\n"],"names":["Address","address","onAddressCopy","_jsxs","HStack","token","_jsx","Center","WalletAddress"],"mappings":"0TASa,MAAAA,EAAU,CAAC,CAAE,QAAAC,EAAS,cAAAC,CAAa,IAC9CC,EAACC,EAAM,CACL,IAAK,EACL,MAAO,CAAE,OAAQ,gDAAgDC,EAAM,qBAAqB,CAAC,oBAAsB,EAAA,SAAA,CAEnHC,EAAK,MAAA,CAAA,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAM,SAC5FA,EACE,OAAA,CAAA,EAAE,mHACF,KAAMD,EAAM,wBAAwB,CACpC,CAAA,CAAA,CAAA,EAEJC,EAACC,EAAM,CAAC,QAAQ,kBAAkB,EAAE,QAAQ,EAAE,OAC5C,SAAAD,EAACE,EAAa,CAAC,QAASP,EAAS,OAAQC,CAAa,CAAA,CAC/C,CAAA,EACTI,SAAK,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAA,OAAA,CACE,EAAE,uHACF,KAAMD,EAAM,wBAAwB,CAAC,CAAA,CAEnC,CAAA,CAAA,CAAA,CAAA"}
1
+ {"version":3,"file":"address.js","sources":["../../../../../src/components/layouts/wallet-page/address.tsx"],"sourcesContent":["import { WalletAddress } from '@components/info';\nimport { Center, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nexport interface AddressProps {\n address: string;\n onAddressCopy?: (address: string) => void;\n}\n\nexport const Address = ({ address, onAddressCopy }: AddressProps) => (\n <HStack\n gap={0}\n style={{ filter: `drop-shadow(0px 0px 0.5px color-mix(in srgb, ${token('colors.text.primary')}, transparent 20%)` }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\n <path\n d=\"M0 0L48 0V48H47.4146C37.829 48 29.1682 42.28 25.4052 33.4639L16.4163 12.405C13.533 5.65001 7.28559 0.929159 0 0Z\"\n fill={token('colors.surface.primary')}\n />\n </svg>\n <Center bgColor=\"surface.primary\" w=\"114px\" h=\"48px\">\n <WalletAddress\n address={address}\n onCopy={onAddressCopy}\n size=\"sm\"\n icon\n fontColor=\"text.secondary\"\n fontWeight=\"medium\"\n />\n </Center>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\n <path\n d=\"M48 0L0 0V48H0.299999C9.94709 48 18.6672 42.2544 22.4737 33.39L31.4615 12.4594C34.3773 5.66924 40.669 0.929361 48 0Z\"\n fill={token('colors.surface.primary')}\n />\n </svg>\n </HStack>\n);\n"],"names":["Address","address","onAddressCopy","_jsxs","HStack","token","_jsx","Center","WalletAddress"],"mappings":"0TASO,MAAMA,EAAU,CAAC,CAAE,QAAAC,EAAS,cAAAC,CAA6B,IAC9DC,EAACC,EACC,CAAA,IAAK,EACL,MAAO,CAAE,OAAQ,gDAAgDC,EAAM,qBAAqB,CAAC,sBAE7F,SAAA,CAAAC,EAAA,MAAA,CAAK,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAA,OAAA,CACE,EAAE,mHACF,KAAMD,EAAM,wBAAwB,CACpC,CAAA,CAAA,CAAA,EAEJC,EAACC,EAAO,CAAA,QAAQ,kBAAkB,EAAE,QAAQ,EAAE,OAAM,SAClDD,EAACE,EAAa,CACZ,QAASP,EACT,OAAQC,EACR,KAAK,KACL,KAAI,GACJ,UAAU,iBACV,WAAW,UAEN,CAAA,EACTI,EAAK,MAAA,CAAA,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAM,SAC5FA,EACE,OAAA,CAAA,EAAE,uHACF,KAAMD,EAAM,wBAAwB,CAAC,CAAA,CAEnC,CAAA,CAAA,CAAA,CAAA"}
@@ -1,2 +1,2 @@
1
- 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",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};
1
+ 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};
2
2
  //# sourceMappingURL=connection-menu.js.map
@@ -1 +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\">\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,WACrDT,GAAWL,GAAa,CAACO,EACxBI,EAACI,EAAO,CAAA,SAAS,WAAU,SAAA,CACzBF,SACE,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,cACV,CACK,CAAA,EAETJ,EAAK,MAAA,CAAA,MAAM,KAAK,OAAO,eACrBE,EAAQ,SAAA,CAAA,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAMC,EAAM,yBAAyB,IACpED,EAACG,EAAS,CAAA,MAAOF,EAAM,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,IAAM,CACjF,CAAA,IAGVH,EAACC,EAAQ,SAAQ,UAAWK,EAAI,CAAE,EAAG,OAAS,CAAA,YAC5CN,EAACO,GAAM,EAAE,OAAO,IAAK,EAAG,SAAS,mBAC7BlB,EAKAa,EAACM,EAAK,CAAA,KAAK,KAAK,QAAQ,UAAU,WAAW,SAC1C,SAAAlB,IALHY,EAACM,GAAK,UAAU,gBAAgB,KAAK,KAAI,SACtChB,CACI,CAAA,EAMTU,EAACM,EAAI,CAAC,SAAU,GAAA,SAAAf,GAAc,CACxB,CAAA,EACPJ,GAAaE,GACZS,EAAAS,EAAA,CAAA,SAAA,CACEP,EAACQ,EAAO,CAAC,MAAM,qBAAqB,GAAI,CAAK,CAAA,EAC7CR,EAACS,GAAO,MAAOpB,EAAiB,KAAK,KAAK,UAAU,WAAW,QAAQ,OAAO,QAASI,EAAY,SACjGO,EAACS,EAAO,YACN,CAAA,SAAAX,EAAA,MAAA,CAAK,MAAM,KAAK,OAAO,KACrB,SAAA,CAAAE,EAAA,SAAA,CAAQ,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"}
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"}
@@ -1 +1 @@
1
- {"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.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","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","color]___[value:positive.darker","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","objectFit]___[value:cover","borderStartRadius]___[value:input","width]___[value:20","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","gap]___[value:2","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","width]___[value:16","height]___[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":{}}}
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","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":{}}}
@@ -3,6 +3,10 @@ import { AriaButtonProps } from 'react-aria';
3
3
  export interface WalletAddressProps extends AriaButtonProps {
4
4
  address: string;
5
5
  onCopy?: (address: string) => void;
6
+ size?: 'sm' | 'md';
7
+ icon?: boolean;
8
+ fontColor?: 'text.primary' | 'text.secondary' | 'text.tertiary';
9
+ fontWeight?: 'normal' | 'medium';
6
10
  }
7
11
  declare const WalletAddress: import("react").ForwardRefExoticComponent<WalletAddressProps & import("react").RefAttributes<HTMLButtonElement>>;
8
12
  export default WalletAddress;
@@ -1 +1 @@
1
- {"version":3,"file":"wallet-address.d.ts","sourceRoot":"","sources":["../../../../src/components/info/wallet-address.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,QAAA,MAAM,aAAa,kHAoDjB,CAAC;AAIH,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"wallet-address.d.ts","sourceRoot":"","sources":["../../../../src/components/info/wallet-address.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,cAAc,GAAG,gBAAgB,GAAG,eAAe,CAAC;IAChE,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAClC;AAED,QAAA,MAAM,aAAa,kHAiEjB,CAAC;AAIH,eAAe,aAAa,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"address.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/wallet-page/address.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,OAAO,+BAAgC,YAAY,4CAqB/D,CAAC"}
1
+ {"version":3,"file":"address.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/wallet-page/address.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,OAAO,+BAAgC,YAAY,4CA4B/D,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magiclabs/ui-components",
3
- "version": "1.34.21",
3
+ "version": "1.34.23",
4
4
  "description": "💅 A theme-able library of reusable UI components",
5
5
  "author": "Magic Labs <open-source@magic.link>",
6
6
  "repository": {