@cube-dev/ui-kit 0.0.0-canary-d77d66f → 0.0.0-canary-52722c8

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 
@@ -17,9 +17,8 @@ import { StyledMenu, StyledMenuHeader } from './styled';
 import { MenuItem } from './MenuItem';
 import { MenuSection } from './MenuSection';
 import { useMenuContext } from './context';
-import { useContextStyles } from '../../../providers/StyleProvider';
 function Menu(props, ref) {
-    const { header, footer, styles } = props;
+    const { header, footer } = props;
     const domRef = useDOMRef(ref);
     const contextProps = useMenuContext();
     const completeProps = mergeProps(contextProps, props);
@@ -27,14 +26,9 @@ function Menu(props, ref) {
     const items = [...state.collection];
     const hasSections = items.some((item) => item.type === 'section');
     const { menuProps } = useMenu(completeProps, state, domRef);
-    const menuStyles = useContextStyles('Menu', props) || {};
-    const containerStyles = extractStyles(completeProps, CONTAINER_STYLES);
+    const styles = extractStyles(completeProps, CONTAINER_STYLES);
     const baseProps = {
-        styles: {
-            ...menuStyles,
-            ...containerStyles,
-            ...styles,
-        },
+        styles,
         mods: {
             sections: hasSections,
             footer: !!footer,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

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

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

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

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckOutlined, LoadingOutlined, WarningOutlined, } from '@ant-design/icons';
 import { mergeProps, useCombinedRefs } from '../../../utils/react';
 import { cloneElement, forwardRef, useRef, useState, } from 'react';
@@ -19,117 +19,127 @@ import { DismissButton, useOverlay, useOverlayPosition, } from '@react-aria/over
 import { useFormProps } from '../../forms/Form/Form';
 import { useFocus as useAriaFocus, useHover } from '@react-aria/interactions';
 import { useProviderProps } from '../../../provider';
-import { Base } from '../../Base';
-import { BLOCK_STYLES, extractStyles, OUTER_STYLES, } from '../../../tasty';
+import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 import { FieldWrapper } from '../../forms/FieldWrapper';
 import { Item } from '@react-stately/collections';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
 import { getOverlayTransitionCSS } from '../../../utils/transitions';
-import { useContextStyles } from '../../../providers/StyleProvider';
+import styled from 'styled-components';
 const CaretDownIcon = () => (_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));
-const SELECT_STYLES = {
-    display: 'grid',
-    position: 'relative',
-};
-const INPUT_STYLES = {
-    display: 'grid',
-    flow: 'column',
-    gridColumns: {
-        '': '1fr auto',
-        'with-prefix': 'auto 1fr auto',
+const SelectWrapperElement = tasty({
+    styles: {
+        display: 'grid',
+        position: 'relative',
     },
-    placeItems: 'center stretch',
-    placeContent: 'center stretch',
-    gap: '1x',
-    padding: {
-        '': '(1.25x - 1bw) 1x (1.25x - 1bw) (1.5x - 1bw)',
-        '[data-size="small"]': '(.75x - 1px) 1x (.75x - 1px)  (1.5x - 1px)',
+});
+const SelectElement = tasty({
+    as: 'button',
+    qa: 'Button',
+    styles: {
+        display: 'grid',
+        flow: 'column',
+        gridColumns: {
+            '': '1fr auto',
+            'with-prefix': 'auto 1fr auto',
+        },
+        placeItems: 'center stretch',
+        placeContent: 'center stretch',
+        gap: '1x',
+        padding: {
+            '': '(1.25x - 1bw) 1x (1.25x - 1bw) (1.5x - 1bw)',
+            '[data-size="small"]': '(.75x - 1px) 1x (.75x - 1px)  (1.5x - 1px)',
+        },
+        border: {
+            '': true,
+            invalid: '#danger-text.50',
+            valid: '#success-text.50',
+            focused: true,
+        },
+        radius: true,
+        reset: 'input',
+        preset: 'default',
+        outline: {
+            '': '#purple-03.0',
+            focused: '#purple-03',
+        },
+        color: {
+            '': '#dark.85',
+            invalid: '#danger-text',
+            focused: '#dark.85',
+            disabled: '#dark.30',
+        },
+        fill: {
+            '': '#purple.0',
+            hovered: '#dark.04',
+            pressed: '#dark.08',
+            disabled: '#dark.04',
+        },
+        fontWeight: 400,
+        textAlign: 'left',
+        cursor: 'pointer',
+        transition: 'theme',
     },
-    border: {
-        '': true,
-        invalid: '#danger-text.50',
-        valid: '#success-text.50',
-        focused: true,
+});
+const ListBoxElement = tasty({
+    as: 'ul',
+    styles: {
+        display: 'flex',
+        gap: '.5x',
+        flow: 'column',
+        margin: '0',
+        padding: '.5x',
+        listStyle: 'none',
+        radius: true,
+        fill: '#white',
+        shadow: '0px 4px 16px #shadow',
+        height: 'initial 30x',
+        overflow: 'hidden auto',
+        styledScrollbar: true,
     },
-    radius: true,
-    reset: 'input',
-    preset: 'default',
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
+});
+const OptionElement = tasty({
+    as: 'li',
+    styles: {
+        display: 'block',
+        padding: '(1x - 1px) (1.5x - 1px)',
+        cursor: 'pointer',
+        radius: true,
+        fill: {
+            '': '#dark.0',
+            'hovered | focused': '#dark.04',
+            'pressed | selected': '#purple.10',
+            '[disabled]': '#dark.04',
+        },
+        color: {
+            '': '#dark.75',
+            'hovered | focused': '#dark.75',
+            'pressed | selected': '#purple',
+            '[disabled]': '#dark.30',
+        },
+        preset: 't3m',
+        transition: 'theme',
     },
-    color: {
-        '': '#dark.85',
-        invalid: '#danger-text',
-        focused: '#dark.85',
-        disabled: '#dark.30',
+});
+const OverlayElement = tasty({
+    styles: {
+        position: 'absolute',
+        width: 'min @overlay-min-width',
     },
-    fill: {
-        '': '#purple.0',
-        hovered: '#dark.04',
-        pressed: '#dark.08',
-        disabled: '#dark.04',
-    },
-    fontWeight: 400,
-    textAlign: 'left',
-    cursor: 'pointer',
-    transition: 'theme',
-};
-const OVERLAY_STYLES = {
-    position: 'absolute',
-};
-const LISTBOX_STYLES = {
-    display: 'flex',
-    gap: '.5x',
-    flow: 'column',
-    margin: '0',
-    padding: '.5x',
-    listStyle: 'none',
-    radius: true,
-    fill: '#white',
-    shadow: '0px 4px 16px #shadow',
-    height: 'initial 30x',
-    overflow: 'hidden auto',
-    styledScrollbar: true,
-};
-const OPTION_STYLES = {
-    display: 'block',
-    padding: '(1x - 1px) (1.5x - 1px)',
-    cursor: 'pointer',
-    radius: true,
-    fill: {
-        '': '#white',
-        focused: '#dark.04',
-        selected: '#purple',
-        'focused & selected': '#purple-text',
-        disabled: '#dark.04',
-    },
-    color: {
-        '': '#dark.85',
-        selected: '#white',
-        disabled: '#dark.30',
-    },
-    preset: 't3m',
-};
+});
+const StyledOverlayElement = styled(OverlayElement) `
+  ${(props) => {
+    return getOverlayTransitionCSS({ placement: props === null || props === void 0 ? void 0 : props['data-position'] });
+}}
+`;
 function Select(props, ref) {
     var _a;
     props = useProviderProps(props);
     props = useFormProps(props);
     let { qa, label, extra, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, suffix, listBoxStyles, overlayStyles, message, description, direction = 'bottom', shouldFlip = true, requiredMark = true, placeholder, tooltip, size, styles, ...otherProps } = props;
     let state = useSelectState(props);
-    const outerStyles = extractStyles(otherProps, OUTER_STYLES, {
-        ...SELECT_STYLES,
-        ...useContextStyles('Select_Wrapper', otherProps),
-        ...styles,
-    });
-    inputStyles = extractStyles(otherProps, BLOCK_STYLES, {
-        ...INPUT_STYLES,
-        ...useContextStyles('Select', otherProps),
-        ...inputStyles,
-    });
-    if (styles) {
-    }
+    const outerStyles = extractStyles(otherProps, OUTER_STYLES, styles);
+    inputStyles = extractStyles(otherProps, BLOCK_STYLES, inputStyles);
     ref = useCombinedRefs(ref);
     triggerRef = useCombinedRefs(triggerRef);
     popoverRef = useCombinedRefs(popoverRef);
@@ -154,20 +164,22 @@ function Select(props, ref) {
     let validationIcon = isInvalid ? (_jsx(WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : (_jsx(CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
     let validation = cloneElement(validationIcon);
     let triggerWidth = (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-    let selectField = (_jsxs(Base, { qa: "SelectWrapper", mods: {
+    let selectField = (_jsxs(SelectWrapperElement, { qa: qa || 'Select', mods: {
             invalid: isInvalid,
             valid: validationState === 'valid',
             disabled: isDisabled,
             hovered: isHovered,
             focused: isFocused,
-        }, styles: outerStyles, "data-size": size, children: [_jsx(HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }, void 0), _jsxs(Base, { qa: qa || 'Select', as: "button", ...mergeProps(buttonProps, hoverProps, focusProps), ref: triggerRef, styles: inputStyles, "data-size": size, mods: {
+        }, styles: outerStyles, "data-size": size, 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-size": size, mods: {
                     invalid: isInvalid,
                     valid: validationState === 'valid',
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
                     'with-prefix': !!prefix,
-                }, children: [prefix, _jsx("span", { ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : placeholder }, void 0), (validationState || isLoading || suffix) && (_jsxs("div", { children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0), suffix] }, void 0)), _jsx(CaretDownIcon, {}, 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));
+                }, children: [prefix, _jsx("span", { ...valueProps, children: state.selectedItem
+                            ? state.selectedItem.rendered
+                            : placeholder || _jsx(_Fragment, { children: "\u00A0" }, void 0) }, void 0), (validationState || isLoading || suffix) && (_jsxs("div", { children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0), suffix] }, void 0)), _jsx(CaretDownIcon, {}, 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));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -194,11 +206,6 @@ export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, ove
         shouldUseVirtualFocus,
         ...otherProps,
     }, state, listBoxRef);
-    listBoxStyles = {
-        ...LISTBOX_STYLES,
-        ...useContextStyles('ListBoxPopup'),
-        ...listBoxStyles,
-    };
     // Handle events that should cause the popup to close,
     // e.g. blur, clicking outside, or pressing the escape key.
     let { overlayProps } = useOverlay({
@@ -211,22 +218,16 @@ export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, ove
     // trigger when the popup is closed. In addition, add hidden
     // <DismissButton> components at the start and end of the list
     // to allow screen reader users to dismiss the popup easily.
-    return (_jsx(Base, { styles: {
-            minWidth: minWidth ? `${minWidth}px` : 'initial',
-            ...OVERLAY_STYLES,
-            overlayStyles,
-        }, ...parentOverlayProps, ...overlayProps, css: getOverlayTransitionCSS({ placement }), "data-position": placement, ref: popoverRef, children: _jsxs(FocusScope, { restoreFocus: true, children: [_jsx(DismissButton, { onDismiss: () => state.close() }, void 0), _jsx(Base, { as: "ul", 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));
+    return (_jsx(StyledOverlayElement, { ...overlayProps, ...parentOverlayProps, styles: overlayStyles, style: {
+            '--overlay-min-width': minWidth ? `${minWidth}px` : 'initial',
+            ...parentOverlayProps === null || parentOverlayProps === void 0 ? void 0 : parentOverlayProps.style,
+        }, "data-position": placement, ref: popoverRef, 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));
 }
 function Option({ item, state, styles, shouldUseVirtualFocus }) {
     let ref = useRef(null);
     let isDisabled = state.disabledKeys.has(item.key);
     let isSelected = state.selectionManager.isSelected(item.key);
     let isVirtualFocused = state.selectionManager.focusedKey === item.key;
-    styles = {
-        ...OPTION_STYLES,
-        ...useContextStyles('Option'),
-        ...styles,
-    };
     let { optionProps } = useOption({
         key: item.key,
         isDisabled,
@@ -239,7 +240,7 @@ function Option({ item, state, styles, shouldUseVirtualFocus }) {
     // style to the focused option
     let [isFocused, setFocused] = useState(false);
     let { focusProps } = useAriaFocus({ onFocusChange: setFocused });
-    return (_createElement(Base, { as: "li", ...mergeProps(optionProps, focusProps), ref: ref, mods: {
+    return (_createElement(OptionElement, { ...mergeProps(optionProps, focusProps), ref: ref, mods: {
             selected: isSelected,
             focused: shouldUseVirtualFocus ? isVirtualFocused : isFocused,
             disabled: isDisabled,

package/es/components/portal/Portal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

package/es/components/portal/PortalProvider.js

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 
@@ -14,11 +14,11 @@ const POSITIONS = [
     [49, 49],
     [98, 25],
 ];
-const cubeImage = 'data:image/svg+xml,%3Csvg width=\'36\' height=\'41\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z\' fill=\'%23FAFAFF\'/%3E%3Cpath d=\'M18 41L0 30.75l.101-20.5L18 20.5\' fill=\'%23E5E5F6\'/%3E%3Cpath d=\'M36 30.75L18 41V20.6l17.899-10.25L36 30.75z\' fill=\'%23C0C0EA\'/%3E%3C/svg%3E';
+const cubeImage = "data:image/svg+xml,%3Csvg width='36' height='41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z' fill='%23FAFAFF'/%3E%3Cpath d='M18 41L0 30.75l.101-20.5L18 20.5' fill='%23E5E5F6'/%3E%3Cpath d='M36 30.75L18 41V20.6l17.899-10.25L36 30.75z' fill='%23C0C0EA'/%3E%3C/svg%3E";
 function pos(index) {
     return `transform: translate(${POSITIONS[index][0]}%, ${POSITIONS[index][1]}%);`;
 }
-const RawImg = styled.img(({ index }) => `
+const ImgElement = styled.img(({ index }) => `
   display: block;
   position: absolute;
   width: 50%;
@@ -117,7 +117,7 @@ const RawImg = styled.img(({ index }) => `
     : ''}
 `);
 const Cube = (props) => {
-    return _jsx(RawImg, { role: "presentation", src: cubeImage, alt: "", ...props }, void 0);
+    return _jsx(ImgElement, { role: "presentation", src: cubeImage, alt: "", ...props }, void 0);
 };
 const SIZE_MAP = {
     small: 32,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 
@@ -18,7 +18,7 @@ const Spin = ({ size, spinning, style, children, ...props }, ref) => {
     if (spinning === false) {
         return _jsx(_Fragment, { children: children }, void 0);
     }
-    return (_jsx(Block, { ref: ref, role: "img", "aria-label": "Loading animation", height: "1em", opacity: ".8", style: {
+    return (_jsx(Block, { ref: ref, role: "img", "aria-label": "Loading animation", height: "1em 1em", opacity: ".8", style: {
             fontSize: localSize * 8,
             position: 'relative',
             ...(style || {}),

package/es/data/themes.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

package/es/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

package/es/provider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

package/es/providers/StyleProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

package/es/services/notification.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

package/es/shared/form.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

package/es/shared/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

package/es/stories/FormFieldArgs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

package/es/stories/components/ConfirmDeletionDialogForm.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */
 

package/es/stories/components/DialogFormApp.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d77d66f
+ * @cube-dev/ui-kit v0.0.0-canary-52722c8
  * Released under the MIT license.
  */