@cube-dev/ui-kit 0.12.3 → 0.12.4

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

package/es/components/content/Content.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.
  */
 
@@ -24,10 +24,10 @@ const ContentElement = tasty({
         styledScrollbar: true,
     },
 });
-export const Content = forwardRef((props, ref) => {
+export const Content = forwardRef(function Content(props, ref) {
     props = useSlotProps(props, 'content');
     const styles = extractStyles(props, STYLE_LIST);
-    return (_jsx(ContentElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(ContentElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/es/components/content/CopySnippet/CopySnippet.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/content/CopySnippet/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/content/Divider.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.
  */
 
@@ -37,12 +37,12 @@ const DividerElement = tasty({
     },
     styleProps: [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES],
 });
-export const Divider = forwardRef((props, ref) => {
+export const Divider = forwardRef(function Divider(props, ref) {
     const { mods, children, styles, ...otherProps } = useSlotProps(props, 'divider');
     return (_jsx(DividerElement, { as: children ? 'div' : 'hr', role: children ? 'separator' : undefined, mods: {
             text: !!children,
             ...mods,
-        }, ...filterBaseProps(otherProps, { eventProps: true }), styles: styles, ref: ref, children: children && (_jsxs(_Fragment, { children: [_jsx("div", { "data-element": "Line" }, void 0), _jsx("div", { children: children }, void 0), _jsx("div", { "data-element": "Line" }, void 0)] }, void 0)) }, void 0));
+        }, ...filterBaseProps(otherProps, { eventProps: true }), ref: ref, styles: styles, children: children && (_jsxs(_Fragment, { children: [_jsx("div", { "data-element": "Line" }, void 0), _jsx("div", { children: children }, void 0), _jsx("div", { "data-element": "Line" }, void 0)] }, void 0)) }, void 0));
 });
 
         

package/es/components/content/Footer.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.
  */
 
@@ -19,10 +19,10 @@ const FooterElement = tasty({
         flow: 'column',
     },
 });
-export const Footer = forwardRef((props, ref) => {
+export const Footer = forwardRef(function Footer(props, ref) {
     props = useSlotProps(props, 'footer');
     const styles = extractStyles(props, STYLE_LIST);
-    return (_jsx(FooterElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(FooterElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/es/components/content/Header.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.
  */
 
@@ -19,10 +19,10 @@ const HeaderElement = tasty({
         flow: 'column',
     },
 });
-export const Header = forwardRef((props, ref) => {
+export const Header = forwardRef(function Header(props, ref) {
     props = useSlotProps(props, 'header');
     const styles = extractStyles(props, STYLE_LIST);
-    return (_jsx(HeaderElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(HeaderElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/es/components/content/Paragraph.js

@@ -1,23 +1,23 @@
 /**
  * @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 { Text } from './Text';
 import { CONTAINER_STYLES, extractStyles, TEXT_STYLES, } from '../../tasty';
+import { Text } from './Text';
 const DEFAULT_STYLES = {
     preset: 'p3',
     color: '#dark.75',
     display: 'block',
 };
 const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
-export const Paragraph = forwardRef((props, ref) => {
+export const Paragraph = forwardRef(function Paragraph(props, ref) {
     const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
-    return _jsx(Text, { as: "p", qa: "Paragraph", ...props, styles: styles, ref: ref }, void 0);
+    return _jsx(Text, { as: "p", qa: "Paragraph", ...props, ref: ref, styles: styles }, void 0);
 });
 
         

package/es/components/content/Placeholder/Placeholder.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 { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
 import styled from 'styled-components';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
 const PlaceholderElement = tasty({
     role: 'alert',
     'aria-live': 'polite',
@@ -47,15 +47,15 @@ const StyledPlaceholder = styled(PlaceholderElement) `
     }
   }
 `;
-export const Placeholder = forwardRef((allProps, ref) => {
+export const Placeholder = forwardRef(function Placeholder(allProps, ref) {
     let { size = '2x', circle, ...props } = allProps;
     let styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsx(StyledPlaceholder, { role: "region", ...filterBaseProps(props, { eventProps: true }), styles: {
+    return (_jsx(StyledPlaceholder, { role: "region", ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: {
             height: size,
             width: circle ? size : false,
             radius: circle ? '9999rem' : '1r',
             ...styles,
-        }, ref: ref }, void 0));
+        } }, void 0));
 });
 
         

package/es/components/content/PrismCode/PrismCode.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/content/Result/Result.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/content/Skeleton/Skeleton.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/content/Tag/Tag.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, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import { CloseOutlined } from '@ant-design/icons';
 import THEMES from '../../../data/themes';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
 import { Action } from '../../actions/Action';
 import { Suffix } from '../../layout/Suffix';
-import { CloseOutlined } from '@ant-design/icons';
 const TagElement = tasty({
     qa: 'Tag',
     role: 'status',
@@ -75,13 +75,13 @@ const CloseAction = tasty(Action, {
         padding: '0 .5x',
     },
 });
-const Tag = (allProps, ref) => {
+function Tag(allProps, ref) {
     let { type, isClosable, onClose, closeButtonStyles, children, ...props } = allProps;
     const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsxs(TagElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, "data-type": type, mods: { closable: isClosable }, ref: ref, children: [_jsx("div", { "data-element": "Content", children: children }, void 0), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(CloseAction, { styles: closeButtonStyles, onPress: onClose, children: _jsx(CloseOutlined, { style: {
+    return (_jsxs(TagElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, "data-type": type, mods: { closable: isClosable }, children: [_jsx("div", { "data-element": "Content", children: children }, void 0), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(CloseAction, { styles: closeButtonStyles, onPress: onClose, children: _jsx(CloseOutlined, { style: {
                             fontSize: 'calc(var(--font-size) - (var(--border-width) * 2))',
                         } }, void 0) }, void 0) }, void 0)) : undefined] }, void 0));
-};
+}
 const _Tag = forwardRef(Tag);
 export { _Tag as Tag };
 

package/es/components/content/Text.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.
  */
 
@@ -49,23 +49,23 @@ const _Text = forwardRef(function Text(allProps, ref) {
     return (_jsx(TextElement, { as: as || 'span', qa: qa || 'Text', styleName: styleName, mods: {
             nowrap,
             ellipsis,
-        }, block: !!(block || ellipsis), ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+        }, block: !!(block || ellipsis), ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 const Text = Object.assign(_Text, {
     Minor: forwardRef(function MinorText(props, ref) {
         return _jsx(_Text, { ref: ref, color: "#minor", ...props }, void 0);
     }),
     Danger: forwardRef(function DangerText(props, ref) {
-        return _jsx(_Text, { role: "alert", ref: ref, color: "#danger-text", ...props }, void 0);
+        return _jsx(_Text, { ref: ref, role: "alert", color: "#danger-text", ...props }, void 0);
     }),
     Success: forwardRef(function SuccessText(props, ref) {
         return _jsx(_Text, { ref: ref, color: "#success-text", ...props }, void 0);
     }),
     Strong: forwardRef(function StrongText(props, ref) {
-        return (_jsx(_Text, { as: "strong", preset: "strong", ref: ref, color: "#dark", ...props }, void 0));
+        return (_jsx(_Text, { ref: ref, as: "strong", preset: "strong", color: "#dark", ...props }, void 0));
     }),
     Emphasis: forwardRef(function EmphasisText(props, ref) {
-        return _jsx(_Text, { as: "em", preset: "em", ref: ref, ...props }, void 0);
+        return _jsx(_Text, { ref: ref, as: "em", preset: "em", ...props }, void 0);
     }),
     Selection: forwardRef(function SelectionText(props, ref) {
         return _jsx(_Text, { ref: ref, color: "#dark", fill: "#note.30", ...props }, void 0);

package/es/components/content/Title.js

@@ -1,15 +1,15 @@
 /**
  * @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 { TEXT_PROP_MAP } from './Text';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
+import { TEXT_PROP_MAP } from './Text';
 const STYLE_LIST = [...TEXT_STYLES, ...CONTAINER_STYLES];
 const TitleElement = tasty({
     qa: 'Title',
@@ -37,14 +37,14 @@ const TitleElement = tasty({
         width: 'max 100%',
     },
 });
-const _Title = forwardRef(({ qa, as, styleName, inline, nowrap, ellipsis, level, ...props }, ref) => {
+const _Title = forwardRef(function Title({ qa, as, styleName, inline, nowrap, ellipsis, level, ...props }, ref) {
     const propsWithSlots = useSlotProps(props, 'heading');
     const tag = `h${level || 1}`;
     const styles = extractStyles(propsWithSlots, STYLE_LIST, {}, TEXT_PROP_MAP);
     return (_jsx(TitleElement, { qa: qa || 'Title', as: as || tag, styleName: styleName, "data-level": level || 1, mods: {
             nowrap,
             ellipsis,
-        }, inline: inline, ...filterBaseProps(propsWithSlots, { eventProps: true }), styles: styles, ref: ref }, void 0));
+        }, inline: inline, ...filterBaseProps(propsWithSlots, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 const Title = Object.assign(_Title, {
     Danger: forwardRef(function DangerTitle(props, ref) {

package/es/components/forms/Checkbox/Checkbox.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.
  */
 
@@ -19,11 +19,15 @@ import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
 import { useFormProps } from '../Form';
 import { FieldWrapper } from '../FieldWrapper';
+import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
 import { CheckboxGroup } from './CheckboxGroup';
 import { CheckboxGroupContext } from './context';
-import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
-const CheckOutlined = () => (_jsx("svg", { width: "10", height: "8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3.417 7.604l-.017.018-3.4-3.4 1.433-1.433 1.985 1.985L8.192 0l1.432 1.433-6.189 6.189-.018-.018z", fill: "currentColor" }, void 0) }, void 0));
-const IndeterminateOutline = () => (_jsx("svg", { width: "9", height: "3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }, void 0) }, void 0));
+function CheckOutlined() {
+    return (_jsx("svg", { width: "10", height: "8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3.417 7.604l-.017.018-3.4-3.4 1.433-1.433 1.985 1.985L8.192 0l1.432 1.433-6.189 6.189-.018-.018z", fill: "currentColor" }, void 0) }, void 0));
+}
+function IndeterminateOutline() {
+    return (_jsx("svg", { width: "9", height: "3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }, void 0) }, void 0));
+}
 const CheckboxWrapperElement = tasty({
     as: 'label',
     qa: 'CheckboxWrapper',

package/es/components/forms/Checkbox/CheckboxGroup.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 { useCheckboxGroup } from '@react-aria/checkbox';
 import { useCheckboxGroupState } from '@react-stately/checkbox';
+import { useProviderProps } from '../../../provider';
 import { FormContext, useFormProps } from '../Form/Form';
-import { CheckboxGroupContext } from './context';
 import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableArrayValue, } from '../../../utils/react/nullableValue';
+import { CheckboxGroupContext } from './context';
 const WRAPPER_STYLES = {
     display: 'grid',
     gridColumns: {

package/es/components/forms/Checkbox/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/FieldWrapper.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 } from 'react';
-import { Text } from '../content/Text';
-import { Label } from './Label';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { Paragraph } from '../content/Paragraph';
 import { tasty } from '../../tasty';
 import { TooltipProvider } from '../overlays/Tooltip/TooltipProvider';
-import { InfoCircleOutlined } from '@ant-design/icons';
+import { Text } from '../content/Text';
 import { wrapNodeIfPlain } from '../../utils/react';
 import { Space } from '../layout/Space';
 import { Flex } from '../layout/Flex';
+import { Label } from './Label';
 const FieldElement = tasty({
     qa: 'Field',
     styles: {
@@ -67,7 +67,7 @@ const MessageElement = tasty({
 });
 function FieldWrapper(props, ref) {
     const { as, labelPosition = 'top', label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, Component, validationState, requiredMark = true, tooltip, isHidden, labelSuffix, } = props;
-    const labelComponent = label ? (_jsx(Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": label, ...labelProps, children: _jsxs(Flex, { placeContent: "baseline space-between", width: "100%", children: [_jsxs(Space, { placeItems: "center", gap: "1x", children: [_jsx("div", { children: label }, void 0), tooltip ? (_jsx(TooltipProvider, { title: tooltip, activeWrap: true, width: "initial max-content 40x", children: _jsx(InfoCircleOutlined, { style: { color: 'var(--primary-color)' } }, void 0) }, void 0)) : null, _jsx("div", { children: labelSuffix }, void 0)] }, void 0), extra && _jsx(Text, { preset: "t3", children: extra }, void 0)] }, void 0) }, void 0)) : null;
+    const labelComponent = label ? (_jsx(Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": label, ...labelProps, children: _jsxs(Flex, { placeContent: "baseline space-between", width: "100%", children: [_jsxs(Space, { placeItems: "center", gap: "0.25x", children: [_jsx("div", { children: label }, void 0), tooltip ? (_jsx(TooltipProvider, { activeWrap: true, title: tooltip, width: "initial max-content 40x", children: _jsx(InfoCircleOutlined, { style: { color: 'var(--primary-color)', margin: '0 4px' } }, void 0) }, void 0)) : null, _jsx("div", { children: labelSuffix }, void 0)] }, void 0), extra && _jsx(Text, { preset: "t3", children: extra }, void 0)] }, void 0) }, void 0)) : null;
     let descriptionComponent = description ? (_jsx("div", { "data-element": "Description", children: wrapNodeIfPlain(description, () => (_jsx(Paragraph, { children: description }, void 0))) }, void 0)) : null;
     const mods = {
         'has-sider': labelPosition === 'side',
@@ -75,7 +75,7 @@ function FieldWrapper(props, ref) {
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return (_jsxs(FieldElement, { as: as || 'div', ref: ref, mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0));
+    return (_jsxs(FieldElement, { ref: ref, as: as || 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0));
 }
 /**
  * A wrapper for form fields to provide additional decoration for inputs.

package/es/components/forms/FileInput/FileInput.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, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
+import { createFocusableRef } from '@react-spectrum/utils';
 import { useProviderProps } from '../../../provider';
 import { Action } from '../../actions/Action';
 import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
-import { createFocusableRef } from '@react-spectrum/utils';
 import { FieldWrapper } from '../FieldWrapper';
 const FileInputElement = tasty(Action, {
     styles: {
@@ -107,7 +107,7 @@ function FileInput(props, ref) {
             return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
         },
     }));
-    const fileInput = (_jsxs(FileInputElement, { qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, ref: domRef, mods: {
+    const fileInput = (_jsxs(FileInputElement, { ref: domRef, qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, mods: {
             selected: !!value,
             'drag-hover': dragHover,
         }, onKeyDown: (e) => {
@@ -115,7 +115,7 @@ function FileInput(props, ref) {
             if (e.key === 'Enter' || e.key === 'Space') {
                 (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
             }
-        }, children: [_jsx("input", { id: id, name: name, ref: inputRef, onChange: onLocalChange, "data-element": "Input", type: "file", tabIndex: -1, onDragEnter: () => {
+        }, children: [_jsx("input", { ref: inputRef, id: id, name: name, "data-element": "Input", type: "file", tabIndex: -1, onChange: onLocalChange, onDragEnter: () => {
                     setDragHover(true);
                 }, onDragLeave: () => {
                     setDragHover(false);

package/es/components/forms/Form/Field.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 { Children, cloneElement, useEffect, useRef, useState, } from 'react';
-import { useFormProps } from './Form';
 import { mergeProps } from '../../../utils/react';
 import { FieldWrapper } from '../FieldWrapper';
 import { warn } from '../../../utils/warnings';
+import { useFormProps } from './Form';
 const ID_MAP = {};
 function createId(name) {
     if (!name)

package/es/components/forms/Form/Form.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 } from "react/jsx-runtime";
 import { useDOMRef } from '@react-spectrum/utils';
-import { Provider, useProviderProps } from '../../../provider';
 import { createContext, forwardRef, useContext, useEffect, useRef, } from 'react';
+import { Provider, useProviderProps } from '../../../provider';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
-import { useForm } from './useForm';
 import { useCombinedRefs } from '../../../utils/react';
 import { timeout } from '../../../utils/promise';
+import { useForm } from './useForm';
 export const FormContext = createContext({});
 const FormElement = tasty({
     as: 'form',
@@ -108,7 +108,7 @@ function Form(props, ref) {
             form === null || form === void 0 ? void 0 : form.setInitialFieldsValue(defaultValues);
         }
     }, [defaultValues]);
-    return (_jsx(FormElement, { ...filterBaseProps(otherProps, { propNames: formPropNames }), onSubmit: onSubmitCallback, noValidate: true, styles: styles, ref: domRef, mods: { 'has-sider': labelPosition === 'side' }, children: _jsx(FormContext.Provider, { value: ctx, children: _jsx(Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }, void 0) }, void 0) }, void 0));
+    return (_jsx(FormElement, { ...filterBaseProps(otherProps, { propNames: formPropNames }), ref: domRef, noValidate: true, styles: styles, mods: { 'has-sider': labelPosition === 'side' }, onSubmit: onSubmitCallback, children: _jsx(FormContext.Provider, { value: ctx, children: _jsx(Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }, void 0) }, void 0) }, void 0));
 }
 /**
  * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.

package/es/components/forms/Form/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/forms/Form/types.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/Form/useForm.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/Form/validation.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/Input/Input.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/Input/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/forms/Label.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.
  */
 
@@ -61,12 +61,12 @@ function Label(props, ref) {
     let icon = (_jsx("span", { "aria-label": includeNecessityIndicatorInAccessibilityName
             ? formatMessage('(required)')
             : undefined, children: REQUIRED_ICON }, void 0));
-    return (_jsx(LabelElement, { ...filterBaseProps(otherProps), onClick: onClick, ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
+    return (_jsx(LabelElement, { ...filterBaseProps(otherProps), ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
             side: labelPosition === 'side',
             disabled: isDisabled,
             invalid: validationState === 'invalid',
             valid: validationState === 'valid',
-        }, children: typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [children, (necessityIndicator === 'label' ||
+        }, onClick: onClick, children: typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [children, (necessityIndicator === 'label' ||
                     (necessityIndicator === 'icon' && isRequired)) &&
                     ' \u200b', necessityIndicator === 'label' && (_jsx("span", { "aria-hidden": !includeNecessityIndicatorInAccessibilityName
                         ? isRequired