@cube-dev/ui-kit 0.0.0-canary-b916e8d → 0.0.0-canary-5cc6499

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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -17,8 +17,9 @@ 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 } = props;
+    const { header, footer, styles } = props;
     const domRef = useDOMRef(ref);
     const contextProps = useMenuContext();
     const completeProps = mergeProps(contextProps, props);
@@ -26,9 +27,14 @@ function Menu(props, ref) {
     const items = [...state.collection];
     const hasSections = items.some((item) => item.type === 'section');
     const { menuProps } = useMenu(completeProps, state, domRef);
-    const styles = extractStyles(completeProps, CONTAINER_STYLES);
+    const menuStyles = useContextStyles('Menu', props) || {};
+    const containerStyles = extractStyles(completeProps, CONTAINER_STYLES);
     const baseProps = {
-        styles,
+        styles: {
+            ...menuStyles,
+            ...containerStyles,
+            ...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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

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

@@ -1,23 +1,23 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { MenuItem } from './MenuItem';
 import { useMenuSection } from '@react-aria/menu';
 import { StyledMenu, StyledMenuSection, StyledMenuSectionHeading, } from './styled';
 /** @private */
 export function MenuSection(props) {
-    let { item, state, onAction } = props;
-    let { itemProps, headingProps, groupProps } = useMenuSection({
-        heading: item.rendered,
+    const { item, state, onAction } = props;
+    const heading = item.rendered;
+    const { itemProps, headingProps, groupProps } = useMenuSection({
+        heading,
         'aria-label': item['aria-label'],
     });
-    return (_jsx(Fragment, { children: _jsxs(StyledMenuSection, { ...itemProps, children: [item.rendered && (_jsx(StyledMenuSectionHeading, { ...headingProps, children: item.rendered }, void 0)), _jsx(StyledMenu, { ...groupProps, mods: { section: true }, children: [...item.childNodes].map((node) => {
+    return (_jsx(_Fragment, { children: _jsxs(StyledMenuSection, { ...itemProps, children: [heading && (_jsx(StyledMenuSectionHeading, { ...headingProps, children: heading }, void 0)), _jsx(StyledMenu, { ...groupProps, mods: { section: true }, children: [...item.childNodes].map((node) => {
                         let item = (_jsx(MenuItem, { item: node, state: state, onAction: onAction }, node.key));
                         if (node.wrapper) {
                             item = node.wrapper(item);

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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -14,14 +14,19 @@ export const StyledMenu = tasty({
         display: 'flex',
         flow: 'column',
         gap: {
-            '': '1px',
+            '': '1bw',
             sections: '',
         },
         fill: '#white',
         margin: '0',
         padding: {
             '': '0.5x',
-            section: '0',
+            section: '0.5x',
+            sections: '0', // has sections inside
+        },
+        overflow: {
+            '': 'hidden',
+            section: '',
         },
         border: {
             '': '#dark-05',
@@ -44,7 +49,7 @@ export const StyledDivider = tasty({
         margin: '0 -0.5x',
         listStyle: 'none',
         fill: '#dark.05',
-        height: '1px',
+        height: '1bw',
     },
 });
 export const StyledMenuHeader = tasty(Space, {
@@ -66,13 +71,8 @@ export const StyledMenuSection = tasty({
     styles: {
         display: 'flex',
         flow: 'column',
-        gap: '1px',
         margin: '0',
-        padding: {
-            '': '0.5x 0',
-            ':first-of-type': '0 0 0.5x 0',
-            ':last-of-type': '0.5x 0 0 0',
-        },
+        padding: '0',
         listStyle: 'none',
         fill: '#white',
     },
@@ -82,7 +82,7 @@ export const StyledMenuItem = tasty({
     styles: {
         display: 'flex',
         flow: 'column',
-        gap: '1px',
+        gap: '1bw',
         margin: '0',
         padding: '0',
         listStyle: 'none',
@@ -97,8 +97,9 @@ export const StyledMenuSectionHeading = tasty(Space, {
     as: 'header',
     styles: {
         color: '#dark-03',
-        preset: 'c1',
-        padding: '(0.75x - 1bw) (1.5x - 1bw)',
+        fill: '#light',
+        preset: 'c2',
+        padding: '(1x - 1bw) 2x',
         placeContent: 'space-between',
         align: 'start',
     },

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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, 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,127 +19,117 @@ 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 { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { Base } from '../../Base';
+import { BLOCK_STYLES, extractStyles, OUTER_STYLES, } 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 styled from 'styled-components';
+import { useContextStyles } from '../../../providers/StyleProvider';
 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 SelectWrapperElement = tasty({
-    styles: {
-        display: 'grid',
-        position: 'relative',
+const SELECT_STYLES = {
+    display: 'grid',
+    position: 'relative',
+};
+const INPUT_STYLES = {
+    display: 'grid',
+    flow: 'column',
+    gridColumns: {
+        '': '1fr auto',
+        'with-prefix': 'auto 1fr auto',
     },
-});
-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',
+    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 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,
+    border: {
+        '': true,
+        invalid: '#danger-text.50',
+        valid: '#success-text.50',
+        focused: true,
     },
-});
-const OptionElement = tasty({
-    as: 'li',
-    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',
-        transition: 'theme',
+    radius: true,
+    reset: 'input',
+    preset: 'default',
+    outline: {
+        '': '#purple-03.0',
+        focused: '#purple-03',
     },
-});
-const OverlayElement = tasty({
-    styles: {
-        position: 'absolute',
-        width: 'min @overlay-min-width',
+    color: {
+        '': '#dark.85',
+        invalid: '#danger-text',
+        focused: '#dark.85',
+        disabled: '#dark.30',
     },
-});
-const StyledOverlayElement = styled(OverlayElement) `
-  ${(props) => {
-    return getOverlayTransitionCSS({ placement: props === null || props === void 0 ? void 0 : props['data-position'] });
-}}
-`;
+    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',
+};
 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, styles);
-    inputStyles = extractStyles(otherProps, BLOCK_STYLES, inputStyles);
+    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) {
+    }
     ref = useCombinedRefs(ref);
     triggerRef = useCombinedRefs(triggerRef);
     popoverRef = useCombinedRefs(popoverRef);
@@ -164,22 +154,20 @@ 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(SelectWrapperElement, { qa: qa || 'Select', mods: {
+    let selectField = (_jsxs(Base, { qa: "SelectWrapper", 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(SelectElement, { ...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(Base, { qa: qa || 'Select', as: "button", ...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 || _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));
+                }, 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));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -206,6 +194,11 @@ 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({
@@ -218,16 +211,22 @@ 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(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));
+    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));
 }
 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,
@@ -240,7 +239,7 @@ function Option({ item, state, styles, shouldUseVirtualFocus }) {
     // style to the focused option
     let [isFocused, setFocused] = useState(false);
     let { focusProps } = useAriaFocus({ onFocusChange: setFocused });
-    return (_createElement(OptionElement, { ...mergeProps(optionProps, focusProps), ref: ref, mods: {
+    return (_createElement(Base, { as: "li", ...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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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 ImgElement = styled.img(({ index }) => `
+const RawImg = styled.img(({ index }) => `
   display: block;
   position: absolute;
   width: 50%;
@@ -117,7 +117,7 @@ const ImgElement = styled.img(({ index }) => `
     : ''}
 `);
 const Cube = (props) => {
-    return _jsx(ImgElement, { role: "presentation", src: cubeImage, alt: "", ...props }, void 0);
+    return _jsx(RawImg, { 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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 1em", opacity: ".8", style: {
+    return (_jsx(Block, { ref: ref, role: "img", "aria-label": "Loading animation", height: "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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */