@relayprotocol/relay-kit-ui 7.1.6 → 8.0.0

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

@@ -4,101 +4,59 @@ exports.Overlay = exports.AnimatedContent = exports.Content = exports.Dialog = v
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DialogPrimitive = tslib_1.__importStar(require("@radix-ui/react-dialog"));
-const framer_motion_1 = require("framer-motion");
 const react_1 = require("react");
 const usehooks_ts_1 = require("usehooks-ts");
-const css_1 = require("@relayprotocol/relay-design-system/css");
+const cn_js_1 = require("../../utils/cn.js");
 const react_visually_hidden_1 = require("@radix-ui/react-visually-hidden");
-const OverlayStyle = (0, css_1.cva)({
-    base: {
-        position: 'fixed',
-        inset: 0
-    }
-});
-const Overlay = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
-    return ((0, jsx_runtime_1.jsx)(DialogPrimitive.Overlay, { ref: forwardedRef, ...props, className: `${(0, css_1.css)(OverlayStyle.raw(), css_1.css.raw(css))} relay-kit-reset`, children: children }));
+const Overlay = (0, react_1.forwardRef)(({ children, className, ...props }, forwardedRef) => {
+    return ((0, jsx_runtime_1.jsx)(DialogPrimitive.Overlay, { ref: forwardedRef, ...props, className: (0, cn_js_1.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 }));
 });
 exports.Overlay = Overlay;
-const ContentCss = (0, css_1.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 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 = (0, react_1.forwardRef)(({ children, ...props }, forwardedRef) => {
-    return ((0, jsx_runtime_1.jsx)(DialogPrimitive.DialogContent, { ref: forwardedRef, ...props, className: ContentCss(), children: children }));
+    return ((0, jsx_runtime_1.jsx)(DialogPrimitive.DialogContent, { ref: forwardedRef, ...props, className: (0, cn_js_1.cn)(contentBase, 'relay:top-full'), children: children }));
 });
 exports.Content = Content;
-const AnimatedContent = (0, react_1.forwardRef)(({ children, css, disableAnimation = false, ...props }, forwardedRef) => {
+const AnimatedContent = (0, react_1.forwardRef)(({ children, className, disableAnimation = false, ...props }, forwardedRef) => {
     const isMobile = (0, usehooks_ts_1.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 ((0, jsx_runtime_1.jsx)(DialogPrimitive.DialogContent, { className: (0, css_1.css)(ContentCss.raw(props), css_1.css.raw(css)), forceMount: true, asChild: true, ...props, children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { ref: forwardedRef, transition: {
-                type: isMobileSlideUpEnabled ? 'tween' : undefined,
-                duration: isMobileSlideUpEnabled ? 0.2 : 0.1,
-                ease: isMobileSlideUpEnabled ? undefined : 'linear'
-            }, ...animation, children: [(0, jsx_runtime_1.jsx)(react_visually_hidden_1.VisuallyHidden, { children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)(DialogPrimitive.DialogContent, { ref: forwardedRef, className: (0, cn_js_1.cn)(contentBase, isMobileFullScreen
+            ? mobileFullScreenClasses
+            : isMobileSlideUp
+                ? mobileSlideUpClasses
+                : desktopClasses, className), ...props, children: [(0, jsx_runtime_1.jsx)(react_visually_hidden_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)(DialogPrimitive.Title, { children: "Title" }) }), children] }));
 });
 exports.AnimatedContent = AnimatedContent;
 AnimatedContent.displayName = 'AnimatedContent';
 const Dialog = (0, react_1.forwardRef)(({ children, trigger, portalProps, ...props }, forwardedRef) => {
     const [open, setOpen] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Root, { onOpenChange: setOpen, open: open, children: [(0, jsx_runtime_1.jsx)(DialogPrimitive.DialogTrigger, { asChild: true, children: trigger }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open ? ((0, jsx_runtime_1.jsx)(DialogPrimitive.DialogPortal, { forceMount: true, ...portalProps, children: (0, jsx_runtime_1.jsx)(AnimatedContent, { ref: forwardedRef, forceMount: true, ...props, children: children }) })) : null })] }));
+    return ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Root, { onOpenChange: setOpen, open: open, children: [(0, jsx_runtime_1.jsx)(DialogPrimitive.DialogTrigger, { asChild: true, children: trigger }), open ? ((0, jsx_runtime_1.jsx)(DialogPrimitive.DialogPortal, { ...portalProps, children: (0, jsx_runtime_1.jsx)(AnimatedContent, { ref: forwardedRef, ...props, children: children }) })) : null] }));
 });
 exports.Dialog = Dialog;
 Dialog.displayName = 'Dialog';

package/_cjs/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/_cjs/src/components/primitives/Dropdown.js

@@ -5,43 +5,13 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const DropdownMenuPrimitive = tslib_1.__importStar(require("@radix-ui/react-dropdown-menu"));
-const css_1 = require("@relayprotocol/relay-design-system/css");
-const DropdownMenuContentCss = (0, css_1.cva)({
-    base: {
-        mx: '4',
-        p: '3',
-        borderRadius: 8,
-        zIndex: 10000002,
-        background: 'modal-background',
-        boxShadow: '0px 0px 50px 0px #0000001F',
-        border: 'dropdown-border'
-    }
-});
-const DropdownMenuContent = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.DropdownMenuContent, { ...props, ref: forwardedRef, className: (0, css_1.css)(DropdownMenuContentCss.raw(), css_1.css.raw(css)), children: children }));
+const cn_js_1 = require("../../utils/cn.js");
+const DropdownMenuContent = (0, react_1.forwardRef)(({ children, className, ...props }, forwardedRef) => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.DropdownMenuContent, { ...props, ref: forwardedRef, className: (0, cn_js_1.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 }));
 });
 exports.DropdownMenuContent = DropdownMenuContent;
-const DropdownMenuItemCss = (0, css_1.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 = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.DropdownMenuItem, { ...props, ref: forwardedRef, className: (0, css_1.css)(DropdownMenuItemCss.raw(), css_1.css.raw(css)), children: children }));
+const DropdownMenuItem = (0, react_1.forwardRef)(({ children, className, ...props }, forwardedRef) => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.DropdownMenuItem, { ...props, ref: forwardedRef, className: (0, cn_js_1.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 }));
 });
 exports.DropdownMenuItem = DropdownMenuItem;
 const Dropdown = (0, react_1.forwardRef)(({ children, trigger, contentProps, ...props }, forwardedRef) => {

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/primitives/Dropdown.tsx"],"names":[],"mappings":";;;;;AAAA,iCAMc;AACd,6FAAsE;AACtE,gEAI+C;AAE/C,MAAM,sBAAsB,GAAG,IAAA,SAAG,EAAC;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,IAAA,kBAAU,EAKpC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,uBAAC,qBAAqB,CAAC,mBAAmB,OACpC,KAAK,EACT,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,SAAS,EAAC,sBAAsB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAErE,QAAQ,GACiC,CAC7C,CAAA;AACH,CAAC,CAAC,CAAA;AAsEiB,kDAAmB;AApEtC,MAAM,mBAAmB,GAAG,IAAA,SAAG,EAAC;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,IAAA,kBAAU,EAKjC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,uBAAC,qBAAqB,CAAC,gBAAgB,OACjC,KAAK,EACT,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,SAAS,EAAC,mBAAmB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAElE,QAAQ,GAC8B,CAC1C,CAAA;AACH,CAAC,CAAC,CAAA;AAiCsC,4CAAgB;AA1BxD,MAAM,QAAQ,GAAG,IAAA,kBAAU,EAGzB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAChE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAEvC,OAAO,CACL,wBAAC,qBAAqB,CAAC,IAAI,OACrB,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI,EACxB,YAAY,EAAE,KAAK,CAAC,YAAY,IAAI,OAAO,aAE3C,uBAAC,qBAAqB,CAAC,OAAO,IAAC,OAAO,kBACnC,OAAO,GACsB,EAC/B,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CACvB,uBAAC,mBAAmB,IAAC,GAAG,EAAE,YAAY,KAAM,YAAY,YACrD,QAAQ,GACW,CACvB,IAC0B,CAC9B,CAAA;AACH,CAAC,CAAC,CAAA;AAIO,4BAAQ;AAFjB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA"}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/primitives/Dropdown.tsx"],"names":[],"mappings":";;;;;AAAA,iCAMc;AACd,6FAAsE;AACtE,6CAAsC;AAEtC,MAAM,mBAAmB,GAAG,IAAA,kBAAU,EAKpC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IACpD,OAAO,CACL,uBAAC,qBAAqB,CAAC,mBAAmB,OACpC,KAAK,EACT,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,UAAE,EACX,6DAA6D,EAC7D,iDAAiD,EACjD,iBAAiB,EACjB,uBAAuB,EACvB,+BAA+B,EAC/B,SAAS,CACV,YAEA,QAAQ,GACiC,CAC7C,CAAA;AACH,CAAC,CAAC,CAAA;AA2DiB,kDAAmB;AAzDtC,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EAKjC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IACpD,OAAO,CACL,uBAAC,qBAAqB,CAAC,gBAAgB,OACjC,KAAK,EACT,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,UAAE,EACX,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;AAiCsC,4CAAgB;AA1BxD,MAAM,QAAQ,GAAG,IAAA,kBAAU,EAGzB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAChE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAEvC,OAAO,CACL,wBAAC,qBAAqB,CAAC,IAAI,OACrB,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI,EACxB,YAAY,EAAE,KAAK,CAAC,YAAY,IAAI,OAAO,aAE3C,uBAAC,qBAAqB,CAAC,OAAO,IAAC,OAAO,kBACnC,OAAO,GACsB,EAC/B,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CACvB,uBAAC,mBAAmB,IAAC,GAAG,EAAE,YAAY,KAAM,YAAY,YACrD,QAAQ,GACW,CACvB,IAC0B,CAC9B,CAAA;AACH,CAAC,CAAC,CAAA;AAIO,4BAAQ;AAFjB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA"}

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

@@ -1,76 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlexCss = void 0;
+exports.flexVariants = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const css_1 = require("@relayprotocol/relay-design-system/css");
-exports.FlexCss = (0, css_1.cva)({
-    base: {
-        display: 'flex'
-    },
+const class_variance_authority_1 = require("class-variance-authority");
+const cn_js_1 = require("../../utils/cn.js");
+exports.flexVariants = (0, class_variance_authority_1.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 ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.css)(exports.FlexCss.raw({ align, justify, direction, wrap }), css_1.css.raw(css)), style: style, id: id, ...htmlProps, children: children }));
+const Flex = ({ className, style, children, id, align, justify, direction, wrap, ...htmlProps }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)((0, exports.flexVariants)({ align, justify, direction, wrap }), className), style: style, id: id, ...htmlProps, children: children }));
 };
 exports.default = Flex;
 //# sourceMappingURL=Flex.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../../src/components/primitives/Flex.tsx"],"names":[],"mappings":";;;;AAAA,gEAI+C;AAQlC,QAAA,OAAO,GAAG,IAAA,SAAG,EAAC;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,gCACE,SAAS,EAAE,IAAA,SAAS,EAClB,eAAO,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,kBAAe,IAAI,CAAA"}
+{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../../src/components/primitives/Flex.tsx"],"names":[],"mappings":";;;;AAAA,uEAAiE;AAOjE,6CAAsC;AAEzB,QAAA,YAAY,GAAG,IAAA,8BAAG,EAAC,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,gCACE,SAAS,EAAE,IAAA,UAAE,EAAC,IAAA,oBAAY,EAAC,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,kBAAe,IAAI,CAAA"}

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

@@ -1,69 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Flex_js_1 = tslib_1.__importDefault(require("./Flex.js"));
-const css_1 = require("@relayprotocol/relay-design-system/css");
-const Box_js_1 = tslib_1.__importDefault(require("./Box.js"));
-const StyledInputCss = (0, css_1.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'
-        }
-    },
+const class_variance_authority_1 = require("class-variance-authority");
+const cn_js_1 = require("../../utils/cn.js");
+const inputVariants = (0, class_variance_authority_1.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 = (0, react_1.forwardRef)(({ children, icon, iconPosition, iconCss, containerCss, inputStyle, css, ...props }, ref) => {
+const Input = (0, react_1.forwardRef)(({ children, icon, iconPosition, iconClassName, containerClassName, inputStyle, className, ...props }, ref) => {
     const { size, ellipsify, style, ...inputProps } = props;
-    return ((0, jsx_runtime_1.jsxs)(Flex_js_1.default, { css: {
-            ...containerCss
-        }, style: { ...style }, children: [icon && ((0, jsx_runtime_1.jsx)(Flex_js_1.default, { css: { position: 'relative' }, children: (0, jsx_runtime_1.jsx)(Box_js_1.default, { css: {
-                        position: 'absolute',
-                        top: 12,
-                        left: iconPosition === 'right' ? 'unset' : 16,
-                        right: iconPosition === 'right' ? 16 : 'unset',
-                        zIndex: 0,
-                        ...iconCss
-                    }, children: icon }) })), (0, jsx_runtime_1.jsx)("input", { ...inputProps, type: "text", ref: ref, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('relay:flex relay:w-full', containerClassName), style: style, children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: "relay:flex relay:relative", children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.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 }) })), (0, jsx_runtime_1.jsx)("input", { ...inputProps, type: "text", ref: ref, style: {
                     paddingLeft: icon && iconPosition !== 'right' ? 42 : 16,
                     paddingRight: icon && iconPosition === 'right' ? 42 : 16,
                     ...inputStyle
-                }, className: (0, css_1.css)(StyledInputCss.raw({ size, ellipsify }), css_1.css.raw({
-                    ...css
-                })) })] }));
+                }, className: (0, cn_js_1.cn)(inputVariants({ size, ellipsify }), className) })] }));
 });
 Input.displayName = 'Input';
 exports.default = Input;

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/primitives/Input.tsx"],"names":[],"mappings":";;;;AAAA,iCAAyC;AACzC,gEAA4B;AAE5B,gEAI+C;AAC/C,8DAA0B;AAE1B,MAAM,cAAc,GAAG,IAAA,SAAG,EAAC;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,IAAA,kBAAU,EAWtB,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,wBAAC,iBAAI,IACH,GAAG,EAAE;YACH,GAAG,YAAY;SAChB,EACD,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,aAElB,IAAI,IAAI,CACP,uBAAC,iBAAI,IAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YACjC,uBAAC,gBAAG,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,qCACM,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,IAAA,SAAS,EAClB,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,kBAAe,KAAK,CAAA"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/primitives/Input.tsx"],"names":[],"mappings":";;;AAAA,iCAAyC;AAEzC,uEAAiE;AACjE,6CAAsC;AAEtC,MAAM,aAAa,GAAG,IAAA,8BAAG,EACvB;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,IAAA,kBAAU,EAWtB,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,iCAAK,SAAS,EAAE,IAAA,UAAE,EAAC,yBAAyB,EAAE,kBAAkB,CAAC,EAAE,KAAK,EAAE,KAAK,aAC5E,IAAI,IAAI,CACP,gCAAK,SAAS,EAAC,2BAA2B,YACxC,gCACE,SAAS,EAAE,IAAA,UAAE,EACX,0EAA0E,EAC1E,YAAY,KAAK,OAAO;wBACtB,CAAC,CAAC,kCAAkC;wBACpC,CAAC,CAAC,kCAAkC,EACtC,aAAa,CACd,YAEA,IAAI,GACD,GACF,CACP,EACD,qCACM,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,IAAA,UAAE,EAAC,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,kBAAe,KAAK,CAAA"}

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

@@ -1,67 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pill = exports.PillStyle = void 0;
+exports.Pill = exports.pillVariants = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const css_1 = require("@relayprotocol/relay-design-system/css");
-exports.PillStyle = (0, css_1.cva)({
-    base: {
-        display: 'flex',
-        background: 'subtle-background-color',
-        px: '3',
-        py: '1',
-        gap: '1'
-    },
+const class_variance_authority_1 = require("class-variance-authority");
+const cn_js_1 = require("../../utils/cn.js");
+exports.pillVariants = (0, class_variance_authority_1.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'
     }
 });
-const Pill = ({ css, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, className: (0, css_1.css)(exports.PillStyle.raw(props), css_1.css.raw(css)) }));
+const Pill = ({ className, color, radius, bordered, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, className: (0, cn_js_1.cn)((0, exports.pillVariants)({ color, radius, bordered }), className) }));
 };
 exports.Pill = Pill;
 exports.default = exports.Pill;

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

@@ -1 +1 @@
-{"version":3,"file":"Pill.js","sourceRoot":"","sources":["../../../../src/components/primitives/Pill.tsx"],"names":[],"mappings":";;;;AAAA,gEAI+C;AAIlC,QAAA,SAAS,GAAG,IAAA,SAAG,EAAC;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;AAIK,MAAM,IAAI,GAIb,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxB,OAAO,CACL,mCACM,KAAK,EACT,SAAS,EAAE,IAAA,SAAS,EAAC,iBAAS,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GACzD,CACR,CAAA;AACH,CAAC,CAAA;AAXY,QAAA,IAAI,QAWhB;AAED,kBAAe,YAAI,CAAA"}
+{"version":3,"file":"Pill.js","sourceRoot":"","sources":["../../../../src/components/primitives/Pill.tsx"],"names":[],"mappings":";;;;AAAA,uEAAiE;AAEjE,6CAAsC;AAEzB,QAAA,YAAY,GAAG,IAAA,8BAAG,EAC7B,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;AAIM,MAAM,IAAI,GAEb,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,CACL,mCACM,KAAK,EACT,SAAS,EAAE,IAAA,UAAE,EAAC,IAAA,oBAAY,EAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,CAAC,GACnE,CACH,CAAA;AACH,CAAC,CAAA;AATY,QAAA,IAAI,QAShB;AAED,kBAAe,YAAI,CAAA"}

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

@@ -1,18 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Flex_js_1 = tslib_1.__importDefault(require("./Flex.js"));
-const Skeleton = ({ css }) => {
-    return ((0, jsx_runtime_1.jsx)(Flex_js_1.default, { css: {
-            animationName: 'pulse',
-            backgroundColor: 'skeleton-background',
-            borderRadius: 8,
-            width: 100,
-            height: 12,
-            animation: 'pulse 3s ease-in-out infinite',
-            ...css
-        } }));
+const cn_js_1 = require("../../utils/cn.js");
+const Skeleton = ({ className }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('relay:flex relay:animate-pulse relay:bg-[var(--relay-colors-skeleton-background)] relay:rounded-[8px] relay:w-[100px] relay:h-[12px]', className) }));
 };
 exports.default = Skeleton;
 //# sourceMappingURL=Skeleton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/primitives/Skeleton.tsx"],"names":[],"mappings":";;;;AACA,gEAA4B;AAO5B,MAAM,QAAQ,GAAsB,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;IAC9C,OAAO,CACL,uBAAC,iBAAI,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,kBAAe,QAAQ,CAAA"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/primitives/Skeleton.tsx"],"names":[],"mappings":";;;AACA,6CAAsC;AAMtC,MAAM,QAAQ,GAAsB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACpD,OAAO,CACL,gCACE,SAAS,EAAE,IAAA,UAAE,EACX,sIAAsI,EACtI,SAAS,CACV,GACD,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,QAAQ,CAAA"}

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

@@ -20,19 +20,7 @@ const convertBpsToPercent = (bps) => {
 const SlippageButton = ({ slippageTolerance, onOpenSlippageConfig }) => {
     const resolvedValue = convertBpsToPercent(slippageTolerance);
     const displayValue = resolvedValue ? `${resolvedValue}%` : 'Auto';
-    return ((0, jsx_runtime_1.jsxs)(Button_js_1.default, { "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 ((0, jsx_runtime_1.jsxs)(Button_js_1.default, { "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: [(0, jsx_runtime_1.jsx)(Text_js_1.default, { style: "subtitle3", color: "subtle", children: "Slippage" }), (0, jsx_runtime_1.jsx)(Text_js_1.default, { style: "subtitle2", children: displayValue })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SlippageButton.js","sourceRoot":"","sources":["../../../../src/components/primitives/SlippageButton.tsx"],"names":[],"mappings":";;;;;AACA,oEAAgC;AAChC,gEAA4B;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;AAEM,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,wBAAC,mBAAM,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,uBAAC,iBAAI,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,QAAQ,yBAE/B,EAEP,uBAAC,iBAAI,IAAC,KAAK,EAAC,WAAW,YAAE,YAAY,GAAQ,IACtC,CACV,CAAA;AACH,CAAC,CAAA;AApCY,QAAA,cAAc,kBAoC1B"}
+{"version":3,"file":"SlippageButton.js","sourceRoot":"","sources":["../../../../src/components/primitives/SlippageButton.tsx"],"names":[],"mappings":";;;;;AACA,oEAAgC;AAChC,gEAA4B;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;AAEM,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,wBAAC,mBAAM,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,uBAAC,iBAAI,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,QAAQ,yBAE/B,EAEP,uBAAC,iBAAI,IAAC,KAAK,EAAC,WAAW,YAAE,YAAY,GAAQ,IACtC,CACV,CAAA;AACH,CAAC,CAAA;AAxBY,QAAA,cAAc,kBAwB1B"}