@relayprotocol/relay-kit-ui 2.17.2

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChainTokenIcon = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Flex_js_1 = tslib_1.__importDefault(require("./Flex.js"));
+const ChainIcon_js_1 = tslib_1.__importDefault(require("./ChainIcon.js"));
+const Box_js_1 = tslib_1.__importDefault(require("./Box.js"));
+const Text_js_1 = tslib_1.__importDefault(require("./Text.js"));
+const SIZES = {
+    md: {
+        token: 32,
+        chain: 16
+    },
+    lg: {
+        token: 40,
+        chain: 18
+    }
+};
+const ChainTokenIcon = ({ chainId, tokenlogoURI, tokenSymbol, css = {}, size = 'md' }) => {
+    const isValidTokenLogo = tokenlogoURI && tokenlogoURI !== 'missing.png';
+    const dimensions = SIZES[size];
+    return chainId ? ((0, jsx_runtime_1.jsxs)(Flex_js_1.default, { css: {
+            position: 'relative',
+            flexShrink: 0,
+            width: dimensions.token,
+            height: dimensions.token,
+            overflow: 'hidden',
+            ...css
+        }, children: [isValidTokenLogo ? ((0, jsx_runtime_1.jsx)("img", { alt: 'Token', src: tokenlogoURI, width: dimensions.token, height: dimensions.token, style: {
+                    borderRadius: 9999,
+                    overflow: 'hidden'
+                } })) : tokenSymbol ? ((0, jsx_runtime_1.jsx)(Box_js_1.default, { css: {
+                    width: dimensions.token,
+                    height: dimensions.token,
+                    borderRadius: '50%',
+                    backgroundColor: 'primary4',
+                    color: 'primary8',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }, children: (0, jsx_runtime_1.jsx)(Text_js_1.default, { style: "h6", children: tokenSymbol?.charAt(0).toUpperCase() }) })) : null, (0, jsx_runtime_1.jsx)(ChainIcon_js_1.default, { chainId: chainId, width: dimensions.chain, height: dimensions.chain, css: {
+                    position: 'absolute',
+                    right: 0,
+                    bottom: 0,
+                    borderRadius: 4,
+                    overflow: 'hidden',
+                    '--borderColor': 'colors.modal-background',
+                    border: '1px solid var(--borderColor)',
+                    backgroundColor: 'modal-background'
+                } })] })) : null;
+};
+exports.ChainTokenIcon = ChainTokenIcon;
+//# sourceMappingURL=ChainTokenIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChainTokenIcon.js","sourceRoot":"","sources":["../../../../src/components/primitives/ChainTokenIcon.tsx"],"names":[],"mappings":";;;;;AACA,gEAA4B;AAC5B,0EAAsC;AACtC,8DAA0B;AAC1B,gEAA4B;AAa5B,MAAM,KAAK,GAAG;IACZ,EAAE,EAAE;QACF,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;KACV;IACD,EAAE,EAAE;QACF,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;KACV;CACO,CAAA;AAEH,MAAM,cAAc,GAAwB,CAAC,EAClD,OAAO,EACP,YAAY,EACZ,WAAW,EACX,GAAG,GAAG,EAAE,EACR,IAAI,GAAG,IAAI,EACZ,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,YAAY,IAAI,YAAY,KAAK,aAAa,CAAA;IACvE,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA;IAE9B,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,wBAAC,iBAAI,IACH,GAAG,EAAE;YACH,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,CAAC;YACb,KAAK,EAAE,UAAU,CAAC,KAAK;YACvB,MAAM,EAAE,UAAU,CAAC,KAAK;YACxB,QAAQ,EAAE,QAAQ;YAClB,GAAG,GAAG;SACP,aAEA,gBAAgB,CAAC,CAAC,CAAC,CAClB,gCACE,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,MAAM,EAAE,UAAU,CAAC,KAAK,EACxB,KAAK,EAAE;oBACL,YAAY,EAAE,IAAI;oBAClB,QAAQ,EAAE,QAAQ;iBACnB,GACD,CACH,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,uBAAC,gBAAG,IACF,GAAG,EAAE;oBACH,KAAK,EAAE,UAAU,CAAC,KAAK;oBACvB,MAAM,EAAE,UAAU,CAAC,KAAK;oBACxB,YAAY,EAAE,KAAK;oBACnB,eAAe,EAAE,UAAU;oBAC3B,KAAK,EAAE,UAAU;oBACjB,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,QAAQ;iBACzB,YAED,uBAAC,iBAAI,IAAC,KAAK,EAAC,IAAI,YAAE,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAQ,GAC1D,CACP,CAAC,CAAC,CAAC,IAAI,EACR,uBAAC,sBAAS,IACR,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,MAAM,EAAE,UAAU,CAAC,KAAK,EACxB,GAAG,EAAE;oBACH,QAAQ,EAAE,UAAU;oBACpB,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,CAAC;oBACT,YAAY,EAAE,CAAC;oBACf,QAAQ,EAAE,QAAQ;oBAClB,eAAe,EAAE,yBAAyB;oBAC1C,MAAM,EAAE,8BAA8B;oBACtC,eAAe,EAAE,kBAAkB;iBACpC,GACD,IACG,CACR,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAjEY,QAAA,cAAc,kBAiE1B"}

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleTrigger = exports.CollapsibleContent = exports.CollapsibleRoot = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Collapsible = tslib_1.__importStar(require("@radix-ui/react-collapsible"));
+const css_1 = require("@relayprotocol/relay-design-system/css");
+const react_1 = require("react");
+const CollapsibleContentCss = (0, css_1.cva)({
+    base: {
+        overflow: 'hidden',
+        _data_state_open: {
+            animation: `collapsibleSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)`
+        },
+        _data_state_closed: {
+            animation: `collapsibleSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)`
+        }
+    }
+});
+const CollapsibleRootCss = (0, css_1.cva)({
+    base: {
+        width: '100%'
+    }
+});
+const CollapsibleTriggerCss = (0, css_1.cva)({
+    base: {
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        cursor: 'pointer'
+    }
+});
+const CollapsibleContent = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
+    return ((0, jsx_runtime_1.jsx)(Collapsible.CollapsibleContent, { ref: forwardedRef, ...props, className: (0, css_1.css)(CollapsibleContentCss.raw(), css_1.css.raw(css)), children: children }));
+});
+exports.CollapsibleContent = CollapsibleContent;
+const CollapsibleRoot = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
+    return ((0, jsx_runtime_1.jsx)(Collapsible.Root, { ref: forwardedRef, ...props, className: (0, css_1.css)(CollapsibleRootCss.raw(), css_1.css.raw(css)), children: children }));
+});
+exports.CollapsibleRoot = CollapsibleRoot;
+const CollapsibleTrigger = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
+    return ((0, jsx_runtime_1.jsx)(Collapsible.Trigger, { ref: forwardedRef, ...props, className: (0, css_1.css)(CollapsibleTriggerCss.raw(), css_1.css.raw(css)), children: children }));
+});
+exports.CollapsibleTrigger = CollapsibleTrigger;
+//# sourceMappingURL=Collapsible.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","sourceRoot":"","sources":["../../../../src/components/primitives/Collapsible.tsx"],"names":[],"mappings":";;;;;AAAA,iFAA0D;AAC1D,gEAI+C;AAC/C,iCAKc;AAEd,MAAM,qBAAqB,GAAG,IAAA,SAAG,EAAC;IAChC,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ;QAClB,gBAAgB,EAAE;YAChB,SAAS,EAAE,2DAA2D;SACvE;QACD,kBAAkB,EAAE;YAClB,SAAS,EAAE,yDAAyD;SACrE;KACF;CACF,CAAC,CAAA;AAEF,MAAM,kBAAkB,GAAG,IAAA,SAAG,EAAC;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAA;AAEF,MAAM,qBAAqB,GAAG,IAAA,SAAG,EAAC;IAChC,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,eAAe;QAC/B,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAA;AAEF,MAAM,kBAAkB,GAAG,IAAA,kBAAU,EAInC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,uBAAC,WAAW,CAAC,kBAAkB,IAC7B,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,IAAA,SAAS,EAAC,qBAAqB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAEpE,QAAQ,GACsB,CAClC,CAAA;AACH,CAAC,CAAC,CAAA;AAkCwB,gDAAkB;AAhC5C,MAAM,eAAe,GAAG,IAAA,kBAAU,EAIhC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,uBAAC,WAAW,CAAC,IAAI,IACf,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,IAAA,SAAS,EAAC,kBAAkB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAEjE,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAC,CAAA;AAkBO,0CAAe;AAhBxB,MAAM,kBAAkB,GAAG,IAAA,kBAAU,EAInC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,uBAAC,WAAW,CAAC,OAAO,IAClB,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,IAAA,SAAS,EAAC,qBAAqB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAEpE,QAAQ,GACW,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAE4C,gDAAkB"}

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

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = exports.AnimatedContent = exports.Content = exports.Dialog = void 0;
+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 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 }));
+});
+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 Content = (0, react_1.forwardRef)(({ children, ...props }, forwardedRef) => {
+    return ((0, jsx_runtime_1.jsx)(DialogPrimitive.DialogContent, { ref: forwardedRef, ...props, className: ContentCss(), children: children }));
+});
+exports.Content = Content;
+const AnimatedContent = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
+    const isMobile = (0, usehooks_ts_1.useMediaQuery)('(max-width: 520px)');
+    const animation = isMobile
+        ? {
+            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: isMobile ? 'tween' : undefined,
+                duration: isMobile ? 0.2 : 0.1,
+                ease: isMobile ? 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') }));
+});
+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 })] }));
+});
+exports.Dialog = Dialog;
+Dialog.displayName = 'Dialog';
+//# sourceMappingURL=Dialog.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenuItem = exports.DropdownMenuContent = exports.Dropdown = void 0;
+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: 5,
+        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 }));
+});
+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: 'backdrop-filter 250ms linear',
+        _hover: {
+            backdropFilter: 'brightness(95%)',
+            backgroundColor: 'gray/10'
+        },
+        '&:focus': {
+            backdropFilter: 'brightness(95%)',
+            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 }));
+});
+exports.DropdownMenuItem = DropdownMenuItem;
+const Dropdown = (0, react_1.forwardRef)(({ children, trigger, contentProps, ...props }, forwardedRef) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(DropdownMenuPrimitive.Root, { ...props, open: props.open ?? open, onOpenChange: props.onOpenChange ?? setOpen, children: [(0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Trigger, { asChild: true, children: trigger }), (props.open || open) && ((0, jsx_runtime_1.jsx)(DropdownMenuContent, { ref: forwardedRef, ...contentProps, children: children }))] }));
+});
+exports.Dropdown = Dropdown;
+Dropdown.displayName = 'Dropdown';
+//# sourceMappingURL=Dropdown.js.map

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

@@ -0,0 +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,CAAC;QACT,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;AAwEiB,kDAAmB;AAtEtC,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,8BAA8B;QAC1C,MAAM,EAAE;YACN,cAAc,EAAE,iBAAiB;YACjC,eAAe,EAAE,SAAS;SAC3B;QACD,SAAS,EAAE;YACT,cAAc,EAAE,iBAAiB;YACjC,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"}

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

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexCss = 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'
+    },
+    variants: {
+        align: {
+            start: {
+                alignItems: 'flex-start'
+            },
+            center: {
+                alignItems: 'center'
+            },
+            end: {
+                alignItems: 'flex-end'
+            },
+            stretch: {
+                alignItems: 'stretch'
+            },
+            baseline: {
+                alignItems: 'baseline'
+            },
+            normal: {
+                alignItems: 'normal'
+            }
+        },
+        justify: {
+            start: {
+                justifyContent: 'flex-start'
+            },
+            center: {
+                justifyContent: 'center'
+            },
+            end: {
+                justifyContent: 'flex-end'
+            },
+            between: {
+                justifyContent: 'space-between'
+            }
+        },
+        direction: {
+            row: {
+                flexDirection: 'row'
+            },
+            column: {
+                flexDirection: 'column'
+            },
+            rowReverse: {
+                flexDirection: 'row-reverse'
+            },
+            columnReverse: {
+                flexDirection: 'column-reverse'
+            }
+        },
+        wrap: {
+            noWrap: {
+                flexWrap: 'nowrap'
+            },
+            wrap: {
+                flexWrap: 'wrap'
+            },
+            wrapReverse: {
+                flexWrap: '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 }));
+};
+exports.default = Flex;
+//# sourceMappingURL=Flex.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,69 @@
+"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'
+        }
+    },
+    variants: {
+        size: {
+            large: {
+                fontSize: 32,
+                lineHeight: '42px'
+            }
+        },
+        ellipsify: {
+            true: {
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap'
+            }
+        }
+    }
+});
+const Input = (0, react_1.forwardRef)(({ children, icon, iconPosition, iconCss, containerCss, css, ...props }, ref) => {
+    const { size, ellipsify, ...inputProps } = props;
+    return ((0, jsx_runtime_1.jsxs)(Flex_js_1.default, { css: {
+            ...containerCss
+        }, style: { ...props.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: {
+                    paddingLeft: icon && iconPosition !== 'right' ? 42 : 16,
+                    paddingRight: icon && iconPosition === 'right' ? 42 : 16
+                }, className: (0, css_1.css)(StyledInputCss.raw({ size, ellipsify }), css_1.css.raw({
+                    ...css
+                })) })] }));
+});
+Input.displayName = 'Input';
+exports.default = Input;
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +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,EAUtB,CACE,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EACtE,GAAG,EACH,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAEhD,OAAO,CACL,wBAAC,iBAAI,IACH,GAAG,EAAE;YACH,GAAG,YAAY;SAChB,EACD,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,aAExB,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;iBACzD,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"}

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pill = exports.PillStyle = 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'
+    },
+    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'
+            }
+        },
+        radius: {
+            pill: {
+                borderRadius: 25
+            },
+            rounded: {
+                borderRadius: 12
+            },
+            squared: {
+                borderRadius: 8
+            }
+        },
+        bordered: {
+            true: {
+                '--borderColor': 'colors.gray.6',
+                border: '1px solid var(--borderColor)'
+            }
+        }
+    },
+    defaultVariants: {
+        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)) }));
+};
+exports.Pill = Pill;
+exports.default = exports.Pill;
+//# sourceMappingURL=Pill.js.map

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

@@ -0,0 +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;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"}

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

@@ -0,0 +1,18 @@
+"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
+        } }));
+};
+exports.default = Skeleton;
+//# sourceMappingURL=Skeleton.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledThumb = exports.StyledSwitch = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Switch = tslib_1.__importStar(require("@radix-ui/react-switch"));
+const css_1 = require("@relayprotocol/relay-design-system/css");
+const react_1 = require("react");
+const StyledSwitchCss = (0, css_1.cva)({
+    base: {
+        cursor: 'pointer',
+        width: '38px',
+        height: '20px',
+        backgroundColor: 'gray7',
+        borderRadius: '9999px',
+        position: 'relative',
+        WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 10px',
+        transition: 'background-color 250ms',
+        "&[data-state='checked']": {
+            backgroundColor: 'primary-button-background'
+        }
+    }
+});
+exports.StyledSwitch = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
+    return ((0, jsx_runtime_1.jsx)(Switch.Root, { ref: forwardedRef, ...props, className: (0, css_1.css)(StyledSwitchCss.raw(), css_1.css.raw(css)), children: children }));
+});
+const StyledThumbCss = (0, css_1.cva)({
+    base: {
+        display: 'block',
+        width: '17.5px',
+        height: '17.5px',
+        backgroundColor: 'gray1',
+        borderRadius: '9999px',
+        zIndex: 1,
+        '--borderColor': 'colors.gray.8',
+        border: '1px solid var(--borderColor)',
+        transition: 'transform 100ms',
+        transform: 'translateX(0px)',
+        willChange: 'transform',
+        position: 'absolute',
+        left: '2px',
+        "&[data-state='checked']": {
+            transform: 'translateX(17px)'
+        }
+    }
+});
+exports.StyledThumb = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
+    return ((0, jsx_runtime_1.jsx)(Switch.Thumb, { ref: forwardedRef, ...props, className: (0, css_1.css)(StyledThumbCss.raw(), css_1.css.raw(css)) }));
+});
+//# sourceMappingURL=Switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/primitives/Switch.tsx"],"names":[],"mappings":";;;;;AAAA,uEAAgD;AAChD,gEAI+C;AAC/C,iCAIc;AAEd,MAAM,eAAe,GAAG,IAAA,SAAG,EAAC;IAC1B,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,OAAO;QACxB,YAAY,EAAE,QAAQ;QACtB,QAAQ,EAAE,UAAU;QACpB,uBAAuB,EAAE,kBAAkB;QAC3C,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,QAAQ;QACjB,UAAU,EAAE,wBAAwB;QACpC,yBAAyB,EAAE;YACzB,eAAe,EAAE,2BAA2B;SAC7C;KACF;CACF,CAAC,CAAA;AAEW,QAAA,YAAY,GAAG,IAAA,kBAAU,EAGpC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,uBAAC,MAAM,CAAC,IAAI,IACV,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,IAAA,SAAS,EAAC,eAAe,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAE9D,QAAQ,GACG,CACf,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,cAAc,GAAG,IAAA,SAAG,EAAC;IACzB,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,QAAQ;QAChB,eAAe,EAAE,OAAO;QACxB,YAAY,EAAE,QAAQ;QACtB,MAAM,EAAE,CAAC;QACT,eAAe,EAAE,eAAe;QAChC,MAAM,EAAE,8BAA8B;QACtC,UAAU,EAAE,iBAAiB;QAC7B,SAAS,EAAE,iBAAiB;QAC5B,UAAU,EAAE,WAAW;QACvB,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,KAAK;QACX,yBAAyB,EAAE;YACzB,SAAS,EAAE,kBAAkB;SAC9B;KACF;CACF,CAAC,CAAA;AAEW,QAAA,WAAW,GAAG,IAAA,kBAAU,EAGnC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,uBAAC,MAAM,CAAC,KAAK,IACX,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,IAAA,SAAS,EAAC,cAAc,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAC9D,CACH,CAAA;AACH,CAAC,CAAC,CAAA"}

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsContent = exports.TabsTrigger = exports.TabsList = exports.TabsRoot = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TabsPrimitive = tslib_1.__importStar(require("@radix-ui/react-tabs"));
+const css_1 = require("@relayprotocol/relay-design-system/css");
+const react_1 = require("react");
+const TabsListCss = (0, css_1.cva)({
+    base: {
+        display: 'flex',
+        alignItems: 'center',
+        borderRadius: 8,
+        p: '1',
+        backgroundColor: 'gray2',
+        border: 'none'
+    }
+});
+const TabsTriggerCss = (0, css_1.cva)({
+    base: {
+        width: '100%',
+        fontWeight: '500',
+        fontSize: '14px',
+        cursor: 'pointer',
+        py: '2px',
+        color: 'gray12',
+        borderRadius: 8,
+        backgroundColor: 'transparent',
+        border: 'none',
+        '&[data-state="active"]': {
+            backgroundColor: 'subtle-background-color',
+            '--borderColor': 'colors.gray.5',
+            border: '1px solid var(--borderColor)'
+        }
+    }
+});
+const TabsList = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
+    return ((0, jsx_runtime_1.jsx)(TabsPrimitive.List, { ...props, ref: forwardedRef, className: (0, css_1.css)(TabsListCss.raw(), css_1.css.raw(css)), children: children }));
+});
+exports.TabsList = TabsList;
+const TabsTrigger = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
+    return ((0, jsx_runtime_1.jsx)(TabsPrimitive.Trigger, { ...props, ref: forwardedRef, className: (0, css_1.css)(TabsTriggerCss.raw(), css_1.css.raw(css)), children: children }));
+});
+exports.TabsTrigger = TabsTrigger;
+const TabsContent = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
+    return ((0, jsx_runtime_1.jsx)(TabsPrimitive.Content, { ...props, ref: forwardedRef, className: (0, css_1.css)(css_1.css.raw(css)), children: children }));
+});
+exports.TabsContent = TabsContent;
+const TabsRoot = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
+    return ((0, jsx_runtime_1.jsx)(TabsPrimitive.Root, { ...props, ref: forwardedRef, className: (0, css_1.css)(css_1.css.raw(css)), children: children }));
+});
+exports.TabsRoot = TabsRoot;
+//# sourceMappingURL=Tabs.js.map