@cube-dev/ui-kit 0.9.11 → 0.10.2

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -15,23 +15,31 @@ 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 tasty_1 = require("../../../tasty");
+const interactions_2 = require("../../../utils/react/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'];
+const InputWrapperElement = (0, tasty_1.tasty)({
+    styles: {
+        display: 'grid',
+        position: 'relative',
+        Prefix: {
+            padding: {
+                '': '0 1x 0 1.5x',
+                'text-prefix': '0 1x 0 2.5x',
+            },
+        },
+        Suffix: {
+            padding: '.5x left',
+        },
+    },
+});
+const STYLE_LIST = [...tasty_1.POSITION_STYLES, ...tasty_1.DIMENSION_STYLES];
+const INPUT_STYLE_PROPS_LIST = [...tasty_1.BLOCK_STYLES, 'resize'];
 exports.DEFAULT_INPUT_STYLES = {
     display: 'block',
     width: 'initial 100% initial',
@@ -73,24 +81,18 @@ exports.DEFAULT_INPUT_STYLES = {
     margin: 0,
     resize: 'none',
 };
+const InputElement = (0, tasty_1.tasty)({
+    styles: exports.DEFAULT_INPUT_STYLES,
+});
 function TextInputBase(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
     let { qa, label, extra, 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 styles = (0, tasty_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,
-    };
+    inputStyles = (0, tasty_1.extractStyles)(otherProps, INPUT_STYLE_PROPS_LIST, inputStyles);
     if (prefix) {
         inputStyles.paddingLeft = `${prefixWidth}px`;
     }
@@ -127,12 +129,13 @@ function TextInputBase(props, ref) {
         }
         inputProps.placeholder = ' ';
     }
-    let textField = ((0, jsx_runtime_1.jsxs)(Base_1.Base, { ref: wrapperRef, qa: `${qa || 'TextInput'}Wrapper`, mods: {
+    let textField = ((0, jsx_runtime_1.jsxs)(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', 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: {
+            'text-prefix': prefix === 'string',
+        }, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [(0, jsx_runtime_1.jsx)(InputElement, { qa: "Input", as: ElementType, ...(0, react_2.mergeProps)(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: {
                     invalid: isInvalid,
                     valid: validationState === 'valid',
                     disabled: isDisabled,
@@ -140,7 +143,7 @@ function TextInputBase(props, ref) {
                     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));
+                }, autoFocus: autoFocus, "data-size": size, styles: inputStyles }, void 0), (0, jsx_runtime_1.jsx)(Prefix_1.Prefix, { onWidthChange: setPrefixWidth, opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", children: prefix }, void 0), (0, jsx_runtime_1.jsxs)(Suffix_1.Suffix, { 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,

package/cjs/components/forms/index.js

@@ -1,30 +1,28 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 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;
+__exportStar(require("./Input"), exports);
+__exportStar(require("./TextInput/TextInput"), exports);
+__exportStar(require("./PasswordInput/PasswordInput"), exports);
+__exportStar(require("./NumberInput/NumberInput"), exports);
+__exportStar(require("./FileInput/FileInput"), exports);
+__exportStar(require("./TextArea/TextArea"), exports);
+__exportStar(require("./Form"), exports);
 
         

package/cjs/components/layout/Flex.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -10,17 +10,16 @@ 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',
-};
+const tasty_1 = require("../../tasty");
+const FlexElement = (0, tasty_1.tasty)({
+    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));
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
+    return ((0, jsx_runtime_1.jsx)(FlexElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/layout/Flow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -10,18 +10,17 @@ 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;
+const tasty_1 = require("../../tasty");
+const FlowElement = (0, tasty_1.tasty)({
+    styles: {
+        display: 'block',
+        flow: 'column',
+    },
+});
+const STYLE_PROPS = tasty_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));
+    const styles = (0, tasty_1.extractStyles)(props, STYLE_PROPS);
+    return ((0, jsx_runtime_1.jsx)(FlowElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/layout/Grid.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -10,15 +10,13 @@ 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 tasty_1 = require("../../tasty");
+const GridElement = (0, tasty_1.tasty)({
+    styles: {
+        display: 'grid',
+        flow: 'row',
+    },
+});
 const PROP_MAP = {
     template: 'gridTemplate',
     columns: 'gridColumns',
@@ -26,8 +24,8 @@ const PROP_MAP = {
     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));
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES, undefined, PROP_MAP);
+    return ((0, jsx_runtime_1.jsx)(GridElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/layout/Prefix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -10,36 +10,36 @@ 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 tasty_1 = require("../../tasty");
 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))',
-};
+const PrefixElement = (0, tasty_1.tasty)({
+    element: 'Prefix',
+    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 styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_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: {
+    return ((0, jsx_runtime_1.jsx)(PrefixElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, style: {
             // @ts-ignore
-            '--prefix-gap': (0, styles_1.parseStyle)(outerGap).value,
+            '--prefix-gap': (0, tasty_1.parseStyle)(outerGap).value,
         }, children: children }, void 0));
 });
 

package/cjs/components/layout/Space.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -10,26 +10,28 @@ 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,
-};
+const tasty_1 = require("../../tasty");
+const SpaceElement = (0, tasty_1.tasty)({
+    styles: {
+        display: 'flex',
+        gap: true,
+        flow: {
+            '': 'row',
+            vertical: 'column',
+        },
+        alignItems: {
+            '': 'center',
+            vertical: 'stretch',
+        },
+    },
+});
 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));
+    const { mods, direction, ...otherProps } = props;
+    const styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
+    return ((0, jsx_runtime_1.jsx)(SpaceElement, { ...(0, tasty_1.filterBaseProps)(otherProps, { eventProps: true }), mods: {
+            vertical: direction === 'vertical',
+            ...mods,
+        }, styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/layout/Suffix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -10,35 +10,35 @@ 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 tasty_1 = require("../../tasty");
 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))',
-};
+const SuffixElement = (0, tasty_1.tasty)({
+    element: 'Suffix',
+    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 styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_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,
+    return ((0, jsx_runtime_1.jsx)(SuffixElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, style: {
+            '--suffix-gap': (0, tasty_1.parseStyle)(outerGap).value,
         }, children: children }, void 0));
 });
 

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

@@ -1,11 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * 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.LegacyTabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -14,47 +17,59 @@ const Block_1 = require("../../Block");
 const Space_1 = require("../../layout/Space");
 const Flex_1 = require("../../layout/Flex");
 const actions_1 = require("../../actions");
+const tasty_1 = require("../../../tasty");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Flow_1 = require("../../layout/Flow");
 const LegacyTabsContext = (0, react_1.createContext)({
     addTab() { },
     removeTab() { },
     setTab() { },
     changeTab() { },
 });
-const TAB_STYLES = {
-    color: {
-        '': '#dark',
-        'selected, hovered': '#purple-text',
-        disabled: '#dark.50',
+const TabElement = (0, tasty_1.tasty)(actions_1.Button, {
+    type: '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,
     },
-    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 StyledTabElement = (0, styled_components_1.default)(TabElement) `
+  &::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 0.2s, box-shadow linear 0.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 = `
+const TabsPanelElement = (0, tasty_1.tasty)(Space_1.Space, {
+    styles: {
+        gap: '1x',
+        flexShrink: 0,
+    },
+});
+const StyledTabsPanelElement = (0, styled_components_1.default)(TabsPanelElement) `
   position: relative;
   overflow: auto hidden;
   top: 1px;
@@ -79,7 +94,14 @@ const TABS_PANEL_CSS = `
     height: 3px;
   }
 `;
-const TABS_CONTAINER_CSS = `
+const TabsContainerElement = (0, tasty_1.tasty)(Flow_1.Flow, {
+    styles: {
+        flow: 'column',
+        height: 'max 100%',
+        width: 'max 100%',
+    },
+});
+const StyledTabsContainerElement = (0, styled_components_1.default)(TabsContainerElement) `
   position: relative;
 
   &::before {
@@ -92,7 +114,7 @@ const TABS_CONTAINER_CSS = `
     pointer-events: none;
     width: 32px;
     height: 37px;
-    transition: all .15s linear;
+    transition: all 0.15s linear;
     background-image: linear-gradient(
       to left,
       rgba(255, 255, 255, 0),
@@ -111,7 +133,7 @@ const TABS_CONTAINER_CSS = `
     width: 32px;
     height: 37px;
     pointer-events: none;
-    transition: all .15s linear;
+    transition: all 0.15s linear;
     background-image: linear-gradient(
       to right,
       rgba(255, 255, 255, 0),
@@ -120,12 +142,13 @@ const TABS_CONTAINER_CSS = `
     z-index: 10;
   }
 
-  &[data-is-left-fade]::before, &[data-is-right-fade]::after {
+  &[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));
+    return ((0, jsx_runtime_1.jsx)(StyledTabElement, { 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);
@@ -213,13 +236,13 @@ function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, on
         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: {
+    return ((0, jsx_runtime_1.jsx)(StyledTabsContainerElement, { "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, ...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) => {
+            }, children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: ".5x", placeContent: "center space-between", children: [(0, jsx_runtime_1.jsx)(StyledTabsPanelElement, { ref: tabsRef, 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));
 }

package/cjs/components/navigation/Link/Link.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */