@relayprotocol/relay-kit-ui 7.1.6 → 8.0.1

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

@@ -1,28 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef } from 'react';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
-import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
-const AccessibleListContainerCss = cva({
-    base: {
-        display: 'flex',
-        flexDirection: 'column'
-    }
-});
-const AccessibleListItemCss = cva({
-    base: {
-        display: 'flex',
-        alignItems: 'center',
-        position: 'relative',
-        userSelect: 'none',
-        cursor: 'pointer',
-        '&[data-state=on]': {}
-    }
-});
-export const AccessibleList = ({ children, onSelect, css }) => {
-    return (_jsx(ToggleGroup.Root, { type: "single", loop: false, onValueChange: onSelect, className: designCss(AccessibleListContainerCss.raw(), designCss.raw(css)), children: children }));
+import { cn } from '../../utils/cn.js';
+export const AccessibleList = ({ children, onSelect, className }) => {
+    return (_jsx(ToggleGroup.Root, { type: "single", loop: false, onValueChange: onSelect, className: cn('relay:flex relay:flex-col', className), children: children }));
 };
-export const AccessibleListItem = forwardRef(({ children, value, css, asChild, ...props }, forwardedRef) => {
-    return (_jsx(ToggleGroup.Item, { value: value, className: designCss(AccessibleListItemCss.raw(), designCss.raw(css)), asChild: asChild, ...props, ref: forwardedRef, children: children }));
+export const AccessibleListItem = forwardRef(({ children, value, className, asChild, ...props }, forwardedRef) => {
+    return (_jsx(ToggleGroup.Item, { value: value, className: cn('relay:flex relay:items-center relay:relative relay:select-none relay:cursor-pointer', className), asChild: asChild, ...props, ref: forwardedRef, children: children }));
 });
 AccessibleListItem.displayName = 'AccessibleListItem';
 //# sourceMappingURL=AccessibleList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AccessibleList.js","sourceRoot":"","sources":["../../../../src/components/primitives/AccessibleList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAW,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,WAAW,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAE/C,MAAM,0BAA0B,GAAG,GAAG,CAAC;IACrC,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KACxB;CACF,CAAC,CAAA;AAEF,MAAM,qBAAqB,GAAG,GAAG,CAAC;IAChC,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,MAAM;QAClB,MAAM,EAAE,SAAS;QACjB,kBAAkB,EAAE,EAAE;KACvB;CACF,CAAC,CAAA;AAQF,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,QAAQ,EACR,QAAQ,EACR,GAAG,EACJ,EAAE,EAAE;IACH,OAAO,CACL,KAAC,WAAW,CAAC,IAAI,IACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,KAAK,EACX,aAAa,EAAE,QAAQ,EACvB,SAAS,EAAE,SAAS,CAClB,0BAA0B,CAAC,GAAG,EAAE,EAChC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CACnB,YAEA,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAA;AASD,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9D,OAAO,CACL,KAAC,WAAW,CAAC,IAAI,IACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,CAAC,qBAAqB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EACrE,OAAO,EAAE,OAAO,KACZ,KAAK,EACT,GAAG,EAAE,YAAY,YAEhB,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAA"}
+{"version":3,"file":"AccessibleList.js","sourceRoot":"","sources":["../../../../src/components/primitives/AccessibleList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAW,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,WAAW,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAQtC,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,QAAQ,EACR,QAAQ,EACR,SAAS,EACV,EAAE,EAAE;IACH,OAAO,CACL,KAAC,WAAW,CAAC,IAAI,IACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,KAAK,EACX,aAAa,EAAE,QAAQ,EACvB,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,SAAS,CAAC,YAEpD,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAA;AASD,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IACpE,OAAO,CACL,KAAC,WAAW,CAAC,IAAI,IACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CACX,qFAAqF,EACrF,SAAS,CACV,EACD,OAAO,EAAE,OAAO,KACZ,KAAK,EACT,GAAG,EAAE,YAAY,YAEhB,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAA"}

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

@@ -1,53 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
-const AnchorStyle = cva({
-    base: {
-        cursor: 'pointer',
-        width: 'max-content',
-        fontWeight: 500,
-        fontSize: 14,
-        color: 'anchor-color',
-        _hover: {
-            color: 'anchor-hover-color'
-        },
-        '--focusColor': 'colors.focus-color',
-        _focusVisible: {
-            boxShadow: '0 0 0 2px var(--focusColor)',
-            outline: 'none',
-            borderRadius: '4px'
-        }
-    },
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/cn.js';
+const anchorVariants = cva([
+    'relay:cursor-pointer relay:w-max relay:font-medium relay:text-[14px]',
+    'relay:text-[color:var(--relay-colors-anchor-color)]',
+    'relay:hover:text-[color:var(--relay-colors-anchor-hover-color)]',
+    'relay:focus-visible:shadow-[0_0_0_2px_var(--relay-colors-focus-color)] relay:focus-visible:outline-none relay:focus-visible:rounded-[4px]'
+].join(' '), {
     variants: {
         color: {
-            gray: {
-                color: 'gray11',
-                _hover: { color: 'gray12' }
-            },
-            base: {
-                color: 'anchor-color',
-                _hover: {
-                    color: 'anchor-hover-color'
-                }
-            },
-            black: {
-                color: 'gray12',
-                _hover: {
-                    color: 'gray12'
-                }
-            }
+            gray: 'relay:text-[color:var(--relay-colors-gray11)] relay:hover:text-[color:var(--relay-colors-gray12)]',
+            base: 'relay:text-[color:var(--relay-colors-anchor-color)] relay:hover:text-[color:var(--relay-colors-anchor-hover-color)]',
+            black: 'relay:text-[color:var(--relay-colors-gray12)] relay:hover:text-[color:var(--relay-colors-gray12)]'
         },
         weight: {
-            heavy: { fontWeight: 900 },
-            bold: { fontWeight: 700 },
-            semi_bold: { fontWeight: 600 }
+            heavy: 'relay:font-black',
+            bold: 'relay:font-bold',
+            semi_bold: 'relay:font-semibold'
         }
     }
 });
-const Anchor = ({ css, weight, color, ...props }) => {
-    return (_jsx("a", { ...props, className: designCss(AnchorStyle.raw({ weight, color }), designCss.raw(css)) }));
+const Anchor = ({ className, weight, color, ...props }) => {
+    return (_jsx("a", { ...props, className: cn(anchorVariants({ weight, color }), className) }));
 };
-export const AnchorButton = ({ css, weight, color, children, ...props }) => {
-    return (_jsx("button", { ...props, className: designCss(AnchorStyle.raw({ weight, color }), designCss.raw(css)), children: children }));
+export const AnchorButton = ({ className, weight, color, children, ...props }) => {
+    return (_jsx("button", { ...props, className: cn(anchorVariants({ weight, color }), className), children: children }));
 };
 export default Anchor;
 //# sourceMappingURL=Anchor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Anchor.js","sourceRoot":"","sources":["../../../../src/components/primitives/Anchor.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAG/C,MAAM,WAAW,GAAG,GAAG,CAAC;IACtB,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,aAAa;QACpB,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,cAAc;QACrB,MAAM,EAAE;YACN,KAAK,EAAE,oBAAoB;SAC5B;QACD,cAAc,EAAE,oBAAoB;QACpC,aAAa,EAAE;YACb,SAAS,EAAE,6BAA6B;YACxC,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,KAAK;SACpB;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE;gBACJ,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;aAC5B;YACD,IAAI,EAAE;gBACJ,KAAK,EAAE,cAAc;gBACrB,MAAM,EAAE;oBACN,KAAK,EAAE,oBAAoB;iBAC5B;aACF;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE;oBACN,KAAK,EAAE,QAAQ;iBAChB;aACF;SACF;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE;YAC1B,IAAI,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE;YACzB,SAAS,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE;SAC/B;KACF;CACF,CAAC,CAAA;AAIF,MAAM,MAAM,GAER,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvC,OAAO,CACL,eACM,KAAK,EACT,SAAS,EAAE,SAAS,CAClB,WAAW,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAClC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CACnB,GACE,CACN,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAErB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjD,OAAO,CACL,oBACM,KAAK,EACT,SAAS,EAAE,SAAS,CAClB,WAAW,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAClC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CACnB,YAEA,QAAQ,GACF,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Anchor.js","sourceRoot":"","sources":["../../../../src/components/primitives/Anchor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAEtC,MAAM,cAAc,GAAG,GAAG,CACxB;IACE,sEAAsE;IACtE,qDAAqD;IACrD,iEAAiE;IACjE,2IAA2I;CAC5I,CAAC,IAAI,CAAC,GAAG,CAAC,EACX;IACE,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,mGAAmG;YACzG,IAAI,EAAE,qHAAqH;YAC3H,KAAK,EAAE,mGAAmG;SAC3G;QACD,MAAM,EAAE;YACN,KAAK,EAAE,kBAAkB;YACzB,IAAI,EAAE,iBAAiB;YACvB,SAAS,EAAE,qBAAqB;SACjC;KACF;CACF,CACF,CAAA;AAID,MAAM,MAAM,GAER,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC7C,OAAO,CACL,eACM,KAAK,EACT,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,CAAC,GAC3D,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAErB,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,CACL,oBACM,KAAK,EACT,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,CAAC,YAE1D,QAAQ,GACF,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
-const BoxCss = cva({});
-const Box = ({ css, children, id, ...props }) => {
-    return (_jsx("div", { className: designCss(BoxCss.raw(props), designCss.raw(css)), id: id, children: children }));
+import { cn } from '../../utils/cn.js';
+const Box = ({ className, children, id }) => {
+    return (_jsx("div", { className: cn(className), id: id, children: children }));
 };
 export default Box;
 //# sourceMappingURL=Box.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../../src/components/primitives/Box.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAG/C,MAAM,MAAM,GAAG,GAAG,CAAC,EAAE,CAAC,CAAA;AAItB,MAAM,GAAG,GAEL,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACtC,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,YACrE,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,GAAG,CAAA"}
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../../src/components/primitives/Box.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAEtC,MAAM,GAAG,GAEL,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE;IAClC,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,YAClC,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,GAAG,CAAA"}

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

@@ -1,135 +1,74 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+import { cva } from 'class-variance-authority';
 import { forwardRef } from 'react';
-const ButtonCss = cva({
-    base: {
-        cursor: 'pointer',
-        outline: 'none',
-        fontFamily: 'body',
-        fontWeight: 700,
-        fontSize: 16,
-        transition: 'background-color 250ms linear',
-        gap: '2',
-        display: 'inline-flex',
-        alignItems: 'center',
-        lineHeight: '20px',
-        '--focusColor': 'colors.focus-color',
-        _focusVisible: {
-            boxShadow: '0 0 0 2px var(--focusColor)'
-        },
-        _disabled: {
-            cursor: 'not-allowed',
-            backgroundColor: 'button-disabled-background',
-            color: 'button-disabled-color',
-            _hover: {
-                backgroundColor: 'button-disabled-background',
-                color: 'button-disabled-color'
-            }
-        }
-    },
+import { cn } from '../../utils/cn.js';
+const buttonVariants = cva([
+    'relay:cursor-pointer relay:outline-none relay:font-body relay:font-bold relay:text-[16px]',
+    'relay:transition-all relay:duration-200 relay:ease-out relay:select-none',
+    'relay:gap-2 relay:inline-flex relay:items-center relay:leading-[20px]',
+    'relay:focus-visible:ring-2 relay:focus-visible:ring-[var(--relay-colors-focus-color)] relay:focus-visible:ring-offset-2',
+    'relay:active:scale-[0.98]',
+    'relay:disabled:cursor-not-allowed relay:disabled:bg-[var(--relay-colors-button-disabled-background)] relay:disabled:text-[color:var(--relay-colors-button-disabled-color)]',
+    'relay:disabled:hover:bg-[var(--relay-colors-button-disabled-background)] relay:disabled:hover:text-[color:var(--relay-colors-button-disabled-color)]',
+    'relay:disabled:active:scale-100'
+].join(' '), {
     variants: {
         color: {
-            primary: {
-                backgroundColor: 'primary-button-background',
-                color: 'primary-button-color',
-                '&:hover': {
-                    backgroundColor: 'primary-button-hover-background',
-                    color: 'primary-button-hover-color'
-                }
-            },
-            secondary: {
-                backgroundColor: 'primary4',
-                color: 'primary12',
-                '&:hover': {
-                    backgroundColor: 'secondary-button-hover-background',
-                    color: 'secondary-button-hover-color'
-                }
-            },
-            ghost: {
-                color: 'text-default',
-                backgroundColor: 'transparent'
-            },
-            white: {
-                '--borderColor': 'colors.subtle-border-color',
-                backgroundColor: 'widget-background',
-                transition: 'filter 250ms linear',
-                '&:hover': {
-                    filter: 'brightness(97%)'
-                },
-                border: '1px solid var(--borderColor)'
-            },
-            error: {
-                backgroundColor: 'red9',
-                color: 'white',
-                '&:hover': {
-                    backgroundColor: 'red10'
-                }
-            },
-            warning: {
-                backgroundColor: 'amber3',
-                color: 'amber11',
-                '&:hover': {
-                    backgroundColor: 'amber4',
-                    color: 'amber11'
-                }
-            },
-            grey: {
-                backgroundColor: 'gray3',
-                color: 'gray11',
-                '&:hover': {
-                    backgroundColor: 'gray4'
-                }
-            }
+            primary: [
+                'relay:bg-[var(--relay-colors-primary-button-background)]',
+                'relay:text-[color:var(--relay-colors-primary-button-color)]',
+                'relay:hover:bg-[var(--relay-colors-primary-button-hover-background)]',
+                'relay:hover:text-[color:var(--relay-colors-primary-button-hover-color)]'
+            ].join(' '),
+            secondary: [
+                'relay:bg-[var(--relay-colors-primary4)]',
+                'relay:text-[color:var(--relay-colors-primary12)]',
+                'relay:hover:bg-[var(--relay-colors-secondary-button-hover-background)]',
+                'relay:hover:text-[color:var(--relay-colors-secondary-button-hover-color)]'
+            ].join(' '),
+            ghost: 'relay:bg-transparent',
+            white: [
+                'relay:bg-[var(--relay-colors-widget-background)]',
+                'relay:transition-[filter] relay:duration-[250ms] relay:ease-linear',
+                'relay:hover:brightness-[0.97]',
+                'relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)]'
+            ].join(' '),
+            error: [
+                'relay:bg-[var(--relay-colors-red9)] relay:text-white',
+                'relay:hover:bg-[var(--relay-colors-red10)]'
+            ].join(' '),
+            warning: [
+                'relay:bg-[var(--relay-colors-amber3)]',
+                'relay:text-[color:var(--relay-colors-amber11)]',
+                'relay:hover:bg-[var(--relay-colors-amber4)]',
+                'relay:hover:text-[color:var(--relay-colors-amber11)]'
+            ].join(' '),
+            grey: [
+                'relay:bg-[var(--relay-colors-gray3)]',
+                'relay:text-[color:var(--relay-colors-gray11)]',
+                'relay:hover:bg-[var(--relay-colors-gray4)]'
+            ].join(' ')
         },
         corners: {
-            square: {
-                borderRadius: 0
-            },
-            rounded: {
-                borderRadius: 12
-            },
-            pill: {
-                borderRadius: 99999
-            },
-            circle: {
-                borderRadius: '99999px',
-                alignItems: 'center',
-                justifyContent: 'center'
-            }
+            square: 'relay:rounded-none',
+            rounded: 'relay:rounded-[var(--relay-radii-button-border-radius)]',
+            pill: 'relay:rounded-full',
+            circle: 'relay:rounded-full relay:items-center relay:justify-center'
         },
         size: {
-            none: {},
-            xs: {
-                p: '3',
-                lineHeight: '16px',
-                minHeight: 40
-            },
-            small: {
-                px: '3',
-                py: '2',
-                lineHeight: '12px',
-                minHeight: 40
-            },
-            medium: {
-                px: '5',
-                py: '3',
-                minHeight: 44
-            },
-            large: {
-                px: '5',
-                py: '4',
-                minHeight: 52
-            }
+            none: '',
+            xs: 'relay:p-3 relay:leading-[16px] relay:min-h-[40px]',
+            small: 'relay:px-3 relay:py-2 relay:leading-[12px] relay:min-h-[40px]',
+            medium: 'relay:px-5 relay:py-3 relay:min-h-[44px]',
+            large: 'relay:px-5 relay:py-4 relay:min-h-[52px]'
         },
         cta: {
-            true: {
-                '&:not(:disabled)': {
-                    fontFamily: 'heading',
-                    fontWeight: 700,
-                    textTransform: 'uppercase',
-                    fontStyle: 'var(--relay-fonts-button-cta-font-style, italic)'
-                }
-            }
+            true: [
+                'relay:[&:not(:disabled)]:font-heading',
+                'relay:[&:not(:disabled)]:font-bold',
+                'relay:[&:not(:disabled)]:uppercase',
+                'relay:cta-font-style'
+            ].join(' ')
         }
     },
     defaultVariants: {
@@ -138,9 +77,9 @@ const ButtonCss = cva({
         size: 'medium'
     }
 });
-const Button = forwardRef(({ css, children, ...props }, forwardedRef) => {
+const Button = forwardRef(({ className, children, style, ...props }, forwardedRef) => {
     const { color, size, corners, cta, ...buttonProps } = { ...props };
-    return (_jsx("button", { ...buttonProps, ref: forwardedRef, className: designCss(ButtonCss.raw({ color, size, corners, cta }), designCss.raw(css)), children: children }));
+    return (_jsx("button", { ...buttonProps, ref: forwardedRef, className: cn(buttonVariants({ color, size, corners, cta }), className), style: style, children: children }));
 });
 export default Button;
 //# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/primitives/Button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/primitives/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAEtC,MAAM,cAAc,GAAG,GAAG,CACxB;IACE,2FAA2F;IAC3F,0EAA0E;IAC1E,uEAAuE;IACvE,yHAAyH;IACzH,2BAA2B;IAC3B,4KAA4K;IAC5K,sJAAsJ;IACtJ,iCAAiC;CAClC,CAAC,IAAI,CAAC,GAAG,CAAC,EACX;IACE,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,0DAA0D;gBAC1D,6DAA6D;gBAC7D,sEAAsE;gBACtE,yEAAyE;aAC1E,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,SAAS,EAAE;gBACT,yCAAyC;gBACzC,kDAAkD;gBAClD,wEAAwE;gBACxE,2EAA2E;aAC5E,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE,sBAAsB;YAC7B,KAAK,EAAE;gBACL,kDAAkD;gBAClD,oEAAoE;gBACpE,+BAA+B;gBAC/B,wFAAwF;aACzF,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,sDAAsD;gBACtD,4CAA4C;aAC7C,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,OAAO,EAAE;gBACP,uCAAuC;gBACvC,gDAAgD;gBAChD,6CAA6C;gBAC7C,sDAAsD;aACvD,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,IAAI,EAAE;gBACJ,sCAAsC;gBACtC,+CAA+C;gBAC/C,4CAA4C;aAC7C,CAAC,IAAI,CAAC,GAAG,CAAC;SACZ;QACD,OAAO,EAAE;YACP,MAAM,EAAE,oBAAoB;YAC5B,OAAO,EAAE,yDAAyD;YAClE,IAAI,EAAE,oBAAoB;YAC1B,MAAM,EAAE,4DAA4D;SACrE;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE;YACR,EAAE,EAAE,mDAAmD;YACvD,KAAK,EAAE,+DAA+D;YACtE,MAAM,EAAE,0CAA0C;YAClD,KAAK,EAAE,0CAA0C;SAClD;QACD,GAAG,EAAE;YACH,IAAI,EAAE;gBACJ,uCAAuC;gBACvC,oCAAoC;gBACpC,oCAAoC;gBACpC,sBAAsB;aACvB,CAAC,IAAI,CAAC,GAAG,CAAC;SACZ;KACF;IACD,eAAe,EAAE;QACf,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,QAAQ;KACf;CACF,CACF,CAAA;AAID,MAAM,MAAM,GAAG,UAAU,CAIvB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC3D,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,WAAW,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,CAAA;IAClE,OAAO,CACL,oBACM,WAAW,EACf,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CACX,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAC7C,SAAS,CACV,EACD,KAAK,EAAE,KAAK,YAEX,QAAQ,GACF,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
-import { Flex } from './index.js';
 import useRelayClient from '../../hooks/useRelayClient.js';
 import { ProviderOptionsContext } from '../../providers/RelayKitProvider.js';
-const ChainIcon = ({ chainId, css = {}, height = 14, width = 14, square = true, borderRadius = 4 }) => {
+import { cn } from '../../utils/cn.js';
+const ChainIcon = ({ chainId, className, height = 14, width = 14, square = true, borderRadius = 4 }) => {
     const providerOptions = useContext(ProviderOptionsContext);
     const client = useRelayClient();
     const chain = chainId
@@ -15,18 +15,14 @@ const ChainIcon = ({ chainId, css = {}, height = 14, width = 14, square = true,
             : chain.icon?.light
         : null;
     const iconUrl = square && icon ? icon.replace('/icons/', '/icons/square/') : icon;
-    return iconUrl ? (_jsx(Flex, { css: {
-            display: 'flex',
-            flexShrink: 0,
-            ...css
-        }, style: {
+    return iconUrl ? (_jsx("div", { className: cn('relay:flex relay:shrink-0', className), style: {
             height: height,
             width: width,
             borderRadius: borderRadius
         }, children: iconUrl ? (_jsx("img", { src: iconUrl, alt: `Chain #${chainId}`, style: {
                 borderRadius: square ? borderRadius : 0,
-                width: css && css.width ? Number(css.width) : '100%',
-                height: css && css.height ? Number(css.height) : '100%'
+                width: '100%',
+                height: '100%'
             } })) : null })) : null;
 };
 export default ChainIcon;

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

@@ -1 +1 @@
-{"version":3,"file":"ChainIcon.js","sourceRoot":"","sources":["../../../../src/components/primitives/ChainIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,cAAc,MAAM,+BAA+B,CAAA;AAE1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAA;AAW5E,MAAM,SAAS,GAAc,CAAC,EAC5B,OAAO,EACP,GAAG,GAAG,EAAE,EACR,MAAM,GAAG,EAAE,EACX,KAAK,GAAG,EAAE,EACV,MAAM,GAAG,IAAI,EACb,YAAY,GAAG,CAAC,EACjB,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAA;IAC1D,MAAM,MAAM,GAAG,cAAc,EAAE,CAAA;IAC/B,MAAM,KAAK,GAAG,OAAO;QACnB,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC;QACvD,CAAC,CAAC,IAAI,CAAA;IAER,MAAM,IAAI,GAAG,KAAK;QAChB,CAAC,CAAC,eAAe,CAAC,WAAW,KAAK,MAAM;YACtC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK;YACvC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK;QACrB,CAAC,CAAC,IAAI,CAAA;IAER,MAAM,OAAO,GACX,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IAEnE,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,KAAC,IAAI,IACH,GAAG,EAAE;YACH,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,CAAC;YACb,GAAG,GAAG;SACP,EACD,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,KAAK;YACZ,YAAY,EAAE,YAAY;SAC3B,YAEA,OAAO,CAAC,CAAC,CAAC,CACT,cACE,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,UAAU,OAAO,EAAE,EACxB,KAAK,EAAE;gBACL,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;gBACvC,KAAK,EAAE,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM;gBACpD,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM;aACxD,GACD,CACH,CAAC,CAAC,CAAC,IAAI,GACH,CACR,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"ChainIcon.js","sourceRoot":"","sources":["../../../../src/components/primitives/ChainIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,OAAO,CAAA;AAC3C,OAAO,cAAc,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAA;AAC5E,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAWtC,MAAM,SAAS,GAAc,CAAC,EAC5B,OAAO,EACP,SAAS,EACT,MAAM,GAAG,EAAE,EACX,KAAK,GAAG,EAAE,EACV,MAAM,GAAG,IAAI,EACb,YAAY,GAAG,CAAC,EACjB,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAA;IAC1D,MAAM,MAAM,GAAG,cAAc,EAAE,CAAA;IAC/B,MAAM,KAAK,GAAG,OAAO;QACnB,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC;QACvD,CAAC,CAAC,IAAI,CAAA;IAER,MAAM,IAAI,GAAG,KAAK;QAChB,CAAC,CAAC,eAAe,CAAC,WAAW,KAAK,MAAM;YACtC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK;YACvC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK;QACrB,CAAC,CAAC,IAAI,CAAA;IAER,MAAM,OAAO,GACX,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IAEnE,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,cACE,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,SAAS,CAAC,EACrD,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,KAAK;YACZ,YAAY,EAAE,YAAY;SAC3B,YAEA,OAAO,CAAC,CAAC,CAAC,CACT,cACE,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,UAAU,OAAO,EAAE,EACxB,KAAK,EAAE;gBACL,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;gBACvC,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf,GACD,CACH,CAAC,CAAC,CAAC,IAAI,GACJ,CACP,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import {} from 'react';
-import Flex from './Flex.js';
 import ChainIcon from './ChainIcon.js';
-import Box from './Box.js';
 import Text from './Text.js';
+import { cn } from '../../utils/cn.js';
 const SIZES = {
     sm: {
         token: 20,
@@ -22,38 +21,20 @@ const SIZES = {
         chain: 18
     }
 };
-export const ChainTokenIcon = ({ chainId, tokenlogoURI, tokenSymbol, css = {}, size = 'md', chainRadius = 4, chainIconSize }) => {
+export const ChainTokenIcon = ({ chainId, tokenlogoURI, tokenSymbol, className, size = 'md', chainRadius = 4, chainIconSize }) => {
     const isValidTokenLogo = tokenlogoURI && tokenlogoURI !== 'missing.png';
     const dimensions = SIZES[size];
     const chainSize = chainIconSize ?? dimensions.chain;
-    return chainId ? (_jsxs(Flex, { css: {
-            position: 'relative',
-            flexShrink: 0,
+    return chainId ? (_jsxs("div", { className: cn('relay:relative relay:shrink-0 relay:overflow-hidden', className), style: {
             width: dimensions.token,
             height: dimensions.token,
-            overflow: 'hidden',
-            borderRadius: chainRadius,
-            ...css
+            borderRadius: chainRadius
         }, children: [isValidTokenLogo ? (_jsx("img", { alt: 'Token', src: tokenlogoURI, width: dimensions.token, height: dimensions.token, style: {
                     borderRadius: 9999,
                     overflow: 'hidden'
-                } })) : tokenSymbol ? (_jsx(Box, { css: {
+                } })) : tokenSymbol ? (_jsx("div", { className: "relay:rounded-[50%] relay:bg-[var(--relay-colors-primary4)] relay:text-[color:var(--relay-colors-primary8)] relay:flex relay:items-center relay:justify-center", style: {
                     width: dimensions.token,
-                    height: dimensions.token,
-                    borderRadius: '50%',
-                    backgroundColor: 'primary4',
-                    color: 'primary8',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                }, children: _jsx(Text, { style: "h6", children: tokenSymbol?.charAt(0).toUpperCase() }) })) : null, _jsx(ChainIcon, { chainId: chainId, width: chainSize, height: chainSize, borderRadius: chainRadius, css: {
-                    position: 'absolute',
-                    right: 0,
-                    bottom: 0,
-                    overflow: 'hidden',
-                    '--borderColor': 'colors.modal-background',
-                    border: '1px solid var(--borderColor)',
-                    backgroundColor: 'modal-background'
-                } })] })) : null;
+                    height: dimensions.token
+                }, children: _jsx(Text, { style: "h6", children: tokenSymbol?.charAt(0).toUpperCase() }) })) : null, _jsx(ChainIcon, { chainId: chainId, width: chainSize, height: chainSize, borderRadius: chainRadius, className: "relay:absolute relay:right-0 relay:bottom-0 relay:overflow-hidden relay:border relay:border-solid relay:border-[var(--relay-colors-modal-background)] relay:bg-[var(--relay-colors-modal-background)]" })] })) : null;
 };
 //# sourceMappingURL=ChainTokenIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChainTokenIcon.js","sourceRoot":"","sources":["../../../../src/components/primitives/ChainTokenIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,MAAM,OAAO,CAAA;AAC/B,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,SAAS,MAAM,gBAAgB,CAAA;AACtC,OAAO,GAAG,MAAM,UAAU,CAAA;AAC1B,OAAO,IAAI,MAAM,WAAW,CAAA;AAe5B,MAAM,KAAK,GAAG;IACZ,EAAE,EAAE;QACF,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;KACV;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;KACV;IACD,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;AAEV,MAAM,CAAC,MAAM,cAAc,GAAwB,CAAC,EAClD,OAAO,EACP,YAAY,EACZ,WAAW,EACX,GAAG,GAAG,EAAE,EACR,IAAI,GAAG,IAAI,EACX,WAAW,GAAG,CAAC,EACf,aAAa,EACd,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,YAAY,IAAI,YAAY,KAAK,aAAa,CAAA;IACvE,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA;IAC9B,MAAM,SAAS,GAAG,aAAa,IAAI,UAAU,CAAC,KAAK,CAAA;IAEnD,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,MAAC,IAAI,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,YAAY,EAAE,WAAW;YACzB,GAAG,GAAG;SACP,aAEA,gBAAgB,CAAC,CAAC,CAAC,CAClB,cACE,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,KAAC,GAAG,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,KAAC,IAAI,IAAC,KAAK,EAAC,IAAI,YAAE,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAQ,GAC1D,CACP,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,SAAS,IACR,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,SAAS,EACjB,YAAY,EAAE,WAAW,EACzB,GAAG,EAAE;oBACH,QAAQ,EAAE,UAAU;oBACpB,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,CAAC;oBACT,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"}
+{"version":3,"file":"ChainTokenIcon.js","sourceRoot":"","sources":["../../../../src/components/primitives/ChainTokenIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,MAAM,OAAO,CAAA;AAC/B,OAAO,SAAS,MAAM,gBAAgB,CAAA;AACtC,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AActC,MAAM,KAAK,GAAG;IACZ,EAAE,EAAE;QACF,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;KACV;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;KACV;IACD,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;AAEV,MAAM,CAAC,MAAM,cAAc,GAAwB,CAAC,EAClD,OAAO,EACP,YAAY,EACZ,WAAW,EACX,SAAS,EACT,IAAI,GAAG,IAAI,EACX,WAAW,GAAG,CAAC,EACf,aAAa,EACd,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,YAAY,IAAI,YAAY,KAAK,aAAa,CAAA;IACvE,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA;IAC9B,MAAM,SAAS,GAAG,aAAa,IAAI,UAAU,CAAC,KAAK,CAAA;IAEnD,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,eACE,SAAS,EAAE,EAAE,CACX,qDAAqD,EACrD,SAAS,CACV,EACD,KAAK,EAAE;YACL,KAAK,EAAE,UAAU,CAAC,KAAK;YACvB,MAAM,EAAE,UAAU,CAAC,KAAK;YACxB,YAAY,EAAE,WAAW;SAC1B,aAEA,gBAAgB,CAAC,CAAC,CAAC,CAClB,cACE,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,cACE,SAAS,EAAC,gKAAgK,EAC1K,KAAK,EAAE;oBACL,KAAK,EAAE,UAAU,CAAC,KAAK;oBACvB,MAAM,EAAE,UAAU,CAAC,KAAK;iBACzB,YAED,KAAC,IAAI,IAAC,KAAK,EAAC,IAAI,YAAE,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAQ,GAC1D,CACP,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,SAAS,IACR,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,SAAS,EACjB,YAAY,EAAE,WAAW,EACzB,SAAS,EAAC,uMAAuM,GACjN,IACE,CACP,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

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

@@ -1,40 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
 import { forwardRef } from 'react';
-const CollapsibleContentCss = 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)`
-        }
-    }
+import { cn } from '../../utils/cn.js';
+const CollapsibleContent = forwardRef(({ children, className, ...props }, forwardedRef) => {
+    return (_jsx(Collapsible.CollapsibleContent, { ref: forwardedRef, ...props, className: cn('relay:overflow-hidden', 'relay:data-[state=open]:animate-collapsible-down', 'relay:data-[state=closed]:animate-collapsible-up', className), children: children }));
 });
-const CollapsibleRootCss = cva({
-    base: {
-        width: '100%'
-    }
+const CollapsibleRoot = forwardRef(({ children, className, ...props }, forwardedRef) => {
+    return (_jsx(Collapsible.Root, { ref: forwardedRef, ...props, className: cn('relay:w-full', className), children: children }));
 });
-const CollapsibleTriggerCss = cva({
-    base: {
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        cursor: 'pointer'
-    }
-});
-const CollapsibleContent = forwardRef(({ children, css, ...props }, forwardedRef) => {
-    return (_jsx(Collapsible.CollapsibleContent, { ref: forwardedRef, ...props, className: designCss(CollapsibleContentCss.raw(), designCss.raw(css)), children: children }));
-});
-const CollapsibleRoot = forwardRef(({ children, css, ...props }, forwardedRef) => {
-    return (_jsx(Collapsible.Root, { ref: forwardedRef, ...props, className: designCss(CollapsibleRootCss.raw(), designCss.raw(css)), children: children }));
-});
-const CollapsibleTrigger = forwardRef(({ children, css, ...props }, forwardedRef) => {
-    return (_jsx(Collapsible.Trigger, { ref: forwardedRef, ...props, className: designCss(CollapsibleTriggerCss.raw(), designCss.raw(css)), children: children }));
+const CollapsibleTrigger = forwardRef(({ children, className, ...props }, forwardedRef) => {
+    return (_jsx(Collapsible.Trigger, { ref: forwardedRef, ...props, className: cn('relay:w-full relay:flex relay:items-center relay:justify-between relay:cursor-pointer', className), children: children }));
 });
 export { CollapsibleRoot, CollapsibleContent, CollapsibleTrigger };
 //# sourceMappingURL=Collapsible.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.js","sourceRoot":"","sources":["../../../../src/components/primitives/Collapsible.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAC/C,OAAO,EACL,UAAU,EAIX,MAAM,OAAO,CAAA;AAEd,MAAM,qBAAqB,GAAG,GAAG,CAAC;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,GAAG,CAAC;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAA;AAEF,MAAM,qBAAqB,GAAG,GAAG,CAAC;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,UAAU,CAInC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,WAAW,CAAC,kBAAkB,IAC7B,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,SAAS,CAAC,qBAAqB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAEpE,QAAQ,GACsB,CAClC,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,eAAe,GAAG,UAAU,CAIhC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,WAAW,CAAC,IAAI,IACf,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,SAAS,CAAC,kBAAkB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAEjE,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,kBAAkB,GAAG,UAAU,CAInC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,WAAW,CAAC,OAAO,IAClB,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,SAAS,CAAC,qBAAqB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAEpE,QAAQ,GACW,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"Collapsible.js","sourceRoot":"","sources":["../../../../src/components/primitives/Collapsible.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EACL,UAAU,EAIX,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAEtC,MAAM,kBAAkB,GAAG,UAAU,CAInC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IACpD,OAAO,CACL,KAAC,WAAW,CAAC,kBAAkB,IAC7B,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,EAAE,CACX,uBAAuB,EACvB,kDAAkD,EAClD,kDAAkD,EAClD,SAAS,CACV,YAEA,QAAQ,GACsB,CAClC,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,eAAe,GAAG,UAAU,CAIhC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IACpD,OAAO,CACL,KAAC,WAAW,CAAC,IAAI,IACf,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,YAEvC,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,kBAAkB,GAAG,UAAU,CAInC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IACpD,OAAO,CACL,KAAC,WAAW,CAAC,OAAO,IAClB,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,EAAE,CACX,uFAAuF,EACvF,SAAS,CACV,YAEA,QAAQ,GACW,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}