@cube-dev/ui-kit 0.12.3 → 0.12.4

package/es/components/forms/NumberInput/NumberInput.js

@@ -1,21 +1,21 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
-import { useFormProps } from '../Form';
-import { useProviderProps } from '../../../provider';
 import { useLocale } from '@react-aria/i18n';
-import { TextInputBase, } from '../TextInput/TextInputBase';
 import { useNumberFieldState } from '@react-stately/numberfield';
 import { useNumberField } from '@react-aria/numberfield';
-import { StepButton } from './StepButton';
+import { useFormProps } from '../Form';
+import { useProviderProps } from '../../../provider';
+import { TextInputBase, } from '../TextInput/TextInputBase';
 import { tasty } from '../../../tasty';
 import { castNullableNumberValue, } from '../../../utils/react/nullableValue';
+import { StepButton } from './StepButton';
 const StepperContainer = tasty({
     styles: {
         display: 'grid',
@@ -35,7 +35,7 @@ function NumberInput(props, ref) {
     let state = useNumberFieldState({ ...props, locale });
     let inputRef = useRef(null);
     let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = useNumberField(props, state, inputRef);
-    return (_jsx(TextInputBase, { ...otherProps, labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { direction: "up", ...incrementButtonProps }, void 0), _jsx(StepButton, { direction: "down", ...decrementButtonProps }, void 0)] }, void 0)) : null }, void 0));
+    return (_jsx(TextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { direction: "up", ...incrementButtonProps }, void 0), _jsx(StepButton, { direction: "down", ...decrementButtonProps }, void 0)] }, void 0)) : null }, void 0));
 }
 /**
  * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.

package/es/components/forms/NumberInput/StepButton.js

@@ -1,13 +1,13 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from '../../actions';
 import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
+import { Button } from '../../actions';
 const STEP_BUTTON_STYLES = {
     width: '4x',
     radius: {
@@ -22,7 +22,7 @@ const STEP_BUTTON_STYLES = {
  * Buttons for NumberField.
  */
 export function StepButton(props) {
-    return (_jsx(Button, { type: "neutral", styles: STEP_BUTTON_STYLES, preventDefault: true, icon: props.direction === 'up' ? _jsx(CaretUpOutlined, {}, void 0) : _jsx(CaretDownOutlined, {}, void 0), mods: {
+    return (_jsx(Button, { preventDefault: true, type: "neutral", styles: STEP_BUTTON_STYLES, icon: props.direction === 'up' ? _jsx(CaretUpOutlined, {}, void 0) : _jsx(CaretDownOutlined, {}, void 0), mods: {
             up: props.direction === 'up',
             down: props.direction === 'down',
         }, label: `Step ${props.direction}`, ...props }, void 0));

package/es/components/forms/PasswordInput/PasswordInput.js

@@ -1,17 +1,17 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useRef, useState } from 'react';
+import { useTextField } from '@react-aria/textfield';
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import { TextInputBase, } from '../TextInput/TextInputBase';
 import { useProviderProps } from '../../../provider';
-import { useTextField } from '@react-aria/textfield';
 import { Button } from '../../actions';
-import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
 function PasswordInput(props, ref) {
     props = castNullableStringValue(props);
@@ -25,8 +25,8 @@ function PasswordInput(props, ref) {
     const toggleType = useCallback((e) => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
-    const wrappedSuffix = (_jsxs(_Fragment, { children: [suffix, _jsx(Button, { type: "neutral", htmlType: "button", onPress: toggleType, placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", excludeFromTabOrder: true, icon: type === 'password' ? _jsx(EyeInvisibleOutlined, {}, void 0) : _jsx(EyeOutlined, {}, void 0) }, void 0)] }, void 0));
-    return (_jsx(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 = (_jsxs(_Fragment, { children: [suffix, _jsx(Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? _jsx(EyeInvisibleOutlined, {}, void 0) : _jsx(EyeOutlined, {}, void 0), onPress: toggleType }, void 0)] }, void 0));
+    return (_jsx(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/es/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.
  */
 
@@ -10,15 +10,15 @@ import { useFocusableRef } from '@react-spectrum/utils';
 import { forwardRef, useRef } from 'react';
 import { useHover } from '@react-aria/interactions';
 import { useRadio } from '@react-aria/radio';
-import { useRadioProvider } from './context';
 import { extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { useProviderProps } from '../../../provider';
 import { INLINE_LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
-import { RadioGroup } from './RadioGroup';
 import { useFormProps } from '../Form';
+import { RadioGroup } from './RadioGroup';
+import { useRadioProvider } from './context';
 const RadioWrapperElement = tasty({
     as: 'label',
     qa: 'RadioWrapper',
@@ -142,7 +142,7 @@ function Radio(props, ref) {
             invalid: validationState === 'invalid',
             hovered: isHovered,
             button: isButton,
-        }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), isButton: isButton, ref: inputRef }, void 0), _jsx(RadioElement, { mods: {
+        }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), ref: inputRef, isButton: isButton }, void 0), _jsx(RadioElement, { mods: {
                     checked: inputProps.checked,
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
@@ -157,7 +157,7 @@ function Radio(props, ref) {
 }
 function RadioButton(props, ref) {
     const Radio = _Radio;
-    return _jsx(Radio, { ...props, type: "button", ref: ref }, void 0);
+    return _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/es/components/forms/RadioGroup/RadioGroup.js

@@ -1,21 +1,21 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useDOMRef } from '@react-spectrum/utils';
-import { useProviderProps } from '../../../provider';
 import { useRadioGroup } from '@react-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
+import { useProviderProps } from '../../../provider';
 import { FormContext, useFormProps } from '../Form';
-import { RadioContext } from './context';
 import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
+import { RadioContext } from './context';
 const RadioGroupElement = tasty({
     qa: 'RadioGroup',
     styles: {

package/es/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/es/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.
  */
 
@@ -26,7 +26,7 @@ const ClearButton = tasty(Button, {
         placeSelf: 'stretch',
     },
 });
-export const SearchInput = forwardRef((props, ref) => {
+export const SearchInput = forwardRef(function SearchInput(props, ref) {
     props = castNullableStringValue(props);
     props = useProviderProps(props);
     let { isClearable, value, validationState } = props;
@@ -41,7 +41,7 @@ export const SearchInput = forwardRef((props, ref) => {
     }, [combinedRef, value]);
     let state = useSearchFieldState(props);
     let { inputProps, clearButtonProps } = useSearchField(props, state, inputRef);
-    return (_jsx(TextInputBase, { inputProps: inputProps, ref: ref, inputRef: inputRef, type: "search", icon: _jsx(SearchOutlined, {}, void 0), suffixPosition: "after", suffix: isClearable &&
+    return (_jsx(TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: _jsx(SearchOutlined, {}, void 0), suffixPosition: "after", suffix: isClearable &&
             state.value !== '' &&
             !props.isReadOnly && (_jsx(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps) }, void 0)), ...props }, void 0));
 });

package/es/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.
  */
 
@@ -11,13 +11,13 @@ import { forwardRef, useMemo, useRef } from 'react';
 import { useSwitch } from '@react-aria/switch';
 import { useHover } from '@react-aria/interactions';
 import { useToggleState } from '@react-stately/toggle';
+import { LoadingOutlined } from '@ant-design/icons';
 import { useProviderProps } from '../../../provider';
 import { BLOCK_STYLES, Element, extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { HiddenInput } from '../../HiddenInput';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
-import { LoadingOutlined } from '@ant-design/icons';
 import { useFormProps } from '../Form/Form';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';

package/es/components/forms/TextArea/TextArea.js

@@ -1,16 +1,16 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useRef } from 'react';
-import { TextInputBase, } from '../TextInput/TextInputBase';
 import { useControlledState } from '@react-stately/utils';
-import { useProviderProps } from '../../../provider';
 import { useTextField } from '@react-aria/textfield';
+import { TextInputBase, } from '../TextInput/TextInputBase';
+import { useProviderProps } from '../../../provider';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
 import { chain, useLayoutEffect } from '../../../utils/react';
 function TextArea(props, ref) {
@@ -46,7 +46,7 @@ function TextArea(props, ref) {
         onChange: chain(onChange, setInputValue),
         inputElementType: 'textarea',
     }, inputRef);
-    return (_jsx(TextInputBase, { ...otherProps, ref: ref, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, multiLine: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }, void 0));
+    return (_jsx(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/es/components/forms/TextInput/TextInput.js

@@ -1,22 +1,22 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
-import { TextInputBase } from './TextInputBase';
-import { useProviderProps } from '../../../provider';
 import { useTextField } from '@react-aria/textfield';
+import { useProviderProps } from '../../../provider';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
+import { TextInputBase } from './TextInputBase';
 export const TextInput = forwardRef(function TextInput(props, ref) {
     castNullableStringValue(props);
     props = useProviderProps(props);
     let inputRef = useRef(null);
     let { labelProps, inputProps } = useTextField(props, inputRef);
-    return (_jsx(TextInputBase, { ...props, labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef }, void 0));
+    return (_jsx(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/es/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.
  */
 
@@ -9,8 +9,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { CheckOutlined, LoadingOutlined, WarningOutlined, } from '@ant-design/icons';
 import { createFocusableRef } from '@react-spectrum/utils';
 import { cloneElement, forwardRef, useImperativeHandle, useMemo, useRef, } from 'react';
-import { useFormProps } from '../Form/Form';
 import { useHover } from '@react-aria/interactions';
+import { useFormProps } from '../Form/Form';
 import { useProviderProps } from '../../../provider';
 import { BLOCK_STYLES, DIMENSION_STYLES, extractStyles, POSITION_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';

package/es/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/es/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.
  */
 
@@ -14,9 +14,9 @@ const FlexElement = tasty({
         flow: 'row',
     },
 });
-export const Flex = forwardRef((props, ref) => {
+export const Flex = forwardRef(function Flex(props, ref) {
     const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsx(FlexElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(FlexElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/es/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.
  */
 
@@ -15,9 +15,9 @@ const FlowElement = tasty({
     },
 });
 const STYLE_PROPS = CONTAINER_STYLES;
-export const Flow = forwardRef((props, ref) => {
+export const Flow = forwardRef(function Flow(props, ref) {
     const styles = extractStyles(props, STYLE_PROPS);
-    return (_jsx(FlowElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(FlowElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/es/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.
  */
 
@@ -20,9 +20,9 @@ const PROP_MAP = {
     rows: 'gridRows',
     areas: 'gridAreas',
 };
-export const Grid = forwardRef((props, ref) => {
+export const Grid = forwardRef(function Grid(props, ref) {
     const styles = extractStyles(props, CONTAINER_STYLES, undefined, PROP_MAP);
-    return (_jsx(GridElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(GridElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/es/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.
  */
 
@@ -25,7 +25,7 @@ const PrefixElement = tasty({
         height: '(100% - (2 * @prefix-gap))',
     },
 });
-export const Prefix = forwardRef((allProps, outerRef) => {
+export const Prefix = forwardRef(function Prefix(allProps, outerRef) {
     let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
     const styles = extractStyles(props, CONTAINER_STYLES);
     const ref = useCombinedRefs(outerRef);
@@ -34,7 +34,7 @@ export const Prefix = forwardRef((allProps, outerRef) => {
             onWidthChange(ref.current.offsetWidth);
         }
     }, [children, ref, onWidthChange]);
-    return (_jsx(PrefixElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, style: {
+    return (_jsx(PrefixElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, style: {
             // @ts-ignore
             '--prefix-gap': parseStyle(outerGap).value,
         }, children: children }, void 0));

package/es/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.
  */
 
@@ -25,10 +25,10 @@ const SpaceElement = tasty({
 export const Space = forwardRef(function Space(props, ref) {
     const { mods, direction, ...otherProps } = props;
     const styles = extractStyles(otherProps, CONTAINER_STYLES);
-    return (_jsx(SpaceElement, { ...filterBaseProps(otherProps, { eventProps: true }), mods: {
+    return (_jsx(SpaceElement, { ...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/es/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.
  */
 
@@ -25,7 +25,7 @@ const SuffixElement = tasty({
         height: '(100% - (2 * @suffix-gap))',
     },
 });
-export const Suffix = forwardRef((allProps, outerRef) => {
+export const Suffix = forwardRef(function Suffix(allProps, outerRef) {
     let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
     const styles = extractStyles(props, CONTAINER_STYLES);
     const ref = useCombinedRefs(outerRef);
@@ -34,7 +34,7 @@ export const Suffix = forwardRef((allProps, outerRef) => {
             onWidthChange(ref.current.offsetWidth);
         }
     }, [children, ref, onWidthChange]);
-    return (_jsx(SuffixElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, style: {
+    return (_jsx(SuffixElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, style: {
             '--suffix-gap': parseStyle(outerGap).value,
         }, children: children }, void 0));
 });

package/es/components/navigation/LegacyTabs/LegacyTabs.js

@@ -1,18 +1,18 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useRef, useState, } from 'react';
+import styled from 'styled-components';
 import { Block } from '../../Block';
 import { Space } from '../../layout/Space';
 import { Flex } from '../../layout/Flex';
 import { Button } from '../../actions';
 import { tasty } from '../../../tasty';
-import styled from 'styled-components';
 import { Flow } from '../../layout/Flow';
 import { useLayoutEffect } from '../../../utils/react';
 const LegacyTabsContext = createContext({
@@ -142,9 +142,9 @@ const StyledTabsContainerElement = styled(TabsContainerElement) `
     opacity: 1;
   }
 `;
-const Tab = ({ isSelected, isHidden, onClose, ...props }) => {
+function Tab({ isSelected, isHidden, onClose, ...props }) {
     return (_jsx(StyledTabElement, { isSelected: isSelected, isHidden: isHidden, ...props }, void 0));
-};
+}
 export function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, extra, children, ...props }) {
     const tabsRef = useRef(null);
     const [tabs, setTabs] = useState([]);
@@ -238,7 +238,7 @@ export function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabCl
                 changeTab,
                 currentTab: activeKey,
             }, children: [_jsxs(Space, { gap: ".5x", placeContent: "center space-between", children: [_jsx(StyledTabsPanelElement, { ref: tabsRef, children: tabs.map((tab) => {
-                                return (_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 (_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), _jsx(Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children }, void 0)] }, void 0) }, void 0));
 }
 LegacyTabs.TabPane = function TabPane({ id, title, qa, isHidden, isDisabled, children, ...props }) {

package/es/components/navigation/Link/Link.js

@@ -1,14 +1,14 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Button } from '../../actions';
-export const Link = forwardRef((props, ref) => {
+export const Link = forwardRef(function Link(props, ref) {
     return _jsx(Button, { type: "link", ...props, ref: ref }, void 0);
 });
 

package/es/components/organisms/FileTabs/FileTabs.js

@@ -1,19 +1,19 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useRef, useState, } from 'react';
 import { CloseOutlined } from '@ant-design/icons';
+import styled from 'styled-components';
 import { Block } from '../../Block';
 import { Action } from '../../actions/Action';
 import { Space } from '../../layout/Space';
 import { Flex } from '../../layout/Flex';
 import { tasty } from '../../../tasty';
-import styled from 'styled-components';
 import { Button } from '../../actions';
 import { useLayoutEffect } from '../../../utils/react';
 const FileTabsContext = createContext({
@@ -186,11 +186,11 @@ const CloseButton = tasty(Button, {
         radius: '1r',
     },
 });
-const Tab = ({ isDirty, isDisabled, children, isClosable, onClose, ...props }) => {
+function Tab({ isDirty, isDisabled, children, isClosable, onClose, ...props }) {
     return (_jsx(TabElement, { mods: {
             dirty: isDirty,
         }, isDisabled: isDisabled, ...props, children: _jsxs(Space, { gap: ".75x", children: [_jsx(Block, { children: children }, void 0), (isClosable || isDirty) && (_jsxs(Flex, { placeItems: "center", style: { position: 'relative' }, children: [isClosable ? (_jsx(CloseButton, { onPress: onClose, children: _jsx(CloseOutlined, {}, void 0) }, void 0)) : (_jsx("div", {}, void 0)), isDirty ? _jsx(DirtyBadge, {}, void 0) : null] }, void 0))] }, void 0) }, void 0));
-};
+}
 export function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, isClosable = true, children, ...props }) {
     const tabsRef = useRef(null);
     const [tabs, setTabs] = useState([]);
@@ -290,7 +290,7 @@ export function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClic
                 setDirtyTab,
                 currentTab: activeKey,
             }, children: [_jsx(StyledTabsPanelElement, { ref: tabsRef, children: tabs.map((tab) => {
-                        return (_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 (_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), _jsx(Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children }, void 0)] }, void 0) }, void 0));
 }
 FileTabs.TabPane = function FileTabPane(allProps) {

package/es/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.
  */
 
@@ -9,6 +9,9 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+import { CloseOutlined } from '@ant-design/icons';
+import { CSSTransition } from 'react-transition-group';
 import { Action } from '../../actions/Action';
 import { Card } from '../../content/Card/Card';
 import { Flow } from '../../layout/Flow';
@@ -17,9 +20,6 @@ import { Block } from '../../Block';
 import { Button } from '../../actions';
 import { Space } from '../../layout/Space';
 import { Title } from '../../content/Title';
-import styled from 'styled-components';
-import { CloseOutlined } from '@ant-design/icons';
-import { CSSTransition } from 'react-transition-group';
 const Overlay = styled.div `
   position: fixed;
   top: 0;
@@ -158,10 +158,10 @@ export function Modal(allProps) {
             }
         })();
     }, [onOk]);
-    return (_jsx(CSSTransition, { in: inProp, timeout: 250, classNames: "cube-modal-transition", children: _jsx(Overlay, { className: "cube-modal-overlay", onClick: onOverlayClick, children: _jsxs(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: [_jsxs(Flex, { placeContent: "space-between", padding: "2x 3x", border: "bottom", children: [typeof title === 'object' ? (title) : (_jsx(Title, { level: 4, flexGrow: 1, children: title }, void 0)), isClosable ? (_jsx(Action, { qa: "ModalCloseButton", width: "3x", height: "3x", onPress: onClose || onCancel, color: { '': '#dark.75', hovered: '#purple' }, outline: {
+    return (_jsx(CSSTransition, { in: inProp, timeout: 250, classNames: "cube-modal-transition", children: _jsx(Overlay, { className: "cube-modal-overlay", onClick: onOverlayClick, children: _jsxs(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: [_jsxs(Flex, { placeContent: "space-between", padding: "2x 3x", border: "bottom", children: [typeof title === 'object' ? (title) : (_jsx(Title, { level: 4, flexGrow: 1, children: title }, void 0)), isClosable ? (_jsx(Action, { qa: "ModalCloseButton", width: "3x", height: "3x", color: { '': '#dark.75', hovered: '#purple' }, outline: {
                                     '': '#purple-03.0',
                                     'focused & focus-visible': '#purple-03',
-                                }, label: "Close", children: _jsx(CloseOutlined, { style: { fontSize: 16 } }, void 0) }, void 0)) : null] }, void 0), _jsxs(Flow, { padding: "3x", gap: "3x", height: "max (100vh - 90px)", style: { overflow: 'auto' }, children: [typeof children === 'string' ? (_jsx(Block, { children: children }, void 0)) : (children), type !== 'info' && (onOk || onCancel) ? (_jsxs(Space, { gap: "1.5x", children: [_jsx(Button, { "data-qa": 'ConfirmButton', isDisabled: isDisabled, type: "primary", theme: okType === 'danger' ? 'danger' : undefined, isLoading: isLoading || localLoading, onPress: handleOk, children: okText || 'OK' }, void 0), _jsx(Button, { "data-qa": 'CancelButton', onPress: cancel, isDisabled: isLoading, children: cancelText || (okText === 'Yes' ? 'No' : 'Cancel') }, void 0)] }, void 0)) : null, type === 'info' ? (_jsx(Space, { children: _jsx(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: _jsx(CloseOutlined, { style: { fontSize: 16 } }, void 0) }, void 0)) : null] }, void 0), _jsxs(Flow, { padding: "3x", gap: "3x", height: "max (100vh - 90px)", style: { overflow: 'auto' }, children: [typeof children === 'string' ? (_jsx(Block, { children: children }, void 0)) : (children), type !== 'info' && (onOk || onCancel) ? (_jsxs(Space, { gap: "1.5x", children: [_jsx(Button, { "data-qa": 'ConfirmButton', isDisabled: isDisabled, type: "primary", theme: okType === 'danger' ? 'danger' : undefined, isLoading: isLoading || localLoading, onPress: handleOk, children: okText || 'OK' }, void 0), _jsx(Button, { "data-qa": 'CancelButton', isDisabled: isLoading, onPress: cancel, children: cancelText || (okText === 'Yes' ? 'No' : 'Cancel') }, void 0)] }, void 0)) : null, type === 'info' ? (_jsx(Space, { children: _jsx(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));
 }
 let ID = 0;
 const modal = {
@@ -207,7 +207,7 @@ const modal = {
                     this.reject(item);
                 }
             };
-            return (_createElement(Modal, { ...options, onOk: wrapOnOk, onCancel: wrapOnCancel, onClose: wrapOnClose, key: id }, content));
+            return (_createElement(Modal, { ...options, key: id, onOk: wrapOnOk, onCancel: wrapOnCancel, onClose: wrapOnClose }, content));
         }), this.root);
     },
     open(item) {

package/es/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.
  */
 
@@ -10,7 +10,7 @@ import { Card } from '../../content/Card/Card';
 import { Title } from '../../content/Title';
 import { Text } from '../../content/Text';
 export function StatsCard({ title, value, suffix, ...props }) {
-    return (_jsxs(Card, { display: "flex", placeContent: "space-between", gap: "1x", border: false, shadow: "0 2px 6px #dark.10", padding: "2.5x", ...props, children: [_jsx(Title, { level: 4, color: "#minor", preset: "default", nowrap: true, children: title }, void 0), _jsxs(Text.Strong, { preset: "h3", children: [value, " ", suffix] }, void 0)] }, void 0));
+    return (_jsxs(Card, { display: "flex", placeContent: "space-between", gap: "1x", border: false, shadow: "0 2px 6px #dark.10", padding: "2.5x", ...props, children: [_jsx(Title, { nowrap: true, level: 4, color: "#minor", preset: "default", children: title }, void 0), _jsxs(Text.Strong, { preset: "h3", children: [value, " ", suffix] }, void 0)] }, void 0));
 }