@cube-dev/ui-kit 0.9.12 → 0.10.4

package/cjs/components/content/Alert/use-alert.js

@@ -0,0 +1,32 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.4
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAlert = void 0;
+const tasty_1 = require("../../../tasty");
+const _internal_1 = require("../../../_internal");
+const STYLE_LIST = [...tasty_1.CONTAINER_STYLES, ...tasty_1.TEXT_STYLES];
+function useAlert(props) {
+    var _a;
+    const { type, isDisabled = false, theme } = props;
+    const styles = (0, tasty_1.extractStyles)(props, STYLE_LIST);
+    (0, _internal_1.useDeprecationWarning)(typeof type === 'undefined', {
+        property: 'type',
+        name: 'Alert',
+        betterAlternative: 'theme',
+    });
+    const _theme = isDisabled ? 'disabled' : (_a = theme !== null && theme !== void 0 ? theme : type) !== null && _a !== void 0 ? _a : 'note';
+    return {
+        styles,
+        theme: _theme,
+        filteredProps: (0, tasty_1.filterBaseProps)(props, { eventProps: true }),
+    };
+}
+exports.useAlert = useAlert;
+
+        

package/cjs/components/content/Avatar/Avatar.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
@@ -10,10 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Avatar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Base_1 = require("../../Base");
-const list_1 = require("../../../styles/list");
-const styles_1 = require("../../../utils/styles");
-const filterBaseProps_1 = require("../../../utils/filterBaseProps");
+const tasty_1 = require("../../../tasty");
 const DEFAULT_STYLES = {
     display: 'grid',
     gap: '1x',
@@ -29,11 +26,11 @@ const DEFAULT_STYLES = {
     fontWeight: 500,
 };
 exports.Avatar = (0, react_1.forwardRef)(({ size = '4x', icon, children, ...props }, ref) => {
-    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES, {
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES, {
         ...DEFAULT_STYLES,
         '--avatar-size': size,
     });
-    return ((0, jsx_runtime_1.jsxs)(Base_1.Base, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, "data-theme": "special", children: [icon, children] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(tasty_1.Element, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, "data-theme": "special", children: [icon, children] }, void 0));
 });
 
         

package/cjs/components/content/Badge/Badge.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
@@ -14,13 +14,10 @@ exports.Badge = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const themes_1 = __importDefault(require("../../../data/themes"));
-const list_1 = require("../../../styles/list");
-const styles_1 = require("../../../utils/styles");
-const filterBaseProps_1 = require("../../../utils/filterBaseProps");
-const styled_1 = require("../../../styled");
-const RawBadge = (0, styled_1.styled)({
-    name: 'Badge',
-    props: { role: 'region' },
+const tasty_1 = require("../../../tasty");
+const BadgeElement = (0, tasty_1.tasty)({
+    qa: 'Badge',
+    role: 'region',
     styles: {
         display: 'inline-flex',
         placeContent: 'center',
@@ -48,8 +45,8 @@ const RawBadge = (0, styled_1.styled)({
 });
 exports.Badge = (0, react_1.forwardRef)((allProps, ref) => {
     let { type, children, ...props } = allProps;
-    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES);
-    return ((0, jsx_runtime_1.jsx)(RawBadge, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), "data-type": type, mods: {
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
+    return ((0, jsx_runtime_1.jsx)(BadgeElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), "data-type": type, mods: {
             single: typeof children === 'string' && children.length === 1,
             multiple: typeof children === 'string' && children.length === 2,
         }, styles: styles, ref: ref, children: children }, void 0));

package/cjs/components/content/Card/Card.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
@@ -10,22 +10,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Base_1 = require("../../Base");
-const list_1 = require("../../../styles/list");
-const styles_1 = require("../../../utils/styles");
-const filterBaseProps_1 = require("../../../utils/filterBaseProps");
-const DEFAULT_STYLES = {
-    display: 'block',
-    flow: 'column',
-    radius: '1r',
-    fill: '#white',
-    border: true,
-    padding: '1.5x',
-    preset: 't3',
-};
+const tasty_1 = require("../../../tasty");
+const CardElement = (0, tasty_1.tasty)({
+    role: 'region',
+    styles: {
+        display: 'block',
+        flow: 'column',
+        radius: '1r',
+        fill: '#white',
+        border: true,
+        padding: '1.5x',
+        preset: 't3',
+    },
+    styleProps: tasty_1.CONTAINER_STYLES,
+});
 exports.Card = (0, react_1.forwardRef)((props, ref) => {
-    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES, DEFAULT_STYLES);
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { role: "region", ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return ((0, jsx_runtime_1.jsx)(CardElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: props.styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/content/Content.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
@@ -10,15 +10,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styled_1 = require("../../styled");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const tasty_1 = require("../../tasty");
 const react_2 = require("../../utils/react");
-const STYLE_LIST = [...list_1.CONTAINER_STYLES, ...list_1.TEXT_STYLES];
-const RawContent = (0, styled_1.styled)({
-    name: 'Content',
-    tag: 'section',
+const STYLE_LIST = [...tasty_1.CONTAINER_STYLES, ...tasty_1.TEXT_STYLES];
+const ContentElement = (0, tasty_1.tasty)({
+    qa: 'Content',
+    as: 'section',
     styles: {
         gridArea: 'content',
         preset: 'p3',
@@ -29,14 +26,11 @@ const RawContent = (0, styled_1.styled)({
         overflow: 'auto',
         styledScrollbar: true,
     },
-    props: {
-        'data-id': 'Content',
-    },
 });
 exports.Content = (0, react_1.forwardRef)((props, ref) => {
     props = (0, react_2.useSlotProps)(props, 'content');
-    const styles = (0, styles_1.extractStyles)(props, STYLE_LIST);
-    return ((0, jsx_runtime_1.jsx)(RawContent, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    const styles = (0, tasty_1.extractStyles)(props, STYLE_LIST);
+    return ((0, jsx_runtime_1.jsx)(ContentElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/{organisms → content}/CopySnippet/CopySnippet.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
@@ -14,22 +14,21 @@ exports.CopySnippet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clipboard_copy_1 = __importDefault(require("clipboard-copy"));
 const actions_1 = require("../../actions");
-const Card_1 = require("../../content/Card/Card");
-const Grid_1 = require("../../layout/Grid");
-const styled_1 = require("../../../styled");
+const Card_1 = require("../Card/Card");
+const tasty_1 = require("../../../tasty");
 const PrismCode_1 = require("../../content/PrismCode/PrismCode");
 const notification_1 = require("../../../services/notification");
 const icons_1 = require("@ant-design/icons");
 const TooltipTrigger_1 = require("../../overlays/Tooltip/TooltipTrigger");
-const Action_1 = require("../../actions/Action");
 const Tooltip_1 = require("../../overlays/Tooltip/Tooltip");
-const POSITION_ACTION = {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    zIndex: 1,
-};
-const StyledBlock = (0, styled_1.styled)({
+const ActionElement = (0, tasty_1.tasty)(actions_1.Action, {
+    styles: {
+        display: 'block',
+        cursor: 'default',
+        width: '100%',
+    },
+});
+const StyledBlock = (0, tasty_1.tasty)({
     styles: {
         position: 'relative',
         overflow: {
@@ -50,7 +49,7 @@ const StyledBlock = (0, styled_1.styled)({
         },
     },
 });
-const ButtonContainer = (0, styled_1.styled)({
+const ButtonContainer = (0, tasty_1.tasty)({
     styles: {
         position: 'relative',
         '&::after': {
@@ -68,6 +67,49 @@ const ButtonContainer = (0, styled_1.styled)({
         },
     },
 });
+const CopySnippetElement = (0, tasty_1.tasty)(Card_1.Card, {
+    qa: 'CopySnippet',
+    styles: {
+        fill: '#grey-light',
+        radius: '1r',
+        border: 0,
+        padding: 0,
+        Grid: {
+            display: 'grid',
+            flow: 'row',
+            gridColumns: 'minmax(0, 1fr) 5x',
+            width: 'min 20x',
+            radius: '1r',
+            position: 'relative',
+            overflow: 'hidden',
+        },
+    },
+});
+const CopyButton = (0, tasty_1.tasty)(actions_1.Button, {
+    type: 'clear',
+    icon: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}, void 0),
+    styles: {
+        padding: '1x 1.5x',
+        fontWeight: 500,
+        radius: {
+            '': '0 1r 1r 0',
+            'multiline | with-scroll': '0 1r',
+        },
+        placeSelf: {
+            '': 'none',
+            '!multiline & !with-scroll': 'stretch',
+        },
+        border: '#clear',
+        outline: {
+            '': '#purple-03.0',
+            'focused & focus-visible': '#purple-03 inset',
+        },
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        zIndex: 1,
+    },
+});
 function CopySnippet(allProps) {
     let { code, title, nowrap, prefix, language, showScroll = true, serif, children, padding, showOverlay = true, showTooltip = false, styles, ...props } = allProps;
     padding = padding || '1.125x 1.5x';
@@ -86,24 +128,17 @@ function CopySnippet(allProps) {
         preset: 'default',
         ...styles,
     };
-    const Snippet = ((0, jsx_runtime_1.jsx)(Card_1.Card, { "data-qa": "CopySnippet", fill: "#grey-light", radius: "1r", border: 0, padding: 0, styles: styles, ...props, children: (0, jsx_runtime_1.jsxs)(Grid_1.Grid, { columns: "minmax(0, 1fr) 5x", width: "min 20x", radius: "1r", style: { position: 'relative', overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsx)(StyledBlock, { mods: {
+    const Snippet = ((0, jsx_runtime_1.jsx)(CopySnippetElement, { styles: styles, ...props, children: (0, jsx_runtime_1.jsxs)("div", { "data-element": "Grid", children: [(0, jsx_runtime_1.jsx)(StyledBlock, { mods: {
                         nowrap,
                         multiline,
                         scroll: showScroll,
                         serif,
-                    }, styles: { padding }, children: (0, jsx_runtime_1.jsx)(PrismCode_1.PrismCode, { style: { margin: 0, overflow: 'visible' }, code: formattedCode, language: language || 'javascript' }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(ButtonContainer, { styles: { padding }, mods: { overlay: showOverlay } }, void 0), (0, jsx_runtime_1.jsx)(actions_1.Button, { label: `Copy ${codeTitle}`, type: "clear", styles: {
-                        padding: '1x 1.5x',
-                        fontWeight: 500,
-                        radius: multiline || showScroll ? '0 1r' : '0 1r 1r 0',
-                        placeSelf: !multiline && !showScroll ? 'stretch' : 'none',
-                        border: '#clear',
-                        outline: {
-                            '': '#purple-03.0',
-                            'focused & focus-visible': '#purple-03 inset',
-                        },
-                    }, style: POSITION_ACTION, onPress: onCopy, icon: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}, void 0) }, void 0)] }, void 0) }, void 0));
+                    }, styles: { padding }, children: (0, jsx_runtime_1.jsx)(PrismCode_1.PrismCode, { style: { margin: 0, overflow: 'visible' }, code: formattedCode, language: language || 'javascript' }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(ButtonContainer, { styles: { padding }, mods: { overlay: showOverlay }, children: (0, jsx_runtime_1.jsx)(CopyButton, { label: `Copy ${codeTitle}`, mods: {
+                            multiline,
+                            'with-scroll': showScroll,
+                        }, onPress: onCopy }, void 0) }, void 0)] }, void 0) }, void 0));
     if (showTooltip) {
-        return ((0, jsx_runtime_1.jsxs)(TooltipTrigger_1.TooltipTrigger, { children: [(0, jsx_runtime_1.jsx)(Action_1.Action, { styles: { display: 'block', cursor: 'default', width: '100%' }, children: Snippet }, void 0), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { children: formattedCode }, void 0)] }, void 0));
+        return ((0, jsx_runtime_1.jsxs)(TooltipTrigger_1.TooltipTrigger, { children: [(0, jsx_runtime_1.jsx)(ActionElement, { children: Snippet }, void 0), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { children: formattedCode }, void 0)] }, void 0));
     }
     return Snippet;
 }

package/cjs/components/content/CopySnippet/index.js

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.4
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CopySnippet"), exports);
+
+        

package/cjs/components/content/Divider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
@@ -10,44 +10,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Base_1 = require("../Base");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const tasty_1 = require("../../tasty");
 const react_2 = require("../../utils/react");
-const STYLE_LIST = [...list_1.OUTER_STYLES, ...list_1.BASE_STYLES, ...list_1.COLOR_STYLES];
-const DEFAULT_STYLES = {
-    gridArea: 'divider',
-    display: {
-        '': 'block',
-        text: 'grid',
+const DividerElement = (0, tasty_1.tasty)({
+    styles: {
+        gridArea: 'divider',
+        display: {
+            '': 'block',
+            text: 'grid',
+        },
+        gridColumns: '1fr auto 1fr',
+        placeItems: 'center stretch',
+        gap: '1x',
+        preset: 'c1',
+        height: {
+            '': '1bw 1bw',
+            text: 'auto',
+        },
+        fill: {
+            '': '#border',
+            text: 'none',
+        },
+        border: '0',
+        margin: '0',
+        Line: {
+            height: '1bw 1bw',
+            fill: '#border',
+        },
     },
-    gridColumns: '1fr auto 1fr',
-    placeItems: 'center stretch',
-    gap: '1x',
-    preset: 'c1',
-    height: {
-        '': '1bw 1bw',
-        text: 'auto',
-    },
-    fill: {
-        '': '#border',
-        text: 'none',
-    },
-    border: '0',
-    margin: '0',
-    Line: {
-        height: '1bw 1bw',
-        fill: '#border',
-    },
-};
+    styleProps: [...tasty_1.OUTER_STYLES, ...tasty_1.BASE_STYLES, ...tasty_1.COLOR_STYLES],
+});
 exports.Divider = (0, react_1.forwardRef)((props, ref) => {
-    const { mods, children, ...otherProps } = (0, react_2.useSlotProps)(props, 'divider');
-    const styles = (0, styles_1.extractStyles)(otherProps, STYLE_LIST, DEFAULT_STYLES);
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { as: children ? 'div' : 'hr', role: children ? 'separator' : undefined, mods: {
+    const { mods, children, styles, ...otherProps } = (0, react_2.useSlotProps)(props, 'divider');
+    return ((0, jsx_runtime_1.jsx)(DividerElement, { as: children ? 'div' : 'hr', role: children ? 'separator' : undefined, mods: {
             text: !!children,
             ...mods,
-        }, "data-id": "Divider", ...(0, filterBaseProps_1.filterBaseProps)(otherProps, { eventProps: true }), styles: styles, ref: ref, children: children && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "Line" }, void 0), (0, jsx_runtime_1.jsx)("div", { children: children }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-element": "Line" }, void 0)] }, void 0)) }, void 0));
+        }, ...(0, tasty_1.filterBaseProps)(otherProps, { eventProps: true }), styles: styles, ref: ref, children: children && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "Line" }, void 0), (0, jsx_runtime_1.jsx)("div", { children: children }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-element": "Line" }, void 0)] }, void 0)) }, void 0));
 });
 
         

package/cjs/components/content/Footer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
@@ -10,27 +10,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Footer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const tasty_1 = require("../../tasty");
 const react_2 = require("../../utils/react");
-const styled_1 = require("../../styled");
-const STYLE_LIST = [...list_1.CONTAINER_STYLES, ...list_1.TEXT_STYLES];
-const RawFooter = (0, styled_1.styled)({
-    name: 'Footer',
+const STYLE_LIST = [...tasty_1.CONTAINER_STYLES, ...tasty_1.TEXT_STYLES];
+const FooterElement = (0, tasty_1.tasty)({
+    qa: 'Footer',
+    'data-id': 'Footer',
     styles: {
         gridArea: 'footer',
         display: 'block',
         flow: 'column',
     },
-    props: {
-        'data-id': 'Footer',
-    },
 });
 exports.Footer = (0, react_1.forwardRef)((props, ref) => {
     props = (0, react_2.useSlotProps)(props, 'footer');
-    const styles = (0, styles_1.extractStyles)(props, STYLE_LIST);
-    return ((0, jsx_runtime_1.jsx)(RawFooter, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    const styles = (0, tasty_1.extractStyles)(props, STYLE_LIST);
+    return ((0, jsx_runtime_1.jsx)(FooterElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/content/Header.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
@@ -10,16 +10,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styled_1 = require("../../styled");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const tasty_1 = require("../../tasty");
 const react_2 = require("../../utils/react");
-const STYLE_LIST = [...list_1.CONTAINER_STYLES, ...list_1.TEXT_STYLES];
-const RawHeader = (0, styled_1.styled)({
-    name: 'Header',
-    tag: 'header',
-    props: { 'data-id': 'Header' },
+const STYLE_LIST = [...tasty_1.CONTAINER_STYLES, ...tasty_1.TEXT_STYLES];
+const HeaderElement = (0, tasty_1.tasty)({
+    qa: 'Header',
+    as: 'header',
     styles: {
         display: 'block',
         gridArea: 'header',
@@ -28,8 +24,8 @@ const RawHeader = (0, styled_1.styled)({
 });
 exports.Header = (0, react_1.forwardRef)((props, ref) => {
     props = (0, react_2.useSlotProps)(props, 'header');
-    const styles = (0, styles_1.extractStyles)(props, STYLE_LIST);
-    return ((0, jsx_runtime_1.jsx)(RawHeader, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    const styles = (0, tasty_1.extractStyles)(props, STYLE_LIST);
+    return ((0, jsx_runtime_1.jsx)(HeaderElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/content/Paragraph.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
@@ -11,16 +11,15 @@ exports.Paragraph = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Text_1 = require("./Text");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
+const tasty_1 = require("../../tasty");
 const DEFAULT_STYLES = {
     preset: 'p3',
     color: '#dark.75',
     display: 'block',
 };
-const STYLE_PROPS = [...list_1.CONTAINER_STYLES, ...list_1.TEXT_STYLES];
+const STYLE_PROPS = [...tasty_1.CONTAINER_STYLES, ...tasty_1.TEXT_STYLES];
 exports.Paragraph = (0, react_1.forwardRef)((props, ref) => {
-    const styles = (0, styles_1.extractStyles)(props, STYLE_PROPS, DEFAULT_STYLES);
+    const styles = (0, tasty_1.extractStyles)(props, STYLE_PROPS, DEFAULT_STYLES);
     return (0, jsx_runtime_1.jsx)(Text_1.Text, { as: "p", qa: "Paragraph", ...props, styles: styles, ref: ref }, void 0);
 });
 

package/cjs/components/content/Placeholder/Placeholder.js

@@ -1,32 +1,48 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * 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.Placeholder = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Base_1 = require("../../Base");
-const list_1 = require("../../../styles/list");
-const styles_1 = require("../../../utils/styles");
-const filterBaseProps_1 = require("../../../utils/filterBaseProps");
-const DEFAULT_STYLES = {
-    display: 'block',
-    fill: '#dark.10',
-    height: '2x',
-    opacity: '.35',
-};
-const CSS = `
+const tasty_1 = require("../../../tasty");
+const styled_components_1 = __importDefault(require("styled-components"));
+const PlaceholderElement = (0, tasty_1.tasty)({
+    role: 'alert',
+    'aria-live': 'polite',
+    'aria-label': 'Content is loading',
+    styles: {
+        display: 'block',
+        fill: '#dark.10',
+        height: '2x',
+        opacity: '.35',
+    },
+});
+const StyledPlaceholder = (0, styled_components_1.default)(PlaceholderElement) `
   --placeholder-animation-time: 1.4s;
   --placeholder-animation-size: calc((180rem + 100vw) / 3);
-  background-image: linear-gradient(135deg, rgba(var(--dark-color-rgb), .15) 0%, rgba(var(--dark-color-rgb), .15) 5%, rgba(var(--dark-color-rgb), 0) 35%, rgba(var(--dark-03-color-rgb), .2) 50%, rgba(var(--dark-03-color-rgb), 0) 65%, rgba(var(--dark-color-rgb), .15) 95%, rgba(var(--dark-color-rgb), .15) 100%);
+  background-image: linear-gradient(
+    135deg,
+    rgba(var(--dark-color-rgb), 0.15) 0%,
+    rgba(var(--dark-color-rgb), 0.15) 5%,
+    rgba(var(--dark-color-rgb), 0) 35%,
+    rgba(var(--dark-03-color-rgb), 0.2) 50%,
+    rgba(var(--dark-03-color-rgb), 0) 65%,
+    rgba(var(--dark-color-rgb), 0.15) 95%,
+    rgba(var(--dark-color-rgb), 0.15) 100%
+  );
   background-repeat: repeat;
   background-size: var(--placeholder-animation-size);
-  animation: placeholder-animation var(--placeholder-animation-time) linear infinite;
+  animation: placeholder-animation var(--placeholder-animation-time) linear
+    infinite;
 
   @keyframes placeholder-animation {
     0% {
@@ -39,13 +55,13 @@ const CSS = `
 `;
 exports.Placeholder = (0, react_1.forwardRef)((allProps, ref) => {
     let { size = '2x', circle, ...props } = allProps;
-    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES, {
-        ...DEFAULT_STYLES,
-        height: size,
-        width: circle ? size : false,
-        radius: circle ? '9999rem' : '1r',
-    });
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { role: "region", css: CSS, ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    let styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
+    return ((0, jsx_runtime_1.jsx)(StyledPlaceholder, { role: "region", ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: {
+            height: size,
+            width: circle ? size : false,
+            radius: circle ? '9999rem' : '1r',
+            ...styles,
+        }, ref: ref }, void 0));
 });