@magiclabs/ui-components 1.34.15 → 1.34.17

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";var e=require("react/jsx-runtime"),r=require("@styled/jsx");const i=({width:t="100px",height:a="20px",speed:n="1.5s"})=>e.jsx(r.Box,{style:{width:t,height:a},bg:"neutral.tertiary",overflow:"hidden",position:"relative",rounded:"3xl",_dark:{bg:"surface.primary"},children:e.jsx(r.Box,{style:{animation:`slideRight ${n} infinite ease-in-out`},w:"full",h:"full",position:"absolute",top:0,left:"-50%",transform:"skewX(-20deg)",backgroundImage:"linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)",_dark:{backgroundImage:"linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)"}})});exports.Skeleton=i;
1
+ "use strict";var e=require("react/jsx-runtime"),r=require("@styled/jsx");const s=({width:a="100px",height:t="20px",speed:i="1.5s",borderRadius:n="24px",backgroundColor:o})=>e.jsx(r.Box,{style:{width:a,height:t,borderRadius:n,backgroundColor:o},bg:"neutral.tertiary",overflow:"hidden",position:"relative",_dark:{bg:"surface.primary"},children:e.jsx(r.Box,{style:{animation:`slideRight ${i} infinite ease-in-out`},w:"full",h:"full",position:"absolute",top:0,left:"-50%",transform:"skewX(-20deg)",backgroundImage:"linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)",_dark:{backgroundImage:"linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)"}})});exports.Skeleton=s;
2
2
  //# sourceMappingURL=skeleton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedback/skeleton.tsx"],"sourcesContent":["import { Box } from '@styled/jsx';\n\nexport interface SkeletonProps {\n width?: string;\n height?: string;\n speed?: string;\n}\n\nexport const Skeleton = ({ width = '100px', height = '20px', speed = '1.5s' }: SkeletonProps) => {\n return (\n <Box\n style={{ width, height }}\n bg=\"neutral.tertiary\"\n overflow=\"hidden\"\n position=\"relative\"\n rounded=\"3xl\"\n _dark={{ bg: 'surface.primary' }}\n >\n <Box\n style={{\n animation: `slideRight ${speed} infinite ease-in-out`,\n }}\n w=\"full\"\n h=\"full\"\n position=\"absolute\"\n top={0}\n left=\"-50%\"\n transform=\"skewX(-20deg)\"\n backgroundImage={`linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)`}\n _dark={{ backgroundImage: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)' }}\n />\n </Box>\n );\n};\n"],"names":["Skeleton","width","height","speed","_jsx","Box"],"mappings":"yEAQO,MAAMA,EAAW,CAAC,CAAE,MAAAC,EAAQ,QAAS,OAAAC,EAAS,OAAQ,MAAAC,EAAQ,MAAM,IAEvEC,EAACC,IAAAA,EAAAA,KACC,MAAO,CAAE,MAAAJ,EAAO,OAAAC,CAAM,EACtB,GAAG,mBACH,SAAS,SACT,SAAS,WACT,QAAQ,MACR,MAAO,CAAE,GAAI,iBAAmB,EAAA,SAEhCE,MAACC,EAAG,IAAA,CACF,MAAO,CACL,UAAW,cAAcF,CAAK,uBAC/B,EACD,EAAE,OACF,EAAE,OACF,SAAS,WACT,IAAK,EACL,KAAK,OACL,UAAU,gBACV,gBAAiB,qEACjB,MAAO,CAAE,gBAAiB,8EAC1B,CAAA,CAAA,CAAA"}
1
+ {"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedback/skeleton.tsx"],"sourcesContent":["import { Box } from '@styled/jsx';\n\nexport interface SkeletonProps {\n width?: string | number;\n height?: string | number;\n speed?: string;\n borderRadius?: string | number;\n backgroundColor?: string;\n}\n\nexport const Skeleton = ({\n width = '100px',\n height = '20px',\n speed = '1.5s',\n borderRadius = '24px',\n backgroundColor,\n}: SkeletonProps) => {\n return (\n <Box\n style={{ width, height, borderRadius, backgroundColor }}\n bg=\"neutral.tertiary\"\n overflow=\"hidden\"\n position=\"relative\"\n _dark={{ bg: 'surface.primary' }}\n >\n <Box\n style={{\n animation: `slideRight ${speed} infinite ease-in-out`,\n }}\n w=\"full\"\n h=\"full\"\n position=\"absolute\"\n top={0}\n left=\"-50%\"\n transform=\"skewX(-20deg)\"\n backgroundImage={`linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)`}\n _dark={{ backgroundImage: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)' }}\n />\n </Box>\n );\n};\n"],"names":["Skeleton","width","height","speed","borderRadius","backgroundColor","_jsx","Box"],"mappings":"yEAUO,MAAMA,EAAW,CAAC,CACvB,MAAAC,EAAQ,QACR,OAAAC,EAAS,OACT,MAAAC,EAAQ,OACR,aAAAC,EAAe,OACf,gBAAAC,CACc,IAEZC,EAAAA,IAACC,OACC,MAAO,CAAE,MAAAN,EAAO,OAAAC,EAAQ,aAAAE,EAAc,gBAAAC,GACtC,GAAG,mBACH,SAAS,SACT,SAAS,WACT,MAAO,CAAE,GAAI,iBAAmB,EAAA,SAEhCC,EAACC,IAAAA,MAAG,CACF,MAAO,CACL,UAAW,cAAcJ,CAAK,uBAC/B,EACD,EAAE,OACF,EAAE,OACF,SAAS,WACT,IAAK,EACL,KAAK,OACL,UAAU,gBACV,gBAAiB,qEACjB,MAAO,CAAE,gBAAiB,8EAC1B,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"),f=require("../../icons/ico-remove.js"),s=require("../../primitives/button.js");require("../../primitives/checkbox.js"),require("../../primitives/dropdown-selector.js");var i=require("../../primitives/popover.js");require("../../primitives/radio.js"),require("../../primitives/segmented-control.js"),require("../../primitives/switch.js");var o=require("../../primitives/text.js"),q=require("@styled/jsx"),a=require("react");const g=({connected:n,connectedLabel:l="Connected",disconnectLabel:d="Disconnect",disconnectedLabel:u="Not connected",domain:x,logoUrl:t,onDisconnect:h})=>{const[v,c]=a.useState(!1);return a.useEffect(()=>{c(!1)},[t]),e.jsxs(i.Popover,{iconSize:28,variant:"text",children:[e.jsx(i.Popover.LeadingIcon,{color:r.token("colors.text.tertiary"),children:t&&!v?e.jsx("img",{style:{borderRadius:"50%"},src:t,alt:"app logo",onError:()=>c(!0)}):e.jsxs("svg",{width:"28",height:"28",children:[e.jsx("circle",{cx:"14",cy:"14",r:"14",fill:r.token("colors.surface.secondary")}),e.jsx(j.default,{color:r.token("colors.neutral.primary"),x:6,y:6,height:16,width:16})]})}),e.jsxs(i.Popover.Content,{children:[n?e.jsx(o.default,{size:"xs",variant:"success",children:l}):e.jsx(o.default,{fontColor:"text.tertiary",size:"xs",children:u}),e.jsx(o.default,{size:"sm",children:x}),n&&e.jsxs(e.Fragment,{children:[e.jsx(q.Divider,{color:"surface.quaternary",my:3}),e.jsx(s.default,{label:d,size:"sm",textStyle:"negative",variant:"text",onPress:h,children:e.jsx(s.default.LeadingIcon,{children:e.jsxs("svg",{width:"20",height:"20",children:[e.jsx("circle",{cx:"8",cy:"8",r:"8",fill:r.token("colors.surface.primary"),opacity:.5}),e.jsx(f.default,{color:r.token("colors.negative.base"),x:3,y:3,height:10,width:10})]})})})]})]})]})};exports.ConnectionMenu=g;
1
+ "use strict";var e=require("react/jsx-runtime"),r=require("@styled/tokens"),j=require("../../icons/ico-globe.js"),f=require("../../icons/ico-remove.js"),a=require("../../primitives/button.js");require("../../primitives/checkbox.js"),require("../../primitives/dropdown-selector.js");var i=require("../../primitives/popover.js");require("../../primitives/radio.js"),require("../../primitives/segmented-control.js"),require("../../primitives/switch.js");var o=require("../../primitives/text.js"),q=require("@styled/jsx"),l=require("react");const g=({connected:n,connectedLabel:d="Connected",disconnectLabel:c,disconnectedLabel:u="Not connected",domain:x,logoUrl:t,onDisconnect:h})=>{const[v,s]=l.useState(!1);return l.useEffect(()=>{s(!1)},[t]),e.jsxs(i.Popover,{iconSize:28,variant:"text",children:[e.jsx(i.Popover.LeadingIcon,{color:r.token("colors.text.tertiary"),children:t&&!v?e.jsx("img",{style:{borderRadius:"50%"},src:t,alt:"app logo",onError:()=>s(!0)}):e.jsxs("svg",{width:"28",height:"28",children:[e.jsx("circle",{cx:"14",cy:"14",r:"14",fill:r.token("colors.surface.secondary")}),e.jsx(j.default,{color:r.token("colors.neutral.primary"),x:6,y:6,height:16,width:16})]})}),e.jsxs(i.Popover.Content,{children:[n?e.jsx(o.default,{size:"xs",variant:"success",children:d}):e.jsx(o.default,{fontColor:"text.tertiary",size:"xs",children:u}),e.jsx(o.default,{size:"sm",children:x}),n&&c&&e.jsxs(e.Fragment,{children:[e.jsx(q.Divider,{color:"surface.quaternary",my:3}),e.jsx(a.default,{label:c,size:"sm",textStyle:"negative",variant:"text",onPress:h,children:e.jsx(a.default.LeadingIcon,{children:e.jsxs("svg",{width:"20",height:"20",children:[e.jsx("circle",{cx:"8",cy:"8",r:"8",fill:r.token("colors.surface.primary"),opacity:.5}),e.jsx(f.default,{color:r.token("colors.negative.base"),x:3,y:3,height:10,width:10})]})})})]})]})]})};exports.ConnectionMenu=g;
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 { Divider } 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 = 'Disconnect',\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 && !error ? (\n <img style={{ borderRadius: '50%' }} src={logoUrl} alt=\"app logo\" onError={() => setError(true)} />\n ) : (\n <svg width=\"28\" height=\"28\">\n <circle cx=\"14\" cy=\"14\" r=\"14\" fill={token('colors.surface.secondary')} />\n <IcoGlobe color={token('colors.neutral.primary')} x={6} y={6} height={16} width={16} />\n </svg>\n )}\n </Popover.LeadingIcon>\n <Popover.Content>\n {!connected ? (\n <Text fontColor=\"text.tertiary\" size=\"xs\">\n {disconnectedLabel}\n </Text>\n ) : (\n <Text size=\"xs\" variant=\"success\">\n {connectedLabel}\n </Text>\n )}\n <Text size=\"sm\">{domain}</Text>\n {connected && (\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.surface.primary')} opacity={0.5} />\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","IcoGlobe","Text","_Fragment","Divider","Button","IcoRemove"],"mappings":"yhBAgBa,MAAAA,EAAiB,CAAC,CAC7B,UAAAC,EACA,eAAAC,EAAiB,YACjB,gBAAAC,EAAkB,aAClB,kBAAAC,EAAoB,gBACpB,OAAAC,EACA,QAAAC,EACA,aAAAC,CACoB,IAAI,CACxB,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAS,EAAK,EAExC,OAAAC,EAAAA,UAAU,IAAK,CACbF,EAAS,EAAK,CAChB,EAAG,CAACH,CAAO,CAAC,EAGVM,OAACC,UAAO,CAAC,SAAU,GAAI,QAAQ,OAC7B,SAAA,CAAAC,MAACD,EAAAA,QAAQ,YAAY,CAAA,MAAOE,EAAAA,MAAM,sBAAsB,EACrD,SAAAT,GAAW,CAACE,EACXM,MAAK,MAAA,CAAA,MAAO,CAAE,aAAc,KAAK,EAAI,IAAKR,EAAS,IAAI,WAAW,QAAS,IAAMG,EAAS,EAAI,IAE9FG,EAAAA,KAAK,MAAA,CAAA,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,EAAAA,IAAQ,SAAA,CAAA,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAMC,QAAM,0BAA0B,CAAC,CAAA,EACtED,MAACE,EAAAA,QAAS,CAAA,MAAOD,QAAM,wBAAwB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAM,CAAA,CAAA,CAAA,CAAA,CAE1F,CAAA,EAEHH,OAACC,EAAAA,QAAQ,QACN,CAAA,SAAA,CAACZ,EAKAa,EAAAA,IAACG,EAAI,QAAA,CAAC,KAAK,KAAK,QAAQ,UACrB,SAAAf,CACI,CAAA,EANPY,EAACG,IAAAA,WAAK,UAAU,gBAAgB,KAAK,KAClC,SAAAb,CACI,CAAA,EAMTU,EAACG,IAAAA,EAAAA,QAAK,CAAA,KAAK,KAAM,SAAAZ,CAAc,CAAA,EAC9BJ,GACCW,OACEM,EAAAA,SAAA,CAAA,SAAA,CAAAJ,MAACK,EAAO,QAAA,CAAC,MAAM,qBAAqB,GAAI,CAAK,CAAA,EAC7CL,EAAAA,IAACM,EAAAA,SAAO,MAAOjB,EAAiB,KAAK,KAAK,UAAU,WAAW,QAAQ,OAAO,QAASI,EACrF,SAAAO,EAAAA,IAACM,EAAAA,QAAO,YAAW,CAAA,SACjBR,EAAAA,KAAK,MAAA,CAAA,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,MAAQ,SAAA,CAAA,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAMC,QAAM,wBAAwB,EAAG,QAAS,EAAG,CAAA,EAC/ED,EAACO,IAAAA,EAAAA,QAAS,CAAC,MAAON,EAAAA,MAAM,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAE,CAAA,CAAI,CAClF,CAAA,CAAA,CAAA,GAED,CACR,CAAA,CACJ,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 { Divider } 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 && !error ? (\n <img style={{ borderRadius: '50%' }} src={logoUrl} alt=\"app logo\" onError={() => setError(true)} />\n ) : (\n <svg width=\"28\" height=\"28\">\n <circle cx=\"14\" cy=\"14\" r=\"14\" fill={token('colors.surface.secondary')} />\n <IcoGlobe color={token('colors.neutral.primary')} x={6} y={6} height={16} width={16} />\n </svg>\n )}\n </Popover.LeadingIcon>\n <Popover.Content>\n {!connected ? (\n <Text fontColor=\"text.tertiary\" size=\"xs\">\n {disconnectedLabel}\n </Text>\n ) : (\n <Text size=\"xs\" variant=\"success\">\n {connectedLabel}\n </Text>\n )}\n <Text size=\"sm\">{domain}</Text>\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.surface.primary')} opacity={0.5} />\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","IcoGlobe","Text","_Fragment","Divider","Button","IcoRemove"],"mappings":"yhBAgBa,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,UAAO,CAAC,SAAU,GAAI,QAAQ,OAC7B,SAAA,CAAAC,EAAAA,IAACD,UAAQ,YAAY,CAAA,MAAOE,QAAM,sBAAsB,EACrD,SAAAT,GAAW,CAACE,EACXM,EAAAA,WAAK,MAAO,CAAE,aAAc,KAAO,EAAE,IAAKR,EAAS,IAAI,WAAW,QAAS,IAAMG,EAAS,EAAI,CAAC,CAAA,EAE/FG,cAAK,MAAM,KAAK,OAAO,KACrB,SAAA,CAAAE,EAAAA,IAAA,SAAA,CAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAMC,EAAAA,MAAM,0BAA0B,CAAK,CAAA,EAC1ED,EAAAA,IAACE,WAAS,MAAOD,EAAM,MAAA,wBAAwB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAE,CAAA,CAAI,CACnF,CAAA,CAEY,CAAA,EACtBH,EAACC,KAAAA,UAAQ,QAAO,CAAA,SAAA,CACZZ,EAKAa,EAAAA,IAACG,EAAAA,QAAK,CAAA,KAAK,KAAK,QAAQ,UAAS,SAC9Bf,CAAc,CAAA,EALjBY,EAAAA,IAACG,EAAI,QAAA,CAAC,UAAU,gBAAgB,KAAK,KAAI,SACtCb,CAAiB,CAAA,EAOtBU,EAAAA,IAACG,WAAK,KAAK,KAAI,SAAEZ,CAAc,CAAA,EAC9BJ,GAAaE,GACZS,OACEM,EAAAA,SAAA,CAAA,SAAA,CAAAJ,MAACK,EAAO,QAAA,CAAC,MAAM,qBAAqB,GAAI,CAAK,CAAA,EAC7CL,EAAAA,IAACM,EAAAA,SAAO,MAAOjB,EAAiB,KAAK,KAAK,UAAU,WAAW,QAAQ,OAAO,QAASI,EACrF,SAAAO,EAAAA,IAACM,EAAAA,QAAO,YAAW,CAAA,SACjBR,EAAAA,KAAK,MAAA,CAAA,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,MAAQ,SAAA,CAAA,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAMC,QAAM,wBAAwB,EAAG,QAAS,EAAG,CAAA,EAC/ED,EAACO,IAAAA,EAAAA,QAAS,CAAC,MAAON,EAAAA,MAAM,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAE,CAAA,CAAI,CAClF,CAAA,CAAA,CAAA,GAED,CACR,CAAA,CACJ,CACe,CAAA,CAAA,CAAA,CAAA,CAGxB"}
@@ -1,2 +1,2 @@
1
- import{jsx as e}from"react/jsx-runtime";import{Box as r}from"@styled/jsx";const i=({width:t="100px",height:a="20px",speed:n="1.5s"})=>e(r,{style:{width:t,height:a},bg:"neutral.tertiary",overflow:"hidden",position:"relative",rounded:"3xl",_dark:{bg:"surface.primary"},children:e(r,{style:{animation:`slideRight ${n} infinite ease-in-out`},w:"full",h:"full",position:"absolute",top:0,left:"-50%",transform:"skewX(-20deg)",backgroundImage:"linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)",_dark:{backgroundImage:"linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)"}})});export{i as Skeleton};
1
+ import{jsx as r}from"react/jsx-runtime";import{Box as e}from"@styled/jsx";const d=({width:t="100px",height:a="20px",speed:i="1.5s",borderRadius:n="24px",backgroundColor:o})=>r(e,{style:{width:t,height:a,borderRadius:n,backgroundColor:o},bg:"neutral.tertiary",overflow:"hidden",position:"relative",_dark:{bg:"surface.primary"},children:r(e,{style:{animation:`slideRight ${i} infinite ease-in-out`},w:"full",h:"full",position:"absolute",top:0,left:"-50%",transform:"skewX(-20deg)",backgroundImage:"linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)",_dark:{backgroundImage:"linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)"}})});export{d as Skeleton};
2
2
  //# sourceMappingURL=skeleton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedback/skeleton.tsx"],"sourcesContent":["import { Box } from '@styled/jsx';\n\nexport interface SkeletonProps {\n width?: string;\n height?: string;\n speed?: string;\n}\n\nexport const Skeleton = ({ width = '100px', height = '20px', speed = '1.5s' }: SkeletonProps) => {\n return (\n <Box\n style={{ width, height }}\n bg=\"neutral.tertiary\"\n overflow=\"hidden\"\n position=\"relative\"\n rounded=\"3xl\"\n _dark={{ bg: 'surface.primary' }}\n >\n <Box\n style={{\n animation: `slideRight ${speed} infinite ease-in-out`,\n }}\n w=\"full\"\n h=\"full\"\n position=\"absolute\"\n top={0}\n left=\"-50%\"\n transform=\"skewX(-20deg)\"\n backgroundImage={`linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)`}\n _dark={{ backgroundImage: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)' }}\n />\n </Box>\n );\n};\n"],"names":["Skeleton","width","height","speed","_jsx","Box"],"mappings":"0EAQO,MAAMA,EAAW,CAAC,CAAE,MAAAC,EAAQ,QAAS,OAAAC,EAAS,OAAQ,MAAAC,EAAQ,MAAM,IAEvEC,EAACC,GACC,MAAO,CAAE,MAAAJ,EAAO,OAAAC,CAAM,EACtB,GAAG,mBACH,SAAS,SACT,SAAS,WACT,QAAQ,MACR,MAAO,CAAE,GAAI,iBAAmB,EAAA,SAEhCE,EAACC,EAAG,CACF,MAAO,CACL,UAAW,cAAcF,CAAK,uBAC/B,EACD,EAAE,OACF,EAAE,OACF,SAAS,WACT,IAAK,EACL,KAAK,OACL,UAAU,gBACV,gBAAiB,qEACjB,MAAO,CAAE,gBAAiB,8EAC1B,CAAA,CAAA,CAAA"}
1
+ {"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedback/skeleton.tsx"],"sourcesContent":["import { Box } from '@styled/jsx';\n\nexport interface SkeletonProps {\n width?: string | number;\n height?: string | number;\n speed?: string;\n borderRadius?: string | number;\n backgroundColor?: string;\n}\n\nexport const Skeleton = ({\n width = '100px',\n height = '20px',\n speed = '1.5s',\n borderRadius = '24px',\n backgroundColor,\n}: SkeletonProps) => {\n return (\n <Box\n style={{ width, height, borderRadius, backgroundColor }}\n bg=\"neutral.tertiary\"\n overflow=\"hidden\"\n position=\"relative\"\n _dark={{ bg: 'surface.primary' }}\n >\n <Box\n style={{\n animation: `slideRight ${speed} infinite ease-in-out`,\n }}\n w=\"full\"\n h=\"full\"\n position=\"absolute\"\n top={0}\n left=\"-50%\"\n transform=\"skewX(-20deg)\"\n backgroundImage={`linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)`}\n _dark={{ backgroundImage: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)' }}\n />\n </Box>\n );\n};\n"],"names":["Skeleton","width","height","speed","borderRadius","backgroundColor","_jsx","Box"],"mappings":"0EAUO,MAAMA,EAAW,CAAC,CACvB,MAAAC,EAAQ,QACR,OAAAC,EAAS,OACT,MAAAC,EAAQ,OACR,aAAAC,EAAe,OACf,gBAAAC,CACc,IAEZC,EAACC,GACC,MAAO,CAAE,MAAAN,EAAO,OAAAC,EAAQ,aAAAE,EAAc,gBAAAC,GACtC,GAAG,mBACH,SAAS,SACT,SAAS,WACT,MAAO,CAAE,GAAI,iBAAmB,EAAA,SAEhCC,EAACC,EAAG,CACF,MAAO,CACL,UAAW,cAAcJ,CAAK,uBAC/B,EACD,EAAE,OACF,EAAE,OACF,SAAS,WACT,IAAK,EACL,KAAK,OACL,UAAU,gBACV,gBAAiB,qEACjB,MAAO,CAAE,gBAAiB,8EAC1B,CAAA,CAAA,CAAA"}
@@ -1,2 +1,2 @@
1
- import{jsxs as e,jsx as r,Fragment as g}from"react/jsx-runtime";import{token as o}from"@styled/tokens";import x from"../../icons/ico-globe.js";import y from"../../icons/ico-remove.js";import s from"../../primitives/button.js";import"../../primitives/checkbox.js";import"../../primitives/dropdown-selector.js";import{Popover as i}from"../../primitives/popover.js";import"../../primitives/radio.js";import"../../primitives/segmented-control.js";import"../../primitives/switch.js";import c from"../../primitives/text.js";import{Divider as u}from"@styled/jsx";import{useState as v,useEffect as b}from"react";const z=({connected:n,connectedLabel:a="Connected",disconnectLabel:m="Disconnect",disconnectedLabel:d="Not connected",domain:h,logoUrl:t,onDisconnect:p})=>{const[f,l]=v(!1);return b(()=>{l(!1)},[t]),e(i,{iconSize:28,variant:"text",children:[r(i.LeadingIcon,{color:o("colors.text.tertiary"),children:t&&!f?r("img",{style:{borderRadius:"50%"},src:t,alt:"app logo",onError:()=>l(!0)}):e("svg",{width:"28",height:"28",children:[r("circle",{cx:"14",cy:"14",r:"14",fill:o("colors.surface.secondary")}),r(x,{color:o("colors.neutral.primary"),x:6,y:6,height:16,width:16})]})}),e(i.Content,{children:[n?r(c,{size:"xs",variant:"success",children:a}):r(c,{fontColor:"text.tertiary",size:"xs",children:d}),r(c,{size:"sm",children:h}),n&&e(g,{children:[r(u,{color:"surface.quaternary",my:3}),r(s,{label:m,size:"sm",textStyle:"negative",variant:"text",onPress:p,children:r(s.LeadingIcon,{children:e("svg",{width:"20",height:"20",children:[r("circle",{cx:"8",cy:"8",r:"8",fill:o("colors.surface.primary"),opacity:.5}),r(y,{color:o("colors.negative.base"),x:3,y:3,height:10,width:10})]})})})]})]})]})};export{z as ConnectionMenu};
1
+ import{jsxs as e,jsx as r,Fragment as g}from"react/jsx-runtime";import{token as o}from"@styled/tokens";import x from"../../icons/ico-globe.js";import y from"../../icons/ico-remove.js";import a from"../../primitives/button.js";import"../../primitives/checkbox.js";import"../../primitives/dropdown-selector.js";import{Popover as i}from"../../primitives/popover.js";import"../../primitives/radio.js";import"../../primitives/segmented-control.js";import"../../primitives/switch.js";import c from"../../primitives/text.js";import{Divider as u}from"@styled/jsx";import{useState as v,useEffect as b}from"react";const z=({connected:n,connectedLabel:m="Connected",disconnectLabel:l,disconnectedLabel:d="Not connected",domain:h,logoUrl:t,onDisconnect:p})=>{const[f,s]=v(!1);return b(()=>{s(!1)},[t]),e(i,{iconSize:28,variant:"text",children:[r(i.LeadingIcon,{color:o("colors.text.tertiary"),children:t&&!f?r("img",{style:{borderRadius:"50%"},src:t,alt:"app logo",onError:()=>s(!0)}):e("svg",{width:"28",height:"28",children:[r("circle",{cx:"14",cy:"14",r:"14",fill:o("colors.surface.secondary")}),r(x,{color:o("colors.neutral.primary"),x:6,y:6,height:16,width:16})]})}),e(i.Content,{children:[n?r(c,{size:"xs",variant:"success",children:m}):r(c,{fontColor:"text.tertiary",size:"xs",children:d}),r(c,{size:"sm",children:h}),n&&l&&e(g,{children:[r(u,{color:"surface.quaternary",my:3}),r(a,{label:l,size:"sm",textStyle:"negative",variant:"text",onPress:p,children:r(a.LeadingIcon,{children:e("svg",{width:"20",height:"20",children:[r("circle",{cx:"8",cy:"8",r:"8",fill:o("colors.surface.primary"),opacity:.5}),r(y,{color:o("colors.negative.base"),x:3,y:3,height:10,width:10})]})})})]})]})]})};export{z 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 { Divider } 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 = 'Disconnect',\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 && !error ? (\n <img style={{ borderRadius: '50%' }} src={logoUrl} alt=\"app logo\" onError={() => setError(true)} />\n ) : (\n <svg width=\"28\" height=\"28\">\n <circle cx=\"14\" cy=\"14\" r=\"14\" fill={token('colors.surface.secondary')} />\n <IcoGlobe color={token('colors.neutral.primary')} x={6} y={6} height={16} width={16} />\n </svg>\n )}\n </Popover.LeadingIcon>\n <Popover.Content>\n {!connected ? (\n <Text fontColor=\"text.tertiary\" size=\"xs\">\n {disconnectedLabel}\n </Text>\n ) : (\n <Text size=\"xs\" variant=\"success\">\n {connectedLabel}\n </Text>\n )}\n <Text size=\"sm\">{domain}</Text>\n {connected && (\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.surface.primary')} opacity={0.5} />\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","IcoGlobe","Text","_Fragment","Divider","Button","IcoRemove"],"mappings":"4lBAgBa,MAAAA,EAAiB,CAAC,CAC7B,UAAAC,EACA,eAAAC,EAAiB,YACjB,gBAAAC,EAAkB,aAClB,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,EAAO,CAAC,SAAU,GAAI,QAAQ,OAC7B,SAAA,CAAAC,EAACD,EAAQ,YAAY,CAAA,MAAOE,EAAM,sBAAsB,EACrD,SAAAT,GAAW,CAACE,EACXM,EAAK,MAAA,CAAA,MAAO,CAAE,aAAc,KAAK,EAAI,IAAKR,EAAS,IAAI,WAAW,QAAS,IAAMG,EAAS,EAAI,IAE9FG,EAAK,MAAA,CAAA,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,EAAQ,SAAA,CAAA,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAMC,EAAM,0BAA0B,CAAC,CAAA,EACtED,EAACE,EAAS,CAAA,MAAOD,EAAM,wBAAwB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAM,CAAA,CAAA,CAAA,CAAA,CAE1F,CAAA,EAEHH,EAACC,EAAQ,QACN,CAAA,SAAA,CAACZ,EAKAa,EAACG,EAAI,CAAC,KAAK,KAAK,QAAQ,UACrB,SAAAf,CACI,CAAA,EANPY,EAACG,GAAK,UAAU,gBAAgB,KAAK,KAClC,SAAAb,CACI,CAAA,EAMTU,EAACG,EAAK,CAAA,KAAK,KAAM,SAAAZ,CAAc,CAAA,EAC9BJ,GACCW,EACEM,EAAA,CAAA,SAAA,CAAAJ,EAACK,EAAO,CAAC,MAAM,qBAAqB,GAAI,CAAK,CAAA,EAC7CL,EAACM,GAAO,MAAOjB,EAAiB,KAAK,KAAK,UAAU,WAAW,QAAQ,OAAO,QAASI,EACrF,SAAAO,EAACM,EAAO,YAAW,CAAA,SACjBR,EAAK,MAAA,CAAA,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,EAAQ,SAAA,CAAA,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAMC,EAAM,wBAAwB,EAAG,QAAS,EAAG,CAAA,EAC/ED,EAACO,EAAS,CAAC,MAAON,EAAM,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAE,CAAA,CAAI,CAClF,CAAA,CAAA,CAAA,GAED,CACR,CAAA,CACJ,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 { Divider } 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 && !error ? (\n <img style={{ borderRadius: '50%' }} src={logoUrl} alt=\"app logo\" onError={() => setError(true)} />\n ) : (\n <svg width=\"28\" height=\"28\">\n <circle cx=\"14\" cy=\"14\" r=\"14\" fill={token('colors.surface.secondary')} />\n <IcoGlobe color={token('colors.neutral.primary')} x={6} y={6} height={16} width={16} />\n </svg>\n )}\n </Popover.LeadingIcon>\n <Popover.Content>\n {!connected ? (\n <Text fontColor=\"text.tertiary\" size=\"xs\">\n {disconnectedLabel}\n </Text>\n ) : (\n <Text size=\"xs\" variant=\"success\">\n {connectedLabel}\n </Text>\n )}\n <Text size=\"sm\">{domain}</Text>\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.surface.primary')} opacity={0.5} />\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","IcoGlobe","Text","_Fragment","Divider","Button","IcoRemove"],"mappings":"4lBAgBa,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,EAAO,CAAC,SAAU,GAAI,QAAQ,OAC7B,SAAA,CAAAC,EAACD,EAAQ,YAAY,CAAA,MAAOE,EAAM,sBAAsB,EACrD,SAAAT,GAAW,CAACE,EACXM,SAAK,MAAO,CAAE,aAAc,KAAO,EAAE,IAAKR,EAAS,IAAI,WAAW,QAAS,IAAMG,EAAS,EAAI,CAAC,CAAA,EAE/FG,SAAK,MAAM,KAAK,OAAO,KACrB,SAAA,CAAAE,EAAA,SAAA,CAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAMC,EAAM,0BAA0B,CAAK,CAAA,EAC1ED,EAACE,GAAS,MAAOD,EAAM,wBAAwB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAE,CAAA,CAAI,CACnF,CAAA,CAEY,CAAA,EACtBH,EAACC,EAAQ,QAAO,CAAA,SAAA,CACZZ,EAKAa,EAACG,EAAK,CAAA,KAAK,KAAK,QAAQ,UAAS,SAC9Bf,CAAc,CAAA,EALjBY,EAACG,EAAI,CAAC,UAAU,gBAAgB,KAAK,KAAI,SACtCb,CAAiB,CAAA,EAOtBU,EAACG,GAAK,KAAK,KAAI,SAAEZ,CAAc,CAAA,EAC9BJ,GAAaE,GACZS,EACEM,EAAA,CAAA,SAAA,CAAAJ,EAACK,EAAO,CAAC,MAAM,qBAAqB,GAAI,CAAK,CAAA,EAC7CL,EAACM,GAAO,MAAOjB,EAAiB,KAAK,KAAK,UAAU,WAAW,QAAQ,OAAO,QAASI,EACrF,SAAAO,EAACM,EAAO,YAAW,CAAA,SACjBR,EAAK,MAAA,CAAA,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,EAAQ,SAAA,CAAA,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAMC,EAAM,wBAAwB,EAAG,QAAS,EAAG,CAAA,EAC/ED,EAACO,EAAS,CAAC,MAAON,EAAM,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAE,CAAA,CAAI,CAClF,CAAA,CAAA,CAAA,GAED,CACR,CAAA,CACJ,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.darkest]___[cond:_groupHover","color]___[value:ruby.70]___[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","borderRadius]___[value:3xl","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","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","textStyle]___[value:negative","width]___[value:114px","height]___[value:48px","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.darkest]___[cond:_groupHover","color]___[value:ruby.70]___[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","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","textStyle]___[value:negative","width]___[value:114px","height]___[value:48px","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,7 +1,9 @@
1
1
  export interface SkeletonProps {
2
- width?: string;
3
- height?: string;
2
+ width?: string | number;
3
+ height?: string | number;
4
4
  speed?: string;
5
+ borderRadius?: string | number;
6
+ backgroundColor?: string;
5
7
  }
6
- export declare const Skeleton: ({ width, height, speed }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const Skeleton: ({ width, height, speed, borderRadius, backgroundColor, }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
7
9
  //# sourceMappingURL=skeleton.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/skeleton.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,6BAA0D,aAAa,4CAyB3F,CAAC"}
1
+ {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/skeleton.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,QAAQ,6DAMlB,aAAa,4CAwBf,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magiclabs/ui-components",
3
- "version": "1.34.15",
3
+ "version": "1.34.17",
4
4
  "description": "💅 A theme-able library of reusable UI components",
5
5
  "author": "Magic Labs <open-source@magic.link>",
6
6
  "repository": {