@relayprotocol/relay-kit-ui 2.17.2

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { motion, AnimatePresence } from 'framer-motion';
+import { forwardRef, useState } from 'react';
+import { useMediaQuery } from 'usehooks-ts';
+import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+const OverlayStyle = cva({
+    base: {
+        position: 'fixed',
+        inset: 0
+    }
+});
+const Overlay = forwardRef(({ children, css, ...props }, forwardedRef) => {
+    return (_jsx(DialogPrimitive.Overlay, { ref: forwardedRef, ...props, className: `${designCss(OverlayStyle.raw(), designCss.raw(css))} relay-kit-reset`, children: children }));
+});
+const ContentCss = cva({
+    base: {
+        backgroundColor: 'modal-background',
+        borderRadius: 'modal-border-radius',
+        border: 'modal-border',
+        position: 'fixed',
+        left: '50%',
+        top: '100%',
+        minWidth: '90vw',
+        maxWidth: '100vw',
+        sm: {
+            minWidth: '400px',
+            maxWidth: '532px'
+        },
+        maxHeight: '85vh',
+        overflowY: 'auto',
+        _focus: { outline: 'none' },
+        '@media(max-width: 520px)': {
+            borderBottomRightRadius: 0,
+            borderBottomLeftRadius: 0,
+            width: '100%'
+        }
+    }
+});
+const Content = forwardRef(({ children, ...props }, forwardedRef) => {
+    return (_jsx(DialogPrimitive.DialogContent, { ref: forwardedRef, ...props, className: ContentCss(), children: children }));
+});
+const AnimatedContent = forwardRef(({ children, css, ...props }, forwardedRef) => {
+    const isMobile = 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 (_jsx(DialogPrimitive.DialogContent, { className: designCss(ContentCss.raw(props), designCss.raw(css)), forceMount: true, asChild: true, ...props, children: _jsxs(motion.div, { ref: forwardedRef, transition: {
+                type: isMobile ? 'tween' : undefined,
+                duration: isMobile ? 0.2 : 0.1,
+                ease: isMobile ? undefined : 'linear'
+            }, ...animation, children: [_jsx(VisuallyHidden, { children: _jsx(DialogPrimitive.Title, { children: "Title" }) }), children] }, isMobile + 'modal') }));
+});
+AnimatedContent.displayName = 'AnimatedContent';
+const Dialog = forwardRef(({ children, trigger, portalProps, ...props }, forwardedRef) => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(DialogPrimitive.Root, { onOpenChange: setOpen, open: open, children: [_jsx(DialogPrimitive.DialogTrigger, { asChild: true, children: trigger }), _jsx(AnimatePresence, { children: open ? (_jsx(DialogPrimitive.DialogPortal, { forceMount: true, ...portalProps, children: _jsx(AnimatedContent, { ref: forwardedRef, forceMount: true, ...props, children: children }) })) : null })] }));
+});
+Dialog.displayName = 'Dialog';
+export { Dialog, Content, AnimatedContent, Overlay };
+//# sourceMappingURL=Dialog.js.map

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+const DropdownMenuContentCss = cva({
+    base: {
+        mx: '4',
+        p: '3',
+        borderRadius: 8,
+        zIndex: 5,
+        background: 'modal-background',
+        boxShadow: '0px 0px 50px 0px #0000001F',
+        border: 'dropdown-border'
+    }
+});
+const DropdownMenuContent = forwardRef(({ children, css, ...props }, forwardedRef) => {
+    return (_jsx(DropdownMenuPrimitive.DropdownMenuContent, { ...props, ref: forwardedRef, className: designCss(DropdownMenuContentCss.raw(), designCss.raw(css)), children: children }));
+});
+const DropdownMenuItemCss = cva({
+    base: {
+        display: 'flex',
+        alignItems: 'center',
+        fontSize: 16,
+        color: 'text-default',
+        background: 'modal-background',
+        p: '3',
+        outline: 'none',
+        cursor: 'pointer',
+        transition: 'backdrop-filter 250ms linear',
+        _hover: {
+            backdropFilter: 'brightness(95%)',
+            backgroundColor: 'gray/10'
+        },
+        '&:focus': {
+            backdropFilter: 'brightness(95%)',
+            backgroundColor: 'gray/10'
+        }
+    }
+});
+const DropdownMenuItem = forwardRef(({ children, css, ...props }, forwardedRef) => {
+    return (_jsx(DropdownMenuPrimitive.DropdownMenuItem, { ...props, ref: forwardedRef, className: designCss(DropdownMenuItemCss.raw(), designCss.raw(css)), children: children }));
+});
+const Dropdown = forwardRef(({ children, trigger, contentProps, ...props }, forwardedRef) => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(DropdownMenuPrimitive.Root, { ...props, open: props.open ?? open, onOpenChange: props.onOpenChange ?? setOpen, children: [_jsx(DropdownMenuPrimitive.Trigger, { asChild: true, children: trigger }), (props.open || open) && (_jsx(DropdownMenuContent, { ref: forwardedRef, ...contentProps, children: children }))] }));
+});
+Dropdown.displayName = 'Dropdown';
+export { Dropdown, DropdownMenuContent, DropdownMenuItem };
+//# sourceMappingURL=Dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/primitives/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,EAEV,QAAQ,EACT,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAA;AACtE,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAE/C,MAAM,sBAAsB,GAAG,GAAG,CAAC;IACjC,IAAI,EAAE;QACJ,EAAE,EAAE,GAAG;QACP,CAAC,EAAE,GAAG;QACN,YAAY,EAAE,CAAC;QACf,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,kBAAkB;QAC9B,SAAS,EAAE,4BAA4B;QACvC,MAAM,EAAE,iBAAiB;KAC1B;CACF,CAAC,CAAA;AAEF,MAAM,mBAAmB,GAAG,UAAU,CAKpC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,qBAAqB,CAAC,mBAAmB,OACpC,KAAK,EACT,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,CAAC,sBAAsB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAErE,QAAQ,GACiC,CAC7C,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,mBAAmB,GAAG,GAAG,CAAC;IAC9B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,cAAc;QACrB,UAAU,EAAE,kBAAkB;QAC9B,CAAC,EAAE,GAAG;QACN,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,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,UAAU,CAKjC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,qBAAqB,CAAC,gBAAgB,OACjC,KAAK,EACT,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,CAAC,mBAAmB,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAElE,QAAQ,GAC8B,CAC1C,CAAA;AACH,CAAC,CAAC,CAAA;AAOF,MAAM,QAAQ,GAAG,UAAU,CAGzB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAChE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,OAAO,CACL,MAAC,qBAAqB,CAAC,IAAI,OACrB,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI,EACxB,YAAY,EAAE,KAAK,CAAC,YAAY,IAAI,OAAO,aAE3C,KAAC,qBAAqB,CAAC,OAAO,IAAC,OAAO,kBACnC,OAAO,GACsB,EAC/B,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CACvB,KAAC,mBAAmB,IAAC,GAAG,EAAE,YAAY,KAAM,YAAY,YACrD,QAAQ,GACW,CACvB,IAC0B,CAC9B,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,CAAA"}

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

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+export const FlexCss = cva({
+    base: {
+        display: 'flex'
+    },
+    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 (_jsx("div", { className: designCss(FlexCss.raw({ align, justify, direction, wrap }), designCss.raw(css)), style: style, id: id, ...htmlProps, children: children }));
+};
+export default Flex;
+//# sourceMappingURL=Flex.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../../src/components/primitives/Flex.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAQ/C,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAC;IACzB,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,KAAK,EAAE;gBACL,UAAU,EAAE,YAAY;aACzB;YACD,MAAM,EAAE;gBACN,UAAU,EAAE,QAAQ;aACrB;YACD,GAAG,EAAE;gBACH,UAAU,EAAE,UAAU;aACvB;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,QAAQ,EAAE;gBACR,UAAU,EAAE,UAAU;aACvB;YACD,MAAM,EAAE;gBACN,UAAU,EAAE,QAAQ;aACrB;SACF;QACD,OAAO,EAAE;YACP,KAAK,EAAE;gBACL,cAAc,EAAE,YAAY;aAC7B;YACD,MAAM,EAAE;gBACN,cAAc,EAAE,QAAQ;aACzB;YACD,GAAG,EAAE;gBACH,cAAc,EAAE,UAAU;aAC3B;YACD,OAAO,EAAE;gBACP,cAAc,EAAE,eAAe;aAChC;SACF;QACD,SAAS,EAAE;YACT,GAAG,EAAE;gBACH,aAAa,EAAE,KAAK;aACrB;YACD,MAAM,EAAE;gBACN,aAAa,EAAE,QAAQ;aACxB;YACD,UAAU,EAAE;gBACV,aAAa,EAAE,aAAa;aAC7B;YACD,aAAa,EAAE;gBACb,aAAa,EAAE,gBAAgB;aAChC;SACF;QACD,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,QAAQ;aACnB;YACD,IAAI,EAAE;gBACJ,QAAQ,EAAE,MAAM;aACjB;YACD,WAAW,EAAE;gBACX,QAAQ,EAAE,cAAc;aACzB;SACF;KACF;CACF,CAAC,CAAA;AAIF,MAAM,IAAI,GAIN,CAAC,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,EAAE,EACF,KAAK,EACL,OAAO,EACP,SAAS,EACT,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,EAAE;IACH,OAAO,CACL,cACE,SAAS,EAAE,SAAS,CAClB,OAAO,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAChD,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CACnB,EACD,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,KACF,SAAS,YAEZ,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef } from 'react';
+import Flex from './Flex.js';
+import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+import Box from './Box.js';
+const StyledInputCss = cva({
+    base: {
+        px: 16,
+        py: 12,
+        borderRadius: 'input-border-radius',
+        fontFamily: 'body',
+        fontSize: 16,
+        color: 'input-color',
+        backgroundColor: 'input-background',
+        _placeholder: {
+            color: 'gray10'
+        },
+        '--focusColor': 'colors.focus-color',
+        _focus: {
+            boxShadow: 'inset 0 0 0 2px var(--focusColor)',
+            outline: 'none'
+        },
+        _disabled: {
+            cursor: 'not-allowed'
+        },
+        _spinButtons: {
+            WebkitAppearance: 'none'
+        }
+    },
+    variants: {
+        size: {
+            large: {
+                fontSize: 32,
+                lineHeight: '42px'
+            }
+        },
+        ellipsify: {
+            true: {
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap'
+            }
+        }
+    }
+});
+const Input = forwardRef(({ children, icon, iconPosition, iconCss, containerCss, css, ...props }, ref) => {
+    const { size, ellipsify, ...inputProps } = props;
+    return (_jsxs(Flex, { css: {
+            ...containerCss
+        }, style: { ...props.style }, children: [icon && (_jsx(Flex, { css: { position: 'relative' }, children: _jsx(Box, { css: {
+                        position: 'absolute',
+                        top: 12,
+                        left: iconPosition === 'right' ? 'unset' : 16,
+                        right: iconPosition === 'right' ? 16 : 'unset',
+                        zIndex: 0,
+                        ...iconCss
+                    }, children: icon }) })), _jsx("input", { ...inputProps, type: "text", ref: ref, style: {
+                    paddingLeft: icon && iconPosition !== 'right' ? 42 : 16,
+                    paddingRight: icon && iconPosition === 'right' ? 42 : 16
+                }, className: designCss(StyledInputCss.raw({ size, ellipsify }), designCss.raw({
+                    ...css
+                })) })] }));
+});
+Input.displayName = 'Input';
+export default Input;
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/primitives/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,IAAI,MAAM,WAAW,CAAA;AAE5B,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAC/C,OAAO,GAAG,MAAM,UAAU,CAAA;AAE1B,MAAM,cAAc,GAAG,GAAG,CAAC;IACzB,IAAI,EAAE;QACJ,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,YAAY,EAAE,qBAAqB;QACnC,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,aAAa;QACpB,eAAe,EAAE,kBAAkB;QACnC,YAAY,EAAE;YACZ,KAAK,EAAE,QAAQ;SAChB;QACD,cAAc,EAAE,oBAAoB;QACpC,MAAM,EAAE;YACN,SAAS,EAAE,mCAAmC;YAC9C,OAAO,EAAE,MAAM;SAChB;QACD,SAAS,EAAE;YACT,MAAM,EAAE,aAAa;SACtB;QACD,YAAY,EAAE;YACZ,gBAAgB,EAAE,MAAM;SACzB;KACF;IAED,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,MAAM;aACnB;SACF;QACD,SAAS,EAAE;YACT,IAAI,EAAE;gBACJ,YAAY,EAAE,UAAU;gBACxB,QAAQ,EAAE,QAAQ;gBAClB,UAAU,EAAE,QAAQ;aACrB;SACF;KACF;CACF,CAAC,CAAA;AAMF,MAAM,KAAK,GAAG,UAAU,CAUtB,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,MAAC,IAAI,IACH,GAAG,EAAE;YACH,GAAG,YAAY;SAChB,EACD,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,aAExB,IAAI,IAAI,CACP,KAAC,IAAI,IAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YACjC,KAAC,GAAG,IACF,GAAG,EAAE;wBACH,QAAQ,EAAE,UAAU;wBACpB,GAAG,EAAE,EAAE;wBACP,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;wBAC7C,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;wBAC9C,MAAM,EAAE,CAAC;wBACT,GAAG,OAAO;qBACX,YAEA,IAAI,GACD,GACD,CACR,EACD,mBACM,UAAU,EACd,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI,IAAI,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;oBACvD,YAAY,EAAE,IAAI,IAAI,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;iBACzD,EACD,SAAS,EAAE,SAAS,CAClB,cAAc,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EACvC,SAAS,CAAC,GAAG,CAAC;oBACZ,GAAG,GAAG;iBACP,CAAC,CACH,GACD,IACG,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA;AAE3B,eAAe,KAAK,CAAA"}

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+export const PillStyle = cva({
+    base: {
+        display: 'flex',
+        background: 'subtle-background-color',
+        px: '3',
+        py: '1',
+        gap: '1'
+    },
+    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'
+    }
+});
+export const Pill = ({ css, ...props }) => {
+    return (_jsx("div", { ...props, className: designCss(PillStyle.raw(props), designCss.raw(css)) }));
+};
+export default Pill;
+//# sourceMappingURL=Pill.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.js","sourceRoot":"","sources":["../../../../src/components/primitives/Pill.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAI/C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC;IAC3B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,yBAAyB;QACrC,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,GAAG;QACP,GAAG,EAAE,GAAG;KACT;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,GAAG,EAAE;gBACH,UAAU,EAAE,MAAM;gBAClB,KAAK,EAAE,OAAO;aACf;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE,OAAO;gBACnB,KAAK,EAAE,OAAO;aACf;YACD,KAAK,EAAE;gBACL,UAAU,EAAE,QAAQ;gBACpB,KAAK,EAAE,SAAS;aACjB;YACD,KAAK,EAAE;gBACL,UAAU,EAAE,QAAQ;gBACpB,KAAK,EAAE,QAAQ;aAChB;YACD,WAAW,EAAE;gBACX,UAAU,EAAE,MAAM;gBAClB,KAAK,EAAE,QAAQ;aAChB;SACF;QACD,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,YAAY,EAAE,EAAE;aACjB;YACD,OAAO,EAAE;gBACP,YAAY,EAAE,EAAE;aACjB;YACD,OAAO,EAAE;gBACP,YAAY,EAAE,CAAC;aAChB;SACF;QACD,QAAQ,EAAE;YACR,IAAI,EAAE;gBACJ,eAAe,EAAE,eAAe;gBAChC,MAAM,EAAE,8BAA8B;aACvC;SACF;KACF;IACD,eAAe,EAAE;QACf,MAAM,EAAE,MAAM;KACf;CACF,CAAC,CAAA;AAIF,MAAM,CAAC,MAAM,IAAI,GAIb,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxB,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GACzD,CACR,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Flex from './Flex.js';
+import {} from '@relayprotocol/relay-design-system/css';
+const Skeleton = ({ css }) => {
+    return (_jsx(Flex, { css: {
+            animationName: 'pulse',
+            backgroundColor: 'skeleton-background',
+            borderRadius: 8,
+            width: 100,
+            height: 12,
+            animation: 'pulse 3s ease-in-out infinite',
+            ...css
+        } }));
+};
+export default Skeleton;
+//# sourceMappingURL=Skeleton.js.map

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

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

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Switch from '@radix-ui/react-switch';
+import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+import { forwardRef } from 'react';
+const StyledSwitchCss = 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'
+        }
+    }
+});
+export const StyledSwitch = forwardRef(({ children, css, ...props }, forwardedRef) => {
+    return (_jsx(Switch.Root, { ref: forwardedRef, ...props, className: designCss(StyledSwitchCss.raw(), designCss.raw(css)), children: children }));
+});
+const StyledThumbCss = 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)'
+        }
+    }
+});
+export const StyledThumb = forwardRef(({ children, css, ...props }, forwardedRef) => {
+    return (_jsx(Switch.Thumb, { ref: forwardedRef, ...props, className: designCss(StyledThumbCss.raw(), designCss.raw(css)) }));
+});
+//# sourceMappingURL=Switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/primitives/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAA;AAChD,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAC/C,OAAO,EAEL,UAAU,EAEX,MAAM,OAAO,CAAA;AAEd,MAAM,eAAe,GAAG,GAAG,CAAC;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;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CAGpC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,MAAM,CAAC,IAAI,IACV,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,SAAS,CAAC,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,GAAG,CAAC;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;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAGnC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,MAAM,CAAC,KAAK,IACX,GAAG,EAAE,YAAY,KACb,KAAK,EACT,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAC9D,CACH,CAAA;AACH,CAAC,CAAC,CAAA"}

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+import { forwardRef } from 'react';
+const TabsListCss = cva({
+    base: {
+        display: 'flex',
+        alignItems: 'center',
+        borderRadius: 8,
+        p: '1',
+        backgroundColor: 'gray2',
+        border: 'none'
+    }
+});
+const TabsTriggerCss = 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 = forwardRef(({ children, css, ...props }, forwardedRef) => {
+    return (_jsx(TabsPrimitive.List, { ...props, ref: forwardedRef, className: designCss(TabsListCss.raw(), designCss.raw(css)), children: children }));
+});
+const TabsTrigger = forwardRef(({ children, css, ...props }, forwardedRef) => {
+    return (_jsx(TabsPrimitive.Trigger, { ...props, ref: forwardedRef, className: designCss(TabsTriggerCss.raw(), designCss.raw(css)), children: children }));
+});
+const TabsContent = forwardRef(({ children, css, ...props }, forwardedRef) => {
+    return (_jsx(TabsPrimitive.Content, { ...props, ref: forwardedRef, className: designCss(designCss.raw(css)), children: children }));
+});
+const TabsRoot = forwardRef(({ children, css, ...props }, forwardedRef) => {
+    return (_jsx(TabsPrimitive.Root, { ...props, ref: forwardedRef, className: designCss(designCss.raw(css)), children: children }));
+});
+export { TabsRoot, TabsList, TabsTrigger, TabsContent };
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/components/primitives/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAA;AACrD,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAC/C,OAAO,EACL,UAAU,EAGX,MAAM,OAAO,CAAA;AAEd,MAAM,WAAW,GAAG,GAAG,CAAC;IACtB,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,CAAC;QACf,CAAC,EAAE,GAAG;QACN,eAAe,EAAE,OAAO;QACxB,MAAM,EAAE,MAAM;KACf;CACF,CAAC,CAAA;AAEF,MAAM,cAAc,GAAG,GAAG,CAAC;IACzB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,KAAK;QACjB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,SAAS;QACjB,EAAE,EAAE,KAAK;QACT,KAAK,EAAE,QAAQ;QACf,YAAY,EAAE,CAAC;QACf,eAAe,EAAE,aAAa;QAC9B,MAAM,EAAE,MAAM;QACd,wBAAwB,EAAE;YACxB,eAAe,EAAE,yBAAyB;YAC1C,eAAe,EAAE,eAAe;YAChC,MAAM,EAAE,8BAA8B;SACvC;KACF;CACF,CAAC,CAAA;AAEF,MAAM,QAAQ,GAAG,UAAU,CAKzB,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,OACb,KAAK,EACT,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAE1D,QAAQ,GACU,CACtB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,UAAU,CAK5B,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,aAAa,CAAC,OAAO,OAChB,KAAK,EACT,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAE7D,QAAQ,GACa,CACzB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,UAAU,CAK5B,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,aAAa,CAAC,OAAO,OAChB,KAAK,EACT,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAEvC,QAAQ,GACa,CACzB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,QAAQ,GAAG,UAAU,CAKzB,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE;IAC9C,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,OACb,KAAK,EACT,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAEvC,QAAQ,GACU,CACtB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}

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

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva, css as designCss } from '@relayprotocol/relay-design-system/css';
+const TextCss = cva({
+    base: {
+        color: 'text-default',
+        fontFamily: 'body'
+    },
+    variants: {
+        style: {
+            h2: {
+                fontWeight: 700,
+                fontSize: '48px'
+            },
+            h3: {
+                fontWeight: 700,
+                fontSize: '32px'
+            },
+            h4: {
+                fontWeight: 700,
+                fontSize: '24px'
+            },
+            h5: {
+                fontWeight: 700,
+                fontSize: '20px'
+            },
+            h6: {
+                fontWeight: 700,
+                fontSize: '16px'
+            },
+            subtitle1: {
+                fontWeight: 500,
+                fontSize: '16px'
+            },
+            subtitle2: {
+                fontWeight: 500,
+                fontSize: '14px'
+            },
+            subtitle3: {
+                fontWeight: 500,
+                fontSize: '12px'
+            },
+            body1: {
+                fontWeight: 400,
+                fontSize: '16px'
+            },
+            body2: {
+                fontWeight: 400,
+                fontSize: '14px'
+            },
+            body3: {
+                fontWeight: 400,
+                fontSize: '12px'
+            },
+            tiny: {
+                fontWeight: 500,
+                fontSize: 10,
+                color: 'gray11'
+            }
+        },
+        color: {
+            subtle: {
+                color: 'text-subtle'
+            },
+            subtleSecondary: {
+                color: 'text-subtle-secondary'
+            },
+            error: {
+                color: 'text-error'
+            },
+            red: {
+                color: 'red11'
+            },
+            blue: {
+                color: 'blue12'
+            },
+            success: {
+                color: 'text-success'
+            },
+            warning: {
+                color: 'amber12'
+            },
+            warningSecondary: {
+                color: 'amber11'
+            }
+        },
+        italic: {
+            true: {
+                fontStyle: 'italic'
+            }
+        },
+        ellipsify: {
+            true: {
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap'
+            }
+        }
+    }
+});
+const Text = ({ css, children, ...props }) => {
+    return (_jsx("div", { className: designCss(TextCss.raw(props), designCss.raw(css)), children: children }));
+};
+export default Text;
+//# sourceMappingURL=Text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../../src/components/primitives/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,GAAG,IAAI,SAAS,EAEjB,MAAM,wCAAwC,CAAA;AAG/C,MAAM,OAAO,GAAG,GAAG,CAAC;IAClB,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;QACrB,UAAU,EAAE,MAAM;KACnB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,EAAE,EAAE;gBACF,UAAU,EAAE,GAAG;gBACf,QAAQ,EAAE,MAAM;aACjB;YACD,EAAE,EAAE;gBACF,UAAU,EAAE,GAAG;gBACf,QAAQ,EAAE,MAAM;aACjB;YACD,EAAE,EAAE;gBACF,UAAU,EAAE,GAAG;gBACf,QAAQ,EAAE,MAAM;aACjB;YACD,EAAE,EAAE;gBACF,UAAU,EAAE,GAAG;gBACf,QAAQ,EAAE,MAAM;aACjB;YACD,EAAE,EAAE;gBACF,UAAU,EAAE,GAAG;gBACf,QAAQ,EAAE,MAAM;aACjB;YACD,SAAS,EAAE;gBACT,UAAU,EAAE,GAAG;gBACf,QAAQ,EAAE,MAAM;aACjB;YACD,SAAS,EAAE;gBACT,UAAU,EAAE,GAAG;gBACf,QAAQ,EAAE,MAAM;aACjB;YACD,SAAS,EAAE;gBACT,UAAU,EAAE,GAAG;gBACf,QAAQ,EAAE,MAAM;aACjB;YACD,KAAK,EAAE;gBACL,UAAU,EAAE,GAAG;gBACf,QAAQ,EAAE,MAAM;aACjB;YACD,KAAK,EAAE;gBACL,UAAU,EAAE,GAAG;gBACf,QAAQ,EAAE,MAAM;aACjB;YACD,KAAK,EAAE;gBACL,UAAU,EAAE,GAAG;gBACf,QAAQ,EAAE,MAAM;aACjB;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE,GAAG;gBACf,QAAQ,EAAE,EAAE;gBACZ,KAAK,EAAE,QAAQ;aAChB;SACF;QACD,KAAK,EAAE;YACL,MAAM,EAAE;gBACN,KAAK,EAAE,aAAa;aACrB;YACD,eAAe,EAAE;gBACf,KAAK,EAAE,uBAAuB;aAC/B;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,YAAY;aACpB;YACD,GAAG,EAAE;gBACH,KAAK,EAAE,OAAO;aACf;YACD,IAAI,EAAE;gBACJ,KAAK,EAAE,QAAQ;aAChB;YACD,OAAO,EAAE;gBACP,KAAK,EAAE,cAAc;aACtB;YACD,OAAO,EAAE;gBACP,KAAK,EAAE,SAAS;aACjB;YACD,gBAAgB,EAAE;gBAChB,KAAK,EAAE,SAAS;aACjB;SACF;QACD,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,SAAS,EAAE,QAAQ;aACpB;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;AAIF,MAAM,IAAI,GAA4D,CAAC,EACrE,GAAG,EACH,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAC9D,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}