@cube-dev/ui-kit 0.12.3 → 0.12.4

package/cjs/components/forms/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -10,11 +10,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PasswordInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const textfield_1 = require("@react-aria/textfield");
+const icons_1 = require("@ant-design/icons");
 const TextInputBase_1 = require("../TextInput/TextInputBase");
 const provider_1 = require("../../../provider");
-const textfield_1 = require("@react-aria/textfield");
 const actions_1 = require("../../actions");
-const icons_1 = require("@ant-design/icons");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
 function PasswordInput(props, ref) {
     props = (0, nullableValue_1.castNullableStringValue)(props);
@@ -28,8 +28,8 @@ function PasswordInput(props, ref) {
     const toggleType = (0, react_1.useCallback)((e) => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
-    const wrappedSuffix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, (0, jsx_runtime_1.jsx)(actions_1.Button, { type: "neutral", htmlType: "button", onPress: toggleType, placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", excludeFromTabOrder: true, icon: type === 'password' ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}, void 0) }, void 0)] }, void 0));
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }, void 0));
+    const wrappedSuffix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, (0, jsx_runtime_1.jsx)(actions_1.Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}, void 0), onPress: toggleType }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }, void 0));
 }
 /**
  * PasswordInputs are password inputs that allow users to input passwords or code entries

package/cjs/components/forms/RadioGroup/Radio.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -13,15 +13,15 @@ const utils_1 = require("@react-spectrum/utils");
 const react_1 = require("react");
 const interactions_1 = require("@react-aria/interactions");
 const radio_1 = require("@react-aria/radio");
-const context_1 = require("./context");
 const tasty_1 = require("../../../tasty");
 const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const provider_1 = require("../../../provider");
 const Label_1 = require("../Label");
 const HiddenInput_1 = require("../../HiddenInput");
-const RadioGroup_1 = require("./RadioGroup");
 const Form_1 = require("../Form");
+const RadioGroup_1 = require("./RadioGroup");
+const context_1 = require("./context");
 const RadioWrapperElement = (0, tasty_1.tasty)({
     as: 'label',
     qa: 'RadioWrapper',
@@ -145,7 +145,7 @@ function Radio(props, ref) {
             invalid: validationState === 'invalid',
             hovered: isHovered,
             button: isButton,
-        }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...(0, react_2.mergeProps)(inputProps, focusProps), isButton: isButton, ref: inputRef }, void 0), (0, jsx_runtime_1.jsx)(RadioElement, { mods: {
+        }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef, isButton: isButton }, void 0), (0, jsx_runtime_1.jsx)(RadioElement, { mods: {
                     checked: inputProps.checked,
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
@@ -160,7 +160,7 @@ function Radio(props, ref) {
 }
 function RadioButton(props, ref) {
     const Radio = _Radio;
-    return (0, jsx_runtime_1.jsx)(Radio, { ...props, type: "button", ref: ref }, void 0);
+    return (0, jsx_runtime_1.jsx)(Radio, { ...props, ref: ref, type: "button" }, void 0);
 }
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.

package/cjs/components/forms/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -11,14 +11,14 @@ exports.RadioGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("@react-spectrum/utils");
-const provider_1 = require("../../../provider");
 const radio_1 = require("@react-aria/radio");
 const radio_2 = require("@react-stately/radio");
+const provider_1 = require("../../../provider");
 const Form_1 = require("../Form");
-const context_1 = require("./context");
 const tasty_1 = require("../../../tasty");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
+const context_1 = require("./context");
 const RadioGroupElement = (0, tasty_1.tasty)({
     qa: 'RadioGroup',
     styles: {

package/cjs/components/forms/RadioGroup/context.js

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

package/cjs/components/forms/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -29,7 +29,7 @@ const ClearButton = (0, tasty_1.tasty)(actions_1.Button, {
         placeSelf: 'stretch',
     },
 });
-exports.SearchInput = (0, react_1.forwardRef)((props, ref) => {
+exports.SearchInput = (0, react_1.forwardRef)(function SearchInput(props, ref) {
     props = (0, nullableValue_1.castNullableStringValue)(props);
     props = (0, provider_1.useProviderProps)(props);
     let { isClearable, value, validationState } = props;
@@ -44,7 +44,7 @@ exports.SearchInput = (0, react_1.forwardRef)((props, ref) => {
     }, [combinedRef, value]);
     let state = (0, searchfield_1.useSearchFieldState)(props);
     let { inputProps, clearButtonProps } = (0, searchfield_2.useSearchField)(props, state, inputRef);
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { inputProps: inputProps, ref: ref, inputRef: inputRef, type: "search", icon: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}, void 0), suffixPosition: "after", suffix: isClearable &&
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}, void 0), suffixPosition: "after", suffix: isClearable &&
             state.value !== '' &&
             !props.isReadOnly && ((0, jsx_runtime_1.jsx)(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...(0, mapProps_1.ariaToCubeButtonProps)(clearButtonProps) }, void 0)), ...props }, void 0));
 });

package/cjs/components/forms/Switch/Switch.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -14,13 +14,13 @@ const react_1 = require("react");
 const switch_1 = require("@react-aria/switch");
 const interactions_1 = require("@react-aria/interactions");
 const toggle_1 = require("@react-stately/toggle");
+const icons_1 = require("@ant-design/icons");
 const provider_1 = require("../../../provider");
 const tasty_1 = require("../../../tasty");
 const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const HiddenInput_1 = require("../../HiddenInput");
 const Label_1 = require("../Label");
-const icons_1 = require("@ant-design/icons");
 const Form_1 = require("../Form/Form");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");

package/cjs/components/forms/TextArea/TextArea.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -10,10 +10,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const TextInputBase_1 = require("../TextInput/TextInputBase");
 const utils_1 = require("@react-stately/utils");
-const provider_1 = require("../../../provider");
 const textfield_1 = require("@react-aria/textfield");
+const TextInputBase_1 = require("../TextInput/TextInputBase");
+const provider_1 = require("../../../provider");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
 const react_2 = require("../../../utils/react");
 function TextArea(props, ref) {
@@ -49,7 +49,7 @@ function TextArea(props, ref) {
         onChange: (0, react_2.chain)(onChange, setInputValue),
         inputElementType: 'textarea',
     }, inputRef);
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ...otherProps, ref: ref, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, multiLine: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }, void 0));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ...otherProps, ref: ref, multiLine: true, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }, void 0));
 }
 /**
  * TextInputs are text inputs that allow users to input custom text entries

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -10,16 +10,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const TextInputBase_1 = require("./TextInputBase");
-const provider_1 = require("../../../provider");
 const textfield_1 = require("@react-aria/textfield");
+const provider_1 = require("../../../provider");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
+const TextInputBase_1 = require("./TextInputBase");
 exports.TextInput = (0, react_1.forwardRef)(function TextInput(props, ref) {
     (0, nullableValue_1.castNullableStringValue)(props);
     props = (0, provider_1.useProviderProps)(props);
     let inputRef = (0, react_1.useRef)(null);
     let { labelProps, inputProps } = (0, textfield_1.useTextField)(props, inputRef);
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ...props, labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef }, void 0));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ...props, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef }, void 0));
 });
 /**
  * TextInputs are text inputs that allow users to input custom text entries

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -12,8 +12,8 @@ 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 Form_1 = require("../Form/Form");
 const provider_1 = require("../../../provider");
 const tasty_1 = require("../../../tasty");
 const interactions_2 = require("../../../utils/react/interactions");

package/cjs/components/forms/index.js

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

package/cjs/components/layout/Flex.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -17,9 +17,9 @@ const FlexElement = (0, tasty_1.tasty)({
         flow: 'row',
     },
 });
-exports.Flex = (0, react_1.forwardRef)((props, ref) => {
+exports.Flex = (0, react_1.forwardRef)(function Flex(props, ref) {
     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));
+    return ((0, jsx_runtime_1.jsx)(FlexElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/cjs/components/layout/Flow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -18,9 +18,9 @@ const FlowElement = (0, tasty_1.tasty)({
     },
 });
 const STYLE_PROPS = tasty_1.CONTAINER_STYLES;
-exports.Flow = (0, react_1.forwardRef)((props, ref) => {
+exports.Flow = (0, react_1.forwardRef)(function Flow(props, ref) {
     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));
+    return ((0, jsx_runtime_1.jsx)(FlowElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/cjs/components/layout/Grid.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -23,9 +23,9 @@ const PROP_MAP = {
     rows: 'gridRows',
     areas: 'gridAreas',
 };
-exports.Grid = (0, react_1.forwardRef)((props, ref) => {
+exports.Grid = (0, react_1.forwardRef)(function Grid(props, ref) {
     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));
+    return ((0, jsx_runtime_1.jsx)(GridElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/cjs/components/layout/Prefix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -28,7 +28,7 @@ const PrefixElement = (0, tasty_1.tasty)({
         height: '(100% - (2 * @prefix-gap))',
     },
 });
-exports.Prefix = (0, react_1.forwardRef)((allProps, outerRef) => {
+exports.Prefix = (0, react_1.forwardRef)(function Prefix(allProps, outerRef) {
     let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
     const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
     const ref = (0, react_2.useCombinedRefs)(outerRef);
@@ -37,7 +37,7 @@ exports.Prefix = (0, react_1.forwardRef)((allProps, outerRef) => {
             onWidthChange(ref.current.offsetWidth);
         }
     }, [children, ref, onWidthChange]);
-    return ((0, jsx_runtime_1.jsx)(PrefixElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, style: {
+    return ((0, jsx_runtime_1.jsx)(PrefixElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: styles, style: {
             // @ts-ignore
             '--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.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -28,10 +28,10 @@ const SpaceElement = (0, tasty_1.tasty)({
 exports.Space = (0, react_1.forwardRef)(function Space(props, ref) {
     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: {
+    return ((0, jsx_runtime_1.jsx)(SpaceElement, { ...(0, tasty_1.filterBaseProps)(otherProps, { eventProps: true }), ref: ref, mods: {
             vertical: direction === 'vertical' || otherProps.flow === 'column',
             ...mods,
-        }, styles: styles, ref: ref }, void 0));
+        }, styles: styles }, void 0));
 });
 
         

package/cjs/components/layout/Suffix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -28,7 +28,7 @@ const SuffixElement = (0, tasty_1.tasty)({
         height: '(100% - (2 * @suffix-gap))',
     },
 });
-exports.Suffix = (0, react_1.forwardRef)((allProps, outerRef) => {
+exports.Suffix = (0, react_1.forwardRef)(function Suffix(allProps, outerRef) {
     let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
     const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
     const ref = (0, react_2.useCombinedRefs)(outerRef);
@@ -37,7 +37,7 @@ exports.Suffix = (0, react_1.forwardRef)((allProps, outerRef) => {
             onWidthChange(ref.current.offsetWidth);
         }
     }, [children, ref, onWidthChange]);
-    return ((0, jsx_runtime_1.jsx)(SuffixElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, style: {
+    return ((0, jsx_runtime_1.jsx)(SuffixElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: styles, style: {
             '--suffix-gap': (0, tasty_1.parseStyle)(outerGap).value,
         }, children: children }, void 0));
 });

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -13,12 +13,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LegacyTabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
 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 react_2 = require("../../../utils/react");
 const LegacyTabsContext = (0, react_1.createContext)({
@@ -148,9 +148,9 @@ const StyledTabsContainerElement = (0, styled_components_1.default)(TabsContaine
     opacity: 1;
   }
 `;
-const Tab = ({ isSelected, isHidden, onClose, ...props }) => {
+function Tab({ isSelected, isHidden, onClose, ...props }) {
     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);
     const [tabs, setTabs] = (0, react_1.useState)([]);
@@ -244,7 +244,7 @@ function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, on
                 changeTab,
                 currentTab: activeKey,
             }, 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));
+                                return ((0, jsx_runtime_1.jsx)(Tab, { "data-qa": tab.qa, isSelected: tab.id === activeKey || false, isDisabled: tab.isDisabled, isHidden: tab.isHidden, onPress: () => onPress(tab), 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;

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -11,7 +11,7 @@ exports.Link = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const actions_1 = require("../../actions");
-exports.Link = (0, react_1.forwardRef)((props, ref) => {
+exports.Link = (0, react_1.forwardRef)(function Link(props, ref) {
     return (0, jsx_runtime_1.jsx)(actions_1.Button, { type: "link", ...props, ref: ref }, void 0);
 });
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -14,12 +14,12 @@ exports.FileTabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const icons_1 = require("@ant-design/icons");
+const styled_components_1 = __importDefault(require("styled-components"));
 const Block_1 = require("../../Block");
 const Action_1 = require("../../actions/Action");
 const Space_1 = require("../../layout/Space");
 const Flex_1 = require("../../layout/Flex");
 const tasty_1 = require("../../../tasty");
-const styled_components_1 = __importDefault(require("styled-components"));
 const actions_1 = require("../../actions");
 const react_2 = require("../../../utils/react");
 const FileTabsContext = (0, react_1.createContext)({
@@ -192,11 +192,11 @@ const CloseButton = (0, tasty_1.tasty)(actions_1.Button, {
         radius: '1r',
     },
 });
-const Tab = ({ isDirty, isDisabled, children, isClosable, onClose, ...props }) => {
+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 }, void 0), (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.CloseOutlined, {}, void 0) }, void 0)) : ((0, jsx_runtime_1.jsx)("div", {}, void 0)), isDirty ? (0, jsx_runtime_1.jsx)(DirtyBadge, {}, void 0) : null] }, void 0))] }, void 0) }, void 0));
-};
+}
 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)([]);
@@ -296,7 +296,7 @@ function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTa
                 setDirtyTab,
                 currentTab: activeKey,
             }, children: [(0, jsx_runtime_1.jsx)(StyledTabsPanelElement, { ref: tabsRef, children: tabs.map((tab) => {
-                        return ((0, jsx_runtime_1.jsx)(Tab, { onPress: () => onPress(tab), onClose: () => isClosable && handleClose(tab), isClosable: isClosable, isDisabled: tab.id === activeKey || false, isDirty: tab.isDirty, children: tab.title }, tab.id));
+                        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));
                     }) }, 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.FileTabs = FileTabs;

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -15,6 +15,9 @@ const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_2 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const icons_1 = require("@ant-design/icons");
+const react_transition_group_1 = require("react-transition-group");
 const Action_1 = require("../../actions/Action");
 const Card_1 = require("../../content/Card/Card");
 const Flow_1 = require("../../layout/Flow");
@@ -23,9 +26,6 @@ const Block_1 = require("../../Block");
 const actions_1 = require("../../actions");
 const Space_1 = require("../../layout/Space");
 const Title_1 = require("../../content/Title");
-const styled_components_1 = __importDefault(require("styled-components"));
-const icons_1 = require("@ant-design/icons");
-const react_transition_group_1 = require("react-transition-group");
 const Overlay = styled_components_1.default.div `
   position: fixed;
   top: 0;
@@ -164,10 +164,10 @@ function Modal(allProps) {
             }
         })();
     }, [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: "1.5r", 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, { level: 4, flexGrow: 1, children: title }, void 0)), isClosable ? ((0, jsx_runtime_1.jsx)(Action_1.Action, { qa: "ModalCloseButton", width: "3x", height: "3x", onPress: onClose || onCancel, color: { '': '#dark.75', hovered: '#purple' }, outline: {
+    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: "1.5r", 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, { level: 4, flexGrow: 1, children: title }, void 0)), isClosable ? ((0, jsx_runtime_1.jsx)(Action_1.Action, { qa: "ModalCloseButton", width: "3x", height: "3x", color: { '': '#dark.75', hovered: '#purple' }, outline: {
                                     '': '#purple-03.0',
                                     'focused & focus-visible': '#purple-03',
-                                }, label: "Close", children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, { style: { fontSize: 16 } }, void 0) }, void 0)) : null] }, void 0), (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 }, void 0)) : (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' }, void 0), (0, jsx_runtime_1.jsx)(actions_1.Button, { "data-qa": 'CancelButton', onPress: cancel, isDisabled: isLoading, children: cancelText || (okText === 'Yes' ? 'No' : 'Cancel') }, void 0)] }, void 0)) : 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' }, void 0) }, void 0)) : null] }, void 0)] }, void 0) }, void 0) }, void 0));
+                                }, label: "Close", onPress: onClose || onCancel, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, { style: { fontSize: 16 } }, void 0) }, void 0)) : null] }, void 0), (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 }, void 0)) : (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' }, void 0), (0, jsx_runtime_1.jsx)(actions_1.Button, { "data-qa": 'CancelButton', isDisabled: isLoading, onPress: cancel, children: cancelText || (okText === 'Yes' ? 'No' : 'Cancel') }, void 0)] }, void 0)) : 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' }, void 0) }, void 0)) : null] }, void 0)] }, void 0) }, void 0) }, void 0));
 }
 exports.Modal = Modal;
 let ID = 0;
@@ -214,7 +214,7 @@ const modal = {
                     this.reject(item);
                 }
             };
-            return ((0, react_1.createElement)(Modal, { ...options, onOk: wrapOnOk, onCancel: wrapOnCancel, onClose: wrapOnClose, key: id }, content));
+            return ((0, react_1.createElement)(Modal, { ...options, key: id, onOk: wrapOnOk, onCancel: wrapOnCancel, onClose: wrapOnClose }, content));
         }), this.root);
     },
     open(item) {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -13,7 +13,7 @@ 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, { level: 4, color: "#minor", preset: "default", nowrap: true, children: title }, void 0), (0, jsx_runtime_1.jsxs)(Text_1.Text.Strong, { preset: "h3", children: [value, " ", suffix] }, void 0)] }, void 0));
+    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 }, void 0), (0, jsx_runtime_1.jsxs)(Text_1.Text.Strong, { preset: "h3", children: [value, " ", suffix] }, void 0)] }, void 0));
 }
 exports.StatsCard = StatsCard;
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.3
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -13,10 +13,10 @@ 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 styled_components_1 = __importDefault(require("styled-components"));
 const tasty_1 = require("../../../tasty");
 const DEFAULT_STYLES = {
     display: 'inline-flex',
@@ -28,7 +28,7 @@ const DEFAULT_STYLES = {
     border: true,
     fontWeight: 400,
 };
-exports.Base64Upload = (0, styled_components_1.default)((0, react_1.forwardRef)((allProps, ref) => {
+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)();
@@ -74,7 +74,7 @@ exports.Base64Upload = (0, styled_components_1.default)((0, react_1.forwardRef)(
             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 }), styles: styles, ref: ref, children: [(0, jsx_runtime_1.jsx)(Block_1.Block, { radius: "round", fill: "#purple.10", color: "#dark-02", padding: ".5x 1x", children: "Choose file" }, void 0), (0, jsx_runtime_1.jsx)(Block_1.Block, { color: "#dark-04", children: file || 'No file selected' }, void 0), (0, jsx_runtime_1.jsx)("input", { type: "file", name: "base64", onInput: onInputFile, accept: ".json" }, void 0)] }, void 0), error && (0, jsx_runtime_1.jsx)(Text_1.Text.Danger, { color: "danger", children: error }, void 0)] }, void 0));
+    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" }, void 0), (0, jsx_runtime_1.jsx)(Block_1.Block, { color: "#dark-04", children: file || 'No file selected' }, void 0), (0, jsx_runtime_1.jsx)("input", { type: "file", name: "base64", accept: ".json", onInput: onInputFile }, void 0)] }, void 0), error && (0, jsx_runtime_1.jsx)(Text_1.Text.Danger, { color: "danger", children: error }, void 0)] }, void 0));
 })) `
   appearance: none;
   cursor: pointer;