@cube-dev/ui-kit 0.26.4 → 0.27.1

package/es/components/overlays/Toasts/types.js

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

package/es/components/overlays/Toasts/use-toasts-api.js

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

package/es/components/overlays/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
@@ -93,7 +93,7 @@ function Tooltip(props, ref) {
     return (_jsxs(StyledTooltipElement, { ...tooltipProps, ...overlayProps, ref: overlayRef, styles: styles, mods: {
             open: isOpen,
             material: isMaterial,
-        }, "data-min-offset": minOffset, "data-min-scale": minScale, "data-placement": placement, children: [props.children, _jsx(TooltipTipElement, { "data-placement": placement, styles: tipStyles, ...arrowProps }, void 0)] }, void 0));
+        }, "data-min-offset": minOffset, "data-min-scale": minScale, "data-placement": placement, children: [props.children, _jsx(TooltipTipElement, { "data-placement": placement, styles: tipStyles, ...arrowProps })] }));
 }
 /**
  * Display container for Tooltip content. Has a directional arrow dependent on its placement.

package/es/components/overlays/Tooltip/TooltipProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
@@ -15,7 +15,7 @@ function TooltipProvider(props) {
     useEffect(() => {
         setRendered(true);
     }, []);
-    return rendered ? (_jsxs(TooltipTrigger, { ...otherProps, children: [children, _jsx(Tooltip, { styles: tooltipStyles, ...(width ? { width } : null), children: title }, void 0)] }, void 0)) : (_jsx(_Fragment, { children: children }, void 0));
+    return rendered ? (_jsxs(TooltipTrigger, { ...otherProps, children: [children, _jsx(Tooltip, { styles: tooltipStyles, ...(width ? { width } : null), children: title })] })) : (_jsx(_Fragment, { children: children }));
 }
 let _TooltipProvider = TooltipProvider;
 export { _TooltipProvider as TooltipProvider };

package/es/components/overlays/Tooltip/TooltipTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
@@ -41,12 +41,12 @@ function TooltipTrigger(props) {
     });
     if (!activeWrap && typeof trigger === 'string') {
         console.warn('CubeUIKit: Tooltips are only supported on elements that are both focusable and hoverable. To solve this issue you can: 1) Use active element as a trigger (`Button`, `Link`, etc); 2) Use `activeWrap` attribute to automatically wrap the content; 3) Use `ActiveZone` component to manually wrap the content.');
-        return _jsx(Block, { children: trigger }, void 0);
+        return _jsx(Block, { children: trigger });
     }
     function onClick(e) {
         e?.currentTarget?.parentNode.click();
     }
-    return (_jsxs(FocusableProvider, { ...triggerProps, ref: tooltipTriggerRef, children: [activeWrap ? (_jsx(ActiveZone, { onClick: onClick, children: trigger }, void 0)) : (trigger), _jsx(TooltipContext.Provider, { value: {
+    return (_jsxs(FocusableProvider, { ...triggerProps, ref: tooltipTriggerRef, children: [activeWrap ? (_jsx(ActiveZone, { onClick: onClick, children: trigger })) : (trigger), _jsx(TooltipContext.Provider, { value: {
                     state,
                     placement,
                     ref: overlayRef,
@@ -56,7 +56,7 @@ function TooltipTrigger(props) {
                     minScale: '1',
                     isMaterial,
                     ...tooltipProps,
-                }, children: _jsx(OverlayWrapper, { isOpen: state.isOpen, placement: props.placement || 'top', children: tooltip }, void 0) }, void 0)] }, void 0));
+                }, children: _jsx(OverlayWrapper, { isOpen: state.isOpen, placement: props.placement || 'top', children: tooltip }) })] }));
 }
 /**
  * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing

package/es/components/overlays/Tooltip/context.js

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

package/es/components/pickers/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
@@ -25,7 +25,7 @@ import { ListBoxPopup } from '../Select/Select';
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../../forms/TextInput/TextInputBase';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
 function CaretDownIcon() {
-    return (_jsx("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.49 4.102H2.51c-.269 0-.42.284-.253.478l4.49 5.206a.342.342 0 00.506 0l4.49-5.206c.167-.194.016-.478-.253-.478z", fill: "currentColor" }, void 0) }, void 0));
+    return (_jsx("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.49 4.102H2.51c-.269 0-.42.284-.253.478l4.49 5.206a.342.342 0 00.506 0l4.49-5.206c.167-.194.016-.478-.253-.478z", fill: "currentColor" }) }));
 }
 const ComboBoxWrapperElement = tasty({
     styles: INPUT_WRAPPER_STYLES,
@@ -150,13 +150,13 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         }
     }, [updatePosition, state.isOpen, state.collection.size]);
     let isInvalid = validationState === 'invalid';
-    let validationIcon = isInvalid ? (_jsx(WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } }, void 0)) : (_jsx(CheckOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--success-color)' } }, void 0));
+    let validationIcon = isInvalid ? (_jsx(WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } })) : (_jsx(CheckOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--success-color)' } }));
     let validation = cloneElement(validationIcon);
     let comboBoxWidth = wrapperRef?.current?.offsetWidth;
     if (icon) {
-        icon = _jsx("div", { "data-element": "InputIcon", children: icon }, void 0);
+        icon = _jsx("div", { "data-element": "InputIcon", children: icon });
         if (prefix) {
-            prefix = (_jsxs(_Fragment, { children: [icon, prefix] }, void 0));
+            prefix = (_jsxs(_Fragment, { children: [icon, prefix] }));
         }
         else {
             prefix = icon;
@@ -182,13 +182,13 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
     ]);
     let comboBoxField = (_jsxs(ComboBoxWrapperElement, { ref: wrapperRef, qa: qa || 'ComboBox', ...modAttrs(mods), styles: outerStyles, style: {
             zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, children: [_jsx(InputElement, { qa: "Input", ...mergeProps(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...modAttrs(mods), "data-size": size }, void 0), prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }, void 0) : null, _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingOutlined, {}, void 0) : null] }, void 0)) : null, suffixPosition === 'after' ? suffix : null, !hideTrigger ? (_jsx(TriggerElement, { qa: "ComboBoxTrigger", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ...modAttrs({
+        }, "data-size": size, children: [_jsx(InputElement, { qa: "Input", ...mergeProps(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...modAttrs(mods), "data-size": size }), prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingOutlined, {}) : null] })) : null, suffixPosition === 'after' ? suffix : null, !hideTrigger ? (_jsx(TriggerElement, { qa: "ComboBoxTrigger", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ...modAttrs({
                             pressed: isTriggerPressed,
                             focused: isTriggerFocused,
                             hovered: isTriggerHovered,
                             disabled: isDisabled,
                             loading: isLoading,
-                        }), ref: triggerRef, "data-size": size, isDisabled: isDisabled, styles: triggerStyles, children: _jsx(CaretDownIcon, {}, void 0) }, void 0)) : null] }, void 0), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...listBoxProps, shouldUseVirtualFocus: true, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth }, void 0) }, void 0)] }, void 0));
+                        }), ref: triggerRef, "data-size": size, isDisabled: isDisabled, styles: triggerStyles, children: _jsx(CaretDownIcon, {}) })) : null] }), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...listBoxProps, shouldUseVirtualFocus: true, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth }) })] }));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -206,7 +206,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
             labelSuffix,
             Component: comboBoxField,
             ref: ref,
-        } }, void 0));
+        } }));
 });
 ComboBox.Item = Item;
 Object.defineProperty(ComboBox, 'cubeInputType', {

package/es/components/pickers/Menu/Menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
@@ -38,7 +38,7 @@ function Menu(props, ref) {
         },
     };
     useSyncRef(contextProps, domRef);
-    return (_jsxs(StyledMenu, { ...mergeProps(defaultProps, menuProps, filterBaseProps(completeProps)), ref: domRef, children: [header && _jsx(StyledMenuHeader, { children: header }, void 0), items.map((item) => {
+    return (_jsxs(StyledMenu, { ...mergeProps(defaultProps, menuProps, filterBaseProps(completeProps)), ref: domRef, children: [header && _jsx(StyledMenuHeader, { children: header }), items.map((item) => {
                 if (item.type === 'section') {
                     return (_jsx(MenuSection, { item: item, state: state, styles: sectionStyles, itemStyles: itemStyles, headingStyles: sectionHeadingStyles, selectionIcon: selectionIcon, onAction: completeProps.onAction }, item.key));
                 }
@@ -49,7 +49,7 @@ function Menu(props, ref) {
                 return cloneElement(menuItem, {
                     key: item.key,
                 });
-            })] }, void 0));
+            })] }));
 }
 // forwardRef doesn't support generic parameters, so cast the result to the correct type
 // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref

package/es/components/pickers/Menu/MenuButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
@@ -71,13 +71,13 @@ const RadioIcon = tasty({
         },
     },
 });
-const getPostfix = (postfix) => typeof postfix === 'string' ? (_jsx(Text, { nowrap: true, color: "inherit", "data-element": "Postfix", children: postfix }, void 0)) : (postfix);
+const getPostfix = (postfix) => typeof postfix === 'string' ? (_jsx(Text, { nowrap: true, color: "inherit", "data-element": "Postfix", children: postfix })) : (postfix);
 const getSelectionTypeIcon = (selectionIcon) => {
     switch (selectionIcon) {
         case 'checkbox':
-            return _jsx(CheckOutlined, {}, void 0);
+            return _jsx(CheckOutlined, {});
         case 'radio':
-            return _jsx(RadioIcon, {}, void 0);
+            return _jsx(RadioIcon, {});
         default:
             return undefined;
     }
@@ -93,7 +93,7 @@ export function MenuButton({ children, icon, postfix, ...props }) {
         selectable: isSelectable,
         selected: isSelected,
     };
-    return (_jsxs(StyledButton, { type: "neutral", size: "small", ...props, icon: checkIcon, mods: mods, children: [icon && _jsx(Text, { color: "inherit", children: icon }, void 0), _jsxs(Space, { gap: "1x", placeContent: "space-between", overflow: "auto", width: "100%", children: [_jsx(Text, { ellipsis: true, color: "inherit", children: children }, void 0), postfix && getPostfix(postfix)] }, void 0)] }, void 0));
+    return (_jsxs(StyledButton, { type: "neutral", size: "small", ...props, icon: checkIcon, mods: mods, children: [icon && _jsx(Text, { color: "inherit", children: icon }), _jsxs(Space, { gap: "1x", placeContent: "space-between", overflow: "auto", width: "100%", children: [_jsx(Text, { ellipsis: true, color: "inherit", children: children }), postfix && getPostfix(postfix)] })] }));
 }
 
         

package/es/components/pickers/Menu/MenuItem.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
@@ -42,7 +42,7 @@ export function MenuItem(props) {
             pressed: isPressed,
         },
     };
-    const contents = (_jsx(MenuButton, { ...mergeProps(itemProps, buttonProps), styles: styles, selectionIcon: selectionIcon, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }, void 0));
+    const contents = (_jsx(MenuButton, { ...mergeProps(itemProps, buttonProps), styles: styles, selectionIcon: selectionIcon, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }));
     return (_jsx(FocusRing, { children: _jsx(StyledMenuItem, { ...mergeProps(menuItemProps, hoverProps), ref: ref, "data-qa": itemProps.qa ? `MenuItem-${itemProps.qa}` : `MenuItem-${key}`, mods: {
                 disabled: isDisabled,
                 selected: isSelected,
@@ -55,7 +55,7 @@ export function MenuItem(props) {
                         icon: { className: 'icon', size: 'S' },
                         description: { className: 'description', ...descriptionProps },
                         keyboard: { className: 'keyboard', ...keyboardShortcutProps },
-                    }, children: contents }, void 0) }, void 0) }, void 0) }, void 0));
+                    }, children: contents }) }) }) }));
 }
 
         

package/es/components/pickers/Menu/MenuSection.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
@@ -17,13 +17,13 @@ export function MenuSection(props) {
         heading,
         'aria-label': item['aria-label'],
     });
-    return (_jsx(_Fragment, { children: _jsxs(StyledMenuSection, { ...itemProps, styles: styles, children: [heading && (_jsx(StyledMenuSectionHeading, { ...headingProps, styles: headingStyles, children: heading }, void 0)), _jsx(StyledMenu, { ...groupProps, mods: { section: true }, children: [...item.childNodes].map((node) => {
+    return (_jsx(_Fragment, { children: _jsxs(StyledMenuSection, { ...itemProps, styles: styles, children: [heading && (_jsx(StyledMenuSectionHeading, { ...headingProps, styles: headingStyles, children: heading })), _jsx(StyledMenu, { ...groupProps, mods: { section: true }, children: [...item.childNodes].map((node) => {
                         let item = (_jsx(MenuItem, { item: node, styles: itemStyles, state: state, onAction: onAction }, node.key));
                         if (node.props.wrapper) {
                             item = node.props.wrapper(item);
                         }
                         return item;
-                    }) }, void 0)] }, void 0) }, void 0));
+                    }) })] }) }));
 }
 
         

package/es/components/pickers/Menu/MenuTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
@@ -67,16 +67,16 @@ function MenuTrigger(props, ref) {
             popover: !isMobile,
         },
     };
-    const contents = (_jsxs(_Fragment, { children: [_jsx(DismissButton, { onDismiss: state.close }, void 0), menu, _jsx(DismissButton, { onDismiss: state.close }, void 0)] }, void 0));
+    const contents = (_jsxs(_Fragment, { children: [_jsx(DismissButton, { onDismiss: state.close }), menu, _jsx(DismissButton, { onDismiss: state.close })] }));
     // On small screen devices, the menu is rendered in a tray, otherwise a popover.
     let overlay;
     if (isMobile) {
-        overlay = (_jsx(Tray, { isOpen: state.isOpen, onClose: state.close, children: contents }, void 0));
+        overlay = (_jsx(Tray, { isOpen: state.isOpen, onClose: state.close, children: contents }));
     }
     else {
-        overlay = (_jsx(Popover, { ref: menuPopoverRef, hideArrow: true, isNonModal: true, isOpen: state.isOpen, style: positionProps.style, placement: placement, onClose: state.close, children: contents }, void 0));
+        overlay = (_jsx(Popover, { ref: menuPopoverRef, hideArrow: true, isNonModal: true, isOpen: state.isOpen, style: positionProps.style, placement: placement, onClose: state.close, children: contents }));
     }
-    return (_jsxs(Fragment, { children: [_jsx(SlotProvider, { slots: { actionButton: { holdAffordance: trigger === 'longPress' } }, children: _jsx(PressResponder, { ...menuTriggerProps, ref: menuTriggerRef, isPressed: state.isOpen, children: menuTrigger }, void 0) }, void 0), _jsx(MenuContext.Provider, { value: menuContext, children: overlay }, void 0)] }, void 0));
+    return (_jsxs(Fragment, { children: [_jsx(SlotProvider, { slots: { actionButton: { holdAffordance: trigger === 'longPress' } }, children: _jsx(PressResponder, { ...menuTriggerProps, ref: menuTriggerRef, isPressed: state.isOpen, children: menuTrigger }) }), _jsx(MenuContext.Provider, { value: menuContext, children: overlay })] }));
 }
 /**
  * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,

package/es/components/pickers/Menu/context.js

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

package/es/components/pickers/Menu/styled.js

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

package/es/components/pickers/Select/Select.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
@@ -29,7 +29,7 @@ import { mergeProps, useCombinedRefs } from '../../../utils/react';
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../../forms/TextInput/TextInputBase';
 import { DEFAULT_BUTTON_STYLES } from '../../actions';
 function CaretDownIcon() {
-    return (_jsx("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.49 4.102H2.51c-.269 0-.42.284-.253.478l4.49 5.206a.342.342 0 00.506 0l4.49-5.206c.167-.194.016-.478-.253-.478z", fill: "currentColor" }, void 0) }, void 0));
+    return (_jsx("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.49 4.102H2.51c-.269 0-.42.284-.253.478l4.49 5.206a.342.342 0 00.506 0l4.49-5.206c.167-.194.016-.478-.253-.478z", fill: "currentColor" }) }));
 }
 const SelectWrapperElement = tasty({
     styles: {
@@ -222,13 +222,13 @@ function Select(props, ref) {
     // Get props for the button based on the trigger props from useSelect
     let { buttonProps } = useButton(triggerProps, triggerRef);
     let isInvalid = validationState === 'invalid';
-    let validationIcon = isInvalid ? (_jsx(WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } }, void 0)) : (_jsx(CheckOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--success-color)' } }, void 0));
+    let validationIcon = isInvalid ? (_jsx(WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } })) : (_jsx(CheckOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--success-color)' } }));
     let validation = cloneElement(validationIcon);
     let triggerWidth = triggerRef?.current?.offsetWidth;
     if (icon) {
-        icon = _jsx("div", { "data-element": "ButtonIcon", children: icon }, void 0);
+        icon = _jsx("div", { "data-element": "ButtonIcon", children: icon });
         if (prefix) {
-            prefix = (_jsxs(_Fragment, { children: [icon, prefix] }, void 0));
+            prefix = (_jsxs(_Fragment, { children: [icon, prefix] }));
         }
         else {
             prefix = icon;
@@ -256,9 +256,9 @@ function Select(props, ref) {
         showPlaceholder,
         prefix,
     ]);
-    let selectField = (_jsxs(SelectWrapperElement, { qa: qa || 'Select', mods: modifiers, styles: outerStyles, "data-size": size, "data-type": type, "data-theme": theme, children: [_jsx(HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }, void 0), _jsxs(SelectElement, { ...mergeProps(buttonProps, hoverProps, focusProps), ref: triggerRef, styles: inputStyles, "data-theme": theme, "data-size": size, "data-type": type, mods: modifiers, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }, void 0) : null, _jsx("span", { "data-element": "Value", ...valueProps, children: state.selectedItem
+    let selectField = (_jsxs(SelectWrapperElement, { qa: qa || 'Select', mods: modifiers, styles: outerStyles, "data-size": size, "data-type": type, "data-theme": theme, children: [_jsx(HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }), _jsxs(SelectElement, { ...mergeProps(buttonProps, hoverProps, focusProps), ref: triggerRef, styles: inputStyles, "data-theme": theme, "data-size": size, "data-type": type, mods: modifiers, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx("span", { "data-element": "Value", ...valueProps, children: state.selectedItem
                             ? state.selectedItem.rendered
-                            : placeholder || _jsx(_Fragment, { children: "\u00A0" }, void 0) }, void 0), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0), suffixPosition === 'after' ? suffix : null, _jsx("div", { "data-element": "CaretIcon", children: _jsx(CaretDownIcon, {}, void 0) }, void 0)] }, void 0)] }, void 0), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...menuProps, popoverRef: popoverRef, listBoxRef: listBoxRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: triggerWidth }, void 0) }, void 0)] }, void 0));
+                            : placeholder || _jsx(_Fragment, { children: "\u00A0" }) }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}), suffixPosition === 'after' ? suffix : null, _jsx("div", { "data-element": "CaretIcon", children: _jsx(CaretDownIcon, {}) })] })] }), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...menuProps, popoverRef: popoverRef, listBoxRef: listBoxRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: triggerWidth }) })] }));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -277,7 +277,7 @@ function Select(props, ref) {
             labelSuffix,
             Component: selectField,
             ref: ref,
-        } }, void 0));
+        } }));
 }
 export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus = false, placement, minWidth, ...otherProps }) {
     // Get props for the listbox
@@ -301,7 +301,7 @@ export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, ove
     return (_jsx(StyledOverlayElement, { ...overlayProps, ...parentOverlayProps, ref: popoverRef, styles: overlayStyles, style: {
             '--overlay-min-width': minWidth ? `${minWidth}px` : 'initial',
             ...parentOverlayProps?.style,
-        }, "data-position": placement, children: _jsxs(FocusScope, { restoreFocus: true, children: [_jsx(DismissButton, { onDismiss: () => state.close() }, void 0), _jsx(ListBoxElement, { styles: listBoxStyles, ...mergeProps(listBoxProps, otherProps), ref: listBoxRef, children: Array.from(state.collection).map((item) => (_jsx(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus }, item.key))) }, void 0), _jsx(DismissButton, { onDismiss: () => state.close() }, void 0)] }, void 0) }, void 0));
+        }, "data-position": placement, children: _jsxs(FocusScope, { restoreFocus: true, children: [_jsx(DismissButton, { onDismiss: () => state.close() }), _jsx(ListBoxElement, { styles: listBoxStyles, ...mergeProps(listBoxProps, otherProps), ref: listBoxRef, children: Array.from(state.collection).map((item) => (_jsx(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus }, item.key))) }), _jsx(DismissButton, { onDismiss: () => state.close() })] }) }));
 }
 function Option({ item, state, styles, shouldUseVirtualFocus }) {
     let ref = useRef(null);

package/es/components/portal/Portal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
@@ -34,7 +34,7 @@ import { usePortal } from './usePortal';
 export function Portal(props) {
     const { children, mountRoot, isDisabled } = usePortal(props);
     if (isDisabled)
-        return _jsx(_Fragment, { children: children }, void 0);
+        return _jsx(_Fragment, { children: children });
     return mountRoot ? ReactDOM.createPortal(children, mountRoot) : null;
 }
 

package/es/components/portal/PortalProvider.js

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

package/es/components/portal/index.js

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

package/es/components/portal/storybook/templates/CustomRoot.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
@@ -10,7 +10,7 @@ import { useRef } from 'react';
 import { Portal } from '../../Portal';
 export const CustomRootTemplate = (args) => {
     const rootRef = useRef(null);
-    return (_jsxs(_Fragment, { children: ["Disabled portal's content should be there ", ' -> ', _jsx(Portal, { ...args, root: rootRef, children: "Portal's content" }, void 0), _jsxs("div", { ref: rootRef, children: ["Using custom portal root content should be there ", ' -> '] }, void 0), "By default, Portal content should be there ", ' -> '] }, void 0));
+    return (_jsxs(_Fragment, { children: ["Disabled portal's content should be there ", ' -> ', _jsx(Portal, { ...args, root: rootRef, children: "Portal's content" }), _jsxs("div", { ref: rootRef, children: ["Using custom portal root content should be there ", ' -> '] }), "By default, Portal content should be there ", ' -> '] }));
 };
 
         

package/es/components/portal/storybook/templates/PortalOrder.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Block } from '../../../Block';
 import { Portal } from '../../Portal';
-export const PortalOrderTemplate = (args) => (_jsxs(_Fragment, { children: [_jsxs(Portal, { ...args, children: [_jsx(Block, { children: "Portal 1" }, void 0), _jsx(Portal, { children: _jsx(Block, { children: "Portal 3" }, void 0) }, void 0), _jsx(Portal, { children: _jsx(Block, { children: "Portal 4" }, void 0) }, void 0)] }, void 0), _jsx(Portal, { children: _jsx(Block, { children: "Portal 2" }, void 0) }, void 0)] }, void 0));
+export const PortalOrderTemplate = (args) => (_jsxs(_Fragment, { children: [_jsxs(Portal, { ...args, children: [_jsx(Block, { children: "Portal 1" }), _jsx(Portal, { children: _jsx(Block, { children: "Portal 3" }) }), _jsx(Portal, { children: _jsx(Block, { children: "Portal 4" }) })] }), _jsx(Portal, { children: _jsx(Block, { children: "Portal 2" }) })] }));
 
         

package/es/components/portal/storybook/templates/basic.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Portal } from '../../Portal';
 import { Divider } from '../../../content/Divider';
-export const Basic = (args) => (_jsxs(_Fragment, { children: ["By default, Portal content should be there ", ' -> ', _jsxs(Portal, { ...args, children: ["Portal's content.", !args.isDisabled && " But, if you disable me, I'll be near the arrow"] }, void 0), _jsx(Divider, {}, void 0)] }, void 0));
+export const Basic = (args) => (_jsxs(_Fragment, { children: ["By default, Portal content should be there ", ' -> ', _jsxs(Portal, { ...args, children: ["Portal's content.", !args.isDisabled && " But, if you disable me, I'll be near the arrow"] }), _jsx(Divider, {})] }));
 
         

package/es/components/portal/storybook/templates/index.js

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

package/es/components/portal/types.js

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

package/es/components/portal/usePortal.js

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

package/es/components/shared/InvalidIcon.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { WarningOutlined } from '@ant-design/icons';
-export const InvalidIcon = (_jsx(WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } }, void 0));
+export const InvalidIcon = (_jsx(WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } }));
 
         

package/es/components/shared/ValidIcon.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CheckOutlined } from '@ant-design/icons';
-export const ValidIcon = (_jsx(CheckOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--success-color)' } }, void 0));
+export const ValidIcon = (_jsx(CheckOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--success-color)' } }));
 
         

package/es/components/status/LoadingAnimation/LoadingAnimation.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
@@ -117,7 +117,7 @@ const ImgElement = styled.img(({ index }) => `
     : ''}
 `);
 function Cube(props) {
-    return _jsx(ImgElement, { role: "presentation", src: cubeImage, alt: "", ...props }, void 0);
+    return _jsx(ImgElement, { role: "presentation", src: cubeImage, alt: "", ...props });
 }
 const SIZE_MAP = {
     small: 32,
@@ -126,7 +126,7 @@ const SIZE_MAP = {
 };
 export function LoadingAnimation({ size = 'medium', ...props }) {
     const numSize = SIZE_MAP[size] || size || SIZE_MAP.medium;
-    return (_jsxs(Block, { role: "img", "aria-label": "Loading animation", width: numSize, height: numSize * 1.1388888889, style: { position: 'relative' }, ...props, children: [_jsx(Cube, { style: { transform: 'translate(0%, 72.5%)' } }, void 0), _jsx(Cube, { style: { transform: 'translate(98%, 72.5%)' } }, void 0), _jsx(Cube, { style: { transform: 'translate(49%, 96.5%)' } }, void 0), _jsx(Cube, { index: 0 }, void 0), _jsx(Cube, { index: 1 }, void 0), _jsx(Cube, { index: 2 }, void 0)] }, void 0));
+    return (_jsxs(Block, { role: "img", "aria-label": "Loading animation", width: numSize, height: numSize * 1.1388888889, style: { position: 'relative' }, ...props, children: [_jsx(Cube, { style: { transform: 'translate(0%, 72.5%)' } }), _jsx(Cube, { style: { transform: 'translate(98%, 72.5%)' } }), _jsx(Cube, { style: { transform: 'translate(49%, 96.5%)' } }), _jsx(Cube, { index: 0 }), _jsx(Cube, { index: 1 }), _jsx(Cube, { index: 2 })] }));
 }
 
         

package/es/components/status/LoadingAnimation/index.js

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

package/es/components/status/Spin/Cube.js

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

package/es/components/status/Spin/InternalSpinner.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.4
+ * @cube-dev/ui-kit v0.27.1
  * Released under the MIT license.
  */
 
@@ -15,7 +15,7 @@ export const InternalSpinner = memo(function InternalSpinner(props) {
     const { size } = props;
     return (
     // Even though using size as a key resets the animation, it helps safari to resize the cubes.
-    _jsx(SpinsContainer, { ownSize: CUBE_SIZE_MAP[size], children: _jsxs(SpinsBox, { children: [_jsx(Cube, { position: "top" }, void 0), _jsx(Cube, { position: "right" }, void 0), _jsx(Cube, { position: "bottom" }, void 0)] }, void 0) }, size));
+    _jsx(SpinsContainer, { ownSize: CUBE_SIZE_MAP[size], children: _jsxs(SpinsBox, { children: [_jsx(Cube, { position: "top" }), _jsx(Cube, { position: "right" }), _jsx(Cube, { position: "bottom" })] }) }, size));
 });
 const CUBE_SIZE_MAP = {
     small: 24,