@relayprotocol/relay-kit-ui 7.1.5 → 8.0.0

package/_esm/src/components/primitives/Dialog.js

@@ -1,97 +1,55 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { motion, AnimatePresence } from 'framer-motion';
 import { forwardRef, useState } from 'react';
 import { useMediaQuery } from 'usehooks-ts';
-import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+import { cn } from '../../utils/cn.js';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-const OverlayStyle = cva({
-    base: {
-        position: 'fixed',
-        inset: 0
-    }
-});
-const Overlay = forwardRef(({ children, css, ...props }, forwardedRef) => {
-    return (_jsx(DialogPrimitive.Overlay, { ref: forwardedRef, ...props, className: `${designCss(OverlayStyle.raw(), designCss.raw(css))} relay-kit-reset`, children: children }));
-});
-const ContentCss = cva({
-    base: {
-        backgroundColor: 'modal-background',
-        borderRadius: 'modal-border-radius',
-        border: 'modal-border',
-        position: 'fixed',
-        left: '50%',
-        top: '100%',
-        minWidth: '90vw',
-        maxWidth: '100vw',
-        sm: {
-            minWidth: '400px',
-            maxWidth: '532px'
-        },
-        maxHeight: '85vh',
-        overflowY: 'auto',
-        _focus: { outline: 'none' },
-        '@media(max-width: 520px)': {
-            borderBottomRightRadius: 0,
-            borderBottomLeftRadius: 0,
-            width: '100%'
-        }
-    }
+const Overlay = forwardRef(({ children, className, ...props }, forwardedRef) => {
+    return (_jsx(DialogPrimitive.Overlay, { ref: forwardedRef, ...props, className: cn('relay:fixed relay:inset-0 relay:bg-black/50 relay:backdrop-blur-sm', 'relay:animate-overlay-fade-in relay:data-[state=closed]:animate-overlay-fade-out', className, 'relay-kit-reset'), children: children }));
 });
+const contentBase = [
+    'relay:bg-[var(--relay-colors-modal-background)]',
+    'relay:rounded-[var(--relay-radii-modal-border-radius)]',
+    'relay:border-modal',
+    'relay:shadow-xl',
+    'relay:fixed',
+    'relay:max-h-[85vh] relay:overflow-y-auto',
+    'relay:focus:outline-none'
+].join(' ');
 const Content = forwardRef(({ children, ...props }, forwardedRef) => {
-    return (_jsx(DialogPrimitive.DialogContent, { ref: forwardedRef, ...props, className: ContentCss(), children: children }));
+    return (_jsx(DialogPrimitive.DialogContent, { ref: forwardedRef, ...props, className: cn(contentBase, 'relay:top-full'), children: children }));
 });
-const AnimatedContent = forwardRef(({ children, css, disableAnimation = false, ...props }, forwardedRef) => {
+const AnimatedContent = forwardRef(({ children, className, disableAnimation = false, ...props }, forwardedRef) => {
     const isMobile = useMediaQuery('(max-width: 520px)');
-    const isMobileSlideUpEnabled = isMobile && !disableAnimation;
-    const animation = isMobileSlideUpEnabled
-        ? {
-            initial: {
-                opacity: 0,
-                bottom: '-100%',
-                top: 'auto',
-                left: 0
-            },
-            animate: {
-                opacity: 1,
-                bottom: 0,
-                top: 'auto',
-                left: 0
-            },
-            exit: {
-                opacity: 0,
-                bottom: '-100%',
-                top: 'auto',
-                left: 0
-            }
-        }
-        : {
-            initial: {
-                opacity: 0,
-                top: '50%',
-                transform: 'translateX(-50%) translateY(-50%)'
-            },
-            animate: {
-                opacity: 1,
-                top: '50%',
-                transform: 'translateX(-50%) translateY(-50%)'
-            },
-            exit: {
-                opacity: 0,
-                top: '50%',
-                transform: 'translateX(-50%) translateY(-50%)'
-            }
-        };
-    return (_jsx(DialogPrimitive.DialogContent, { className: designCss(ContentCss.raw(props), designCss.raw(css)), forceMount: true, asChild: true, ...props, children: _jsxs(motion.div, { ref: forwardedRef, transition: {
-                type: isMobileSlideUpEnabled ? 'tween' : undefined,
-                duration: isMobileSlideUpEnabled ? 0.2 : 0.1,
-                ease: isMobileSlideUpEnabled ? undefined : 'linear'
-            }, ...animation, children: [_jsx(VisuallyHidden, { children: _jsx(DialogPrimitive.Title, { children: "Title" }) }), children] }, isMobile + 'modal') }));
+    const isMobileSlideUp = isMobile && !disableAnimation;
+    const isMobileFullScreen = isMobile && disableAnimation;
+    const mobileSlideUpClasses = [
+        'relay:bottom-0 relay:top-auto relay:left-0 relay:w-full',
+        'relay:animate-dialog-slide-up',
+        'relay:data-[state=closed]:animate-dialog-slide-down',
+        'relay:max-[520px]:rounded-b-none'
+    ].join(' ');
+    const mobileFullScreenClasses = [
+        'relay:top-0 relay:left-0 relay:w-full relay:h-full',
+        'relay:max-h-full relay:rounded-none'
+    ].join(' ');
+    const desktopClasses = [
+        'relay:left-1/2 relay:top-1/2',
+        'relay:min-w-[90vw] relay:max-w-[100vw]',
+        'relay:sm:min-w-[400px] relay:sm:max-w-[532px]',
+        'relay:animate-scale-in',
+        'relay:data-[state=closed]:animate-scale-out'
+    ].join(' ');
+    return (_jsxs(DialogPrimitive.DialogContent, { ref: forwardedRef, className: cn(contentBase, isMobileFullScreen
+            ? mobileFullScreenClasses
+            : isMobileSlideUp
+                ? mobileSlideUpClasses
+                : desktopClasses, className), ...props, children: [_jsx(VisuallyHidden, { children: _jsx(DialogPrimitive.Title, { children: "Title" }) }), children] }));
 });
 AnimatedContent.displayName = 'AnimatedContent';
 const Dialog = forwardRef(({ children, trigger, portalProps, ...props }, forwardedRef) => {
     const [open, setOpen] = useState(false);
-    return (_jsxs(DialogPrimitive.Root, { onOpenChange: setOpen, open: open, children: [_jsx(DialogPrimitive.DialogTrigger, { asChild: true, children: trigger }), _jsx(AnimatePresence, { children: open ? (_jsx(DialogPrimitive.DialogPortal, { forceMount: true, ...portalProps, children: _jsx(AnimatedContent, { ref: forwardedRef, forceMount: true, ...props, children: children }) })) : null })] }));
+    return (_jsxs(DialogPrimitive.Root, { onOpenChange: setOpen, open: open, children: [_jsx(DialogPrimitive.DialogTrigger, { asChild: true, children: trigger }), open ? (_jsx(DialogPrimitive.DialogPortal, { ...portalProps, children: _jsx(AnimatedContent, { ref: forwardedRef, ...props, children: children }) })) : null] }));
 });
 Dialog.displayName = 'Dialog';
 export { Dialog, Content, AnimatedContent, Overlay };

package/_esm/src/components/primitives/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/components/primitives/Dialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/components/primitives/Dialog.tsx"],"names":[],"mappings":"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"}

package/_esm/src/components/primitives/Dropdown.js

@@ -1,42 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
-const DropdownMenuContentCss = cva({
-    base: {
-        mx: '4',
-        p: '3',
-        borderRadius: 8,
-        zIndex: 10000002,
-        background: 'modal-background',
-        boxShadow: '0px 0px 50px 0px #0000001F',
-        border: 'dropdown-border'
-    }
+import { cn } from '../../utils/cn.js';
+const DropdownMenuContent = forwardRef(({ children, className, ...props }, forwardedRef) => {
+    return (_jsx(DropdownMenuPrimitive.DropdownMenuContent, { ...props, ref: forwardedRef, className: cn('relay:mx-4 relay:p-0 relay:rounded-[8px] relay:z-[10000002]', 'relay:bg-[var(--relay-colors-modal-background)]', 'relay:shadow-lg', 'relay:border-dropdown', 'relay:animate-content-fade-in', className), children: children }));
 });
-const DropdownMenuContent = forwardRef(({ children, css, ...props }, forwardedRef) => {
-    return (_jsx(DropdownMenuPrimitive.DropdownMenuContent, { ...props, ref: forwardedRef, className: designCss(DropdownMenuContentCss.raw(), designCss.raw(css)), children: children }));
-});
-const DropdownMenuItemCss = cva({
-    base: {
-        display: 'flex',
-        alignItems: 'center',
-        fontSize: 16,
-        color: 'text-default',
-        background: 'modal-background',
-        p: '3',
-        outline: 'none',
-        cursor: 'pointer',
-        transition: 'background-color 150ms linear',
-        _hover: {
-            backgroundColor: 'gray/10'
-        },
-        '&:focus': {
-            backgroundColor: 'gray/10'
-        }
-    }
-});
-const DropdownMenuItem = forwardRef(({ children, css, ...props }, forwardedRef) => {
-    return (_jsx(DropdownMenuPrimitive.DropdownMenuItem, { ...props, ref: forwardedRef, className: designCss(DropdownMenuItemCss.raw(), designCss.raw(css)), children: children }));
+const DropdownMenuItem = forwardRef(({ children, className, ...props }, forwardedRef) => {
+    return (_jsx(DropdownMenuPrimitive.DropdownMenuItem, { ...props, ref: forwardedRef, className: cn('relay:flex relay:items-center relay:text-[16px]', 'relay:text-[color:var(--relay-colors-text-default)]', 'relay:bg-[var(--relay-colors-modal-background)]', 'relay:p-2 relay:outline-none relay:cursor-pointer', 'relay:transition-[background-color] relay:duration-150 relay:ease-linear', 'relay:hover:bg-[var(--relay-colors-gray3)]', 'relay:focus:bg-[var(--relay-colors-gray3)]', className), children: children }));
 });
 const Dropdown = forwardRef(({ children, trigger, contentProps, ...props }, forwardedRef) => {
     const [open, setOpen] = useState(false);

package/_esm/src/components/primitives/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/primitives/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,EAEV,QAAQ,EACT,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAA;AACtE,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAE/C,MAAM,sBAAsB,GAAG,GAAG,CAAC;IACjC,IAAI,EAAE;QACJ,EAAE,EAAE,GAAG;QACP,CAAC,EAAE,GAAG;QACN,YAAY,EAAE,CAAC;QACf,MAAM,EAAE,QAAQ;QAChB,UAAU,EAAE,kBAAkB;QAC9B,SAAS,EAAE,4BAA4B;QACvC,MAAM,EAAE,iBAAiB;KAC1B;CACF,CAAC,CAAA;AAEF,MAAM,mBAAmB,GAAG,UAAU,CAKpC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,qBAAqB,CAAC,mBAAmB,OACpC,KAAK,EACT,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,CAAC,sBAAsB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAErE,QAAQ,GACiC,CAC7C,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,mBAAmB,GAAG,GAAG,CAAC;IAC9B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,cAAc;QACrB,UAAU,EAAE,kBAAkB;QAC9B,CAAC,EAAE,GAAG;QACN,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,+BAA+B;QAC3C,MAAM,EAAE;YACN,eAAe,EAAE,SAAS;SAC3B;QACD,SAAS,EAAE;YACT,eAAe,EAAE,SAAS;SAC3B;KACF;CACF,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAG,UAAU,CAKjC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,qBAAqB,CAAC,gBAAgB,OACjC,KAAK,EACT,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,CAAC,mBAAmB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAElE,QAAQ,GAC8B,CAC1C,CAAA;AACH,CAAC,CAAC,CAAA;AAOF,MAAM,QAAQ,GAAG,UAAU,CAGzB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAChE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,OAAO,CACL,MAAC,qBAAqB,CAAC,IAAI,OACrB,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI,EACxB,YAAY,EAAE,KAAK,CAAC,YAAY,IAAI,OAAO,aAE3C,KAAC,qBAAqB,CAAC,OAAO,IAAC,OAAO,kBACnC,OAAO,GACsB,EAC/B,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CACvB,KAAC,mBAAmB,IAAC,GAAG,EAAE,YAAY,KAAM,YAAY,YACrD,QAAQ,GACW,CACvB,IAC0B,CAC9B,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/primitives/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,EAEV,QAAQ,EACT,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAA;AACtE,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAEtC,MAAM,mBAAmB,GAAG,UAAU,CAKpC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IACpD,OAAO,CACL,KAAC,qBAAqB,CAAC,mBAAmB,OACpC,KAAK,EACT,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CACX,6DAA6D,EAC7D,iDAAiD,EACjD,iBAAiB,EACjB,uBAAuB,EACvB,+BAA+B,EAC/B,SAAS,CACV,YAEA,QAAQ,GACiC,CAC7C,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAG,UAAU,CAKjC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IACpD,OAAO,CACL,KAAC,qBAAqB,CAAC,gBAAgB,OACjC,KAAK,EACT,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CACX,iDAAiD,EACjD,qDAAqD,EACrD,iDAAiD,EACjD,mDAAmD,EACnD,0EAA0E,EAC1E,4CAA4C,EAC5C,4CAA4C,EAC5C,SAAS,CACV,YAEA,QAAQ,GAC8B,CAC1C,CAAA;AACH,CAAC,CAAC,CAAA;AAOF,MAAM,QAAQ,GAAG,UAAU,CAGzB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAChE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,OAAO,CACL,MAAC,qBAAqB,CAAC,IAAI,OACrB,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI,EACxB,YAAY,EAAE,KAAK,CAAC,YAAY,IAAI,OAAO,aAE3C,KAAC,qBAAqB,CAAC,OAAO,IAAC,OAAO,kBACnC,OAAO,GACsB,EAC/B,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CACvB,KAAC,mBAAmB,IAAC,GAAG,EAAE,YAAY,KAAM,YAAY,YACrD,QAAQ,GACW,CACvB,IAC0B,CAC9B,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,CAAA"}

package/_esm/src/components/primitives/Flex.js

@@ -1,73 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
-export const FlexCss = cva({
-    base: {
-        display: 'flex'
-    },
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/cn.js';
+export const flexVariants = cva('relay:flex', {
     variants: {
         align: {
-            start: {
-                alignItems: 'flex-start'
-            },
-            center: {
-                alignItems: 'center'
-            },
-            end: {
-                alignItems: 'flex-end'
-            },
-            stretch: {
-                alignItems: 'stretch'
-            },
-            baseline: {
-                alignItems: 'baseline'
-            },
-            normal: {
-                alignItems: 'normal'
-            }
+            start: 'relay:items-start',
+            center: 'relay:items-center',
+            end: 'relay:items-end',
+            stretch: 'relay:items-stretch',
+            baseline: 'relay:items-baseline',
+            normal: 'relay:items-[normal]'
         },
         justify: {
-            start: {
-                justifyContent: 'flex-start'
-            },
-            center: {
-                justifyContent: 'center'
-            },
-            end: {
-                justifyContent: 'flex-end'
-            },
-            between: {
-                justifyContent: 'space-between'
-            }
+            start: 'relay:justify-start',
+            center: 'relay:justify-center',
+            end: 'relay:justify-end',
+            between: 'relay:justify-between'
         },
         direction: {
-            row: {
-                flexDirection: 'row'
-            },
-            column: {
-                flexDirection: 'column'
-            },
-            rowReverse: {
-                flexDirection: 'row-reverse'
-            },
-            columnReverse: {
-                flexDirection: 'column-reverse'
-            }
+            row: 'relay:flex-row',
+            column: 'relay:flex-col',
+            rowReverse: 'relay:flex-row-reverse',
+            columnReverse: 'relay:flex-col-reverse'
         },
         wrap: {
-            noWrap: {
-                flexWrap: 'nowrap'
-            },
-            wrap: {
-                flexWrap: 'wrap'
-            },
-            wrapReverse: {
-                flexWrap: 'wrap-reverse'
-            }
+            noWrap: 'relay:flex-nowrap',
+            wrap: 'relay:flex-wrap',
+            wrapReverse: 'relay:flex-wrap-reverse'
         }
     }
 });
-const Flex = ({ css, style, children, id, align, justify, direction, wrap, ...htmlProps }) => {
-    return (_jsx("div", { className: designCss(FlexCss.raw({ align, justify, direction, wrap }), designCss.raw(css)), style: style, id: id, ...htmlProps, children: children }));
+const Flex = ({ className, style, children, id, align, justify, direction, wrap, ...htmlProps }) => {
+    return (_jsx("div", { className: cn(flexVariants({ align, justify, direction, wrap }), className), style: style, id: id, ...htmlProps, children: children }));
 };
 export default Flex;
 //# sourceMappingURL=Flex.js.map

package/_esm/src/components/primitives/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../../src/components/primitives/Flex.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAQ/C,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAC;IACzB,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,KAAK,EAAE;gBACL,UAAU,EAAE,YAAY;aACzB;YACD,MAAM,EAAE;gBACN,UAAU,EAAE,QAAQ;aACrB;YACD,GAAG,EAAE;gBACH,UAAU,EAAE,UAAU;aACvB;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,QAAQ,EAAE;gBACR,UAAU,EAAE,UAAU;aACvB;YACD,MAAM,EAAE;gBACN,UAAU,EAAE,QAAQ;aACrB;SACF;QACD,OAAO,EAAE;YACP,KAAK,EAAE;gBACL,cAAc,EAAE,YAAY;aAC7B;YACD,MAAM,EAAE;gBACN,cAAc,EAAE,QAAQ;aACzB;YACD,GAAG,EAAE;gBACH,cAAc,EAAE,UAAU;aAC3B;YACD,OAAO,EAAE;gBACP,cAAc,EAAE,eAAe;aAChC;SACF;QACD,SAAS,EAAE;YACT,GAAG,EAAE;gBACH,aAAa,EAAE,KAAK;aACrB;YACD,MAAM,EAAE;gBACN,aAAa,EAAE,QAAQ;aACxB;YACD,UAAU,EAAE;gBACV,aAAa,EAAE,aAAa;aAC7B;YACD,aAAa,EAAE;gBACb,aAAa,EAAE,gBAAgB;aAChC;SACF;QACD,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,QAAQ;aACnB;YACD,IAAI,EAAE;gBACJ,QAAQ,EAAE,MAAM;aACjB;YACD,WAAW,EAAE;gBACX,QAAQ,EAAE,cAAc;aACzB;SACF;KACF;CACF,CAAC,CAAA;AAIF,MAAM,IAAI,GAIN,CAAC,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,EAAE,EACF,KAAK,EACL,OAAO,EACP,SAAS,EACT,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,EAAE;IACH,OAAO,CACL,cACE,SAAS,EAAE,SAAS,CAClB,OAAO,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAChD,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CACnB,EACD,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,KACF,SAAS,YAEZ,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../../src/components/primitives/Flex.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAOjE,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,YAAY,EAAE;IAC5C,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,KAAK,EAAE,mBAAmB;YAC1B,MAAM,EAAE,oBAAoB;YAC5B,GAAG,EAAE,iBAAiB;YACtB,OAAO,EAAE,qBAAqB;YAC9B,QAAQ,EAAE,sBAAsB;YAChC,MAAM,EAAE,sBAAsB;SAC/B;QACD,OAAO,EAAE;YACP,KAAK,EAAE,qBAAqB;YAC5B,MAAM,EAAE,sBAAsB;YAC9B,GAAG,EAAE,mBAAmB;YACxB,OAAO,EAAE,uBAAuB;SACjC;QACD,SAAS,EAAE;YACT,GAAG,EAAE,gBAAgB;YACrB,MAAM,EAAE,gBAAgB;YACxB,UAAU,EAAE,wBAAwB;YACpC,aAAa,EAAE,wBAAwB;SACxC;QACD,IAAI,EAAE;YACJ,MAAM,EAAE,mBAAmB;YAC3B,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,yBAAyB;SACvC;KACF;CACF,CAAC,CAAA;AAIF,MAAM,IAAI,GAIN,CAAC,EACH,SAAS,EACT,KAAK,EACL,QAAQ,EACR,EAAE,EACF,KAAK,EACL,OAAO,EACP,SAAS,EACT,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,EAAE;IACH,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,EAC3E,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,KACF,SAAS,YAEZ,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}

package/_esm/src/components/primitives/Input.js

@@ -1,66 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef } from 'react';
-import Flex from './Flex.js';
-import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
-import Box from './Box.js';
-const StyledInputCss = cva({
-    base: {
-        px: 16,
-        py: 12,
-        borderRadius: 'input-border-radius',
-        fontFamily: 'body',
-        fontSize: 16,
-        color: 'input-color',
-        backgroundColor: 'input-background',
-        _placeholder: {
-            color: 'gray10'
-        },
-        '--focusColor': 'colors.focus-color',
-        _focus: {
-            boxShadow: 'inset 0 0 0 2px var(--focusColor)',
-            outline: 'none'
-        },
-        _disabled: {
-            cursor: 'not-allowed'
-        },
-        _spinButtons: {
-            WebkitAppearance: 'none'
-        }
-    },
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/cn.js';
+const inputVariants = cva([
+    'relay:w-full relay:px-4 relay:py-3 relay:rounded-input relay:font-body relay:text-[16px] relay:cursor-text',
+    'relay:text-[color:var(--relay-colors-input-color)]',
+    'relay:bg-[var(--relay-colors-input-background)]',
+    'relay:placeholder:text-[color:var(--relay-colors-gray9)] relay:placeholder-ellipsis',
+    'relay:transition-shadow relay:duration-200',
+    'relay:focus:shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] relay:focus:outline-none',
+    'relay:disabled:cursor-not-allowed',
+    'relay:[&::-webkit-outer-spin-button]:appearance-none relay:[&::-webkit-inner-spin-button]:appearance-none'
+].join(' '), {
     variants: {
         size: {
-            large: {
-                fontSize: 32,
-                lineHeight: '42px'
-            }
+            large: 'relay:text-[32px] relay:leading-[42px]'
         },
         ellipsify: {
-            true: {
-                textOverflow: 'ellipsis',
-                overflow: 'hidden',
-                whiteSpace: 'nowrap'
-            }
+            true: 'relay:text-ellipsis relay:overflow-hidden relay:whitespace-nowrap'
         }
     }
 });
-const Input = forwardRef(({ children, icon, iconPosition, iconCss, containerCss, inputStyle, css, ...props }, ref) => {
+const Input = forwardRef(({ children, icon, iconPosition, iconClassName, containerClassName, inputStyle, className, ...props }, ref) => {
     const { size, ellipsify, style, ...inputProps } = props;
-    return (_jsxs(Flex, { css: {
-            ...containerCss
-        }, style: { ...style }, children: [icon && (_jsx(Flex, { css: { position: 'relative' }, children: _jsx(Box, { css: {
-                        position: 'absolute',
-                        top: 12,
-                        left: iconPosition === 'right' ? 'unset' : 16,
-                        right: iconPosition === 'right' ? 16 : 'unset',
-                        zIndex: 0,
-                        ...iconCss
-                    }, children: icon }) })), _jsx("input", { ...inputProps, type: "text", ref: ref, style: {
+    return (_jsxs("div", { className: cn('relay:flex relay:w-full', containerClassName), style: style, children: [icon && (_jsx("div", { className: "relay:flex relay:relative", children: _jsx("div", { className: cn('relay:absolute relay:top-[12px] relay:z-10 relay:flex relay:items-center', iconPosition === 'right'
+                        ? 'relay:right-4 relay:left-[unset]'
+                        : 'relay:left-4 relay:right-[unset]', iconClassName), children: icon }) })), _jsx("input", { ...inputProps, type: "text", ref: ref, style: {
                     paddingLeft: icon && iconPosition !== 'right' ? 42 : 16,
                     paddingRight: icon && iconPosition === 'right' ? 42 : 16,
                     ...inputStyle
-                }, className: designCss(StyledInputCss.raw({ size, ellipsify }), designCss.raw({
-                    ...css
-                })) })] }));
+                }, className: cn(inputVariants({ size, ellipsify }), className) })] }));
 });
 Input.displayName = 'Input';
 export default Input;

package/_esm/src/components/primitives/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/primitives/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,IAAI,MAAM,WAAW,CAAA;AAE5B,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAC/C,OAAO,GAAG,MAAM,UAAU,CAAA;AAE1B,MAAM,cAAc,GAAG,GAAG,CAAC;IACzB,IAAI,EAAE;QACJ,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,YAAY,EAAE,qBAAqB;QACnC,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,aAAa;QACpB,eAAe,EAAE,kBAAkB;QACnC,YAAY,EAAE;YACZ,KAAK,EAAE,QAAQ;SAChB;QACD,cAAc,EAAE,oBAAoB;QACpC,MAAM,EAAE;YACN,SAAS,EAAE,mCAAmC;YAC9C,OAAO,EAAE,MAAM;SAChB;QACD,SAAS,EAAE;YACT,MAAM,EAAE,aAAa;SACtB;QACD,YAAY,EAAE;YACZ,gBAAgB,EAAE,MAAM;SACzB;KACF;IAED,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,MAAM;aACnB;SACF;QACD,SAAS,EAAE;YACT,IAAI,EAAE;gBACJ,YAAY,EAAE,UAAU;gBACxB,QAAQ,EAAE,QAAQ;gBAClB,UAAU,EAAE,QAAQ;aACrB;SACF;KACF;CACF,CAAC,CAAA;AAMF,MAAM,KAAK,GAAG,UAAU,CAWtB,CACE,EACE,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,YAAY,EACZ,UAAU,EACV,GAAG,EACH,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAEvD,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE;YACH,GAAG,YAAY;SAChB,EACD,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,aAElB,IAAI,IAAI,CACP,KAAC,IAAI,IAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YACjC,KAAC,GAAG,IACF,GAAG,EAAE;wBACH,QAAQ,EAAE,UAAU;wBACpB,GAAG,EAAE,EAAE;wBACP,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;wBAC7C,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;wBAC9C,MAAM,EAAE,CAAC;wBACT,GAAG,OAAO;qBACX,YAEA,IAAI,GACD,GACD,CACR,EACD,mBACM,UAAU,EACd,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI,IAAI,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;oBACvD,YAAY,EAAE,IAAI,IAAI,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;oBACxD,GAAG,UAAU;iBACd,EACD,SAAS,EAAE,SAAS,CAClB,cAAc,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EACvC,SAAS,CAAC,GAAG,CAAC;oBACZ,GAAG,GAAG;iBACP,CAAC,CACH,GACD,IACG,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA;AAE3B,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/primitives/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAEtC,MAAM,aAAa,GAAG,GAAG,CACvB;IACE,4GAA4G;IAC5G,oDAAoD;IACpD,iDAAiD;IACjD,qFAAqF;IACrF,4CAA4C;IAC5C,+FAA+F;IAC/F,mCAAmC;IACnC,2GAA2G;CAC5G,CAAC,IAAI,CAAC,GAAG,CAAC,EACX;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,wCAAwC;SAChD;QACD,SAAS,EAAE;YACT,IAAI,EAAE,mEAAmE;SAC1E;KACF;CACF,CACF,CAAA;AAID,MAAM,KAAK,GAAG,UAAU,CAWtB,CACE,EACE,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAEvD,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,kBAAkB,CAAC,EAAE,KAAK,EAAE,KAAK,aAC5E,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,2BAA2B,YACxC,cACE,SAAS,EAAE,EAAE,CACX,0EAA0E,EAC1E,YAAY,KAAK,OAAO;wBACtB,CAAC,CAAC,kCAAkC;wBACpC,CAAC,CAAC,kCAAkC,EACtC,aAAa,CACd,YAEA,IAAI,GACD,GACF,CACP,EACD,mBACM,UAAU,EACd,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI,IAAI,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;oBACvD,YAAY,EAAE,IAAI,IAAI,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;oBACxD,GAAG,UAAU;iBACd,EACD,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,GAC5D,IACE,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA;AAE3B,eAAe,KAAK,CAAA"}

package/_esm/src/components/primitives/Pill.js

@@ -1,64 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
-export const PillStyle = cva({
-    base: {
-        display: 'flex',
-        background: 'subtle-background-color',
-        px: '3',
-        py: '1',
-        gap: '1'
-    },
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/cn.js';
+export const pillVariants = cva('relay:flex relay:px-3 relay:py-1 relay:gap-1 relay:transition-colors relay:duration-150', {
     variants: {
         color: {
-            red: {
-                background: 'red3',
-                color: 'red11'
-            },
-            gray: {
-                background: 'gray2',
-                color: 'gray8'
-            },
-            green: {
-                background: 'green3',
-                color: 'green12'
-            },
-            amber: {
-                background: 'amber2',
-                color: 'amber9'
-            },
-            transparent: {
-                background: 'none',
-                color: 'gray12'
-            },
-            primary: {
-                background: 'primary3',
-                color: 'primary12'
-            }
+            default: 'relay:bg-[var(--relay-colors-subtle-background-color)]',
+            red: 'relay:bg-[var(--relay-colors-red3)] relay:text-[color:var(--relay-colors-red11)]',
+            gray: 'relay:bg-[var(--relay-colors-gray2)] relay:text-[color:var(--relay-colors-gray8)]',
+            green: 'relay:bg-[var(--relay-colors-green3)] relay:text-[color:var(--relay-colors-green12)]',
+            amber: 'relay:bg-[var(--relay-colors-amber2)] relay:text-[color:var(--relay-colors-amber9)]',
+            transparent: 'relay:bg-transparent relay:text-[color:var(--relay-colors-gray12)]',
+            primary: 'relay:bg-[var(--relay-colors-primary3)] relay:text-[color:var(--relay-colors-primary12)]'
         },
         radius: {
-            pill: {
-                borderRadius: 25
-            },
-            rounded: {
-                borderRadius: 12
-            },
-            squared: {
-                borderRadius: 8
-            }
+            pill: 'relay:rounded-[25px]',
+            rounded: 'relay:rounded-[12px]',
+            squared: 'relay:rounded-[8px]'
         },
         bordered: {
-            true: {
-                '--borderColor': 'colors.gray.6',
-                border: '1px solid var(--borderColor)'
-            }
+            true: 'relay:border relay:border-solid relay:border-[var(--relay-colors-gray-6)]'
         }
     },
     defaultVariants: {
+        color: 'default',
         radius: 'pill'
     }
 });
-export const Pill = ({ css, ...props }) => {
-    return (_jsx("div", { ...props, className: designCss(PillStyle.raw(props), designCss.raw(css)) }));
+export const Pill = ({ className, color, radius, bordered, ...props }) => {
+    return (_jsx("div", { ...props, className: cn(pillVariants({ color, radius, bordered }), className) }));
 };
 export default Pill;
 //# sourceMappingURL=Pill.js.map

package/_esm/src/components/primitives/Pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.js","sourceRoot":"","sources":["../../../../src/components/primitives/Pill.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAI/C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC;IAC3B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,yBAAyB;QACrC,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,GAAG;QACP,GAAG,EAAE,GAAG;KACT;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,GAAG,EAAE;gBACH,UAAU,EAAE,MAAM;gBAClB,KAAK,EAAE,OAAO;aACf;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE,OAAO;gBACnB,KAAK,EAAE,OAAO;aACf;YACD,KAAK,EAAE;gBACL,UAAU,EAAE,QAAQ;gBACpB,KAAK,EAAE,SAAS;aACjB;YACD,KAAK,EAAE;gBACL,UAAU,EAAE,QAAQ;gBACpB,KAAK,EAAE,QAAQ;aAChB;YACD,WAAW,EAAE;gBACX,UAAU,EAAE,MAAM;gBAClB,KAAK,EAAE,QAAQ;aAChB;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,UAAU;gBACtB,KAAK,EAAE,WAAW;aACnB;SACF;QACD,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,YAAY,EAAE,EAAE;aACjB;YACD,OAAO,EAAE;gBACP,YAAY,EAAE,EAAE;aACjB;YACD,OAAO,EAAE;gBACP,YAAY,EAAE,CAAC;aAChB;SACF;QACD,QAAQ,EAAE;YACR,IAAI,EAAE;gBACJ,eAAe,EAAE,eAAe;gBAChC,MAAM,EAAE,8BAA8B;aACvC;SACF;KACF;IACD,eAAe,EAAE;QACf,MAAM,EAAE,MAAM;KACf;CACF,CAAC,CAAA;AAIF,MAAM,CAAC,MAAM,IAAI,GAIb,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxB,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GACzD,CACR,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Pill.js","sourceRoot":"","sources":["../../../../src/components/primitives/Pill.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAC7B,yFAAyF,EACzF;IACE,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,wDAAwD;YACjE,GAAG,EAAE,kFAAkF;YACvF,IAAI,EAAE,mFAAmF;YACzF,KAAK,EAAE,sFAAsF;YAC7F,KAAK,EAAE,qFAAqF;YAC5F,WAAW,EAAE,oEAAoE;YACjF,OAAO,EAAE,0FAA0F;SACpG;QACD,MAAM,EAAE;YACN,IAAI,EAAE,sBAAsB;YAC5B,OAAO,EAAE,sBAAsB;YAC/B,OAAO,EAAE,qBAAqB;SAC/B;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,2EAA2E;SAClF;KACF;IACD,eAAe,EAAE;QACf,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,MAAM;KACf;CACF,CACF,CAAA;AAID,MAAM,CAAC,MAAM,IAAI,GAEb,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,CAAC,GACnE,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}

package/_esm/src/components/primitives/Skeleton.js

@@ -1,16 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Flex from './Flex.js';
-import {} from '@relayprotocol/relay-design-system/css';
-const Skeleton = ({ css }) => {
-    return (_jsx(Flex, { css: {
-            animationName: 'pulse',
-            backgroundColor: 'skeleton-background',
-            borderRadius: 8,
-            width: 100,
-            height: 12,
-            animation: 'pulse 3s ease-in-out infinite',
-            ...css
-        } }));
+import { cn } from '../../utils/cn.js';
+const Skeleton = ({ className }) => {
+    return (_jsx("div", { className: cn('relay:flex relay:animate-pulse relay:bg-[var(--relay-colors-skeleton-background)] relay:rounded-[8px] relay:w-[100px] relay:h-[12px]', className) }));
 };
 export default Skeleton;
 //# sourceMappingURL=Skeleton.js.map

package/_esm/src/components/primitives/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/primitives/Skeleton.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,EAAe,MAAM,wCAAwC,CAAA;AAMpE,MAAM,QAAQ,GAAsB,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,IAAI,IACH,GAAG,EAAE;YACH,aAAa,EAAE,OAAO;YACtB,eAAe,EAAE,qBAAqB;YACtC,YAAY,EAAE,CAAC;YACf,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,EAAE;YACV,SAAS,EAAE,+BAA+B;YAC1C,GAAG,GAAG;SACP,GACD,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/primitives/Skeleton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAMtC,MAAM,QAAQ,GAAsB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACpD,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,sIAAsI,EACtI,SAAS,CACV,GACD,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/_esm/src/components/primitives/SlippageButton.js

@@ -17,19 +17,7 @@ const convertBpsToPercent = (bps) => {
 export const SlippageButton = ({ slippageTolerance, onOpenSlippageConfig }) => {
     const resolvedValue = convertBpsToPercent(slippageTolerance);
     const displayValue = resolvedValue ? `${resolvedValue}%` : 'Auto';
-    return (_jsxs(Button, { "aria-label": "Slippage Settings", size: "none", color: "ghost", css: {
-            display: 'flex',
-            borderRadius: '8px',
-            alignItems: 'center',
-            gap: '4px',
-            justifyContent: 'center',
-            p: '1',
-            _hover: {
-                backgroundColor: 'gray2'
-            },
-            backgroundColor: 'gray3',
-            padding: '4px 6px'
-        }, onClick: () => {
+    return (_jsxs(Button, { "aria-label": "Slippage Settings", size: "none", color: "ghost", className: "relay:flex relay:rounded-[8px] relay:items-center relay:gap-[4px] relay:justify-center relay:p-1 relay:hover:bg-[var(--relay-colors-gray2)] relay:bg-[var(--relay-colors-gray3)] relay:px-[6px] relay:py-[4px]", onClick: () => {
             onOpenSlippageConfig?.();
         }, children: [_jsx(Text, { style: "subtitle3", color: "subtle", children: "Slippage" }), _jsx(Text, { style: "subtitle2", children: displayValue })] }));
 };

package/_esm/src/components/primitives/SlippageButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlippageButton.js","sourceRoot":"","sources":["../../../../src/components/primitives/SlippageButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,MAAM,OAAO,CAAA;AAC/B,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,IAAI,MAAM,WAAW,CAAA;AAO5B,MAAM,mBAAmB,GAAG,CAAC,GAAY,EAAE,EAAE;IAC3C,IAAI,GAAG,KAAK,SAAS;QAAE,OAAO,SAAS,CAAA;IACvC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;IAC3B,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC;QAAE,OAAO,SAAS,CAAA;IAE/C,MAAM,OAAO,GAAG,OAAO,GAAG,GAAG,CAAA;IAC7B,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC;QAAE,OAAO,SAAS,CAAA;IAE/C,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC5D,OAAO,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AAC5D,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,iBAAiB,EACjB,oBAAoB,EACrB,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,mBAAmB,CAAC,iBAAiB,CAAC,CAAA;IAC5D,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC,CAAC,MAAM,CAAA;IAEjE,OAAO,CACL,MAAC,MAAM,kBACM,mBAAmB,EAC9B,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,OAAO,EACb,GAAG,EAAE;YACH,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,KAAK;YACnB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,KAAK;YACV,cAAc,EAAE,QAAQ;YACxB,CAAC,EAAE,GAAG;YACN,MAAM,EAAE;gBACN,eAAe,EAAE,OAAO;aACzB;YACD,eAAe,EAAE,OAAO;YACxB,OAAO,EAAE,SAAS;SACnB,EACD,OAAO,EAAE,GAAG,EAAE;YACZ,oBAAoB,EAAE,EAAE,CAAA;QAC1B,CAAC,aAED,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,QAAQ,yBAE/B,EAEP,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,YAAE,YAAY,GAAQ,IACtC,CACV,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"SlippageButton.js","sourceRoot":"","sources":["../../../../src/components/primitives/SlippageButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,MAAM,OAAO,CAAA;AAC/B,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,IAAI,MAAM,WAAW,CAAA;AAO5B,MAAM,mBAAmB,GAAG,CAAC,GAAY,EAAE,EAAE;IAC3C,IAAI,GAAG,KAAK,SAAS;QAAE,OAAO,SAAS,CAAA;IACvC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;IAC3B,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC;QAAE,OAAO,SAAS,CAAA;IAE/C,MAAM,OAAO,GAAG,OAAO,GAAG,GAAG,CAAA;IAC7B,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC;QAAE,OAAO,SAAS,CAAA;IAE/C,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC5D,OAAO,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AAC5D,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,iBAAiB,EACjB,oBAAoB,EACrB,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,mBAAmB,CAAC,iBAAiB,CAAC,CAAA;IAC5D,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC,CAAC,MAAM,CAAA;IAEjE,OAAO,CACL,MAAC,MAAM,kBACM,mBAAmB,EAC9B,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,OAAO,EACb,SAAS,EAAC,gNAAgN,EAC1N,OAAO,EAAE,GAAG,EAAE;YACZ,oBAAoB,EAAE,EAAE,CAAA;QAC1B,CAAC,aAED,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,QAAQ,yBAE/B,EAEP,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,YAAE,YAAY,GAAQ,IACtC,CACV,CAAA;AACH,CAAC,CAAA"}