@magiclabs/ui-components 1.28.0 → 1.28.2
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.
- package/dist/cjs/components/containers/modal.js +1 -1
- package/dist/cjs/components/containers/modal.js.map +1 -1
- package/dist/cjs/components/layouts/passport-page.js +1 -1
- package/dist/cjs/components/layouts/passport-page.js.map +1 -1
- package/dist/cjs/components/list-items/transaction-row.js +1 -1
- package/dist/cjs/components/list-items/transaction-row.js.map +1 -1
- package/dist/cjs/recipes/modal.js +1 -1
- package/dist/cjs/recipes/modal.js.map +1 -1
- package/dist/es/components/containers/modal.js +1 -1
- package/dist/es/components/containers/modal.js.map +1 -1
- package/dist/es/components/layouts/passport-page.js +1 -1
- package/dist/es/components/layouts/passport-page.js.map +1 -1
- package/dist/es/components/list-items/transaction-row.js +1 -1
- package/dist/es/components/list-items/transaction-row.js.map +1 -1
- package/dist/es/recipes/modal.js +1 -1
- package/dist/es/recipes/modal.js.map +1 -1
- package/dist/panda.buildinfo.json +1 -1
- package/dist/types/components/containers/modal.d.ts +2 -1
- package/dist/types/components/containers/modal.d.ts.map +1 -1
- package/dist/types/components/layouts/passport-page.d.ts +1 -1
- package/dist/types/components/layouts/passport-page.d.ts.map +1 -1
- package/dist/types/components/list-items/transaction-row.d.ts +1 -0
- package/dist/types/components/list-items/transaction-row.d.ts.map +1 -1
- package/dist/types/recipes/modal.d.ts +14 -7
- package/dist/types/recipes/modal.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var i=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var i=require("react/jsx-runtime"),w=require("../../hooks/useDisplayState.js"),y=require("../../recipes/modal.js"),g=require("@styled/jsx");const r=({animate:n=!0,paddingType:s="none",gap:d=2.5,isOpen:e=!0,onAnimated:o=()=>{},onClosed:l=()=>{},showBorder:t=!0,fullscreen:p=!1,children:c})=>{const a=y.modal({animate:n,isOpen:e,paddingType:s,showBorder:t,fullscreen:p}),{displayed:u,onHide:m,onShow:h}=w.useDisplayState({animate:n,show:e,onHidden:l,onShown:o});return u?i.jsx("div",{className:a.wrapper,onAnimationEnd:e?h:m,children:i.jsx(g.VStack,{alignItems:"center",gap:d,className:a.content,children:c})}):null};r.displayName="Modal",exports.Modal=r;
|
|
2
2
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n animate?: boolean;\n paddingType?: 'none' | 'sm' | 'md' | 'lg';\n isOpen?: boolean;\n onAnimated?: () => void;\n onClosed?: () => void;\n showBorder?: boolean;\n fullscreen?: boolean;\n}\n\nexport const Modal = ({\n animate = true,\n paddingType = 'none',\n isOpen = true,\n onAnimated = () => {},\n onClosed = () => {},\n showBorder = true,\n fullscreen = false,\n children,\n}: ModalProps) => {\n const classes = modal({ animate, isOpen, paddingType, showBorder, fullscreen });\n const { displayed, onHide, onShow } = useDisplayState({\n animate,\n show: isOpen,\n onHidden: onClosed,\n onShown: onAnimated,\n });\n\n if (!displayed) {\n return null;\n }\n\n return (\n <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n <VStack alignItems=\"center\" className={classes.content}>\n {children}\n </VStack>\n </div>\n );\n};\n\nModal.displayName = 'Modal';\n"],"names":["Modal","animate","paddingType","isOpen","onAnimated","onClosed","showBorder","fullscreen","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n animate?: boolean;\n paddingType?: 'none' | 'sm' | 'md' | 'lg';\n gap?: number;\n isOpen?: boolean;\n onAnimated?: () => void;\n onClosed?: () => void;\n showBorder?: boolean;\n fullscreen?: boolean;\n}\n\nexport const Modal = ({\n animate = true,\n paddingType = 'none',\n gap = 2.5,\n isOpen = true,\n onAnimated = () => {},\n onClosed = () => {},\n showBorder = true,\n fullscreen = false,\n children,\n}: ModalProps) => {\n const classes = modal({ animate, isOpen, paddingType, showBorder, fullscreen });\n const { displayed, onHide, onShow } = useDisplayState({\n animate,\n show: isOpen,\n onHidden: onClosed,\n onShown: onAnimated,\n });\n\n if (!displayed) {\n return null;\n }\n\n return (\n <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n <VStack alignItems=\"center\" gap={gap} className={classes.content}>\n {children}\n </VStack>\n </div>\n );\n};\n\nModal.displayName = 'Modal';\n"],"names":["Modal","animate","paddingType","gap","isOpen","onAnimated","onClosed","showBorder","fullscreen","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"yJAeO,MAAMA,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,IAAAC,EAAM,IACN,OAAAC,EAAS,GACT,WAAAC,EAAa,OACb,SAAAC,EAAW,IAAK,GAChB,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,SAAAC,CACW,IAAI,CACf,MAAMC,EAAUC,EAAAA,MAAM,CAAE,QAAAV,EAAS,OAAAG,EAAQ,YAAAF,EAAa,WAAAK,EAAY,WAAAC,CAAU,CAAE,EACxE,CAAE,UAAAI,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,kBAAgB,CACpD,QAAAd,EACA,KAAMG,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKO,EAKHI,MAAK,MAAA,CAAA,UAAWN,EAAQ,QAAS,eAAgBN,EAASU,EAASD,EAAM,SACvEG,EAAAA,IAACC,UAAO,WAAW,SAAS,IAAKd,EAAK,UAAWO,EAAQ,QAAO,SAC7DD,CACM,CAAA,CAAA,CAAA,EAPJ,IAUX,EAEAT,EAAM,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("../containers/card.js");var
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("../containers/card.js");var w=require("@styled/css"),t=require("@styled/jsx"),S=require("../containers/drawer.js"),A=require("react");require("../utils/client-asset-logo.js");var C=require("@styled/tokens");require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var I=require("../icons/ico-caret-left.js"),b=require("../icons/ico-magic.js"),L=require("../icons/ico-question-circle-fill.js");require("../containers/header.js");var y=require("../containers/menu.js"),N=require("../containers/modal.js");require("../containers/overlay.js"),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("../primitives/button.js"),f=require("../primitives/popover.js"),p=require("../primitives/text.js"),a=require("create-slots");const P=a.createSlot(({children:r})=>A.Children.map(r,i=>e.jsx(s.default,{expand:!0,...i.props}))),k=a.createSlot(s.default),B=a.createSlot(s.default),M=a.createSlot(({children:r})=>e.jsxs(f.Popover,{textStyle:"subtle",variant:"text",children:[e.jsx(f.Popover.TrailingIcon,{children:e.jsx(L.default,{})}),e.jsx(f.Popover.Content,{children:r})]})),z=a.createSlot(({children:r})=>e.jsx(t.VStack,{w:"full",justify:"center",children:r})),D=a.createSlot(y.Menu),F=a.createSlot(S.Drawer),H=a.createSlot(({children:r})=>e.jsx(t.Center,{pt:3,w:"full",children:r})),V=a.createSlot(({children:r,domain:i,name:o,logoUrl:n})=>e.jsxs(t.HStack,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[n?e.jsx("img",{src:n,alt:o,width:24,height:24}):e.jsx(b.default,{color:C.token("colors.brand.base"),height:24,width:24}),e.jsx(p.default,{size:"sm",fontWeight:"semibold",children:o}),i&&e.jsx(p.default,{size:"sm",fontColor:"text.tertiary",children:i}),r]})),G=({actionDirection:r="row",address:i,branding:o,children:n,title:v,onBack:c,onCancel:d,...W})=>a.createHost(n,l=>{const u=l.getProps(k),x=l.getProps(B),h=l.getProps(D),g=l.getProps(F),m=l.get(P),q=l.get(M),j=r==="row";return e.jsxs(N.Modal,{...W,fullscreen:!0,paddingType:"none",gap:0,children:[e.jsxs(t.VStack,{gap:0,width:"full",children:[e.jsxs(t.HStack,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[c&&e.jsx(s.default,{onPress:c,size:"md",textStyle:"neutral",variant:"text",children:e.jsx(s.default.LeadingIcon,{children:e.jsx(I.default,{})})}),d&&e.jsx(s.default,{onPress:d,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(c||d)&&e.jsx("div",{className:w.css({w:6})}),o&&e.jsx(b.default,{color:C.token(o==="light"?"colors.text.primary":"colors.neutral.primary")}),v&&e.jsx(p.default,{size:"sm",fontColor:"text.secondary",children:v}),i||q||h?e.jsxs(t.HStack,{children:[i&&e.jsx(T.default,{address:i}),q,h&&e.jsx(y.Menu,{...h})]}):e.jsx("div",{className:w.css({w:6})})]}),l.get(V)]}),e.jsxs(t.VStack,{h:"full",w:"full",justify:"space-between",p:6,children:[l.get(z),e.jsxs(t.VStack,{w:"full",gap:3,children:[(u||x)&&e.jsxs(t.Flex,{direction:j?"row":"column-reverse",gap:j?4:3,width:"full",children:[u&&e.jsx(s.default,{expand:!0,label:"Cancel",variant:"neutral",...u}),x&&e.jsx(s.default,{expand:!0,label:"Confirm",variant:"inverse",...x})]}),m&&e.jsx(t.Flex,{direction:r,gap:j?4:3,width:"full",children:m}),l.get(H)]})]}),g&&e.jsx(S.Drawer,{...g})]})}),O=Object.assign(G,{Actions:P,Cancel:k,Confirm:B,Content:z,Menu:D,Drawer:F,Footer:H,Header:V,Info:M});exports.PassportPage=O;
|
|
2
2
|
//# sourceMappingURL=passport-page.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"passport-page.js","sources":["../../../../src/components/layouts/passport-page.tsx"],"sourcesContent":["import { Menu } from '@components/containers';\nimport {
|
|
1
|
+
{"version":3,"file":"passport-page.js","sources":["../../../../src/components/layouts/passport-page.tsx"],"sourcesContent":["import { Menu } from '@components/containers';\nimport { Drawer } from '@components/containers/drawer';\nimport { Modal } from '@components/containers/modal';\nimport { IcoCaretLeft, IcoMagic, IcoQuestionCircleFill } from '@components/icons';\nimport { WalletAddress } from '@components/info';\nimport Button from '@components/primitives/button';\nimport Popover from '@components/primitives/popover';\nimport Text from '@components/primitives/text';\nimport { css } from '@styled/css';\nimport { Center, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, PropsWithChildren } from 'react';\n\ninterface HeaderProps extends PropsWithChildren {\n name: string;\n domain?: string;\n logoUrl?: string;\n}\n\nexport interface PassportPageProps extends PropsWithChildren {\n address?: string;\n animate?: boolean;\n branding?: 'light' | 'dark';\n actionDirection?: 'column' | 'row';\n title?: string;\n isOpen?: boolean;\n onAnimated?: () => void;\n onBack?: () => void;\n onClosed?: () => void;\n onCancel?: () => void;\n}\n\nconst Actions = createSlot(({ children }) => Children.map(children, child => <Button expand {...child.props} />));\nconst Cancel = createSlot(Button);\nconst Confirm = createSlot(Button);\nconst Info = createSlot(({ children }) => (\n <Popover textStyle=\"subtle\" variant=\"text\">\n <Popover.TrailingIcon>\n <IcoQuestionCircleFill />\n </Popover.TrailingIcon>\n <Popover.Content>{children}</Popover.Content>\n </Popover>\n));\n\nconst PageContent = createSlot(({ children }) => (\n <VStack w=\"full\" justify=\"center\">\n {children}\n </VStack>\n));\nconst PageMenu = createSlot(Menu);\nconst PageDrawer = createSlot(Drawer);\nconst PageFooter = createSlot(({ children }) => (\n <Center pt={3} w=\"full\">\n {children}\n </Center>\n));\nconst PageHeader = createSlot(({ children, domain, name, logoUrl }: HeaderProps) => (\n <HStack borderBottomColor=\"neutral.primary\" borderBottomWidth=\"1px\" p={3} width=\"full\">\n {logoUrl ? (\n <img src={logoUrl} alt={name} width={24} height={24} />\n ) : (\n <IcoMagic color={token('colors.brand.base')} height={24} width={24} />\n )}\n <Text size=\"sm\" fontWeight=\"semibold\">\n {name}\n </Text>\n {domain && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {domain}\n </Text>\n )}\n {children}\n </HStack>\n));\n\nconst PassportPageHost = ({\n actionDirection = 'row',\n address,\n branding,\n children,\n title,\n onBack,\n onCancel,\n ...props\n}: PassportPageProps) => {\n return createHost(children, slots => {\n const cancelProps = slots.getProps(Cancel);\n const confirmProps = slots.getProps(Confirm);\n const menuProps = slots.getProps(PageMenu);\n const drawerProps = slots.getProps(PageDrawer);\n\n const actions = slots.get(Actions);\n const info = slots.get(Info);\n\n const isRowDirection = actionDirection === 'row';\n\n return (\n <Modal {...props} fullscreen paddingType=\"none\" gap={0}>\n <VStack gap={0} width=\"full\">\n <HStack\n borderBottomColor=\"neutral.primary\"\n borderBottomWidth=\"1px\"\n justifyContent=\"space-between\"\n p={3}\n width=\"full\"\n >\n {onBack && (\n <Button onPress={onBack} size=\"md\" textStyle=\"neutral\" variant=\"text\">\n <Button.LeadingIcon>\n <IcoCaretLeft />\n </Button.LeadingIcon>\n </Button>\n )}\n {onCancel && <Button onPress={onCancel} label=\"Cancel\" size=\"sm\" textStyle=\"neutral\" variant=\"text\" />}\n {!(onBack || onCancel) && <div className={css({ w: 6 })} />}\n {branding && (\n <IcoMagic color={token(branding === 'light' ? 'colors.text.primary' : 'colors.neutral.primary')} />\n )}\n {title && (\n <Text size=\"sm\" fontColor=\"text.secondary\">\n {title}\n </Text>\n )}\n {address || info || menuProps ? (\n <HStack>\n {address && <WalletAddress address={address} />}\n {info}\n {menuProps && <Menu {...menuProps} />}\n </HStack>\n ) : (\n <div className={css({ w: 6 })} />\n )}\n </HStack>\n {slots.get(PageHeader)}\n </VStack>\n <VStack h=\"full\" w=\"full\" justify=\"space-between\" p={6}>\n {slots.get(PageContent)}\n <VStack w=\"full\" gap={3}>\n {(cancelProps || confirmProps) && (\n <Flex direction={isRowDirection ? 'row' : 'column-reverse'} gap={isRowDirection ? 4 : 3} width=\"full\">\n {cancelProps && <Button expand label=\"Cancel\" variant=\"neutral\" {...cancelProps} />}\n {confirmProps && <Button expand label=\"Confirm\" variant=\"inverse\" {...confirmProps} />}\n </Flex>\n )}\n {actions && (\n <Flex direction={actionDirection} gap={isRowDirection ? 4 : 3} width=\"full\">\n {actions}\n </Flex>\n )}\n {slots.get(PageFooter)}\n </VStack>\n </VStack>\n {drawerProps && <Drawer {...drawerProps} />}\n </Modal>\n );\n });\n};\n\nexport const PassportPage = Object.assign(PassportPageHost, {\n Actions,\n Cancel,\n Confirm,\n Content: PageContent,\n Menu: PageMenu,\n Drawer: PageDrawer,\n Footer: PageFooter,\n Header: PageHeader,\n Info,\n});\n"],"names":["Actions","createSlot","children","Children","child","_jsx","Button","Cancel","Confirm","Info","_jsxs","Popover","IcoQuestionCircleFill","PageContent","VStack","PageMenu","Menu","PageDrawer","Drawer","PageFooter","Center","PageHeader","domain","name","logoUrl","HStack","IcoMagic","token","Text","PassportPageHost","actionDirection","address","branding","title","onBack","onCancel","props","createHost","slots","cancelProps","confirmProps","menuProps","drawerProps","actions","info","isRowDirection","Modal","IcoCaretLeft","css","WalletAddress","Flex","PassportPage"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("../feedback/callout.js"),require("@styled/css");var i=require("@styled/jsx");require("../feedback/progress-bar.js");var q=require("../feedback/skeleton.js"),r=require("@styled/tokens"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("../feedback/callout.js"),require("@styled/css");var i=require("@styled/jsx");require("../feedback/progress-bar.js");var q=require("../feedback/skeleton.js"),r=require("@styled/tokens"),H=require("../icons/ico-arrow-down.js"),P=require("../icons/ico-arrow-up.js"),A=require("../icons/ico-lightning-fill.js"),I=require("../icons/ico-lock-unlocked-fill.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");var l=require("../primitives/text.js");require("../primitives/portal.js");var a=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var L=require("@styled/patterns"),g=require("create-slots"),c=require("react-aria");const N={send:{title:"Send",primaryTextColor:r.token("colors.text.primary"),secondaryTextColor:r.token("colors.text.secondary"),icon:P.default,iconColor:r.token("colors.negative.darker"),skeletonWidth:"89px"},receive:{title:"Receive",primaryTextColor:r.token("colors.positive.base"),secondaryTextColor:`${r.token("colors.positive.lighter")}`,icon:H.default,iconColor:r.token("colors.positive.base"),skeletonWidth:"89px"},networkFee:{title:"Network Fee",primaryTextColor:r.token("colors.text.primary"),secondaryTextColor:r.token("colors.text.secondary"),icon:A.default,iconColor:r.token("colors.brand.base"),skeletonWidth:"54px"},spendingCap:{title:"Spending Cap",primaryTextColor:r.token("colors.warning.base"),secondaryTextColor:r.token("colors.warning.base"),icon:I.default,iconColor:r.token("colors.warning.base"),skeletonWidth:"89px"}},y=g.createSlot(({children:n,...t})=>e.jsx(i.Center,{children:a.Children.map(n,s=>a.cloneElement(s,t))})),O=n=>{const{variant:t,primaryText:s,secondaryText:u,children:C,onPress:d,loading:p,showTitle:v=!0}=n,{title:w,primaryTextColor:x,secondaryTextColor:f,icon:b,iconColor:j,skeletonWidth:h}=N[t],m=t==="send"||t==="networkFee",k=a.useRef(null),T=a.useCallback(()=>{d?.()},[d]),{buttonProps:S}=c.useButton({...n,onPress:T},k),{isFocusVisible:F,focusProps:W}=c.useFocusRing();return g.createHost(C,R=>{const o=R.get(y);return e.jsxs(i.HStack,{w:"full",justify:"space-between",children:[e.jsxs(i.HStack,{gap:2,children:[e.jsx(b,{width:16,height:16,color:j}),v&&e.jsx(l.default,{size:"sm",fontWeight:"medium",children:w})]}),e.jsxs(i.HStack,{gap:4,children:[u&&e.jsx(l.default,{styles:{color:f},children:u}),m?e.jsxs("button",{...c.mergeProps(S,W),ref:k,className:L.hstack({px:4,py:2.5,gap:3,rounded:"xl",bg:"surface.secondary",outlineColor:"brand.base",outlineStyle:F?"solid":"none",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer"}),children:[p?e.jsx(q.Skeleton,{width:h}):e.jsx(l.default,{styles:{color:x},children:s}),o&&{...o,props:{...o.props,width:32,height:32}}]}):e.jsxs(i.HStack,{gap:3,children:[p?e.jsx(q.Skeleton,{width:h}):e.jsx(l.default,{styles:{color:x},children:s}),o&&{...o,props:{...o.props,width:32,height:32}}]})]})]})})},U=Object.assign(O,{TokenIcon:y});exports.TransactionRow=U;
|
|
2
2
|
//# sourceMappingURL=transaction-row.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transaction-row.js","sources":["../../../../src/components/list-items/transaction-row.tsx"],"sourcesContent":["import { Skeleton } from '@components/feedback';\nimport { IcoArrowDown, IcoArrowUp, IcoLightningFill, IcoLockUnlockedFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { Center, HStack } from '@styled/jsx';\nimport { hstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, ReactNode, useCallback, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TransactionRowProps {\n variant: 'send' | 'receive' | 'networkFee' | 'spendingCap';\n primaryText: string;\n secondaryText?: string;\n children: ReactNode;\n onPress?: () => void;\n loading?: boolean;\n}\n\nconst variants = {\n send: {\n title: 'Send',\n primaryTextColor: token('colors.text.primary'),\n secondaryTextColor: token('colors.text.secondary'),\n icon: IcoArrowUp,\n iconColor: token('colors.negative.darker'),\n skeletonWidth: '89px',\n },\n receive: {\n title: 'Receive',\n primaryTextColor: token('colors.positive.base'),\n secondaryTextColor: `${token('colors.positive.lighter')}`,\n icon: IcoArrowDown,\n iconColor: token('colors.positive.base'),\n skeletonWidth: '89px',\n },\n networkFee: {\n title: 'Network Fee',\n primaryTextColor: token('colors.text.primary'),\n secondaryTextColor: token('colors.text.secondary'),\n icon: IcoLightningFill,\n iconColor: token('colors.brand.base'),\n skeletonWidth: '54px',\n },\n spendingCap: {\n title: 'Spending Cap',\n primaryTextColor: token('colors.warning.base'),\n secondaryTextColor: token('colors.warning.base'),\n icon: IcoLockUnlockedFill,\n iconColor: token('colors.warning.base'),\n skeletonWidth: '89px',\n },\n};\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst TransactionRowBase = (props: TransactionRowProps) => {\n const { variant, primaryText, secondaryText, children, onPress, loading } = props;\n const { title, primaryTextColor, secondaryTextColor, icon: Icon, iconColor, skeletonWidth } = variants[variant];\n const isEditable = variant === 'send' || variant === 'networkFee';\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n return (\n <HStack w=\"full\" justify=\"space-between\">\n <HStack gap={2}>\n <Icon width={16} height={16} color={iconColor} />\n <Text size=\"sm\" fontWeight=\"medium\">\n
|
|
1
|
+
{"version":3,"file":"transaction-row.js","sources":["../../../../src/components/list-items/transaction-row.tsx"],"sourcesContent":["import { Skeleton } from '@components/feedback';\nimport { IcoArrowDown, IcoArrowUp, IcoLightningFill, IcoLockUnlockedFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { Center, HStack } from '@styled/jsx';\nimport { hstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, ReactNode, useCallback, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TransactionRowProps {\n variant: 'send' | 'receive' | 'networkFee' | 'spendingCap';\n primaryText: string;\n secondaryText?: string;\n showTitle?: boolean;\n children: ReactNode;\n onPress?: () => void;\n loading?: boolean;\n}\n\nconst variants = {\n send: {\n title: 'Send',\n primaryTextColor: token('colors.text.primary'),\n secondaryTextColor: token('colors.text.secondary'),\n icon: IcoArrowUp,\n iconColor: token('colors.negative.darker'),\n skeletonWidth: '89px',\n },\n receive: {\n title: 'Receive',\n primaryTextColor: token('colors.positive.base'),\n secondaryTextColor: `${token('colors.positive.lighter')}`,\n icon: IcoArrowDown,\n iconColor: token('colors.positive.base'),\n skeletonWidth: '89px',\n },\n networkFee: {\n title: 'Network Fee',\n primaryTextColor: token('colors.text.primary'),\n secondaryTextColor: token('colors.text.secondary'),\n icon: IcoLightningFill,\n iconColor: token('colors.brand.base'),\n skeletonWidth: '54px',\n },\n spendingCap: {\n title: 'Spending Cap',\n primaryTextColor: token('colors.warning.base'),\n secondaryTextColor: token('colors.warning.base'),\n icon: IcoLockUnlockedFill,\n iconColor: token('colors.warning.base'),\n skeletonWidth: '89px',\n },\n};\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst TransactionRowBase = (props: TransactionRowProps) => {\n const { variant, primaryText, secondaryText, children, onPress, loading, showTitle = true } = props;\n const { title, primaryTextColor, secondaryTextColor, icon: Icon, iconColor, skeletonWidth } = variants[variant];\n const isEditable = variant === 'send' || variant === 'networkFee';\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n return (\n <HStack w=\"full\" justify=\"space-between\">\n <HStack gap={2}>\n <Icon width={16} height={16} color={iconColor} />\n {showTitle && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {title}\n </Text>\n )}\n </HStack>\n\n <HStack gap={4}>\n {secondaryText && <Text styles={{ color: secondaryTextColor }}>{secondaryText}</Text>}\n {isEditable ? (\n <button\n {...mergeProps(buttonProps, focusProps)}\n ref={ref}\n className={hstack({\n px: 4,\n py: 2.5,\n gap: 3,\n rounded: 'xl',\n bg: 'surface.secondary',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n cursor: 'pointer',\n })}\n >\n {loading ? (\n <Skeleton width={skeletonWidth} />\n ) : (\n <Text styles={{ color: primaryTextColor }}>{primaryText}</Text>\n )}\n {tokenIcon && {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 32,\n height: 32,\n },\n }}\n </button>\n ) : (\n <HStack gap={3}>\n {loading ? (\n <Skeleton width={skeletonWidth} />\n ) : (\n <Text styles={{ color: primaryTextColor }}>{primaryText}</Text>\n )}\n {tokenIcon && {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 32,\n height: 32,\n },\n }}\n </HStack>\n )}\n </HStack>\n </HStack>\n );\n });\n};\n\nexport const TransactionRow = Object.assign(TransactionRowBase, { TokenIcon });\n"],"names":["variants","token","IcoArrowUp","IcoArrowDown","IcoLightningFill","IcoLockUnlockedFill","TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TransactionRowBase","variant","primaryText","secondaryText","onPress","loading","showTitle","title","primaryTextColor","secondaryTextColor","Icon","iconColor","skeletonWidth","isEditable","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","tokenIcon","_jsxs","HStack","Text","mergeProps","hstack","Skeleton","TransactionRow"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var a=require("@styled/css");const e=a.sva({slots:["content","wrapper"],base:{content:{height:"full",width:"full",boxSizing:"border-box"},wrapper:{height:"full",width:"full",bg:"surface.primary",position:"relative",overflow:"auto",scrollbarWidth:"none"}},variants:{fullscreen:{true:{wrapper:{height:"100vh",width:"100vw"}},false:{wrapper:{"@media (min-width: 48rem)":{top:12,mx:"auto",width:"25rem",height:"fit-content",boxShadow:"0px 12px 56px {colors.ink.70/15}",borderRadius:"container",_dark:{boxShadow:"none"}}}}},animate:{false:{wrapper:{animationName:"none",scale:1}}},isOpen:{true:{}},paddingType:{none:{wrapper:{p:0}},sm:{wrapper:{p:2,pb:0}},md:{wrapper:{p:4,pb:0}},lg:{wrapper:{p:8,pb:0}}},showBorder:{true:{wrapper:{"@media (min-width: 48rem)":{_dark:{borderWidth:1,borderBlock:"solid",borderColor:"neutral.secondary"}}}}}},compoundVariants:[{animate:!0,isOpen:!0,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleIn",animationDuration:"250ms",_motionReduce:{scale:1}}}},{animate:!0,isOpen:!1,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}],defaultVariants:{animate:!0,isOpen:!0,paddingType:"none"}});exports.modal=e;
|
|
2
2
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../src/recipes/modal.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const modal = sva({\n slots: ['content', 'wrapper'],\n base: {\n content: {\n height: 'full',\n width: 'full',\n boxSizing: 'border-box',\n },\n wrapper: {\n height: 'full',\n width: 'full',\n bg: 'surface.primary',\n position: 'relative',\n overflow: 'auto',\n scrollbarWidth: 'none',\n
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../src/recipes/modal.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const modal = sva({\n slots: ['content', 'wrapper'],\n base: {\n content: {\n height: 'full',\n width: 'full',\n boxSizing: 'border-box',\n },\n wrapper: {\n height: 'full',\n width: 'full',\n bg: 'surface.primary',\n position: 'relative',\n overflow: 'auto',\n scrollbarWidth: 'none',\n },\n },\n variants: {\n fullscreen: {\n true: {\n wrapper: {\n height: '100vh',\n width: '100vw',\n },\n },\n false: {\n wrapper: {\n '@media (min-width: 48rem)': {\n top: 12,\n mx: 'auto',\n width: '25rem',\n height: 'fit-content',\n boxShadow: '0px 12px 56px {colors.ink.70/15}',\n borderRadius: 'container',\n _dark: {\n boxShadow: 'none',\n },\n },\n },\n },\n },\n animate: {\n false: {\n wrapper: {\n animationName: 'none',\n scale: 1,\n },\n },\n },\n isOpen: { true: {} },\n paddingType: {\n none: {\n wrapper: {\n p: 0,\n },\n },\n sm: {\n wrapper: {\n p: 2,\n pb: 0,\n },\n },\n md: {\n wrapper: {\n p: 4,\n pb: 0,\n },\n },\n lg: {\n wrapper: {\n p: 8,\n pb: 0,\n },\n },\n },\n showBorder: {\n true: {\n wrapper: {\n '@media (min-width: 48rem)': {\n _dark: {\n borderWidth: 1,\n borderBlock: 'solid',\n borderColor: 'neutral.secondary',\n },\n },\n },\n },\n },\n },\n compoundVariants: [\n {\n animate: true,\n isOpen: true,\n css: {\n wrapper: {\n animationFillMode: 'forwards',\n animationName: 'scaleIn',\n animationDuration: '250ms',\n _motionReduce: { scale: 1 },\n },\n },\n },\n {\n animate: true,\n isOpen: false,\n css: {\n wrapper: {\n animationFillMode: 'forwards',\n animationName: 'scaleOut',\n animationDuration: '150ms',\n _motionReduce: { scale: 1 },\n },\n },\n },\n ],\n defaultVariants: {\n animate: true,\n isOpen: true,\n paddingType: 'none',\n },\n});\n\nexport type ModalVariants = RecipeVariantProps<typeof modal>;\n"],"names":["modal","sva"],"mappings":"0CAEa,MAAAA,EAAQC,EAAAA,IAAI,CACvB,MAAO,CAAC,UAAW,SAAS,EAC5B,KAAM,CACJ,QAAS,CACP,OAAQ,OACR,MAAO,OACP,UAAW,YACZ,EACD,QAAS,CACP,OAAQ,OACR,MAAO,OACP,GAAI,kBACJ,SAAU,WACV,SAAU,OACV,eAAgB,MACjB,CACF,EACD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,QAAS,CACP,OAAQ,QACR,MAAO,OACR,CACF,EACD,MAAO,CACL,QAAS,CACP,4BAA6B,CAC3B,IAAK,GACL,GAAI,OACJ,MAAO,QACP,OAAQ,cACR,UAAW,mCACX,aAAc,YACd,MAAO,CACL,UAAW,MACZ,CACF,CACF,CACF,CACF,EACD,QAAS,CACP,MAAO,CACL,QAAS,CACP,cAAe,OACf,MAAO,CACR,CACF,CACF,EACD,OAAQ,CAAE,KAAM,CAAA,CAAI,EACpB,YAAa,CACX,KAAM,CACJ,QAAS,CACP,EAAG,CACJ,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,CACF,EACD,WAAY,CACV,KAAM,CACJ,QAAS,CACP,4BAA6B,CAC3B,MAAO,CACL,YAAa,EACb,YAAa,QACb,YAAa,mBACd,CACF,CACF,CACF,CACF,CACF,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,UACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,OAAQ,GACR,YAAa,MACd,CACF,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as a}from"react/jsx-runtime";import{useDisplayState as
|
|
1
|
+
import{jsx as a}from"react/jsx-runtime";import{useDisplayState as u}from"../../hooks/useDisplayState.js";import{modal as w}from"../../recipes/modal.js";import{VStack as g}from"@styled/jsx";const i=({animate:e=!0,paddingType:r="none",gap:d=2.5,isOpen:n=!0,onAnimated:s=()=>{},onClosed:t=()=>{},showBorder:l=!0,fullscreen:p=!1,children:m})=>{const o=w({animate:e,isOpen:n,paddingType:r,showBorder:l,fullscreen:p}),{displayed:c,onHide:h,onShow:f}=u({animate:e,show:n,onHidden:t,onShown:s});return c?a("div",{className:o.wrapper,onAnimationEnd:n?f:h,children:a(g,{alignItems:"center",gap:d,className:o.content,children:m})}):null};i.displayName="Modal";export{i as Modal};
|
|
2
2
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n animate?: boolean;\n paddingType?: 'none' | 'sm' | 'md' | 'lg';\n isOpen?: boolean;\n onAnimated?: () => void;\n onClosed?: () => void;\n showBorder?: boolean;\n fullscreen?: boolean;\n}\n\nexport const Modal = ({\n animate = true,\n paddingType = 'none',\n isOpen = true,\n onAnimated = () => {},\n onClosed = () => {},\n showBorder = true,\n fullscreen = false,\n children,\n}: ModalProps) => {\n const classes = modal({ animate, isOpen, paddingType, showBorder, fullscreen });\n const { displayed, onHide, onShow } = useDisplayState({\n animate,\n show: isOpen,\n onHidden: onClosed,\n onShown: onAnimated,\n });\n\n if (!displayed) {\n return null;\n }\n\n return (\n <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n <VStack alignItems=\"center\" className={classes.content}>\n {children}\n </VStack>\n </div>\n );\n};\n\nModal.displayName = 'Modal';\n"],"names":["Modal","animate","paddingType","isOpen","onAnimated","onClosed","showBorder","fullscreen","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { VStack } from '@styled/jsx';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n animate?: boolean;\n paddingType?: 'none' | 'sm' | 'md' | 'lg';\n gap?: number;\n isOpen?: boolean;\n onAnimated?: () => void;\n onClosed?: () => void;\n showBorder?: boolean;\n fullscreen?: boolean;\n}\n\nexport const Modal = ({\n animate = true,\n paddingType = 'none',\n gap = 2.5,\n isOpen = true,\n onAnimated = () => {},\n onClosed = () => {},\n showBorder = true,\n fullscreen = false,\n children,\n}: ModalProps) => {\n const classes = modal({ animate, isOpen, paddingType, showBorder, fullscreen });\n const { displayed, onHide, onShow } = useDisplayState({\n animate,\n show: isOpen,\n onHidden: onClosed,\n onShown: onAnimated,\n });\n\n if (!displayed) {\n return null;\n }\n\n return (\n <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n <VStack alignItems=\"center\" gap={gap} className={classes.content}>\n {children}\n </VStack>\n </div>\n );\n};\n\nModal.displayName = 'Modal';\n"],"names":["Modal","animate","paddingType","gap","isOpen","onAnimated","onClosed","showBorder","fullscreen","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","VStack"],"mappings":"6LAeO,MAAMA,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,IAAAC,EAAM,IACN,OAAAC,EAAS,GACT,WAAAC,EAAa,OACb,SAAAC,EAAW,IAAK,GAChB,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,SAAAC,CACW,IAAI,CACf,MAAMC,EAAUC,EAAM,CAAE,QAAAV,EAAS,OAAAG,EAAQ,YAAAF,EAAa,WAAAK,EAAY,WAAAC,CAAU,CAAE,EACxE,CAAE,UAAAI,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAgB,CACpD,QAAAd,EACA,KAAMG,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKO,EAKHI,EAAK,MAAA,CAAA,UAAWN,EAAQ,QAAS,eAAgBN,EAASU,EAASD,EAAM,SACvEG,EAACC,GAAO,WAAW,SAAS,IAAKd,EAAK,UAAWO,EAAQ,QAAO,SAC7DD,CACM,CAAA,CAAA,CAAA,EAPJ,IAUX,EAEAT,EAAM,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as r,jsxs as
|
|
1
|
+
import{jsx as r,jsxs as o}from"react/jsx-runtime";import"../containers/card.js";import{css as P}from"@styled/css";import{VStack as c,Center as L,HStack as g,Flex as B}from"@styled/jsx";import{Drawer as j}from"../containers/drawer.js";import{Children as $}from"react";import"../utils/client-asset-logo.js";import{token as S}from"@styled/tokens";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import O from"../icons/ico-caret-left.js";import z from"../icons/ico-magic.js";import U from"../icons/ico-question-circle-fill.js";import"../containers/header.js";import{Menu as k}from"../containers/menu.js";import{Modal as V}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 w}from"../primitives/popover.js";import x from"../primitives/text.js";import{createSlot as i,createHost as E}from"create-slots";const D=i(({children:e})=>$.map(e,n=>r(l,{expand:!0,...n.props}))),M=i(l),W=i(l),F=i(({children:e})=>o(w,{textStyle:"subtle",variant:"text",children:[r(w.TrailingIcon,{children:r(U,{})}),r(w.Content,{children:e})]})),H=i(({children:e})=>r(c,{w:"full",justify:"center",children:e})),I=i(k),N=i(j),T=i(({children:e})=>r(L,{pt:3,w:"full",children:e})),A=i(({children:e,domain:n,name:a,logoUrl:m})=>o(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[m?r("img",{src:m,alt:a,width:24,height:24}):r(z,{color:S("colors.brand.base"),height:24,width:24}),r(x,{size:"sm",fontWeight:"semibold",children:a}),n&&r(x,{size:"sm",fontColor:"text.tertiary",children:n}),e]})),J=({actionDirection:e="row",address:n,branding:a,children:m,title:b,onBack:d,onCancel:p,...G})=>E(m,t=>{const s=t.getProps(M),h=t.getProps(W),f=t.getProps(I),C=t.getProps(N),y=t.get(D),v=t.get(F),u=e==="row";return o(V,{...G,fullscreen:!0,paddingType:"none",gap:0,children:[o(c,{gap:0,width:"full",children:[o(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[d&&r(l,{onPress:d,size:"md",textStyle:"neutral",variant:"text",children:r(l.LeadingIcon,{children:r(O,{})})}),p&&r(l,{onPress:p,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(d||p)&&r("div",{className:P({w:6})}),a&&r(z,{color:S(a==="light"?"colors.text.primary":"colors.neutral.primary")}),b&&r(x,{size:"sm",fontColor:"text.secondary",children:b}),n||v||f?o(g,{children:[n&&r(q,{address:n}),v,f&&r(k,{...f})]}):r("div",{className:P({w:6})})]}),t.get(A)]}),o(c,{h:"full",w:"full",justify:"space-between",p:6,children:[t.get(H),o(c,{w:"full",gap:3,children:[(s||h)&&o(B,{direction:u?"row":"column-reverse",gap:u?4:3,width:"full",children:[s&&r(l,{expand:!0,label:"Cancel",variant:"neutral",...s}),h&&r(l,{expand:!0,label:"Confirm",variant:"inverse",...h})]}),y&&r(B,{direction:e,gap:u?4:3,width:"full",children:y}),t.get(T)]})]}),C&&r(j,{...C})]})}),K=Object.assign(J,{Actions:D,Cancel:M,Confirm:W,Content:H,Menu:I,Drawer:N,Footer:T,Header:A,Info:F});export{K as PassportPage};
|
|
2
2
|
//# sourceMappingURL=passport-page.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"passport-page.js","sources":["../../../../src/components/layouts/passport-page.tsx"],"sourcesContent":["import { Menu } from '@components/containers';\nimport {
|
|
1
|
+
{"version":3,"file":"passport-page.js","sources":["../../../../src/components/layouts/passport-page.tsx"],"sourcesContent":["import { Menu } from '@components/containers';\nimport { Drawer } from '@components/containers/drawer';\nimport { Modal } from '@components/containers/modal';\nimport { IcoCaretLeft, IcoMagic, IcoQuestionCircleFill } from '@components/icons';\nimport { WalletAddress } from '@components/info';\nimport Button from '@components/primitives/button';\nimport Popover from '@components/primitives/popover';\nimport Text from '@components/primitives/text';\nimport { css } from '@styled/css';\nimport { Center, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, PropsWithChildren } from 'react';\n\ninterface HeaderProps extends PropsWithChildren {\n name: string;\n domain?: string;\n logoUrl?: string;\n}\n\nexport interface PassportPageProps extends PropsWithChildren {\n address?: string;\n animate?: boolean;\n branding?: 'light' | 'dark';\n actionDirection?: 'column' | 'row';\n title?: string;\n isOpen?: boolean;\n onAnimated?: () => void;\n onBack?: () => void;\n onClosed?: () => void;\n onCancel?: () => void;\n}\n\nconst Actions = createSlot(({ children }) => Children.map(children, child => <Button expand {...child.props} />));\nconst Cancel = createSlot(Button);\nconst Confirm = createSlot(Button);\nconst Info = createSlot(({ children }) => (\n <Popover textStyle=\"subtle\" variant=\"text\">\n <Popover.TrailingIcon>\n <IcoQuestionCircleFill />\n </Popover.TrailingIcon>\n <Popover.Content>{children}</Popover.Content>\n </Popover>\n));\n\nconst PageContent = createSlot(({ children }) => (\n <VStack w=\"full\" justify=\"center\">\n {children}\n </VStack>\n));\nconst PageMenu = createSlot(Menu);\nconst PageDrawer = createSlot(Drawer);\nconst PageFooter = createSlot(({ children }) => (\n <Center pt={3} w=\"full\">\n {children}\n </Center>\n));\nconst PageHeader = createSlot(({ children, domain, name, logoUrl }: HeaderProps) => (\n <HStack borderBottomColor=\"neutral.primary\" borderBottomWidth=\"1px\" p={3} width=\"full\">\n {logoUrl ? (\n <img src={logoUrl} alt={name} width={24} height={24} />\n ) : (\n <IcoMagic color={token('colors.brand.base')} height={24} width={24} />\n )}\n <Text size=\"sm\" fontWeight=\"semibold\">\n {name}\n </Text>\n {domain && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {domain}\n </Text>\n )}\n {children}\n </HStack>\n));\n\nconst PassportPageHost = ({\n actionDirection = 'row',\n address,\n branding,\n children,\n title,\n onBack,\n onCancel,\n ...props\n}: PassportPageProps) => {\n return createHost(children, slots => {\n const cancelProps = slots.getProps(Cancel);\n const confirmProps = slots.getProps(Confirm);\n const menuProps = slots.getProps(PageMenu);\n const drawerProps = slots.getProps(PageDrawer);\n\n const actions = slots.get(Actions);\n const info = slots.get(Info);\n\n const isRowDirection = actionDirection === 'row';\n\n return (\n <Modal {...props} fullscreen paddingType=\"none\" gap={0}>\n <VStack gap={0} width=\"full\">\n <HStack\n borderBottomColor=\"neutral.primary\"\n borderBottomWidth=\"1px\"\n justifyContent=\"space-between\"\n p={3}\n width=\"full\"\n >\n {onBack && (\n <Button onPress={onBack} size=\"md\" textStyle=\"neutral\" variant=\"text\">\n <Button.LeadingIcon>\n <IcoCaretLeft />\n </Button.LeadingIcon>\n </Button>\n )}\n {onCancel && <Button onPress={onCancel} label=\"Cancel\" size=\"sm\" textStyle=\"neutral\" variant=\"text\" />}\n {!(onBack || onCancel) && <div className={css({ w: 6 })} />}\n {branding && (\n <IcoMagic color={token(branding === 'light' ? 'colors.text.primary' : 'colors.neutral.primary')} />\n )}\n {title && (\n <Text size=\"sm\" fontColor=\"text.secondary\">\n {title}\n </Text>\n )}\n {address || info || menuProps ? (\n <HStack>\n {address && <WalletAddress address={address} />}\n {info}\n {menuProps && <Menu {...menuProps} />}\n </HStack>\n ) : (\n <div className={css({ w: 6 })} />\n )}\n </HStack>\n {slots.get(PageHeader)}\n </VStack>\n <VStack h=\"full\" w=\"full\" justify=\"space-between\" p={6}>\n {slots.get(PageContent)}\n <VStack w=\"full\" gap={3}>\n {(cancelProps || confirmProps) && (\n <Flex direction={isRowDirection ? 'row' : 'column-reverse'} gap={isRowDirection ? 4 : 3} width=\"full\">\n {cancelProps && <Button expand label=\"Cancel\" variant=\"neutral\" {...cancelProps} />}\n {confirmProps && <Button expand label=\"Confirm\" variant=\"inverse\" {...confirmProps} />}\n </Flex>\n )}\n {actions && (\n <Flex direction={actionDirection} gap={isRowDirection ? 4 : 3} width=\"full\">\n {actions}\n </Flex>\n )}\n {slots.get(PageFooter)}\n </VStack>\n </VStack>\n {drawerProps && <Drawer {...drawerProps} />}\n </Modal>\n );\n });\n};\n\nexport const PassportPage = Object.assign(PassportPageHost, {\n Actions,\n Cancel,\n Confirm,\n Content: PageContent,\n Menu: PageMenu,\n Drawer: PageDrawer,\n Footer: PageFooter,\n Header: PageHeader,\n Info,\n});\n"],"names":["Actions","createSlot","children","Children","child","_jsx","Button","Cancel","Confirm","Info","_jsxs","Popover","IcoQuestionCircleFill","PageContent","VStack","PageMenu","Menu","PageDrawer","Drawer","PageFooter","Center","PageHeader","domain","name","logoUrl","HStack","IcoMagic","token","Text","PassportPageHost","actionDirection","address","branding","title","onBack","onCancel","props","createHost","slots","cancelProps","confirmProps","menuProps","drawerProps","actions","info","isRowDirection","Modal","IcoCaretLeft","css","WalletAddress","Flex","PassportPage"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as r,jsxs as i}from"react/jsx-runtime";import"../feedback/callout.js";import"@styled/css";import{Center as
|
|
1
|
+
import{jsx as r,jsxs as i}from"react/jsx-runtime";import"../feedback/callout.js";import"@styled/css";import{Center as j,HStack as l}from"@styled/jsx";import"../feedback/progress-bar.js";import{Skeleton as y}from"../feedback/skeleton.js";import{token as o}from"@styled/tokens";import R from"../icons/ico-arrow-down.js";import $ from"../icons/ico-arrow-up.js";import B from"../icons/ico-lightning-fill.js";import H from"../icons/ico-lock-unlocked-fill.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import c from"../primitives/text.js";import"../primitives/portal.js";import{Children as I,cloneElement as N,useRef as O,useCallback as q}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import"../feedback/tooltip.js";import{hstack as z}from"@styled/patterns";import{createSlot as E,createHost as V}from"create-slots";import{useButton as A,useFocusRing as D,mergeProps as G}from"react-aria";const J={send:{title:"Send",primaryTextColor:o("colors.text.primary"),secondaryTextColor:o("colors.text.secondary"),icon:$,iconColor:o("colors.negative.darker"),skeletonWidth:"89px"},receive:{title:"Receive",primaryTextColor:o("colors.positive.base"),secondaryTextColor:`${o("colors.positive.lighter")}`,icon:R,iconColor:o("colors.positive.base"),skeletonWidth:"89px"},networkFee:{title:"Network Fee",primaryTextColor:o("colors.text.primary"),secondaryTextColor:o("colors.text.secondary"),icon:B,iconColor:o("colors.brand.base"),skeletonWidth:"54px"},spendingCap:{title:"Spending Cap",primaryTextColor:o("colors.warning.base"),secondaryTextColor:o("colors.warning.base"),icon:H,iconColor:o("colors.warning.base"),skeletonWidth:"89px"}},f=E(({children:n,...t})=>r(j,{children:I.map(n,s=>N(s,t))})),K=n=>{const{variant:t,primaryText:s,secondaryText:p,children:u,onPress:m,loading:a,showTitle:C=!0}=n,{title:g,primaryTextColor:d,secondaryTextColor:b,icon:k,iconColor:w,skeletonWidth:h}=J[t],T=t==="send"||t==="networkFee",x=O(null),v=q(()=>{m?.()},[m]),{buttonProps:W}=A({...n,onPress:v},x),{isFocusVisible:F,focusProps:S}=D();return V(u,P=>{const e=P.get(f);return i(l,{w:"full",justify:"space-between",children:[i(l,{gap:2,children:[r(k,{width:16,height:16,color:w}),C&&r(c,{size:"sm",fontWeight:"medium",children:g})]}),i(l,{gap:4,children:[p&&r(c,{styles:{color:b},children:p}),T?i("button",{...G(W,S),ref:x,className:z({px:4,py:2.5,gap:3,rounded:"xl",bg:"surface.secondary",outlineColor:"brand.base",outlineStyle:F?"solid":"none",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer"}),children:[a?r(y,{width:h}):r(c,{styles:{color:d},children:s}),e&&{...e,props:{...e.props,width:32,height:32}}]}):i(l,{gap:3,children:[a?r(y,{width:h}):r(c,{styles:{color:d},children:s}),e&&{...e,props:{...e.props,width:32,height:32}}]})]})]})})},L=Object.assign(K,{TokenIcon:f});export{L as TransactionRow};
|
|
2
2
|
//# sourceMappingURL=transaction-row.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transaction-row.js","sources":["../../../../src/components/list-items/transaction-row.tsx"],"sourcesContent":["import { Skeleton } from '@components/feedback';\nimport { IcoArrowDown, IcoArrowUp, IcoLightningFill, IcoLockUnlockedFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { Center, HStack } from '@styled/jsx';\nimport { hstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, ReactNode, useCallback, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TransactionRowProps {\n variant: 'send' | 'receive' | 'networkFee' | 'spendingCap';\n primaryText: string;\n secondaryText?: string;\n children: ReactNode;\n onPress?: () => void;\n loading?: boolean;\n}\n\nconst variants = {\n send: {\n title: 'Send',\n primaryTextColor: token('colors.text.primary'),\n secondaryTextColor: token('colors.text.secondary'),\n icon: IcoArrowUp,\n iconColor: token('colors.negative.darker'),\n skeletonWidth: '89px',\n },\n receive: {\n title: 'Receive',\n primaryTextColor: token('colors.positive.base'),\n secondaryTextColor: `${token('colors.positive.lighter')}`,\n icon: IcoArrowDown,\n iconColor: token('colors.positive.base'),\n skeletonWidth: '89px',\n },\n networkFee: {\n title: 'Network Fee',\n primaryTextColor: token('colors.text.primary'),\n secondaryTextColor: token('colors.text.secondary'),\n icon: IcoLightningFill,\n iconColor: token('colors.brand.base'),\n skeletonWidth: '54px',\n },\n spendingCap: {\n title: 'Spending Cap',\n primaryTextColor: token('colors.warning.base'),\n secondaryTextColor: token('colors.warning.base'),\n icon: IcoLockUnlockedFill,\n iconColor: token('colors.warning.base'),\n skeletonWidth: '89px',\n },\n};\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst TransactionRowBase = (props: TransactionRowProps) => {\n const { variant, primaryText, secondaryText, children, onPress, loading } = props;\n const { title, primaryTextColor, secondaryTextColor, icon: Icon, iconColor, skeletonWidth } = variants[variant];\n const isEditable = variant === 'send' || variant === 'networkFee';\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n return (\n <HStack w=\"full\" justify=\"space-between\">\n <HStack gap={2}>\n <Icon width={16} height={16} color={iconColor} />\n <Text size=\"sm\" fontWeight=\"medium\">\n
|
|
1
|
+
{"version":3,"file":"transaction-row.js","sources":["../../../../src/components/list-items/transaction-row.tsx"],"sourcesContent":["import { Skeleton } from '@components/feedback';\nimport { IcoArrowDown, IcoArrowUp, IcoLightningFill, IcoLockUnlockedFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { Center, HStack } from '@styled/jsx';\nimport { hstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, ReactNode, useCallback, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TransactionRowProps {\n variant: 'send' | 'receive' | 'networkFee' | 'spendingCap';\n primaryText: string;\n secondaryText?: string;\n showTitle?: boolean;\n children: ReactNode;\n onPress?: () => void;\n loading?: boolean;\n}\n\nconst variants = {\n send: {\n title: 'Send',\n primaryTextColor: token('colors.text.primary'),\n secondaryTextColor: token('colors.text.secondary'),\n icon: IcoArrowUp,\n iconColor: token('colors.negative.darker'),\n skeletonWidth: '89px',\n },\n receive: {\n title: 'Receive',\n primaryTextColor: token('colors.positive.base'),\n secondaryTextColor: `${token('colors.positive.lighter')}`,\n icon: IcoArrowDown,\n iconColor: token('colors.positive.base'),\n skeletonWidth: '89px',\n },\n networkFee: {\n title: 'Network Fee',\n primaryTextColor: token('colors.text.primary'),\n secondaryTextColor: token('colors.text.secondary'),\n icon: IcoLightningFill,\n iconColor: token('colors.brand.base'),\n skeletonWidth: '54px',\n },\n spendingCap: {\n title: 'Spending Cap',\n primaryTextColor: token('colors.warning.base'),\n secondaryTextColor: token('colors.warning.base'),\n icon: IcoLockUnlockedFill,\n iconColor: token('colors.warning.base'),\n skeletonWidth: '89px',\n },\n};\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst TransactionRowBase = (props: TransactionRowProps) => {\n const { variant, primaryText, secondaryText, children, onPress, loading, showTitle = true } = props;\n const { title, primaryTextColor, secondaryTextColor, icon: Icon, iconColor, skeletonWidth } = variants[variant];\n const isEditable = variant === 'send' || variant === 'networkFee';\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n return (\n <HStack w=\"full\" justify=\"space-between\">\n <HStack gap={2}>\n <Icon width={16} height={16} color={iconColor} />\n {showTitle && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {title}\n </Text>\n )}\n </HStack>\n\n <HStack gap={4}>\n {secondaryText && <Text styles={{ color: secondaryTextColor }}>{secondaryText}</Text>}\n {isEditable ? (\n <button\n {...mergeProps(buttonProps, focusProps)}\n ref={ref}\n className={hstack({\n px: 4,\n py: 2.5,\n gap: 3,\n rounded: 'xl',\n bg: 'surface.secondary',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n cursor: 'pointer',\n })}\n >\n {loading ? (\n <Skeleton width={skeletonWidth} />\n ) : (\n <Text styles={{ color: primaryTextColor }}>{primaryText}</Text>\n )}\n {tokenIcon && {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 32,\n height: 32,\n },\n }}\n </button>\n ) : (\n <HStack gap={3}>\n {loading ? (\n <Skeleton width={skeletonWidth} />\n ) : (\n <Text styles={{ color: primaryTextColor }}>{primaryText}</Text>\n )}\n {tokenIcon && {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 32,\n height: 32,\n },\n }}\n </HStack>\n )}\n </HStack>\n </HStack>\n );\n });\n};\n\nexport const TransactionRow = Object.assign(TransactionRowBase, { TokenIcon });\n"],"names":["variants","token","IcoArrowUp","IcoArrowDown","IcoLightningFill","IcoLockUnlockedFill","TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TransactionRowBase","variant","primaryText","secondaryText","onPress","loading","showTitle","title","primaryTextColor","secondaryTextColor","Icon","iconColor","skeletonWidth","isEditable","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","tokenIcon","_jsxs","HStack","Text","mergeProps","hstack","Skeleton","TransactionRow"],"mappings":"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"}
|
package/dist/es/recipes/modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{sva as
|
|
1
|
+
import{sva as a}from"@styled/css";const e=a({slots:["content","wrapper"],base:{content:{height:"full",width:"full",boxSizing:"border-box"},wrapper:{height:"full",width:"full",bg:"surface.primary",position:"relative",overflow:"auto",scrollbarWidth:"none"}},variants:{fullscreen:{true:{wrapper:{height:"100vh",width:"100vw"}},false:{wrapper:{"@media (min-width: 48rem)":{top:12,mx:"auto",width:"25rem",height:"fit-content",boxShadow:"0px 12px 56px {colors.ink.70/15}",borderRadius:"container",_dark:{boxShadow:"none"}}}}},animate:{false:{wrapper:{animationName:"none",scale:1}}},isOpen:{true:{}},paddingType:{none:{wrapper:{p:0}},sm:{wrapper:{p:2,pb:0}},md:{wrapper:{p:4,pb:0}},lg:{wrapper:{p:8,pb:0}}},showBorder:{true:{wrapper:{"@media (min-width: 48rem)":{_dark:{borderWidth:1,borderBlock:"solid",borderColor:"neutral.secondary"}}}}}},compoundVariants:[{animate:!0,isOpen:!0,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleIn",animationDuration:"250ms",_motionReduce:{scale:1}}}},{animate:!0,isOpen:!1,css:{wrapper:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}],defaultVariants:{animate:!0,isOpen:!0,paddingType:"none"}});export{e as modal};
|
|
2
2
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../src/recipes/modal.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const modal = sva({\n slots: ['content', 'wrapper'],\n base: {\n content: {\n height: 'full',\n width: 'full',\n boxSizing: 'border-box',\n },\n wrapper: {\n height: 'full',\n width: 'full',\n bg: 'surface.primary',\n position: 'relative',\n overflow: 'auto',\n scrollbarWidth: 'none',\n
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../src/recipes/modal.ts"],"sourcesContent":["import { sva, type RecipeVariantProps } from '@styled/css';\n\nexport const modal = sva({\n slots: ['content', 'wrapper'],\n base: {\n content: {\n height: 'full',\n width: 'full',\n boxSizing: 'border-box',\n },\n wrapper: {\n height: 'full',\n width: 'full',\n bg: 'surface.primary',\n position: 'relative',\n overflow: 'auto',\n scrollbarWidth: 'none',\n },\n },\n variants: {\n fullscreen: {\n true: {\n wrapper: {\n height: '100vh',\n width: '100vw',\n },\n },\n false: {\n wrapper: {\n '@media (min-width: 48rem)': {\n top: 12,\n mx: 'auto',\n width: '25rem',\n height: 'fit-content',\n boxShadow: '0px 12px 56px {colors.ink.70/15}',\n borderRadius: 'container',\n _dark: {\n boxShadow: 'none',\n },\n },\n },\n },\n },\n animate: {\n false: {\n wrapper: {\n animationName: 'none',\n scale: 1,\n },\n },\n },\n isOpen: { true: {} },\n paddingType: {\n none: {\n wrapper: {\n p: 0,\n },\n },\n sm: {\n wrapper: {\n p: 2,\n pb: 0,\n },\n },\n md: {\n wrapper: {\n p: 4,\n pb: 0,\n },\n },\n lg: {\n wrapper: {\n p: 8,\n pb: 0,\n },\n },\n },\n showBorder: {\n true: {\n wrapper: {\n '@media (min-width: 48rem)': {\n _dark: {\n borderWidth: 1,\n borderBlock: 'solid',\n borderColor: 'neutral.secondary',\n },\n },\n },\n },\n },\n },\n compoundVariants: [\n {\n animate: true,\n isOpen: true,\n css: {\n wrapper: {\n animationFillMode: 'forwards',\n animationName: 'scaleIn',\n animationDuration: '250ms',\n _motionReduce: { scale: 1 },\n },\n },\n },\n {\n animate: true,\n isOpen: false,\n css: {\n wrapper: {\n animationFillMode: 'forwards',\n animationName: 'scaleOut',\n animationDuration: '150ms',\n _motionReduce: { scale: 1 },\n },\n },\n },\n ],\n defaultVariants: {\n animate: true,\n isOpen: true,\n paddingType: 'none',\n },\n});\n\nexport type ModalVariants = RecipeVariantProps<typeof modal>;\n"],"names":["modal","sva"],"mappings":"kCAEa,MAAAA,EAAQC,EAAI,CACvB,MAAO,CAAC,UAAW,SAAS,EAC5B,KAAM,CACJ,QAAS,CACP,OAAQ,OACR,MAAO,OACP,UAAW,YACZ,EACD,QAAS,CACP,OAAQ,OACR,MAAO,OACP,GAAI,kBACJ,SAAU,WACV,SAAU,OACV,eAAgB,MACjB,CACF,EACD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,QAAS,CACP,OAAQ,QACR,MAAO,OACR,CACF,EACD,MAAO,CACL,QAAS,CACP,4BAA6B,CAC3B,IAAK,GACL,GAAI,OACJ,MAAO,QACP,OAAQ,cACR,UAAW,mCACX,aAAc,YACd,MAAO,CACL,UAAW,MACZ,CACF,CACF,CACF,CACF,EACD,QAAS,CACP,MAAO,CACL,QAAS,CACP,cAAe,OACf,MAAO,CACR,CACF,CACF,EACD,OAAQ,CAAE,KAAM,CAAA,CAAI,EACpB,YAAa,CACX,KAAM,CACJ,QAAS,CACP,EAAG,CACJ,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,EACD,GAAI,CACF,QAAS,CACP,EAAG,EACH,GAAI,CACL,CACF,CACF,EACD,WAAY,CACV,KAAM,CACJ,QAAS,CACP,4BAA6B,CAC3B,MAAO,CACL,YAAa,EACb,YAAa,QACb,YAAa,mBACd,CACF,CACF,CACF,CACF,CACF,EACD,iBAAkB,CAChB,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,UACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,EACD,CACE,QAAS,GACT,OAAQ,GACR,IAAK,CACH,QAAS,CACP,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,EACD,gBAAiB,CACf,QAAS,GACT,OAAQ,GACR,YAAa,MACd,CACF,CAAA"}
|
|
@@ -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","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: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","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","height]___[value:100vh]___[cond:@media (min-width: 48rem)","width]___[value:100vw]___[cond:@media (min-width: 48rem)","background]___[value:surface.primary]___[cond:@media (min-width: 48rem)","position]___[value:relative]___[cond:@media (min-width: 48rem)","overflow]___[value:auto]___[cond:@media (min-width: 48rem)","scrollbarWidth]___[value:none]___[cond:@media (min-width: 48rem)","borderRadius]___[value:0]___[cond:@media (min-width: 48rem)","top]___[value:0]___[cond:@media (min-width: 48rem)","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","height]___[value:100vh","width]___[value:100vw","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:positive.base","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","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","flexShrink]___[value:0","paddingTop]___[value:6","display]___[value:block","display]___[value:none","position]___[value:absolute","bottom]___[value:0","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","outlineStyle]___[value:none","background]___[value:#ffc439!important","outlineColor]___[value:#ffc439!important","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","gap]___[value:1.5","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","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","maxWidth]___[value:72","width]___[value:max","paddingInline]___[value:3","borderRadius]___[value:xl","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","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","outlineOffset]___[value:1","width]___[value:1.125rem","height]___[value:1.125rem","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","borderBottomColor]___[value:neutral.primary","borderBottomWidth]___[value:1px","height]___[value:24","width]___[value:24","width]___[value:6","flexGrow]___[value:1","flexDirection]___[value:column-reverse","paddingTop]___[value:1.5","transition]___[value:background-color 0.2s","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","width]___[value:40","height]___[value:40","minHeight]___[value:16","background]___[value:surface.tertiary]___[cond:_dark","transition]___[value:background-color 0.1s","width]___[value:16","height]___[value:16","paddingBlock]___[value:2.5","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","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","marginLeft]___[value:3","srOnly]___[value:true","caret]___[value:18","check]___[value:16","height]___[value:3rem","mult]___[value:2.5","width]___[value:4","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","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","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","width]___[value:11","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","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","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","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","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: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:positive.base","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","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","flexShrink]___[value:0","paddingTop]___[value:6","display]___[value:block","display]___[value:none","position]___[value:absolute","bottom]___[value:0","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","outlineStyle]___[value:none","background]___[value:#ffc439!important","outlineColor]___[value:#ffc439!important","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","gap]___[value:1.5","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","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","maxWidth]___[value:72","width]___[value:max","paddingInline]___[value:3","borderRadius]___[value:xl","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","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","outlineOffset]___[value:1","width]___[value:1.125rem","height]___[value:1.125rem","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","padding]___[value:6","paddingTop]___[value:3","borderBottomColor]___[value:neutral.primary","borderBottomWidth]___[value:1px","height]___[value:24","width]___[value:24","width]___[value:6","flexDirection]___[value:column-reverse","transition]___[value:background-color 0.2s","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","width]___[value:40","height]___[value:40","minHeight]___[value:16","background]___[value:surface.tertiary]___[cond:_dark","transition]___[value:background-color 0.1s","width]___[value:16","height]___[value:16","paddingBlock]___[value:2.5","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","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","marginLeft]___[value:3","srOnly]___[value:true","caret]___[value:18","check]___[value:16","height]___[value:3rem","mult]___[value:2.5","width]___[value:4","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","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","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","width]___[value:11","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","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","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:8"],"recipes":{}}}
|
|
@@ -2,6 +2,7 @@ import { ComponentProps } from 'react';
|
|
|
2
2
|
export interface ModalProps extends ComponentProps<'div'> {
|
|
3
3
|
animate?: boolean;
|
|
4
4
|
paddingType?: 'none' | 'sm' | 'md' | 'lg';
|
|
5
|
+
gap?: number;
|
|
5
6
|
isOpen?: boolean;
|
|
6
7
|
onAnimated?: () => void;
|
|
7
8
|
onClosed?: () => void;
|
|
@@ -9,7 +10,7 @@ export interface ModalProps extends ComponentProps<'div'> {
|
|
|
9
10
|
fullscreen?: boolean;
|
|
10
11
|
}
|
|
11
12
|
export declare const Modal: {
|
|
12
|
-
({ animate, paddingType, isOpen, onAnimated, onClosed, showBorder, fullscreen, children, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
|
|
13
|
+
({ animate, paddingType, gap, isOpen, onAnimated, onClosed, showBorder, fullscreen, children, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
|
|
13
14
|
displayName: string;
|
|
14
15
|
};
|
|
15
16
|
//# sourceMappingURL=modal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/containers/modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,KAAK,CAAC;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,KAAK;
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/containers/modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,KAAK,CAAC;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,KAAK;qGAUf,UAAU;;CAoBZ,CAAC"}
|
|
@@ -26,7 +26,7 @@ export declare const PassportPage: (({ actionDirection, address, branding, child
|
|
|
26
26
|
LeadingIcon: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;
|
|
27
27
|
TrailingIcon: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;
|
|
28
28
|
};
|
|
29
|
-
Content: ({ children
|
|
29
|
+
Content: ({ children }: any) => import("react/jsx-runtime").JSX.Element;
|
|
30
30
|
Menu: (({ children, placement, isOpen: opened }: import("../containers").MenuProps) => JSX.Element) & {
|
|
31
31
|
Header: "div";
|
|
32
32
|
Content: "div";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"passport-page.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/passport-page.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"passport-page.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/passport-page.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAY,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEpD,UAAU,WAAY,SAAQ,iBAAiB;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAgID,eAAO,MAAM,YAAY,yFA1EtB,iBAAiB;;;;;;;;;;;;;;;;;;kDA5BgD,WAAW;;CAgH7E,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transaction-row.d.ts","sourceRoot":"","sources":["../../../../src/components/list-items/transaction-row.tsx"],"names":[],"mappings":"AAOA,OAAO,EAA0B,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG/E,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;
|
|
1
|
+
{"version":3,"file":"transaction-row.d.ts","sourceRoot":"","sources":["../../../../src/components/list-items/transaction-row.tsx"],"names":[],"mappings":"AAOA,OAAO,EAA0B,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG/E,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAiID,eAAO,MAAM,cAAc,WAlFQ,mBAAmB;;CAkFwB,CAAC"}
|
|
@@ -2,16 +2,23 @@ import { type RecipeVariantProps } from '@styled/css';
|
|
|
2
2
|
export declare const modal: import("../../styled-system/types").SlotRecipeRuntimeFn<"content" | "wrapper", {
|
|
3
3
|
fullscreen: {
|
|
4
4
|
true: {
|
|
5
|
+
wrapper: {
|
|
6
|
+
height: "100vh";
|
|
7
|
+
width: "100vw";
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
false: {
|
|
5
11
|
wrapper: {
|
|
6
12
|
'@media (min-width: 48rem)': {
|
|
7
|
-
height: "100vh";
|
|
8
|
-
width: "100vw";
|
|
9
|
-
bg: "surface.primary";
|
|
10
|
-
position: "relative";
|
|
11
|
-
overflow: "auto";
|
|
12
|
-
scrollbarWidth: "none";
|
|
13
|
-
rounded: number;
|
|
14
13
|
top: number;
|
|
14
|
+
mx: "auto";
|
|
15
|
+
width: "25rem";
|
|
16
|
+
height: "fit-content";
|
|
17
|
+
boxShadow: "0px 12px 56px {colors.ink.70/15}";
|
|
18
|
+
borderRadius: "container";
|
|
19
|
+
_dark: {
|
|
20
|
+
boxShadow: "none";
|
|
21
|
+
};
|
|
15
22
|
};
|
|
16
23
|
};
|
|
17
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/recipes/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE3D,eAAO,MAAM,KAAK
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/recipes/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE3D,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwHhB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@magiclabs/ui-components",
|
|
3
|
-
"version": "1.28.
|
|
3
|
+
"version": "1.28.2",
|
|
4
4
|
"description": "💅 A theme-able library of reusable UI components",
|
|
5
5
|
"author": "Magic Labs <open-source@magic.link>",
|
|
6
6
|
"repository": {
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"commit": "git add --all && git-cz",
|
|
35
35
|
"generate:icons": "tsx ./scripts/generateIcons.ts",
|
|
36
36
|
"preinstall": "npx only-allow pnpm",
|
|
37
|
-
"prepare": "panda codegen && husky
|
|
37
|
+
"prepare": "panda codegen && husky",
|
|
38
38
|
"lib:dev": "rimraf dist && rollup -w -c rollup.config.mjs && pnpm lib:buildinfo",
|
|
39
39
|
"lib:build": "rimraf dist && rollup -c rollup.config.mjs && pnpm lib:buildinfo",
|
|
40
40
|
"lib:buildinfo": "panda ship --outfile dist/panda.buildinfo.json",
|