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

package/cjs/components/layout/Suffix.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.
  */
 
@@ -10,34 +10,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Suffix = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const Base_1 = require("../Base");
 const tasty_1 = require("../../tasty");
 const react_2 = require("../../utils/react");
-const SuffixElement = (0, tasty_1.tasty)({
-    element: 'Suffix',
-    styles: {
-        position: 'absolute',
-        display: 'grid',
-        placeContent: 'stretch',
-        placeItems: 'center',
-        flow: 'column',
-        gap: 0,
-        right: '@suffix-gap',
-        top: '@suffix-gap',
-        bottom: '@suffix-gap',
-        color: '#dark.75',
-        height: '(100% - (2 * @suffix-gap))',
-    },
-});
+const DEFAULT_STYLES = {
+    position: 'absolute',
+    display: 'grid',
+    placeContent: 'stretch',
+    placeItems: 'center',
+    flow: 'column',
+    gap: 0,
+    right: '@suffix-gap',
+    top: '@suffix-gap',
+    bottom: '@suffix-gap',
+    color: '#dark.75',
+    height: '(100% - (2 * @suffix-gap))',
+};
 exports.Suffix = (0, react_1.forwardRef)((allProps, outerRef) => {
     let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
-    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES, DEFAULT_STYLES);
     const ref = (0, react_2.useCombinedRefs)(outerRef);
     (0, react_1.useEffect)(() => {
         if (ref && ref.current && onWidthChange) {
             onWidthChange(ref.current.offsetWidth);
         }
     }, [children, ref, onWidthChange]);
-    return ((0, jsx_runtime_1.jsx)(SuffixElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, style: {
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, style: {
             '--suffix-gap': (0, tasty_1.parseStyle)(outerGap).value,
         }, children: children }, void 0));
 });

package/cjs/components/navigation/LegacyTabs/LegacyTabs.js

@@ -1,14 +1,11 @@
 /**
  * @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.
  */
 
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LegacyTabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -17,59 +14,47 @@ const Block_1 = require("../../Block");
 const Space_1 = require("../../layout/Space");
 const Flex_1 = require("../../layout/Flex");
 const actions_1 = require("../../actions");
-const tasty_1 = require("../../../tasty");
-const styled_components_1 = __importDefault(require("styled-components"));
-const Flow_1 = require("../../layout/Flow");
 const LegacyTabsContext = (0, react_1.createContext)({
     addTab() { },
     removeTab() { },
     setTab() { },
     changeTab() { },
 });
-const TabElement = (0, tasty_1.tasty)(actions_1.Button, {
-    type: 'tab',
-    styles: {
-        color: {
-            '': '#dark',
-            'selected, hovered': '#purple-text',
-            disabled: '#dark.50',
-        },
-        fill: '#purple.0',
-        textAlign: 'center',
-        fontWeight: 600,
-        padding: '(1x - 1px) (1x - 1px)',
-        radius: '1r 1r 0 0',
-        border: 0,
+const TAB_STYLES = {
+    color: {
+        '': '#dark',
+        'selected, hovered': '#purple-text',
+        disabled: '#dark.50',
     },
-});
-const StyledTabElement = (0, styled_components_1.default)(TabElement) `
-  &::before {
-    --outline-size: 0px;
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    box-shadow: inset 0 calc(-1 * var(--outline-size)) 0 var(--purple-color);
-    pointer-events: none;
-    transition: opacity linear 0.2s, box-shadow linear 0.2s;
-  }
-  &[data-is-selected]::before {
-    --outline-size: 2px;
-  }
-  &:not([data-is-selected]):not([disabled])[data-is-hovered]::before {
-    --outline-size: 1px;
-  }
+    fill: '#purple.0',
+    textAlign: 'center',
+    fontWeight: 600,
+    padding: '(1x - 1px) (1x - 1px)',
+    radius: '1r 1r 0 0',
+    border: 0,
+};
+const TAB_CSS = `
+&::before {
+  --outline-size: 0px;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  box-shadow: inset 0 calc(-1 * var(--outline-size)) 0 var(--purple-color);
+  pointer-events: none;
+  transition: opacity linear .2s, box-shadow linear .2s;
+}
+&[data-is-selected]::before {
+  --outline-size: 2px;
+}
+&:not([data-is-selected]):not([disabled])[data-is-hovered]::before {
+  --outline-size: 1px;
+}
 `;
-const TabsPanelElement = (0, tasty_1.tasty)(Space_1.Space, {
-    styles: {
-        gap: '1x',
-        flexShrink: 0,
-    },
-});
-const StyledTabsPanelElement = (0, styled_components_1.default)(TabsPanelElement) `
+const TABS_PANEL_CSS = `
   position: relative;
   overflow: auto hidden;
   top: 1px;
@@ -94,14 +79,7 @@ const StyledTabsPanelElement = (0, styled_components_1.default)(TabsPanelElement
     height: 3px;
   }
 `;
-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) `
+const TABS_CONTAINER_CSS = `
   position: relative;
 
   &::before {
@@ -114,7 +92,7 @@ const StyledTabsContainerElement = (0, styled_components_1.default)(TabsContaine
     pointer-events: none;
     width: 32px;
     height: 37px;
-    transition: all 0.15s linear;
+    transition: all .15s linear;
     background-image: linear-gradient(
       to left,
       rgba(255, 255, 255, 0),
@@ -133,7 +111,7 @@ const StyledTabsContainerElement = (0, styled_components_1.default)(TabsContaine
     width: 32px;
     height: 37px;
     pointer-events: none;
-    transition: all 0.15s linear;
+    transition: all .15s linear;
     background-image: linear-gradient(
       to right,
       rgba(255, 255, 255, 0),
@@ -142,13 +120,12 @@ const StyledTabsContainerElement = (0, styled_components_1.default)(TabsContaine
     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 Tab = ({ isSelected, isHidden, onClose, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(StyledTabElement, { isSelected: isSelected, isHidden: isHidden, ...props }, void 0));
+    return ((0, jsx_runtime_1.jsx)(actions_1.Button, { type: "tab", styles: TAB_STYLES, css: TAB_CSS, isSelected: isSelected, isHidden: isHidden, ...props }, void 0));
 };
 function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, extra, children, ...props }) {
     const tabsRef = (0, react_1.useRef)(null);
@@ -236,13 +213,13 @@ function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, on
         onTabClick && onTabClick(tab.id);
         setTab(tab.id);
     }
-    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)(LegacyTabsContext.Provider, { value: {
+    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)(LegacyTabsContext.Provider, { value: {
                 addTab,
                 setTab,
                 removeTab,
                 changeTab,
                 currentTab: activeKey,
-            }, children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: ".5x", placeContent: "center space-between", children: [(0, jsx_runtime_1.jsx)(StyledTabsPanelElement, { ref: tabsRef, children: tabs.map((tab) => {
+            }, children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: ".5x", placeContent: "center space-between", children: [(0, jsx_runtime_1.jsx)(Space_1.Space, { ref: tabsRef, gap: "1x", flexShrink: 0, css: TABS_PANEL_CSS, children: tabs.map((tab) => {
                                 return ((0, jsx_runtime_1.jsx)(Tab, { "data-qa": tab.qa, onPress: () => onPress(tab), isSelected: tab.id === activeKey || false, isDisabled: tab.isDisabled, isHidden: tab.isHidden, children: tab.title }, tab.id));
                             }) }, void 0), extra] }, 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/navigation/Link/Link.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/cjs/components/organisms/FileTabs/FileTabs.js

@@ -1,14 +1,11 @@
 /**
  * @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.
  */
 
 "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");
@@ -19,21 +16,13 @@ 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 TabsPanelElement = (0, tasty_1.tasty)(Space_1.Space, {
-    styles: {
-        gap: '.5x',
-        flexShrink: 0,
-    },
-});
-const StyledTabsPanelElement = (0, styled_components_1.default)(TabsPanelElement) `
+const TABS_PANEL_CSS = `
   position: relative;
   overflow: auto hidden;
   top: 1px;
@@ -58,14 +47,7 @@ const StyledTabsPanelElement = (0, styled_components_1.default)(TabsPanelElement
     height: 3px;
   }
 `;
-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) `
+const TABS_CONTAINER_CSS = `
   position: relative;
 
   &::before {
@@ -78,7 +60,7 @@ const StyledTabsContainerElement = (0, styled_components_1.default)(TabsContaine
     pointer-events: none;
     width: 32px;
     height: 37px;
-    transition: all 0.15s linear;
+    transition: all .15s linear;
     background-image: linear-gradient(
       to left,
       rgba(255, 255, 255, 0),
@@ -97,7 +79,7 @@ const StyledTabsContainerElement = (0, styled_components_1.default)(TabsContaine
     width: 32px;
     height: 37px;
     pointer-events: none;
-    transition: all 0.15s linear;
+    transition: all .15s linear;
     background-image: linear-gradient(
       to right,
       rgba(255, 255, 255, 0),
@@ -106,8 +88,7 @@ const StyledTabsContainerElement = (0, styled_components_1.default)(TabsContaine
     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;
   }
 `;
@@ -124,40 +105,50 @@ const DirtyBadge = (0, tasty_1.tasty)({
         radius: 'round',
     },
 });
-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',
-        },
+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)',
     },
-});
-const StyledTabElement = (0, styled_components_1.default)(TabElement) `
+    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',
+    },
+};
+const CLOSE_STYLES = {
+    color: {
+        '': '#dark.50',
+        hovered: '#dark',
+    },
+    padding: '0 .25x',
+    outline: {
+        '': '#purple-03.0',
+        'focused & focus-visible': '#purple-03',
+    },
+    radius: '1r',
+};
+const TAB_CSS = `
   margin-bottom: var(--border-width);
   transform: translate(0, 0);
-  transition: color 0.2s linear, background-color 0.2s linear;
+  transition: color .2s linear, background-color .2s linear;
 
   &[disabled] {
     transform: translate(0, var(--border-width));
@@ -186,22 +177,8 @@ const StyledTabElement = (0, styled_components_1.default)(TabElement) `
     }
   }
 `;
-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)(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));
+    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)(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);
@@ -295,13 +272,13 @@ function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTa
         setTab(tab.id);
         onTabClick && onTabClick(tab.id);
     }
-    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: {
+    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: {
                 addTab,
                 setTab,
                 removeTab,
                 setDirtyTab,
                 currentTab: activeKey,
-            }, children: [(0, jsx_runtime_1.jsx)(StyledTabsPanelElement, { ref: tabsRef, children: tabs.map((tab) => {
+            }, children: [(0, jsx_runtime_1.jsx)(Space_1.Space, { ref: tabsRef, gap: ".5x", flexShrink: 0, css: TABS_PANEL_CSS, 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.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

package/cjs/components/organisms/StatsCard/StatsCard.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/cjs/components/other/Base64Upload/Base64Upload.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/cjs/components/other/CloudLogo/CloudLogo.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/cjs/components/overlays/AlertDialog/AlertDialog.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/cjs/components/overlays/AlertDialog/AlertDialogApiProvider.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/cjs/components/overlays/AlertDialog/AlertDialogZone.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/cjs/components/overlays/AlertDialog/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/cjs/components/overlays/AlertDialog/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.
  */