@cube-dev/ui-kit 0.0.0-canary-8ad2d4f → 0.0.0-canary-5e73894

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/useForm.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/validation.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Input/Input.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Label.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

package/cjs/components/forms/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 
@@ -21,7 +21,7 @@ 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/Form");
+const Form_1 = require("../Form");
 const RadioWrapperElement = (0, tasty_1.tasty)({
     as: 'label',
     qa: 'RadioWrapper',

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 
@@ -14,7 +14,7 @@ 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 Form_1 = require("../Form/Form");
+const Form_1 = require("../Form");
 const context_1 = require("./context");
 const tasty_1 = require("../../../tasty");
 const FieldWrapper_1 = require("../FieldWrapper");
@@ -43,7 +43,7 @@ function RadioGroup(props, ref) {
     props = (0, nullableValue_1.castNullableStringValue)(props);
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
-    let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, insideForm, ...otherProps } = props;
+    let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, insideForm, labelSuffix, ...otherProps } = props;
     let domRef = (0, utils_1.useDOMRef)(ref);
     styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
     groupStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, groupStyles);
@@ -77,6 +77,7 @@ function RadioGroup(props, ref) {
             isHidden,
             Component: radioGroup,
             ref: domRef,
+            labelSuffix,
         } }, void 0));
 }
 /**

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * 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.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 
@@ -19,20 +19,10 @@ const provider_1 = require("../../../provider");
 const actions_1 = require("../../actions");
 const mapProps_1 = require("../../../utils/react/mapProps");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
-const tasty_1 = require("../../../tasty");
-const ClearButton = (0, tasty_1.tasty)(actions_1.Button, {
-    icon: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0),
-    styles: {
-        radius: 'right (1r - 1bw)',
-        padding: '0 1x',
-        height: 'auto',
-        placeSelf: 'stretch',
-    },
-});
 exports.SearchInput = (0, react_1.forwardRef)((props, ref) => {
     props = (0, nullableValue_1.castNullableStringValue)(props);
     props = (0, provider_1.useProviderProps)(props);
-    let { isClearable, value, validationState } = props;
+    let { isClearable, value } = props;
     const localRef = (0, react_1.useRef)(null);
     const combinedRef = (0, react_2.useCombinedRefs)(ref, localRef);
     let inputRef = (0, react_1.useRef)(null);
@@ -44,9 +34,12 @@ 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, inputStyles: { paddingRight: '4x' }, 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, { inputProps: inputProps, ref: ref, inputRef: inputRef, type: "search", prefix: (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));
+            !props.isReadOnly && ((0, jsx_runtime_1.jsx)(actions_1.Button, { type: "clear", ...(0, mapProps_1.ariaToCubeButtonProps)(clearButtonProps), color: {
+                '': '#dark.50',
+                'hovered | pressed': '#purple-text',
+            }, radius: "right (1r - 1bw)", padding: ".5x 1x", placeSelf: "stretch", icon: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0) }, 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.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 
@@ -97,7 +97,7 @@ function Switch(props, ref) {
     props = (0, nullableValue_1.castNullableIsSelected)(props);
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
-    let { qa, isDisabled = false, autoFocus, children, label, extra, labelProps, labelStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, ...otherProps } = props;
+    let { qa, isDisabled = false, autoFocus, children, label, extra, labelProps, labelStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, labelSuffix, ...otherProps } = props;
     label = label || children;
     let styles = (0, tasty_1.extractStyles)(props, tasty_1.OUTER_STYLES);
     inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES, inputStyles);
@@ -135,6 +135,7 @@ function Switch(props, ref) {
                 description,
                 requiredMark,
                 tooltip,
+                labelSuffix,
                 Component: switchField,
                 ref: domRef,
             } }, void 0));

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 
@@ -17,70 +17,24 @@ const interactions_1 = require("@react-aria/interactions");
 const provider_1 = require("../../../provider");
 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 FieldWrapper_1 = require("../FieldWrapper");
+const Space_1 = require("../../layout/Space");
+const Block_1 = require("../../Block");
 const react_2 = require("../../../utils/react");
-const ADD_STYLES = {
-    display: 'grid',
-    placeContent: 'stretch',
-    placeItems: 'center',
-    flow: 'column',
-    gap: 0,
-    cursor: 'text',
-    opacity: {
-        '': 1,
-        disabled: '@disabled-opacity',
-    },
-};
 const InputWrapperElement = (0, tasty_1.tasty)({
     styles: {
         display: 'grid',
         position: 'relative',
-        gridAreas: '"prefix input suffix"',
-        gridColumns: 'auto 1fr auto',
-        border: {
-            '': true,
-            focused: true,
-            valid: '#success-text.50',
-            invalid: '#danger-text.50',
-            disabled: true,
-        },
-        outline: {
-            '': '#purple-03.0',
-            focused: '#purple-03',
-            'invalid & focused': '#danger.50',
-            'valid & focused': '#success.50',
-        },
-        radius: true,
-        color: {
-            '': '#dark.85',
-            focused: '#dark.85',
-            invalid: '#danger-text',
-            disabled: '#dark.30',
-        },
         Prefix: {
-            ...ADD_STYLES,
-            gridArea: 'prefix',
+            padding: {
+                '': '0 1x 0 1.5x',
+                'text-prefix': '0 1x 0 2.5x',
+            },
         },
         Suffix: {
-            ...ADD_STYLES,
-            gridArea: 'suffix',
-        },
-        State: {
-            display: 'flex',
-        },
-        InputIcon: {
-            display: 'grid',
-            placeItems: 'center',
-            width: 'min 5x',
-            color: 'inherit',
-        },
-        ValidationIcon: {
-            display: 'grid',
-            placeItems: 'center',
-            width: {
-                '': 'min 5x',
-                suffix: 'min 3x',
-            },
+            padding: '.5x left',
         },
     },
 });
@@ -90,15 +44,35 @@ exports.DEFAULT_INPUT_STYLES = {
     display: 'block',
     width: 'initial 100% initial',
     height: 'initial initial initial',
-    color: 'inherit',
+    color: {
+        '': '#dark.85',
+        invalid: '#danger-text',
+        focused: '#dark.85',
+        disabled: '#dark.30',
+    },
     fill: {
         '': '#white',
         disabled: '#dark.04',
     },
-    border: 0,
+    border: {
+        '': true,
+        focused: true,
+        valid: '#success-text.50',
+        invalid: '#danger-text.50',
+        disabled: true,
+    },
+    outline: {
+        '': '#purple-03.0',
+        focused: '#purple-03',
+        'invalid & focused': '#danger.50',
+        'valid & focused': '#success.50',
+    },
     transition: 'theme',
     radius: true,
-    padding: '@vertical-padding @right-padding @vertical-padding @left-padding',
+    padding: {
+        '': '(1.25x - 1bw) 1x (1.25x - 1bw) (1.5x - 1bw)',
+        '[data-size="small"]': '(.75x - 1px) (1.5x - 1px)',
+    },
     fontWeight: 400,
     textAlign: 'left',
     reset: 'input',
@@ -106,33 +80,26 @@ exports.DEFAULT_INPUT_STYLES = {
     flexGrow: 1,
     margin: 0,
     resize: 'none',
-    '@vertical-padding': {
-        '': '(1.25x - 1bw)',
-        '[data-size="small"]': '(.75x - 1bw)',
-    },
-    '@left-padding': {
-        '': '(1.5x - 1bw)',
-        prefix: '0',
-    },
-    '@right-padding': {
-        '': '(1.5x - 1bw)',
-        suffix: '0',
-    },
 };
 const InputElement = (0, tasty_1.tasty)({
     qa: 'Input',
-    styles: {
-        ...exports.DEFAULT_INPUT_STYLES,
-        gridArea: 'input',
-    },
+    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, mods, 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, icon, ...otherProps } = 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, labelSuffix, ...otherProps } = props;
+    let [suffixWidth, setSuffixWidth] = (0, react_1.useState)(0);
+    let [prefixWidth, setPrefixWidth] = (0, react_1.useState)(0);
     let styles = (0, tasty_1.extractStyles)(otherProps, STYLE_LIST);
     let type = otherProps.type;
     inputStyles = (0, tasty_1.extractStyles)(otherProps, INPUT_STYLE_PROPS_LIST, inputStyles);
+    if (prefix) {
+        inputStyles.paddingLeft = `${prefixWidth}px`;
+    }
+    if (validationState || isLoading || suffix) {
+        inputStyles.paddingRight = `${suffixWidth}px`;
+    }
     let ElementType = multiLine ? 'textarea' : 'input';
     let { isFocused, focusProps } = (0, interactions_2.useFocus)({ isDisabled });
     let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
@@ -152,8 +119,10 @@ function TextInputBase(props, ref) {
         },
     }));
     let isInvalid = validationState === 'invalid';
-    let validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--success-color)' } }, void 0));
+    let validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
     let validation = (0, react_1.cloneElement)(validationIcon);
+    suffix =
+        typeof suffix === 'string' ? ((0, jsx_runtime_1.jsx)(Block_1.Block, { padding: "1x right", children: suffix }, void 0)) : (suffix);
     // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270
     if (!(inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder)) {
         if (!inputProps) {
@@ -161,39 +130,21 @@ function TextInputBase(props, ref) {
         }
         inputProps.placeholder = ' ';
     }
-    if (icon) {
-        icon = (0, jsx_runtime_1.jsx)("div", { "data-element": "InputIcon", children: icon }, void 0);
-        if (prefix) {
-            prefix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, prefix] }, void 0));
-        }
-        else {
-            prefix = icon;
-        }
-    }
-    const modifiers = (0, react_1.useMemo)(() => ({
-        invalid: isInvalid,
-        valid: validationState === 'valid',
-        loadable: !!loadingIndicator,
-        focused: isFocused,
-        hovered: isHovered,
-        multiline: multiLine,
-        prefix: !!prefix,
-        suffix: !!suffix,
-        ...mods,
-    }), [
-        mods,
-        isInvalid,
-        validationState,
-        loadingIndicator,
-        isFocused,
-        isHovered,
-        multiLine,
-        prefix,
-        suffix,
-    ]);
-    let textField = ((0, jsx_runtime_1.jsxs)(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', mods: modifiers, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [(0, jsx_runtime_1.jsx)(InputElement, { as: ElementType, ...(0, react_2.mergeProps)(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: modifiers, style: {
+    let textField = ((0, jsx_runtime_1.jsxs)(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', mods: {
+            invalid: isInvalid,
+            valid: validationState === 'valid',
+            loadable: !!loadingIndicator,
+            multiline: multiLine,
+            'text-prefix': prefix === 'string',
+        }, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [(0, jsx_runtime_1.jsx)(InputElement, { as: ElementType, ...(0, react_2.mergeProps)(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: {
+                    invalid: isInvalid,
+                    valid: validationState === 'valid',
+                    disabled: isDisabled,
+                    hovered: isHovered,
+                    focused: isFocused,
+                }, style: {
                     WebkitTextSecurity: multiLine && type === 'password' ? 'disc' : 'initial',
-                }, autoFocus: autoFocus, "data-size": size, styles: inputStyles, isDisabled: isDisabled }, void 0), prefix ? (0, jsx_runtime_1.jsx)("div", { "data-element": "Prefix", children: prefix }, void 0) : null, (0, jsx_runtime_1.jsxs)("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "State", children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, { "data-element": "InputIcon" }, void 0)] }, void 0)) : null, suffixPosition === 'after' ? suffix : null] }, void 0)] }, void 0));
+                }, autoFocus: autoFocus, "data-size": size, styles: inputStyles, isDisabled: isDisabled }, 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,
@@ -211,6 +162,7 @@ function TextInputBase(props, ref) {
             requiredMark,
             tooltip,
             isHidden,
+            labelSuffix,
             Component: textField,
             ref: domRef,
         } }, void 0));

package/cjs/components/forms/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * 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.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

package/cjs/components/layout/Flow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

package/cjs/components/layout/Grid.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

package/cjs/components/layout/Prefix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 
@@ -32,7 +32,7 @@ exports.Prefix = (0, react_1.forwardRef)((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);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useLayoutEffect)(() => {
         if ((ref === null || ref === void 0 ? void 0 : ref.current) && onWidthChange) {
             onWidthChange(ref.current.offsetWidth);
         }

package/cjs/components/layout/Space.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

package/cjs/components/layout/Suffix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */
 

package/cjs/components/other/CloudLogo/CloudLogo.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ad2d4f
+ * @cube-dev/ui-kit v0.0.0-canary-5e73894
  * Released under the MIT license.
  */