@cube-dev/ui-kit 0.56.3 → 0.58.0

package/cjs/components/organisms/FileTabs/FileTabs.js

@@ -1,267 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileTabs = FileTabs;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Block_1 = require("../../Block");
-const actions_1 = require("../../actions");
-const Space_1 = require("../../layout/Space");
-const Flex_1 = require("../../layout/Flex");
-const tasty_1 = require("../../../tasty");
-const react_2 = require("../../../utils/react");
-const icons_1 = require("../../../icons");
-const FileTabsContext = (0, react_1.createContext)({
-    addTab() { },
-    removeTab() { },
-    setTab() { },
-    setDirtyTab() { },
-});
-const TabsPanelElement = (0, tasty_1.tasty)(Space_1.Space, {
-    qa: 'TabsPanel',
-    styles: {
-        position: 'relative',
-        overflow: 'auto hidden',
-        top: '1bw',
-        gap: '.5x',
-        flexShrink: 0,
-        whiteSpace: 'nowrap',
-        styledScrollbar: true,
-        padding: '1ow 1ow 0 1ow',
-        fade: {
-            '': false,
-            '[data-is-left-fade]': '3x left',
-            '[data-is-right-fade]': '3x right',
-            '[data-is-right-fade] & [data-is-left-fade]': '3x left right',
-        },
-        transition: 'fade',
-        '--scrollbar-radius': '1ow',
-        '--scrollbar-width': '.75x',
-        '--scrollbar-outline-width': '1px',
-    },
-});
-const TabsContainerElement = (0, tasty_1.tasty)(Flex_1.Flex, {
-    qa: 'TabsContainer',
-    styles: {
-        flow: 'column',
-        height: 'max 100%',
-        width: 'max 100%',
-        position: 'relative',
-    },
-});
-const DirtyBadge = (0, tasty_1.tasty)({
-    element: 'DirtyBadge',
-    styles: {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: '1x',
-        height: '1x',
-        fill: '#dark.30',
-        radius: 'round',
-    },
-});
-const TabElement = (0, tasty_1.tasty)(actions_1.Action, {
-    styles: {
-        radius: '1r 1r 0 0',
-        padding: '1x 1.5x',
-        border: {
-            '': 'left top right #clear',
-            disabled: 'left top right rgb(227, 227, 233)',
-        },
-        fill: {
-            '': '#dark.04',
-            hovered: '#dark.08',
-            'disabled, disabled & hover': '#white',
-        },
-        color: {
-            '': '#dark-02',
-            'disabled, hovered, hovered & disabled': '#dark',
-        },
-        cursor: {
-            '': 'pointer',
-            disabled: 'default',
-        },
-        fontWeight: 500,
-        opacity: 1,
-        preset: 'default',
-        outline: {
-            '': 'inset #purple-03.0',
-            'focused & focus-visible': 'inset #purple-03',
-        },
-        transform: {
-            '': 'translate(0, 0)',
-            '[disabled]': 'translate(0, 1bw)',
-        },
-        transition: 'theme 0.2s',
-        margin: '1bw bottom',
-        DirtyBadge: {
-            opacity: {
-                '': 1,
-                'dirty & :hover': 0,
-            },
-            pointerEvents: {
-                '': 'auto',
-                'dirty & :hover': 'none',
-            },
-        },
-        CloseButton: {
-            opacity: {
-                '': 0,
-                '!dirty | :hover': 1,
-            },
-        },
-    },
-});
-const CloseButton = (0, tasty_1.tasty)(actions_1.Button, {
-    element: 'CloseButton',
-    type: 'neutral',
-    styles: {
-        color: {
-            '': '#dark.50',
-            hovered: '#dark',
-        },
-        padding: '.25x',
-        outline: {
-            '': '#purple-03.0',
-            'focused & focus-visible': '#purple-03',
-        },
-        radius: '1r',
-    },
-});
-function Tab({ isDirty, isDisabled, children, isClosable, onClose, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(TabElement, { mods: {
-            dirty: isDirty,
-        }, isDisabled: isDisabled, ...props, children: (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: ".75x", children: [(0, jsx_runtime_1.jsx)(Block_1.Block, { children: children }), (isClosable || isDirty) && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { placeItems: "center", style: { position: 'relative' }, children: [isClosable ? ((0, jsx_runtime_1.jsx)(CloseButton, { onPress: onClose, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, {}) })) : ((0, jsx_runtime_1.jsx)("div", {})), isDirty ? (0, jsx_runtime_1.jsx)(DirtyBadge, {}) : null] }))] }) }));
-}
-function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, isClosable = true, children, ...props }) {
-    const tabsRef = (0, react_1.useRef)(null);
-    const [tabs, setTabs] = (0, react_1.useState)([]);
-    const [activeKey, setActiveKey] = (0, react_1.useState)(activeKeyProp || defaultActiveKey);
-    const [leftFade, setLeftFade] = (0, react_1.useState)(false);
-    const [rightFade, setRightFade] = (0, react_1.useState)(false);
-    function updateScroll() {
-        const el = tabsRef && tabsRef.current;
-        if (!el)
-            return;
-        setLeftFade(!!el.scrollLeft);
-        setRightFade(el.scrollWidth !== el.offsetWidth &&
-            !!(el.scrollWidth - el.offsetWidth - el.scrollLeft));
-    }
-    (0, react_2.useLayoutEffect)(updateScroll, [tabs]);
-    function scrollCurrentIntoView() {
-        const el = tabsRef && tabsRef.current;
-        if (!el)
-            return;
-        const current = el.querySelector('button[disabled]');
-        if (!current)
-            return;
-        current.scrollIntoView({ behavior: 'smooth', inline: 'end', block: 'end' });
-    }
-    (0, react_1.useEffect)(() => {
-        function update() {
-            updateScroll();
-        }
-        if (tabsRef && tabsRef.current) {
-            tabsRef.current.addEventListener('scroll', update);
-            tabsRef.current.addEventListener('mousewheel', update);
-            window.addEventListener('resize', update);
-        }
-        return () => {
-            if (tabsRef && tabsRef.current) {
-                tabsRef.current.removeEventListener('scroll', update);
-                tabsRef.current.removeEventListener('mousewheel', update);
-            }
-            window.removeEventListener('resize', update);
-        };
-    }, [tabsRef]);
-    (0, react_1.useEffect)(scrollCurrentIntoView, [activeKey]);
-    (0, react_1.useEffect)(() => {
-        setActiveKey(activeKeyProp);
-    }, [activeKeyProp]);
-    function getTab(tabs, key) {
-        return tabs.find((tab) => tab.id === key);
-    }
-    function setTab(key) {
-        if (getTab(tabs, key)) {
-            setActiveKey(key);
-        }
-    }
-    function addTab(tab) {
-        setTabs((tabs) => {
-            if (!getTab(tabs, tab.id)) {
-                return [...tabs, tab];
-            }
-            return tabs;
-        });
-    }
-    function setDirtyTab(id, isDirty) {
-        setTabs((tabs) => {
-            const tab = getTab(tabs, id);
-            if (tab) {
-                tab.isDirty = isDirty;
-                return [...tabs];
-            }
-            return tabs;
-        });
-    }
-    function handleClose(tab) {
-        if (getTab(tabs, tab.id)) {
-            onTabClose && onTabClose(tab.id);
-        }
-    }
-    function removeTab(tab) {
-        setTabs((tabs) => {
-            const _tabs = tabs.filter((_tab) => _tab.id !== tab.id);
-            setActiveKey((prevActiveKey) => {
-                if (prevActiveKey === tab.id) {
-                    return _tabs[0] && _tabs[0].id;
-                }
-                return prevActiveKey;
-            });
-            return _tabs;
-        });
-    }
-    function onPress(tab) {
-        setTab(tab.id);
-        onTabClick && onTabClick(tab.id);
-    }
-    return ((0, jsx_runtime_1.jsx)(TabsContainerElement, { ...props, children: (0, jsx_runtime_1.jsxs)(FileTabsContext.Provider, { value: {
-                addTab,
-                setTab,
-                removeTab,
-                setDirtyTab,
-                currentTab: activeKey,
-            }, children: [(0, jsx_runtime_1.jsx)(TabsPanelElement, { ref: tabsRef, "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, children: tabs.map((tab) => {
-                        return ((0, jsx_runtime_1.jsx)(Tab, { isClosable: isClosable, isDisabled: tab.id === activeKey || false, isDirty: tab.isDirty, onPress: () => onPress(tab), onClose: () => isClosable && handleClose(tab), children: tab.title }, tab.id));
-                    }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children })] }) }));
-}
-FileTabs.TabPane = function FileTabPane(allProps) {
-    let { id, title, isDirty, children, ...props } = allProps;
-    const { addTab, removeTab, currentTab, setDirtyTab } = (0, react_1.useContext)(FileTabsContext);
-    (0, react_1.useEffect)(() => {
-        const tabData = {
-            id,
-            title,
-            isDirty,
-        };
-        addTab(tabData);
-        return () => {
-            removeTab(tabData);
-        };
-    }, [id, title]);
-    (0, react_1.useEffect)(() => {
-        setDirtyTab(id, isDirty || false);
-    }, [isDirty]);
-    const isCurrent = id === currentTab;
-    return ((0, jsx_runtime_1.jsx)(Block_1.Block, { style: { display: isCurrent ? 'block' : 'none', maxWidth: '100%' }, flexGrow: 1, ...props, children: children }));
-};
-
-        

package/cjs/components/organisms/Modal/Modal.js

@@ -1,261 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = Modal;
-const react_1 = require("react");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_2 = require("react");
-const client_1 = require("react-dom/client");
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_transition_group_1 = require("react-transition-group");
-const Action_1 = require("../../actions/Action/Action");
-const Card_1 = require("../../content/Card/Card");
-const Flow_1 = require("../../layout/Flow");
-const Flex_1 = require("../../layout/Flex");
-const Block_1 = require("../../Block");
-const actions_1 = require("../../actions");
-const Space_1 = require("../../layout/Space");
-const Title_1 = require("../../content/Title");
-const icons_1 = require("../../../icons");
-const Overlay = styled_components_1.default.div `
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.4);
-  place-content: center;
-  place-items: center;
-  z-index: 1000;
-  display: none;
-  white-space: normal;
-
-  .cube-modal {
-    --enter-transition-time: 250ms;
-    --leave-transition-time: 160ms;
-    --base-translate: calc((50vh - 50%) / -3);
-    transform: translate(0, calc(var(--base-translate)));
-  }
-
-  &.cube-modal-transition-enter {
-    opacity: 0;
-    display: flex;
-
-    & .cube-modal {
-      transform: translate(0, calc(-32px + var(--base-translate))) scale(0.5);
-    }
-  }
-
-  &.cube-modal-transition-enter-active {
-    opacity: 1;
-    transition: all var(--enter-transition-time) cubic-bezier(0, 0.5, 0, 1);
-
-    & .cube-modal {
-      transform: translate(0, calc(var(--base-translate))) scale(1);
-      transition: all var(--enter-transition-time) cubic-bezier(0.5, 0.5, 0, 1);
-    }
-  }
-
-  &.cube-modal-transition-enter-done {
-    display: flex;
-  }
-
-  &.cube-modal-transition-exit {
-    opacity: 1;
-    display: flex;
-
-    & .cube-modal {
-      transform: translate(0, calc(var(--base-translate))) scale(1);
-    }
-  }
-
-  &.cube-modal-transition-exit-active {
-    opacity: 0;
-    transition: all var(--leave-transition-time) ease-in;
-
-    & .cube-modal {
-      transform: translate(0, calc(-32px + var(--base-translate))) scale(0.5);
-      transition: all var(--leave-transition-time) ease-in;
-    }
-  }
-
-  &.cube-modal-transition-exit-done {
-    display: none;
-  }
-`;
-/**
- * @deprecated Prefer using Dialog instead
- *
- * DEPRECATED Modal component
- * Designed after AntD Modal component and almost duplicate its API.
- * Use Dialog component instead
- */
-function Modal(allProps) {
-    let { title, isVisible, type, okType, isClosable, isLoading, children, okText, cancelText, width, onOk, onCancel, onClose, qa, isDisabled, ...props } = allProps;
-    isClosable = !!isClosable;
-    const [inProp, setInProp] = (0, react_2.useState)(false);
-    const [localLoading, setLocalLoading] = (0, react_2.useState)(false);
-    (0, react_2.useEffect)(() => {
-        setInProp(isVisible || false);
-    }, [isVisible]);
-    function cancel() {
-        if (onCancel) {
-            onCancel();
-        }
-        else if (onClose) {
-            onClose();
-        }
-    }
-    function close() {
-        if (!isVisible)
-            return;
-        if (onClose || onCancel) {
-            if (isClosable) {
-                // @ts-ignore
-                (onClose || onCancel)();
-            }
-            else if (onCancel) {
-                onCancel();
-            }
-        }
-    }
-    const onOverlayClick = (evt) => {
-        if (!evt || !evt.target)
-            return;
-        if (evt.target.classList.contains('cube-modal-overlay') && !isLoading) {
-            close();
-        }
-    };
-    (0, react_2.useEffect)(() => {
-        function handleKeyDown(evt) {
-            if (evt.key === 'Escape' && !isLoading) {
-                close();
-            }
-        }
-        window.addEventListener('keydown', handleKeyDown);
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-        };
-    }, []);
-    const handleOk = (0, react_2.useCallback)((arg) => {
-        setLocalLoading(true);
-        (async () => {
-            if (onOk) {
-                try {
-                    if ((await onOk(arg)) === false && (onClose || onCancel)) {
-                        // @ts-ignore
-                        (onClose || onCancel)();
-                    }
-                }
-                catch (e) {
-                }
-                finally {
-                    setLocalLoading(false);
-                }
-            }
-        })();
-    }, [onOk]);
-    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { in: inProp, timeout: 250, classNames: "cube-modal-transition", children: (0, jsx_runtime_1.jsx)(Overlay, { className: "cube-modal-overlay", onClick: onOverlayClick, children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { "data-qa": qa || 'Modal', className: "cube-modal", display: "flex", role: "region", color: "#dark.85", padding: "0", shadow: true, border: false, radius: "1x", width: `288px (100% - 32px) ${typeof width === 'number' ? `${width}px` : width || '360px'}`, style: { textAlign: 'left' }, ...props, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { placeContent: "space-between", padding: "2x 3x", border: "bottom", children: [typeof title === 'object' ? (title) : ((0, jsx_runtime_1.jsx)(Title_1.Title, { ellipsis: true, level: 4, flexGrow: 1, children: title })), isClosable ? ((0, jsx_runtime_1.jsx)(Action_1.Action, { qa: "ModalCloseButton", width: "3x", height: "3x", color: { '': '#dark-02', hovered: '#purple' }, outline: {
-                                    '': '#purple-03.0',
-                                    'focused & focus-visible': '#purple-03',
-                                }, label: "Close", onPress: onClose || onCancel, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { size: 16 }) })) : null] }), (0, jsx_runtime_1.jsxs)(Flow_1.Flow, { padding: "3x", gap: "3x", height: "max (100vh - 90px)", style: { overflow: 'auto' }, children: [typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(Block_1.Block, { children: children })) : (children), type !== 'info' && (onOk || onCancel) ? ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: "1.5x", children: [(0, jsx_runtime_1.jsx)(actions_1.Button, { "data-qa": 'ConfirmButton', isDisabled: isDisabled, type: "primary", theme: okType === 'danger' ? 'danger' : undefined, isLoading: isLoading || localLoading, onPress: handleOk, children: okText || 'OK' }), (0, jsx_runtime_1.jsx)(actions_1.Button, { "data-qa": 'CancelButton', isDisabled: isLoading, onPress: cancel, children: cancelText || (okText === 'Yes' ? 'No' : 'Cancel') })] })) : null, type === 'info' ? ((0, jsx_runtime_1.jsx)(Space_1.Space, { children: (0, jsx_runtime_1.jsx)(actions_1.Button, { "data-qa": 'OkButton', isDisabled: isDisabled, type: okType === 'danger' ? 'danger' : 'primary', onPress: close, children: okText || 'OK' }) })) : null] })] }) }) }));
-}
-let ID = 0;
-const modal = {
-    root: null,
-    items: [],
-    init() {
-        if (this.root)
-            return;
-        this.root = document.createElement('div');
-        // @ts-ignore
-        this.root.classList.add('cube-modal-container');
-        document.body.appendChild(this.root);
-        this._render([]);
-    },
-    render() {
-        this.init();
-        this._render();
-    },
-    _render(items) {
-        if (!items) {
-            items = this.items;
-        }
-        if (!this.root)
-            return;
-        const root = (0, client_1.createRoot)(this.root);
-        root.render(items.map((item) => {
-            const { id, onOk, onCancel, onClose, content, ...options } = item;
-            const wrapOnOk = async (arg) => {
-                onOk && (await onOk(arg));
-                this.resolve(item, arg);
-            };
-            const wrapOnCancel = () => {
-                onCancel && onCancel();
-                if (item.type === 'info') {
-                    this.resolve(item);
-                }
-                else {
-                    this.reject(item);
-                }
-            };
-            const wrapOnClose = () => {
-                onClose && onClose();
-                if (item.type === 'info') {
-                    this.resolve(item);
-                }
-                else {
-                    this.reject(item);
-                }
-            };
-            return ((0, react_1.createElement)(Modal, { ...options, key: id, onOk: wrapOnOk, onCancel: wrapOnCancel, onClose: wrapOnClose }, content));
-        }));
-    },
-    open(item) {
-        item.isVisible = false;
-        item.id = ++ID;
-        this.items.push(item);
-        this.render();
-        setTimeout(() => {
-            item.isVisible = true;
-            this.render();
-        });
-        return new Promise((resolve, reject) => {
-            item.resolve = resolve;
-            item.reject = reject;
-        });
-    },
-    close(item) {
-        item.isVisible = false;
-        this.render();
-        setTimeout(() => {
-            this.items = this.items.filter((modal) => item.id !== modal.id);
-            this.render();
-        }, 1000);
-    },
-    resolve(item, arg) {
-        item.resolve(arg);
-        this.close(item);
-    },
-    reject(item, arg) {
-        item.reject(arg);
-        this.close(item);
-    },
-};
-Modal.confirm = (options) => {
-    return modal.open({ type: 'confirm', ...options });
-};
-Modal.info = (options) => {
-    return modal.open({ type: 'info', ...options });
-};
-
-        

package/cjs/components/organisms/StatsCard/StatsCard.js

@@ -1,19 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatsCard = StatsCard;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Card_1 = require("../../content/Card/Card");
-const Title_1 = require("../../content/Title");
-const Text_1 = require("../../content/Text");
-function StatsCard({ title, value, suffix, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { display: "flex", placeContent: "space-between", gap: "1x", border: false, shadow: "0 2px 6px #dark.10", padding: "2.5x", ...props, children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { nowrap: true, level: 4, color: "#minor", preset: "default", children: title }), (0, jsx_runtime_1.jsxs)(Text_1.Text.Strong, { preset: "h3", children: [value, " ", suffix] })] }));
-}
-
-        

package/cjs/components/other/Base64Upload/Base64Upload.js

@@ -1,108 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Base64Upload = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const actions_1 = require("../../actions");
-const Block_1 = require("../../Block");
-const Text_1 = require("../../content/Text");
-const tasty_1 = require("../../../tasty");
-const DEFAULT_STYLES = {
-    display: 'inline-flex',
-    padding: '.75x 1x',
-    gap: '1x',
-    flow: 'row',
-    placeItems: 'center',
-    fill: '#white',
-    border: true,
-    preset: 't3',
-};
-exports.Base64Upload = (0, styled_components_1.default)((0, react_1.forwardRef)(function Base64Upload(allProps, ref) {
-    const { onInput, ...props } = allProps;
-    const styles = (0, tasty_1.extractStyles)(props, tasty_1.POSITION_STYLES, DEFAULT_STYLES);
-    const [file, setFile] = (0, react_1.useState)();
-    const [error, setError] = (0, react_1.useState)('');
-    function onInputFile(e) {
-        if (!e.target)
-            return;
-        const localFile = e.target.files[0];
-        const reader = new FileReader();
-        setError('');
-        if (!localFile)
-            return;
-        if (!localFile.name.endsWith('.json')) {
-            setError('Incorrect format. JSON file is required');
-            return;
-        }
-        reader.onload = function () {
-            /**
-             * @type {string}
-             */
-            const text = String(reader.result);
-            let base64text;
-            try {
-                JSON.parse(text);
-                base64text = btoa(text);
-            }
-            catch (e) {
-                setError('Invalid JSON file');
-                console.error(e);
-                return;
-            }
-            onInput &&
-                onInput({
-                    encoded: base64text,
-                    raw: JSON.parse(text),
-                });
-            setFile(localFile.name);
-        };
-        try {
-            reader.readAsText(localFile);
-        }
-        catch (e) {
-            setError('Invalid file');
-        }
-    }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(actions_1.Button, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: styles, children: [(0, jsx_runtime_1.jsx)(Block_1.Block, { radius: "round", fill: "#purple.10", color: "#dark-02", padding: ".5x 1x", children: "Choose file" }), (0, jsx_runtime_1.jsx)(Block_1.Block, { color: "#dark-04", children: file || 'No file selected' }), (0, jsx_runtime_1.jsx)("input", { type: "file", name: "base64", accept: ".json", onInput: onInputFile })] }), error && (0, jsx_runtime_1.jsx)(Text_1.Text.Danger, { color: "danger", children: error })] }));
-})) `
-  appearance: none;
-  cursor: pointer;
-  outline: none;
-
-  & input {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-  }
-
-  && {
-    border: var(--border-width) solid rgba(var(--dark-02-color-rgb), 0.1);
-  }
-
-  &&:not([data-is-hovered]) {
-    background: rgba(var(--purple-color), 0);
-  }
-
-  &&[data-is-hovered] {
-    background: rgba(var(--purple-color), 0.1);
-  }
-`;
-
-