@cube-dev/ui-kit 0.9.11 → 0.10.2

package/cjs/components/organisms/FileTabs/FileTabs.js

@@ -1,11 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * 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.FileTabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -15,13 +18,22 @@ const Block_1 = require("../../Block");
 const Action_1 = require("../../actions/Action");
 const Space_1 = require("../../layout/Space");
 const Flex_1 = require("../../layout/Flex");
+const tasty_1 = require("../../../tasty");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Flow_1 = require("../../layout/Flow");
 const FileTabsContext = (0, react_1.createContext)({
     addTab() { },
     removeTab() { },
     setTab() { },
     setDirtyTab() { },
 });
-const TABS_PANEL_CSS = `
+const TabsPanelElement = (0, tasty_1.tasty)(Space_1.Space, {
+    styles: {
+        gap: '.5x',
+        flexShrink: 0,
+    },
+});
+const StyledTabsPanelElement = (0, styled_components_1.default)(TabsPanelElement) `
   position: relative;
   overflow: auto hidden;
   top: 1px;
@@ -46,7 +58,14 @@ const TABS_PANEL_CSS = `
     height: 3px;
   }
 `;
-const TABS_CONTAINER_CSS = `
+const TabsContainerElement = (0, tasty_1.tasty)(Flow_1.Flow, {
+    styles: {
+        flow: 'column',
+        height: 'max 100%',
+        width: 'max 100%',
+    },
+});
+const StyledTabsContainerElement = (0, styled_components_1.default)(TabsContainerElement) `
   position: relative;
 
   &::before {
@@ -59,7 +78,7 @@ const TABS_CONTAINER_CSS = `
     pointer-events: none;
     width: 32px;
     height: 37px;
-    transition: all .15s linear;
+    transition: all 0.15s linear;
     background-image: linear-gradient(
       to left,
       rgba(255, 255, 255, 0),
@@ -78,7 +97,7 @@ const TABS_CONTAINER_CSS = `
     width: 32px;
     height: 37px;
     pointer-events: none;
-    transition: all .15s linear;
+    transition: all 0.15s linear;
     background-image: linear-gradient(
       to right,
       rgba(255, 255, 255, 0),
@@ -87,61 +106,58 @@ const TABS_CONTAINER_CSS = `
     z-index: 10;
   }
 
-  &[data-is-left-fade]::before, &[data-is-right-fade]::after {
+  &[data-is-left-fade]::before,
+  &[data-is-right-fade]::after {
     opacity: 1;
   }
 `;
-const DIRTY_BADGE_CSS = `
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  transition: all .2s linear;
-`;
-const TAB_STYLES = {
-    radius: '1r 1r 0 0',
-    padding: '1x 1.5x',
-    border: {
-        '': 'left top right #clear',
-        disabled: 'left top right rgb(227, 227, 233)',
-    },
-    fill: {
-        '': '#dark.04',
-        hovered: '#dark.08',
-        'disabled, disabled & hover': '#white',
-    },
-    color: {
-        '': '#dark.75',
-        'disabled, hovered, hovered & disabled': '#dark',
-    },
-    cursor: {
-        '': 'pointer',
-        disabled: 'default',
+const DirtyBadge = (0, tasty_1.tasty)({
+    styles: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        transition: 'all .2s linear',
+        width: '1x',
+        height: '1x',
+        fill: '#dark.30',
+        radius: 'round',
     },
-    fontWeight: 500,
-    opacity: 1,
-    preset: 'default',
-    outline: {
-        '': 'inset #purple-03.0',
-        'focused & focus-visible': 'inset #purple-03',
-    },
-};
-const CLOSE_STYLES = {
-    color: {
-        '': '#dark.50',
-        hovered: '#dark',
-    },
-    padding: '0 .25x',
-    outline: {
-        '': '#purple-03.0',
-        'focused & focus-visible': '#purple-03',
+});
+const TabElement = (0, tasty_1.tasty)(Action_1.Action, {
+    styles: {
+        radius: '1r 1r 0 0',
+        padding: '1x 1.5x',
+        border: {
+            '': 'left top right #clear',
+            disabled: 'left top right rgb(227, 227, 233)',
+        },
+        fill: {
+            '': '#dark.04',
+            hovered: '#dark.08',
+            'disabled, disabled & hover': '#white',
+        },
+        color: {
+            '': '#dark.75',
+            'disabled, hovered, hovered & disabled': '#dark',
+        },
+        cursor: {
+            '': 'pointer',
+            disabled: 'default',
+        },
+        fontWeight: 500,
+        opacity: 1,
+        preset: 'default',
+        outline: {
+            '': 'inset #purple-03.0',
+            'focused & focus-visible': 'inset #purple-03',
+        },
     },
-    radius: '1r',
-};
-const TAB_CSS = `
+});
+const StyledTabElement = (0, styled_components_1.default)(TabElement) `
   margin-bottom: var(--border-width);
   transform: translate(0, 0);
-  transition: color .2s linear, background-color .2s linear;
+  transition: color 0.2s linear, background-color 0.2s linear;
 
   &[disabled] {
     transform: translate(0, var(--border-width));
@@ -170,8 +186,22 @@ const TAB_CSS = `
     }
   }
 `;
+const CloseButton = (0, tasty_1.tasty)({
+    styles: {
+        color: {
+            '': '#dark.50',
+            hovered: '#dark',
+        },
+        padding: '0 .25x',
+        outline: {
+            '': '#purple-03.0',
+            'focused & focus-visible': '#purple-03',
+        },
+        radius: '1r',
+    },
+});
 const Tab = ({ isDirty, isDisabled, children, isClosable, onClose, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(Action_1.Action, { className: isDirty ? 'file-tab--dirty' : '', css: TAB_CSS, styles: TAB_STYLES, isDisabled: isDisabled, ...props, children: (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: ".75x", children: [(0, jsx_runtime_1.jsx)(Block_1.Block, { children: children }, void 0), (isClosable || isDirty) && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { placeItems: "center", style: { position: 'relative' }, children: [isClosable ? ((0, jsx_runtime_1.jsx)(Action_1.Action, { onPress: onClose, className: "file-tab-close", styles: CLOSE_STYLES, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0) }, void 0)) : ((0, jsx_runtime_1.jsx)("div", {}, void 0)), isDirty ? ((0, jsx_runtime_1.jsx)(Block_1.Block, { className: "file-tab-dirty-badge", css: DIRTY_BADGE_CSS, width: "1x", height: "1x", fill: "#dark.30", radius: "round" }, void 0)) : null] }, void 0))] }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(TabElement, { className: isDirty ? 'file-tab--dirty' : '', isDisabled: isDisabled, ...props, children: (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: ".75x", children: [(0, jsx_runtime_1.jsx)(Block_1.Block, { children: children }, void 0), (isClosable || isDirty) && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { placeItems: "center", style: { position: 'relative' }, children: [isClosable ? ((0, jsx_runtime_1.jsx)(CloseButton, { onPress: onClose, className: "file-tab-close", children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0) }, void 0)) : ((0, jsx_runtime_1.jsx)("div", {}, void 0)), isDirty ? (0, jsx_runtime_1.jsx)(DirtyBadge, { className: "file-tab-dirty-badge" }, void 0) : null] }, void 0))] }, void 0) }, void 0));
 };
 function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, isClosable = true, children, ...props }) {
     const tabsRef = (0, react_1.useRef)(null);
@@ -184,8 +214,8 @@ function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTa
         if (!el)
             return;
         setLeftFade(!!el.scrollLeft);
-        setRightFade(el.scrollWidth !== el.offsetWidth
-            && !!(el.scrollWidth - el.offsetWidth - el.scrollLeft));
+        setRightFade(el.scrollWidth !== el.offsetWidth &&
+            !!(el.scrollWidth - el.offsetWidth - el.scrollLeft));
     }
     (0, react_1.useLayoutEffect)(updateScroll, [tabs]);
     function scrollCurrentIntoView() {
@@ -265,13 +295,13 @@ function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTa
         setTab(tab.id);
         onTabClick && onTabClick(tab.id);
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flow: "column", height: "max 100%", width: "max 100%", "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, css: TABS_CONTAINER_CSS, ...props, children: (0, jsx_runtime_1.jsxs)(FileTabsContext.Provider, { value: {
+    return ((0, jsx_runtime_1.jsx)(StyledTabsContainerElement, { "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, ...props, children: (0, jsx_runtime_1.jsxs)(FileTabsContext.Provider, { value: {
                 addTab,
                 setTab,
                 removeTab,
                 setDirtyTab,
                 currentTab: activeKey,
-            }, children: [(0, jsx_runtime_1.jsx)(Space_1.Space, { ref: tabsRef, gap: ".5x", flexShrink: 0, css: TABS_PANEL_CSS, children: tabs.map((tab) => {
+            }, children: [(0, jsx_runtime_1.jsx)(StyledTabsPanelElement, { ref: tabsRef, children: tabs.map((tab) => {
                         return ((0, jsx_runtime_1.jsx)(Tab, { onPress: () => onPress(tab), onClose: () => isClosable && handleClose(tab), isClosable: isClosable, isDisabled: tab.id === activeKey || false, isDirty: tab.isDirty, children: tab.title }, tab.id));
                     }) }, void 0), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children }, void 0)] }, void 0) }, void 0));
 }

package/cjs/components/organisms/Modal/Modal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -167,7 +167,7 @@ function Modal(allProps) {
     return ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { in: inProp, timeout: 250, classNames: "cube-modal-transition", children: (0, jsx_runtime_1.jsx)(Overlay, { className: "cube-modal-overlay", onClick: onOverlayClick, children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { "data-qa": qa || 'Modal', className: "cube-modal", display: "flex", role: "region", color: "#dark.85", padding: "0", shadow: true, border: false, radius: "1.5r", width: `288px (100% - 32px) ${typeof width === 'number' ? `${width}px` : width || '360px'}`, style: { textAlign: 'left' }, ...props, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { placeContent: "space-between", padding: "2x 3x", border: "bottom", children: [typeof title === 'object' ? (title) : ((0, jsx_runtime_1.jsx)(Title_1.Title, { level: 4, flexGrow: 1, children: title }, void 0)), isClosable ? ((0, jsx_runtime_1.jsx)(Action_1.Action, { qa: "ModalCloseButton", width: "3x", height: "3x", onPress: onClose || onCancel, color: { '': '#dark.75', hovered: '#purple' }, outline: {
                                     '': '#purple-03.0',
                                     'focused & focus-visible': '#purple-03',
-                                }, label: "Close", children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, { style: { fontSize: 16 } }, void 0) }, void 0)) : null] }, void 0), (0, jsx_runtime_1.jsxs)(Flow_1.Flow, { padding: "3x", gap: "3x", height: "max (100vh - 90px)", style: { overflow: 'auto' }, children: [typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(Block_1.Block, { children: children }, void 0)) : (children), type !== 'info' && (onOk || onCancel) ? ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: "1.5x", children: [(0, jsx_runtime_1.jsx)(actions_1.Button, { "data-qa": 'ConfirmButton', isDisabled: isDisabled, type: okType === 'danger' ? 'danger' : 'primary', isLoading: isLoading || localLoading, onPress: handleOk, children: okText || 'OK' }, void 0), (0, jsx_runtime_1.jsx)(actions_1.Button, { "data-qa": 'CancelButton', onPress: cancel, isDisabled: isLoading, children: cancelText || (okText === 'Yes' ? 'No' : 'Cancel') }, void 0)] }, void 0)) : null, type === 'info' ? ((0, jsx_runtime_1.jsx)(Space_1.Space, { children: (0, jsx_runtime_1.jsx)(actions_1.Button, { "data-qa": 'OkButton', isDisabled: isDisabled, type: okType === 'danger' ? 'danger' : 'primary', onPress: close, children: okText || 'OK' }, void 0) }, void 0)) : null] }, void 0)] }, void 0) }, void 0) }, void 0));
+                                }, label: "Close", children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, { style: { fontSize: 16 } }, void 0) }, void 0)) : null] }, void 0), (0, jsx_runtime_1.jsxs)(Flow_1.Flow, { padding: "3x", gap: "3x", height: "max (100vh - 90px)", style: { overflow: 'auto' }, children: [typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(Block_1.Block, { children: children }, void 0)) : (children), type !== 'info' && (onOk || onCancel) ? ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: "1.5x", children: [(0, jsx_runtime_1.jsx)(actions_1.Button, { "data-qa": 'ConfirmButton', isDisabled: isDisabled, type: "primary", theme: okType === 'danger' ? 'danger' : undefined, isLoading: isLoading || localLoading, onPress: handleOk, children: okText || 'OK' }, void 0), (0, jsx_runtime_1.jsx)(actions_1.Button, { "data-qa": 'CancelButton', onPress: cancel, isDisabled: isLoading, children: cancelText || (okText === 'Yes' ? 'No' : 'Cancel') }, void 0)] }, void 0)) : null, type === 'info' ? ((0, jsx_runtime_1.jsx)(Space_1.Space, { children: (0, jsx_runtime_1.jsx)(actions_1.Button, { "data-qa": 'OkButton', isDisabled: isDisabled, type: okType === 'danger' ? 'danger' : 'primary', onPress: close, children: okText || 'OK' }, void 0) }, void 0)) : null] }, void 0)] }, void 0) }, void 0) }, void 0));
 }
 exports.Modal = Modal;
 let ID = 0;

package/cjs/components/organisms/StatsCard/StatsCard.js

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

package/cjs/components/other/Base64Upload/Base64Upload.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -17,9 +17,7 @@ const actions_1 = require("../../actions");
 const Block_1 = require("../../Block");
 const Text_1 = require("../../content/Text");
 const styled_components_1 = __importDefault(require("styled-components"));
-const styles_1 = require("../../../utils/styles");
-const list_1 = require("../../../styles/list");
-const filterBaseProps_1 = require("../../../utils/filterBaseProps");
+const tasty_1 = require("../../../tasty");
 const DEFAULT_STYLES = {
     display: 'inline-flex',
     padding: '.75x 1x',
@@ -32,7 +30,7 @@ const DEFAULT_STYLES = {
 };
 exports.Base64Upload = (0, styled_components_1.default)((0, react_1.forwardRef)((allProps, ref) => {
     const { onInput, ...props } = allProps;
-    const styles = (0, styles_1.extractStyles)(props, list_1.POSITION_STYLES, DEFAULT_STYLES);
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.POSITION_STYLES, DEFAULT_STYLES);
     const [file, setFile] = (0, react_1.useState)();
     const [error, setError] = (0, react_1.useState)('');
     function onInputFile(e) {
@@ -76,7 +74,7 @@ exports.Base64Upload = (0, styled_components_1.default)((0, react_1.forwardRef)(
             setError('Invalid file');
         }
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(actions_1.Button, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, children: [(0, jsx_runtime_1.jsx)(Block_1.Block, { radius: "round", fill: "#purple.10", color: "#dark-02", padding: ".5x 1x", children: "Choose file" }, void 0), (0, jsx_runtime_1.jsx)(Block_1.Block, { color: "#dark-04", children: file || 'No file selected' }, void 0), (0, jsx_runtime_1.jsx)("input", { type: "file", name: "base64", onInput: onInputFile, accept: ".json" }, void 0)] }, void 0), error && (0, jsx_runtime_1.jsx)(Text_1.Text.Danger, { color: "danger", children: error }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(actions_1.Button, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, children: [(0, jsx_runtime_1.jsx)(Block_1.Block, { radius: "round", fill: "#purple.10", color: "#dark-02", padding: ".5x 1x", children: "Choose file" }, void 0), (0, jsx_runtime_1.jsx)(Block_1.Block, { color: "#dark-04", children: file || 'No file selected' }, void 0), (0, jsx_runtime_1.jsx)("input", { type: "file", name: "base64", onInput: onInputFile, accept: ".json" }, void 0)] }, void 0), error && (0, jsx_runtime_1.jsx)(Text_1.Text.Danger, { color: "danger", children: error }, void 0)] }, void 0));
 })) `
   appearance: none;
   cursor: pointer;

package/cjs/components/other/CloudLogo/CloudLogo.js

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

package/cjs/components/overlays/AlertDialog/AlertDialog.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -9,6 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertDialog = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const utils_1 = require("@react-aria/utils");
 const actions_1 = require("../../actions");
 const Content_1 = require("../../content/Content");
@@ -16,8 +17,6 @@ const Paragraph_1 = require("../../content/Paragraph");
 const Dialog_1 = require("../Dialog/Dialog");
 const context_1 = require("../Dialog/context");
 const Title_1 = require("../../content/Title");
-const react_1 = require("react");
-const ButtonGroup_1 = require("../../actions/ButtonGroup/ButtonGroup");
 const Header_1 = require("../../content/Header");
 const Footer_1 = require("../../content/Footer");
 const DEFAULT_CONFIRM_PROPS = {
@@ -31,8 +30,7 @@ const DEFAULT_CANCEL_PROPS = {
  * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
  */
 function AlertDialog(props, ref) {
-    var _a;
-    const { onClose = () => { } } = (_a = (0, react_1.useContext)(context_1.DialogContext)) !== null && _a !== void 0 ? _a : {};
+    const { onClose } = (0, context_1.useDialogContext)();
     const { danger, actions, title, styles, noActions, content, ...otherProps } = props;
     let { confirm: confirmProps, secondary: secondaryProps, cancel: cancelProps, } = actions !== null && actions !== void 0 ? actions : {};
     // the confirm button is present by default
@@ -50,12 +48,12 @@ function AlertDialog(props, ref) {
             ...(typeof cancelProps === 'object' ? cancelProps : null),
         }
         : undefined;
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { role: "alertdialog", ref: ref, isDismissable: false, ...otherProps, children: [title ? ((0, jsx_runtime_1.jsx)(Header_1.Header, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { children: title }, void 0) }, void 0)) : null, content ? ((0, jsx_runtime_1.jsx)(Content_1.Content, { children: typeof content === 'string' ? ((0, jsx_runtime_1.jsx)(Paragraph_1.Paragraph, { children: content }, void 0)) : (content) }, void 0)) : null, !noActions ? ((0, jsx_runtime_1.jsx)(Footer_1.Footer, { children: (0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { align: "end", children: [(0, jsx_runtime_1.jsx)(actions_1.Button, { theme: danger ? 'danger' : undefined, autoFocus: true, ...confirmProps, onPress: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { role: "alertdialog", ref: ref, isDismissable: false, ...otherProps, children: [title ? ((0, jsx_runtime_1.jsx)(Header_1.Header, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { children: title }, void 0) }, void 0)) : null, content ? ((0, jsx_runtime_1.jsx)(Content_1.Content, { children: typeof content === 'string' ? ((0, jsx_runtime_1.jsx)(Paragraph_1.Paragraph, { children: content }, void 0)) : (content) }, void 0)) : null, !noActions ? ((0, jsx_runtime_1.jsx)(Footer_1.Footer, { children: (0, jsx_runtime_1.jsxs)(actions_1.ButtonGroup, { align: "end", children: [(0, jsx_runtime_1.jsx)(actions_1.Button, { theme: danger ? 'danger' : undefined, autoFocus: true, ...confirmProps, onPress: (e) => {
                                 var _a, _b;
-                                return (0, utils_1.chain)((_b = (_a = confirmProps) === null || _a === void 0 ? void 0 : _a.onPress) === null || _b === void 0 ? void 0 : _b.call(_a, e), onClose('confirm'));
-                            } }, void 0), secondaryProps && ((0, jsx_runtime_1.jsx)(actions_1.Button, { ...secondaryProps, onPress: (e) => { var _a; return (0, utils_1.chain)((_a = secondaryProps === null || secondaryProps === void 0 ? void 0 : secondaryProps.onPress) === null || _a === void 0 ? void 0 : _a.call(secondaryProps, e), onClose('secondary')); } }, void 0)), cancelProps && ((0, jsx_runtime_1.jsx)(actions_1.Button, { ...cancelProps, onPress: (e) => {
+                                return (0, utils_1.chain)((_b = (_a = confirmProps) === null || _a === void 0 ? void 0 : _a.onPress) === null || _b === void 0 ? void 0 : _b.call(_a, e), onClose === null || onClose === void 0 ? void 0 : onClose('confirm'));
+                            } }, void 0), secondaryProps && ((0, jsx_runtime_1.jsx)(actions_1.Button, { ...secondaryProps, onPress: (e) => { var _a; return (0, utils_1.chain)((_a = secondaryProps === null || secondaryProps === void 0 ? void 0 : secondaryProps.onPress) === null || _a === void 0 ? void 0 : _a.call(secondaryProps, e), onClose === null || onClose === void 0 ? void 0 : onClose('secondary')); } }, void 0)), cancelProps && ((0, jsx_runtime_1.jsx)(actions_1.Button, { ...cancelProps, onPress: (e) => {
                                 var _a, _b;
-                                return (0, utils_1.chain)((_b = (_a = cancelProps) === null || _a === void 0 ? void 0 : _a.onPress) === null || _b === void 0 ? void 0 : _b.call(_a, e), onClose('cancel'));
+                                return (0, utils_1.chain)((_b = (_a = cancelProps) === null || _a === void 0 ? void 0 : _a.onPress) === null || _b === void 0 ? void 0 : _b.call(_a, e), onClose === null || onClose === void 0 ? void 0 : onClose('cancel'));
                             } }, void 0))] }, void 0) }, void 0)) : null] }, void 0));
 }
 /**

package/cjs/components/overlays/AlertDialog/AlertDialogApiProvider.js

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

package/cjs/components/overlays/AlertDialog/AlertDialogZone.js

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

package/cjs/components/overlays/AlertDialog/index.js

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

package/cjs/components/overlays/AlertDialog/types.js

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

package/cjs/components/overlays/Dialog/Dialog.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -17,71 +17,71 @@ const focus_1 = require("@react-aria/focus");
 const react_1 = require("react");
 const dialog_1 = require("@react-aria/dialog");
 const i18n_1 = require("@react-aria/i18n");
-const Base_1 = require("../../Base");
 const icons_1 = require("@ant-design/icons");
-const styles_1 = require("../../../utils/styles");
-const list_1 = require("../../../styles/list");
+const tasty_1 = require("../../../tasty");
 const react_2 = require("../../../utils/react");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
-const STYLES_LIST = [...list_1.BASE_STYLES, ...list_1.DIMENSION_STYLES, ...list_1.BLOCK_STYLES];
-const DEFAULT_STYLES = {
-    pointerEvents: 'auto',
-    position: 'relative',
-    display: 'flex',
-    placeItems: 'stretch',
-    placeContent: 'stretch',
-    width: {
-        '': '288px @dialog-size 90vw',
-        '[data-type="fullscreen"]': '90vw 90vw',
-        '[data-type="fullscreenTakeover"]': '100vw 100vw',
-        '[data-type="panel"]': '100vw 100vw',
-    },
-    height: {
-        '': 'max 90vh',
-        '[data-type="fullscreenTakeover"] | [data-type="panel"]': 'max 100vh',
-    },
-    gap: 0,
-    flow: 'column',
-    radius: {
-        '': '2r',
-        '[data-type="tray"]': '2r top',
-        '[data-type="fullscreenTakeover"] | [data-type="panel"]': '0r',
-    },
-    fill: '#white',
-    shadow: {
-        '': '0 20px 30px #shadow',
-        '[data-type="popover"]': '0px 4px 16px #shadow',
-    },
-    transform: {
-        '': false,
-        '[data-type="modal"]': 'translate(0, ((50vh - 50%) / -3))',
-    },
-    placeSelf: 'stretch',
-    '@dialog-heading-padding-v': {
-        '': '2x',
-        '[data-type="popover"]': '1x',
-    },
-    '@dialog-content-padding-v': {
-        '': '3x',
-        '[data-type="popover"]': '2x',
-    },
-    '@dialog-padding-h': {
-        '': '3x',
-        '[data-type="popover"]': '2x',
-    },
-    '@dialog-footer-v': {
-        '': '2x',
-        '[data-type="popover"]': '1x',
+const STYLES_LIST = [...tasty_1.BASE_STYLES, ...tasty_1.DIMENSION_STYLES, ...tasty_1.BLOCK_STYLES];
+const DialogElement = (0, tasty_1.tasty)({
+    as: 'section',
+    styles: {
+        pointerEvents: 'auto',
+        position: 'relative',
+        display: 'flex',
+        placeItems: 'stretch',
+        placeContent: 'stretch',
+        width: {
+            '': '288px @dialog-size 90vw',
+            '[data-type="fullscreen"]': '90vw 90vw',
+            '[data-type="fullscreenTakeover"]': '100vw 100vw',
+            '[data-type="panel"]': '100vw 100vw',
+        },
+        height: {
+            '': 'max 90vh',
+            '[data-type="fullscreenTakeover"] | [data-type="panel"]': 'max 100vh',
+        },
+        gap: 0,
+        flow: 'column',
+        radius: {
+            '': '2r',
+            '[data-type="tray"]': '2r top',
+            '[data-type="fullscreenTakeover"] | [data-type="panel"]': '0r',
+        },
+        fill: '#white',
+        shadow: {
+            '': '0 20px 30px #shadow',
+            '[data-type="popover"]': '0px 4px 16px #shadow',
+        },
+        transform: {
+            '': false,
+            '[data-type="modal"]': 'translate(0, ((50vh - 50%) / -3))',
+        },
+        placeSelf: 'stretch',
+        '@dialog-heading-padding-v': {
+            '': '2x',
+            '[data-type="popover"]': '1x',
+        },
+        '@dialog-content-padding-v': {
+            '': '3x',
+            '[data-type="popover"]': '2x',
+        },
+        '@dialog-padding-h': {
+            '': '3x',
+            '[data-type="popover"]': '2x',
+        },
+        '@dialog-footer-v': {
+            '': '2x',
+            '[data-type="popover"]': '1x',
+        },
+        '@dialog-content-gap': '3x',
     },
-    '@dialog-content-gap': '3x',
-};
+});
 const CLOSE_BUTTON_STYLES = {
+    display: 'flex',
     position: 'absolute',
     top: '1x',
     right: '1x',
     width: '5x',
     height: '5x',
-    display: 'flex',
     placeContent: 'center',
 };
 const sizeMap = {
@@ -100,16 +100,15 @@ const intlMessages = {
         alert: 'Alert',
     },
 };
-function Dialog(props, ref) {
-    let { type = 'modal', ...contextProps } = (0, react_1.useContext)(context_1.DialogContext) || {};
-    let { qa, children, size = 'S', isDismissable = contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, ...otherProps } = props;
+/**
+ * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
+ * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
+ */
+exports.Dialog = (0, react_1.forwardRef)(function Dialog(props, ref) {
+    let { type = 'modal', ...contextProps } = (0, context_1.useDialogContext)();
+    let { qa, children, size = 'S', isDismissable = contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, closeButtonStyles, ...otherProps } = props;
     size = sizeMap[size.toUpperCase()] || size;
-    const styles = {
-        ...DEFAULT_STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('Dialog', props),
-        ...(0, styles_1.extractStyles)(otherProps, STYLES_LIST),
-        '@dialog-size': `${sizePxMap[size] || 288}px`,
-    };
+    const styles = (0, tasty_1.extractStyles)(otherProps, STYLES_LIST);
     let formatMessage = (0, i18n_1.useMessageFormatter)(intlMessages);
     let domRef = (0, utils_1.useDOMRef)(ref);
     let { dialogProps, titleProps } = (0, dialog_1.useDialog)((0, react_2.mergeProps)(contextProps, props), domRef);
@@ -130,11 +129,7 @@ function Dialog(props, ref) {
         content: {
             styles: {
                 flexGrow: 1,
-                padding: '@dialog-content-padding-v @dialog-padding-h 0 @dialog-padding-h',
-                margin: {
-                    '': '0',
-                    ':last-child': '@dialog-content-padding-v bottom',
-                },
+                padding: '@dialog-content-padding-v @dialog-padding-h',
                 gap: '@dialog-content-gap',
                 height: {
                     '': 'max (100% - (2 * @dialog-content-padding-v))',
@@ -160,19 +155,15 @@ function Dialog(props, ref) {
                 flow: 'row',
                 placeItems: 'baseline stretch',
                 placeContent: 'space-between',
-                padding: '@dialog-content-padding-v @dialog-padding-h @dialog-footer-v @dialog-padding-h',
+                padding: '@dialog-footer-v @dialog-padding-h',
             },
         },
     };
-    return ((0, jsx_runtime_1.jsx)(focus_1.FocusScope, { contain: true, restoreFocus: true, children: (0, jsx_runtime_1.jsxs)(Base_1.Base, { "data-id": "Dialog", "data-qa": qa || 'Dialog', styles: styles, as: "section", ...dialogProps, mods: {
+    return ((0, jsx_runtime_1.jsx)(focus_1.FocusScope, { contain: true, restoreFocus: true, children: (0, jsx_runtime_1.jsxs)(DialogElement, { "data-id": "Dialog", "data-qa": qa || 'Dialog', styles: styles, as: "section", ...dialogProps, mods: {
                 dismissable: isDismissable,
+            }, style: {
+                '--dialog-size': `${sizePxMap[size] || 288}px`,
             }, "data-type": type, "data-size": size, ref: domRef, children: [dismissButton, (0, jsx_runtime_1.jsxs)(react_2.SlotProvider, { slots: slots, children: [isDismissable && ((0, jsx_runtime_1.jsx)(actions_1.Button, { qa: "ModalCloseButton", type: "neutral", styles: CLOSE_BUTTON_STYLES, icon: closeIcon || (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0), label: formatMessage('dismiss'), onPress: () => onDismiss && onDismiss() }, void 0)), children] }, void 0)] }, void 0) }, void 0));
-}
-/**
- * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
- * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
- */
-let _Dialog = (0, react_1.forwardRef)(Dialog);
-exports.Dialog = _Dialog;
+});
 
         

package/cjs/components/overlays/Dialog/DialogContainer.js

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