@cube-dev/ui-kit 0.9.6 → 0.9.7

package/dist/cjs/components/forms/TextInput/TextInputBase.js

@@ -1,167 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextInputBase = exports.DEFAULT_INPUT_STYLES = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("@ant-design/icons");
-const utils_1 = require("@react-spectrum/utils");
-const react_1 = require("react");
-const Form_1 = require("../Form/Form");
-const interactions_1 = require("@react-aria/interactions");
-const provider_1 = require("../../../provider");
-const Base_1 = require("../../Base");
-const styles_1 = require("../../../utils/styles");
-const list_1 = require("../../../styles/list");
-const interactions_2 = require("../../../utils/interactions");
-const Prefix_1 = require("../../layout/Prefix");
-const Suffix_1 = require("../../layout/Suffix");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
-const FieldWrapper_1 = require("../FieldWrapper");
-const Space_1 = require("../../layout/Space");
-const Block_1 = require("../../Block");
-const react_2 = require("../../../utils/react");
-const WRAPPER_STYLES = {
-    display: 'grid',
-    position: 'relative',
-};
-const STYLE_LIST = [...list_1.POSITION_STYLES, ...list_1.DIMENSION_STYLES];
-const INPUT_STYLE_PROPS_LIST = [...list_1.BLOCK_STYLES, 'resize'];
-exports.DEFAULT_INPUT_STYLES = {
-    display: 'block',
-    width: 'initial 100% initial',
-    height: 'initial initial initial',
-    color: {
-        '': '#dark.85',
-        invalid: '#danger-text',
-        focused: '#dark.85',
-        disabled: '#dark.30',
-    },
-    fill: {
-        '': '#white',
-        disabled: '#dark.04',
-    },
-    border: {
-        '': true,
-        focused: true,
-        valid: '#success-text.50',
-        invalid: '#danger-text.50',
-        disabled: true,
-    },
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
-        'invalid & focused': '#danger.50',
-        'valid & focused': '#success.50',
-    },
-    transition: 'theme',
-    radius: true,
-    padding: {
-        '': '(1.25x - 1bw) 1x (1.25x - 1bw) (1.5x - 1bw)',
-        '[data-size="small"]': '(.75x - 1px) (1.5x - 1px)',
-    },
-    fontWeight: 400,
-    textAlign: 'left',
-    reset: 'input',
-    preset: 'default',
-    flexGrow: 1,
-    margin: 0,
-    resize: 'none',
-};
-function TextInputBase(props, ref) {
-    props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
-    let { qa, label, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, necessityLabel, validationState, message, description, prefix, isDisabled, multiLine, autoFocus, labelProps, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, wrapperStyles = {}, suffix, suffixPosition = 'before', wrapperRef, requiredMark = true, tooltip, isHidden, rows = 1, size, ...otherProps } = props;
-    let [suffixWidth, setSuffixWidth] = (0, react_1.useState)(0);
-    let [prefixWidth, setPrefixWidth] = (0, react_1.useState)(0);
-    let styles = (0, styles_1.extractStyles)(otherProps, STYLE_LIST);
-    let type = otherProps.type;
-    let contextStyles = (0, StylesProvider_1.useContextStyles)('Input', otherProps);
-    inputStyles = (0, styles_1.extractStyles)(otherProps, INPUT_STYLE_PROPS_LIST, {
-        ...exports.DEFAULT_INPUT_STYLES,
-        ...contextStyles,
-        ...inputStyles,
-    });
-    wrapperStyles = {
-        ...WRAPPER_STYLES,
-        ...wrapperStyles,
-    };
-    if (prefix) {
-        inputStyles.paddingLeft = `${prefixWidth}px`;
-    }
-    if (validationState || isLoading || suffix) {
-        inputStyles.paddingRight = `${suffixWidth}px`;
-    }
-    let ElementType = multiLine ? 'textarea' : 'input';
-    let { isFocused, focusProps } = (0, interactions_2.useFocus)({ isDisabled });
-    let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
-    let domRef = (0, react_1.useRef)(null);
-    let defaultInputRef = (0, react_1.useRef)(null);
-    inputRef = inputRef || defaultInputRef;
-    // Expose imperative interface for ref
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        ...(0, utils_1.createFocusableRef)(domRef, inputRef),
-        select() {
-            if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
-                inputRef.current.select();
-            }
-        },
-        getInputElement() {
-            return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
-        },
-    }));
-    let isInvalid = validationState === 'invalid';
-    let validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
-    let validation = (0, react_1.cloneElement)(validationIcon);
-    suffix =
-        typeof suffix === 'string' ? ((0, jsx_runtime_1.jsx)(Block_1.Block, { padding: "1x right", children: suffix }, void 0)) : (suffix);
-    // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270
-    if (!(inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder)) {
-        if (!inputProps) {
-            inputProps = {};
-        }
-        inputProps.placeholder = ' ';
-    }
-    let textField = ((0, jsx_runtime_1.jsxs)(Base_1.Base, { ref: wrapperRef, qa: `${qa || 'TextInput'}Wrapper`, mods: {
-            invalid: isInvalid,
-            valid: validationState === 'valid',
-            loadable: !!loadingIndicator,
-            multiline: multiLine,
-        }, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [(0, jsx_runtime_1.jsx)(Base_1.Base, { qa: qa || 'TextInput', as: ElementType, ...(0, react_2.mergeProps)(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: {
-                    invalid: isInvalid,
-                    valid: validationState === 'valid',
-                    disabled: isDisabled,
-                    hovered: isHovered,
-                    focused: isFocused,
-                }, style: {
-                    WebkitTextSecurity: multiLine && type === 'password' ? 'disc' : 'initial',
-                }, autoFocus: autoFocus, "data-size": size, styles: inputStyles }, void 0), (0, jsx_runtime_1.jsx)(Prefix_1.Prefix, { padding: "0 1x 0 1.5x", onWidthChange: setPrefixWidth, opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", children: typeof prefix === 'string' ? ((0, jsx_runtime_1.jsx)(Block_1.Block, { padding: "1x left", children: prefix }, void 0)) : (prefix) }, void 0), (0, jsx_runtime_1.jsxs)(Suffix_1.Suffix, { padding: ".5x left", onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: false, padding: `0 ${suffix ? '1x' : '1.5x'} 0 0`, children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0)] }, void 0)) : null, suffixPosition === 'after' ? suffix : null] }, void 0)] }, void 0));
-    return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
-            labelPosition,
-            label,
-            styles,
-            isRequired,
-            labelStyles,
-            necessityIndicator,
-            necessityLabel,
-            labelProps,
-            isDisabled,
-            validationState,
-            message,
-            description,
-            requiredMark,
-            tooltip,
-            isHidden,
-            Component: textField,
-            ref: domRef,
-        } }, void 0));
-}
-const _TextInputBase = (0, react_1.forwardRef)(TextInputBase);
-exports.TextInputBase = _TextInputBase;
-
-        

package/dist/cjs/components/forms/index.js

@@ -1,30 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileInput = exports.PasswordInput = exports.TextArea = exports.NumberInput = exports.TextInput = exports.Input = void 0;
-const TextInput_1 = require("./TextInput/TextInput");
-Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return TextInput_1.TextInput; } });
-const PasswordInput_1 = require("./PasswordInput/PasswordInput");
-Object.defineProperty(exports, "PasswordInput", { enumerable: true, get: function () { return PasswordInput_1.PasswordInput; } });
-const NumberInput_1 = require("./NumberInput/NumberInput");
-Object.defineProperty(exports, "NumberInput", { enumerable: true, get: function () { return NumberInput_1.NumberInput; } });
-const FileInput_1 = require("./FileInput/FileInput");
-Object.defineProperty(exports, "FileInput", { enumerable: true, get: function () { return FileInput_1.FileInput; } });
-const TextArea_1 = require("./TextArea/TextArea");
-Object.defineProperty(exports, "TextArea", { enumerable: true, get: function () { return TextArea_1.TextArea; } });
-const Input = Object.assign(TextInput_1.TextInput, {
-    Text: TextInput_1.TextInput,
-    Password: PasswordInput_1.PasswordInput,
-    Number: NumberInput_1.NumberInput,
-    TextArea: TextArea_1.TextArea,
-    File: FileInput_1.FileInput,
-});
-exports.Input = Input;
-
-        

package/dist/cjs/components/layout/Flex.js

@@ -1,26 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Flex = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Base_1 = require("../Base");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
-const DEFAULT_STYLES = {
-    display: 'flex',
-    flow: 'row',
-};
-exports.Flex = (0, react_1.forwardRef)((props, ref) => {
-    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES, DEFAULT_STYLES);
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
-});
-
-        

package/dist/cjs/components/layout/Flow.js

@@ -1,27 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Flow = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Base_1 = require("../Base");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
-const DEFAULT_STYLES = {
-    display: 'block',
-    flow: 'column',
-};
-const STYLE_PROPS = list_1.CONTAINER_STYLES;
-exports.Flow = (0, react_1.forwardRef)((props, ref) => {
-    const styles = (0, styles_1.extractStyles)(props, STYLE_PROPS, DEFAULT_STYLES);
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
-});
-
-        

package/dist/cjs/components/layout/Grid.js

@@ -1,33 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Grid = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Base_1 = require("../Base");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
-const DEFAULT_STYLES = {
-    display: 'grid',
-    flow: 'row',
-    gap: '@(column-gap, 0)',
-};
-const PROP_MAP = {
-    template: 'gridTemplate',
-    columns: 'gridColumns',
-    rows: 'gridRows',
-    areas: 'gridAreas',
-};
-exports.Grid = (0, react_1.forwardRef)((props, ref) => {
-    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES, DEFAULT_STYLES, PROP_MAP);
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
-});
-
-        

package/dist/cjs/components/layout/Prefix.js

@@ -1,46 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Prefix = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Base_1 = require("../Base");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
-const react_2 = require("../../utils/react");
-const DEFAULT_STYLES = {
-    position: 'absolute',
-    display: 'grid',
-    placeContent: 'stretch',
-    placeItems: 'center',
-    flow: 'column',
-    gap: 0,
-    left: '@prefix-gap',
-    top: '@prefix-gap',
-    bottom: '@prefix-gap',
-    color: '#dark.75',
-    height: '(100% - (2 * @prefix-gap))',
-};
-exports.Prefix = (0, react_1.forwardRef)((allProps, outerRef) => {
-    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
-    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES, DEFAULT_STYLES);
-    const ref = (0, react_2.useCombinedRefs)(outerRef);
-    (0, react_1.useEffect)(() => {
-        if ((ref === null || ref === void 0 ? void 0 : ref.current) && onWidthChange) {
-            onWidthChange(ref.current.offsetWidth);
-        }
-    }, [children, ref, onWidthChange]);
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, style: {
-            // @ts-ignore
-            '--prefix-gap': (0, styles_1.parseStyle)(outerGap).value,
-        }, children: children }, void 0));
-});
-
-        

package/dist/cjs/components/layout/Space.js

@@ -1,35 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Space = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Base_1 = require("../Base");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
-const DEFAULT_STYLES = {
-    display: 'flex',
-    gap: true,
-};
-exports.Space = (0, react_1.forwardRef)(function Space(props, ref) {
-    const flow = props.direction
-        ? props.direction === 'vertical'
-            ? 'column'
-            : 'row'
-        : props.flow || 'row';
-    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES, {
-        ...DEFAULT_STYLES,
-        flow,
-        alignItems: flow === 'row' ? 'center' : 'stretch',
-    });
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
-});
-
-        

package/dist/cjs/components/layout/Suffix.js

@@ -1,45 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Suffix = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Base_1 = require("../Base");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
-const react_2 = require("../../utils/react");
-const DEFAULT_STYLES = {
-    position: 'absolute',
-    display: 'grid',
-    placeContent: 'stretch',
-    placeItems: 'center',
-    flow: 'column',
-    gap: 0,
-    right: '@suffix-gap',
-    top: '@suffix-gap',
-    bottom: '@suffix-gap',
-    color: '#dark.75',
-    height: '(100% - (2 * @suffix-gap))',
-};
-exports.Suffix = (0, react_1.forwardRef)((allProps, outerRef) => {
-    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
-    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES, DEFAULT_STYLES);
-    const ref = (0, react_2.useCombinedRefs)(outerRef);
-    (0, react_1.useEffect)(() => {
-        if (ref && ref.current && onWidthChange) {
-            onWidthChange(ref.current.offsetWidth);
-        }
-    }, [children, ref, onWidthChange]);
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, style: {
-            '--suffix-gap': (0, styles_1.parseStyle)(outerGap).value,
-        }, children: children }, void 0));
-});
-
-        

package/dist/cjs/components/navigation/LegacyTabs/LegacyTabs.js

@@ -1,255 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LegacyTabs = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Block_1 = require("../../Block");
-const Space_1 = require("../../layout/Space");
-const Flex_1 = require("../../layout/Flex");
-const actions_1 = require("../../actions");
-const LegacyTabsContext = (0, react_1.createContext)({
-    addTab() { },
-    removeTab() { },
-    setTab() { },
-    changeTab() { },
-});
-const TAB_STYLES = {
-    color: {
-        '': '#dark',
-        'selected, hovered': '#purple-text',
-        disabled: '#dark.50',
-    },
-    fill: '#purple.0',
-    textAlign: 'center',
-    fontWeight: 600,
-    padding: '(1x - 1px) (1x - 1px)',
-    radius: '1r 1r 0 0',
-    border: 0,
-};
-const TAB_CSS = `
-&::before {
-  --outline-size: 0px;
-  content: '';
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  box-shadow: inset 0 calc(-1 * var(--outline-size)) 0 var(--purple-color);
-  pointer-events: none;
-  transition: opacity linear .2s, box-shadow linear .2s;
-}
-&[data-is-selected]::before {
-  --outline-size: 2px;
-}
-&:not([data-is-selected]):not([disabled])[data-is-hovered]::before {
-  --outline-size: 1px;
-}
-`;
-const TABS_PANEL_CSS = `
-  position: relative;
-  overflow: auto hidden;
-  top: 1px;
-  white-space: nowrap;
-
-  ::-webkit-scrollbar-track {
-    background: var(--grey-light-color);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 1px;
-    background: var(--dark-04-color);
-    background-clip: padding-box;
-  }
-
-  ::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-
-  ::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
-  }
-`;
-const TABS_CONTAINER_CSS = `
-  position: relative;
-
-  &::before {
-    content: '';
-    display: block;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    width: 32px;
-    height: 37px;
-    transition: all .15s linear;
-    background-image: linear-gradient(
-      to left,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1)
-    );
-    z-index: 10;
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 32px;
-    height: 37px;
-    pointer-events: none;
-    transition: all .15s linear;
-    background-image: linear-gradient(
-      to right,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1)
-    );
-    z-index: 10;
-  }
-
-  &[data-is-left-fade]::before, &[data-is-right-fade]::after {
-    opacity: 1;
-  }
-`;
-const Tab = ({ isSelected, isHidden, onClose, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(actions_1.Button, { type: "tab", styles: TAB_STYLES, css: TAB_CSS, isSelected: isSelected, isHidden: isHidden, ...props }, void 0));
-};
-function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, extra, 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_1.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 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 changeTab(tab) {
-        setTabs((tabs) => {
-            const existTab = tabs.find((_tab) => _tab.id === tab.id);
-            if (existTab) {
-                Object.assign(existTab, tab);
-            }
-            return [...tabs];
-        });
-    }
-    function onPress(tab) {
-        onTabClick && onTabClick(tab.id);
-        setTab(tab.id);
-    }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flow: "column", height: "max 100%", width: "max 100%", "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, css: TABS_CONTAINER_CSS, ...props, children: (0, jsx_runtime_1.jsxs)(LegacyTabsContext.Provider, { value: {
-                addTab,
-                setTab,
-                removeTab,
-                changeTab,
-                currentTab: activeKey,
-            }, children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: ".5x", placeContent: "center space-between", children: [(0, jsx_runtime_1.jsx)(Space_1.Space, { ref: tabsRef, gap: "1x", flexShrink: 0, css: TABS_PANEL_CSS, children: tabs.map((tab) => {
-                                return ((0, jsx_runtime_1.jsx)(Tab, { "data-qa": tab.qa, onPress: () => onPress(tab), isSelected: tab.id === activeKey || false, isDisabled: tab.isDisabled, isHidden: tab.isHidden, children: tab.title }, tab.id));
-                            }) }, void 0), extra] }, void 0), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children }, void 0)] }, void 0) }, void 0));
-}
-exports.LegacyTabs = LegacyTabs;
-LegacyTabs.TabPane = function TabPane({ id, title, qa, isHidden, isDisabled, children, ...props }) {
-    const { addTab, removeTab, changeTab, currentTab } = (0, react_1.useContext)(LegacyTabsContext);
-    (0, react_1.useEffect)(() => {
-        const tabData = {
-            id,
-            qa,
-            title,
-            isDisabled,
-            isHidden,
-        };
-        addTab(tabData);
-        return () => {
-            removeTab(tabData);
-        };
-    }, [id]);
-    (0, react_1.useEffect)(() => {
-        changeTab({
-            id,
-            qa,
-            title,
-            isDisabled,
-            isHidden,
-        });
-    }, [title, isDisabled, isHidden]);
-    const isCurrent = id === currentTab;
-    return ((0, jsx_runtime_1.jsx)(Block_1.Block, { style: { display: isCurrent ? 'block' : 'none' }, flexGrow: 1, ...props, children: children }, void 0));
-};
-
-