@cube-dev/ui-kit 0.9.10 → 0.10.1

package/cjs/components/pickers/Select/Select.js

@@ -1,11 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = exports.ListBoxPopup = void 0;
 const react_1 = require("react");
@@ -22,129 +25,138 @@ const overlays_1 = require("@react-aria/overlays");
 const Form_1 = require("../../forms/Form/Form");
 const interactions_1 = require("@react-aria/interactions");
 const provider_1 = require("../../../provider");
-const Base_1 = require("../../Base");
-const styles_1 = require("../../../utils/styles");
-const list_1 = require("../../../styles/list");
-const interactions_2 = require("../../../utils/interactions");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
-const react_4 = require("../../../utils/react");
+const tasty_1 = require("../../../tasty");
+const interactions_2 = require("../../../utils/react/interactions");
 const FieldWrapper_1 = require("../../forms/FieldWrapper");
 const collections_1 = require("@react-stately/collections");
 const OverlayWrapper_1 = require("../../overlays/OverlayWrapper");
 const transitions_1 = require("../../../utils/transitions");
+const styled_components_1 = __importDefault(require("styled-components"));
 const CaretDownIcon = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.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',
-    },
-    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 SelectWrapperElement = (0, tasty_1.tasty)({
+    styles: {
+        display: 'grid',
+        position: 'relative',
+        radius: true,
+        fill: '#white',
+        color: {
+            '': '#dark.85',
+            invalid: '#danger-text',
+            focused: '#dark.85',
+            disabled: '#dark.30',
+        },
     },
-    border: {
-        '': true,
-        invalid: '#danger-text.50',
-        valid: '#success-text.50',
-        focused: true,
+});
+const SelectElement = (0, tasty_1.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: '@context-radius',
+        reset: 'button',
+        margin: 0,
+        preset: 'default',
+        outline: {
+            '': '#purple-03.0',
+            focused: '#purple-03',
+        },
+        color: 'inherit',
+        fill: {
+            '': '#dark.0',
+            'hovered | disabled': '#dark.04',
+        },
+        fontWeight: 400,
+        textAlign: 'left',
+        cursor: 'pointer',
+        transition: 'theme',
     },
-    radius: true,
-    reset: 'input',
-    preset: 'default',
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
+});
+const ListBoxElement = (0, tasty_1.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,
     },
-    color: {
-        '': '#dark.85',
-        invalid: '#danger-text',
-        focused: '#dark.85',
-        disabled: '#dark.30',
+});
+const OptionElement = (0, tasty_1.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',
     },
-    fill: {
-        '': '#purple.0',
-        hovered: '#dark.04',
-        pressed: '#dark.08',
-        disabled: '#dark.04',
+});
+const OverlayElement = (0, tasty_1.tasty)({
+    styles: {
+        position: 'absolute',
+        width: 'min @overlay-min-width',
     },
-    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 = (0, styled_components_1.default)(OverlayElement) `
+  ${(props) => {
+    return (0, transitions_1.getOverlayTransitionCSS)({ placement: props === null || props === void 0 ? void 0 : props['data-position'] });
+}}
+`;
 function Select(props, ref) {
     var _a;
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.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 = (0, select_1.useSelectState)(props);
-    const outerStyles = (0, styles_1.extractStyles)(otherProps, list_1.OUTER_STYLES, {
-        ...SELECT_STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('Select_Wrapper', otherProps),
-        ...styles,
-    });
-    inputStyles = (0, styles_1.extractStyles)(otherProps, list_1.BLOCK_STYLES, {
-        ...INPUT_STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('Select', otherProps),
-        ...inputStyles,
-    });
-    if (styles) {
-    }
-    ref = (0, react_4.useCombinedRefs)(ref);
-    triggerRef = (0, react_4.useCombinedRefs)(triggerRef);
-    popoverRef = (0, react_4.useCombinedRefs)(popoverRef);
-    listBoxRef = (0, react_4.useCombinedRefs)(listBoxRef);
+    const outerStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
+    inputStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, inputStyles);
+    ref = (0, react_2.useCombinedRefs)(ref);
+    triggerRef = (0, react_2.useCombinedRefs)(triggerRef);
+    popoverRef = (0, react_2.useCombinedRefs)(popoverRef);
+    listBoxRef = (0, react_2.useCombinedRefs)(listBoxRef);
     let { labelProps, triggerProps, valueProps, menuProps } = (0, select_2.useSelect)(props, state, triggerRef);
     let { overlayProps, placement } = (0, overlays_1.useOverlayPosition)({
         targetRef: triggerRef,
         overlayRef: popoverRef,
         scrollRef: listBoxRef,
-        // @ts-ignore
         placement: `${direction} end`,
         shouldFlip: shouldFlip,
         isOpen: state.isOpen,
@@ -159,20 +171,22 @@ function Select(props, ref) {
     let validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
     let validation = (0, react_3.cloneElement)(validationIcon);
     let triggerWidth = (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-    let selectField = ((0, jsx_runtime_1.jsxs)(Base_1.Base, { qa: "SelectWrapper", mods: {
+    let selectField = ((0, jsx_runtime_1.jsxs)(SelectWrapperElement, { qa: qa || 'Select', mods: {
             invalid: isInvalid,
             valid: validationState === 'valid',
             disabled: isDisabled,
             hovered: isHovered,
             focused: isFocused,
-        }, styles: outerStyles, "data-size": size, children: [(0, jsx_runtime_1.jsx)(select_2.HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }, void 0), (0, jsx_runtime_1.jsxs)(Base_1.Base, { qa: qa || 'Select', as: "button", ...(0, react_2.mergeProps)(buttonProps, hoverProps, focusProps), ref: triggerRef, styles: inputStyles, "data-size": size, mods: {
+        }, styles: outerStyles, "data-size": size, children: [(0, jsx_runtime_1.jsx)(select_2.HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }, void 0), (0, jsx_runtime_1.jsxs)(SelectElement, { ...(0, react_2.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, (0, jsx_runtime_1.jsx)("span", { ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : placeholder }, void 0), (validationState || isLoading || suffix) && ((0, jsx_runtime_1.jsxs)("div", { children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0), suffix] }, void 0)), (0, jsx_runtime_1.jsx)(CaretDownIcon, {}, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(OverlayWrapper_1.OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: (0, jsx_runtime_1.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, (0, jsx_runtime_1.jsx)("span", { ...valueProps, children: state.selectedItem
+                            ? state.selectedItem.rendered
+                            : placeholder || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\u00A0" }, void 0) }, void 0), (validationState || isLoading || suffix) && ((0, jsx_runtime_1.jsxs)("div", { children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0), suffix] }, void 0)), (0, jsx_runtime_1.jsx)(CaretDownIcon, {}, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(OverlayWrapper_1.OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
             labelPosition,
             label,
@@ -199,11 +213,6 @@ function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlaySty
         shouldUseVirtualFocus,
         ...otherProps,
     }, state, listBoxRef);
-    listBoxStyles = {
-        ...LISTBOX_STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('ListBoxPopup'),
-        ...listBoxStyles,
-    };
     // Handle events that should cause the popup to close,
     // e.g. blur, clicking outside, or pressing the escape key.
     let { overlayProps } = (0, overlays_1.useOverlay)({
@@ -216,11 +225,10 @@ function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlaySty
     // 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 ((0, jsx_runtime_1.jsx)(Base_1.Base, { styles: {
-            minWidth: minWidth ? `${minWidth}px` : 'initial',
-            ...OVERLAY_STYLES,
-            overlayStyles,
-        }, ...parentOverlayProps, ...overlayProps, css: (0, transitions_1.getOverlayTransitionCSS)({ placement }), "data-position": placement, ref: popoverRef, children: (0, jsx_runtime_1.jsxs)(focus_1.FocusScope, { restoreFocus: true, children: [(0, jsx_runtime_1.jsx)(overlays_1.DismissButton, { onDismiss: () => state.close() }, void 0), (0, jsx_runtime_1.jsx)(Base_1.Base, { as: "ul", styles: listBoxStyles, ...(0, react_2.mergeProps)(listBoxProps, otherProps), ref: listBoxRef, children: Array.from(state.collection).map((item) => ((0, jsx_runtime_1.jsx)(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus }, item.key))) }, void 0), (0, jsx_runtime_1.jsx)(overlays_1.DismissButton, { onDismiss: () => state.close() }, void 0)] }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)(focus_1.FocusScope, { restoreFocus: true, children: [(0, jsx_runtime_1.jsx)(overlays_1.DismissButton, { onDismiss: () => state.close() }, void 0), (0, jsx_runtime_1.jsx)(ListBoxElement, { styles: listBoxStyles, ...(0, react_2.mergeProps)(listBoxProps, otherProps), ref: listBoxRef, children: Array.from(state.collection).map((item) => ((0, jsx_runtime_1.jsx)(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus }, item.key))) }, void 0), (0, jsx_runtime_1.jsx)(overlays_1.DismissButton, { onDismiss: () => state.close() }, void 0)] }, void 0) }, void 0));
 }
 exports.ListBoxPopup = ListBoxPopup;
 function Option({ item, state, styles, shouldUseVirtualFocus }) {
@@ -228,11 +236,6 @@ function Option({ item, state, styles, shouldUseVirtualFocus }) {
     let isDisabled = state.disabledKeys.has(item.key);
     let isSelected = state.selectionManager.isSelected(item.key);
     let isVirtualFocused = state.selectionManager.focusedKey === item.key;
-    styles = {
-        ...OPTION_STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('Option'),
-        ...styles,
-    };
     let { optionProps } = (0, listbox_1.useOption)({
         key: item.key,
         isDisabled,
@@ -245,7 +248,7 @@ function Option({ item, state, styles, shouldUseVirtualFocus }) {
     // style to the focused option
     let [isFocused, setFocused] = (0, react_3.useState)(false);
     let { focusProps } = (0, interactions_1.useFocus)({ onFocusChange: setFocused });
-    return ((0, react_1.createElement)(Base_1.Base, { as: "li", ...(0, react_2.mergeProps)(optionProps, focusProps), ref: ref, mods: {
+    return ((0, react_1.createElement)(OptionElement, { ...(0, react_2.mergeProps)(optionProps, focusProps), ref: ref, mods: {
             selected: isSelected,
             focused: shouldUseVirtualFocus ? isVirtualFocused : isFocused,
             disabled: isDisabled,

package/cjs/components/portal/Portal.js

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

package/cjs/components/portal/PortalProvider.js

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

package/cjs/components/portal/index.js

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

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

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomRootTemplate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Portal_1 = require("../../Portal");
+const CustomRootTemplate = (args) => {
+    const rootRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Disabled portal's content should be there ", ' -> ', (0, jsx_runtime_1.jsx)(Portal_1.Portal, { ...args, root: rootRef, children: "Portal's content" }, void 0), (0, jsx_runtime_1.jsxs)("div", { ref: rootRef, children: ["Using custom portal root content should be there ", ' -> '] }, void 0), "By default, Portal content should be there ", ' -> '] }, void 0));
+};
+exports.CustomRootTemplate = CustomRootTemplate;
+
+        

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

@@ -0,0 +1,17 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PortalOrderTemplate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Block_1 = require("../../../Block");
+const Portal_1 = require("../../Portal");
+const PortalOrderTemplate = (args) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Portal_1.Portal, { ...args, children: [(0, jsx_runtime_1.jsx)(Block_1.Block, { children: "Portal 1" }, void 0), (0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(Block_1.Block, { children: "Portal 3" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(Block_1.Block, { children: "Portal 4" }, void 0) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(Block_1.Block, { children: "Portal 2" }, void 0) }, void 0)] }, void 0));
+exports.PortalOrderTemplate = PortalOrderTemplate;
+
+        

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -18,5 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./basic"), exports);
+__exportStar(require("./PortalOrder"), exports);
+__exportStar(require("./CustomRoot"), exports);
 
         

package/cjs/components/portal/types.js

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

package/cjs/components/portal/usePortal.js

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

package/cjs/components/status/LoadingAnimation/LoadingAnimation.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -20,11 +20,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_components_1.default.img(({ index }) => `
+const ImgElement = styled_components_1.default.img(({ index }) => `
   display: block;
   position: absolute;
   width: 50%;
@@ -123,7 +123,7 @@ const RawImg = styled_components_1.default.img(({ index }) => `
     : ''}
 `);
 const Cube = (props) => {
-    return (0, jsx_runtime_1.jsx)(RawImg, { role: "presentation", src: cubeImage, alt: "", ...props }, void 0);
+    return (0, jsx_runtime_1.jsx)(ImgElement, { role: "presentation", src: cubeImage, alt: "", ...props }, void 0);
 };
 const SIZE_MAP = {
     small: 32,

package/cjs/components/status/Spin/Spin.js

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

package/cjs/data/themes.js

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

package/cjs/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -21,7 +21,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogContainer = exports.DialogTrigger = exports.Dialog = exports.Avatar = exports.NumberInput = exports.ListBoxPopup = exports.Select = exports.MenuTrigger = exports.Menu = exports.ComboBox = exports.Radio = exports.Switch = exports.CheckboxGroup = exports.Checkbox = exports.PasswordInput = exports.FileInput = exports.TextArea = exports.TextInput = exports.Submit = exports.SearchInput = exports.Tag = exports.Badge = exports.CloudLogo = exports.Skeleton = exports.Placeholder = exports.Card = exports.Base64Upload = exports.Spin = exports.LoadingAnimation = exports.FieldWrapper = exports.Result = exports.Footer = exports.Header = exports.Content = exports.GridProvider = exports.Divider = exports.Suffix = exports.Prefix = exports.PrismCode = exports.Root = exports.Flow = exports.Space = exports.Link = exports.Flex = exports.Grid = exports.ActiveZone = exports.Block = exports.Base = exports.Section = exports.Item = void 0;
-exports.copy = exports.ModalProvider = exports.Portal = exports.Provider = exports.StyleProvider = exports.useContextStyles = exports.Paragraph = exports.Title = exports.Text = exports.Typography = exports.notification = exports.SearchResults = exports.useAlertDialogAPI = exports.AlertDialog = exports.StatsCard = exports.CopySnippet = exports.Modal = exports.FileTabs = exports.LegacyTabs = exports.DirectoryTree = exports.Alert = exports.TopBar = exports.TooltipProvider = exports.TooltipTrigger = exports.Tooltip = exports.DialogForm = void 0;
+exports.copy = exports.ModalProvider = exports.Portal = exports.Provider = exports.StyleProvider = exports.useContextStyles = exports.Paragraph = exports.Title = exports.Text = exports.Typography = exports.notification = exports.useAlertDialogAPI = exports.AlertDialog = exports.StatsCard = exports.Modal = exports.FileTabs = exports.LegacyTabs = exports.TooltipProvider = exports.TooltipTrigger = exports.Tooltip = exports.DialogForm = void 0;
 const Text_1 = require("./components/content/Text");
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
 const Title_1 = require("./components/content/Title");
@@ -38,6 +38,7 @@ var Block_1 = require("./components/Block");
 Object.defineProperty(exports, "Block", { enumerable: true, get: function () { return Block_1.Block; } });
 var ActiveZone_1 = require("./components/content/ActiveZone/ActiveZone");
 Object.defineProperty(exports, "ActiveZone", { enumerable: true, get: function () { return ActiveZone_1.ActiveZone; } });
+__exportStar(require("./components/content/CopySnippet"), exports);
 var Grid_1 = require("./components/layout/Grid");
 Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return Grid_1.Grid; } });
 var Flex_1 = require("./components/layout/Flex");
@@ -134,52 +135,43 @@ var TooltipTrigger_1 = require("./components/overlays/Tooltip/TooltipTrigger");
 Object.defineProperty(exports, "TooltipTrigger", { enumerable: true, get: function () { return TooltipTrigger_1.TooltipTrigger; } });
 var TooltipProvider_1 = require("./components/overlays/Tooltip/TooltipProvider");
 Object.defineProperty(exports, "TooltipProvider", { enumerable: true, get: function () { return TooltipProvider_1.TooltipProvider; } });
+__exportStar(require("./components/content/CopySnippet"), exports);
+__exportStar(require("./components/content/Alert"), exports);
 // molecules
-var TopBar_1 = require("./components/organisms/TopBar/TopBar");
-Object.defineProperty(exports, "TopBar", { enumerable: true, get: function () { return TopBar_1.TopBar; } });
-var Alert_1 = require("./components/organisms/Alert/Alert");
-Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });
-var DirectoryTree_1 = require("./components/organisms/DirectoryTree/DirectoryTree");
-Object.defineProperty(exports, "DirectoryTree", { enumerable: true, get: function () { return DirectoryTree_1.DirectoryTree; } });
 var LegacyTabs_1 = require("./components/navigation/LegacyTabs/LegacyTabs");
 Object.defineProperty(exports, "LegacyTabs", { enumerable: true, get: function () { return LegacyTabs_1.LegacyTabs; } });
 var FileTabs_1 = require("./components/organisms/FileTabs/FileTabs");
 Object.defineProperty(exports, "FileTabs", { enumerable: true, get: function () { return FileTabs_1.FileTabs; } });
 var Modal_1 = require("./components/organisms/Modal/Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
-var CopySnippet_1 = require("./components/organisms/CopySnippet/CopySnippet");
-Object.defineProperty(exports, "CopySnippet", { enumerable: true, get: function () { return CopySnippet_1.CopySnippet; } });
 var StatsCard_1 = require("./components/organisms/StatsCard/StatsCard");
 Object.defineProperty(exports, "StatsCard", { enumerable: true, get: function () { return StatsCard_1.StatsCard; } });
 var AlertDialog_1 = require("./components/overlays/AlertDialog");
 Object.defineProperty(exports, "AlertDialog", { enumerable: true, get: function () { return AlertDialog_1.AlertDialog; } });
 Object.defineProperty(exports, "useAlertDialogAPI", { enumerable: true, get: function () { return AlertDialog_1.useAlertDialogAPI; } });
-var SearchResults_1 = require("./components/organisms/SearchResults/SearchResults");
-Object.defineProperty(exports, "SearchResults", { enumerable: true, get: function () { return SearchResults_1.SearchResults; } });
 // services
 var notification_1 = require("./services/notification");
 Object.defineProperty(exports, "notification", { enumerable: true, get: function () { return notification_1.notification; } });
-__exportStar(require("./providers/BreakpointsProvider"), exports);
+__exportStar(require("./tasty"), exports);
 exports.Typography = {
     Text: Text_1.Text,
     Title: Title_1.Title,
     Paragraph: Paragraph_1.Paragraph,
 };
-var StylesProvider_1 = require("./providers/StylesProvider");
-Object.defineProperty(exports, "useContextStyles", { enumerable: true, get: function () { return StylesProvider_1.useContextStyles; } });
-Object.defineProperty(exports, "StyleProvider", { enumerable: true, get: function () { return StylesProvider_1.StyleProvider; } });
+var StyleProvider_1 = require("./providers/StyleProvider");
+Object.defineProperty(exports, "useContextStyles", { enumerable: true, get: function () { return StyleProvider_1.useContextStyles; } });
+Object.defineProperty(exports, "StyleProvider", { enumerable: true, get: function () { return StyleProvider_1.StyleProvider; } });
 var provider_1 = require("./provider");
 Object.defineProperty(exports, "Provider", { enumerable: true, get: function () { return provider_1.Provider; } });
 var portal_1 = require("./components/portal");
 Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return portal_1.Portal; } });
 __exportStar(require("./components/forms"), exports);
-__exportStar(require("./styles/types"), exports);
-__exportStar(require("./styles/list"), exports);
-__exportStar(require("./styles/index"), exports);
+__exportStar(require("./tasty"), exports);
 var overlays_1 = require("@react-aria/overlays");
 Object.defineProperty(exports, "ModalProvider", { enumerable: true, get: function () { return overlays_1.ModalProvider; } });
 __exportStar(require("./utils/react"), exports);
 __exportStar(require("./styled"), exports);
+__exportStar(require("./tasty"), exports);
 var clipboard_copy_1 = require("clipboard-copy");
 Object.defineProperty(exports, "copy", { enumerable: true, get: function () { return __importDefault(clipboard_copy_1).default; } });
 __exportStar(require("@react-aria/ssr"), exports);

package/cjs/provider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -10,16 +10,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useProviderProps = exports.Provider = exports.UIKitContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const StylesProvider_1 = require("./providers/StylesProvider");
-const BreakpointsProvider_1 = require("./providers/BreakpointsProvider");
+const tasty_1 = require("./tasty");
 exports.UIKitContext = (0, react_1.createContext)({});
 function Provider(allProps) {
-    let { breakpoints, children, insideForm, isDisabled, isReadOnly, isRequired, validationState, router, styles, root, ref, } = allProps;
-    if (styles) {
-        children = (0, jsx_runtime_1.jsx)(StylesProvider_1.StyleProvider, { ...styles, children: children }, void 0);
-    }
+    let { breakpoints, children, insideForm, isDisabled, isReadOnly, isRequired, validationState, router, root, ref, } = allProps;
     if (breakpoints) {
-        children = ((0, jsx_runtime_1.jsx)(BreakpointsProvider_1.BreakpointsProvider, { value: breakpoints, children: children }, void 0));
+        children = ((0, jsx_runtime_1.jsx)(tasty_1.BreakpointsProvider, { value: breakpoints, children: children }, void 0));
     }
     const parentContext = (0, react_1.useContext)(exports.UIKitContext);
     const props = {