@cube-dev/ui-kit 0.0.0-canary-70220b3 → 0.0.0-canary-112bb48

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-112bb48
  * Released under the MIT license.
  */
 
@@ -16,12 +16,11 @@ const clipboard_copy_1 = __importDefault(require("clipboard-copy"));
 const actions_1 = require("../../actions");
 const Card_1 = require("../Card/Card");
 const Grid_1 = require("../../layout/Grid");
-const styled_1 = require("../../../styled");
+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 actions_2 = require("../../actions");
 const Tooltip_1 = require("../../overlays/Tooltip/Tooltip");
 const POSITION_ACTION = {
     position: 'absolute',
@@ -29,7 +28,7 @@ const POSITION_ACTION = {
     top: 0,
     zIndex: 1,
 };
-const StyledBlock = (0, styled_1.styled)({
+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': {
@@ -103,7 +102,7 @@ function CopySnippet(allProps) {
                         },
                     }, style: POSITION_ACTION, onPress: onCopy, icon: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}, 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)(actions_2.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)(actions_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 Snippet;
 }

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-112bb48
  * Released under the MIT license.
  */
 

package/cjs/components/content/Divider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-112bb48
  * Released under the MIT license.
  */
 
@@ -11,11 +11,9 @@ 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 STYLE_LIST = [...tasty_1.OUTER_STYLES, ...tasty_1.BASE_STYLES, ...tasty_1.COLOR_STYLES];
 const DEFAULT_STYLES = {
     gridArea: 'divider',
     display: {
@@ -43,11 +41,11 @@ const DEFAULT_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);
+    const styles = (0, tasty_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: {
             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));
+        }, "data-id": "Divider", ...(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.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-112bb48
  * 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 RawFooter = (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)(RawFooter, { ...(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.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-112bb48
  * 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 RawHeader = (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)(RawHeader, { ...(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.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-112bb48
  * 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,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-112bb48
  * Released under the MIT license.
  */
 
@@ -11,9 +11,7 @@ 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 tasty_1 = require("../../../tasty");
 const DEFAULT_STYLES = {
     display: 'block',
     fill: '#dark.10',
@@ -39,13 +37,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, {
+    const styles = (0, tasty_1.extractStyles)(props, tasty_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));
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { role: "region", css: CSS, ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/content/PrismCode/PrismCode.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-112bb48
  * Released under the MIT license.
  */
 
@@ -14,13 +14,12 @@ exports.PrismCode = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const prismjs_1 = __importDefault(require("prismjs"));
-const styled_1 = require("../../../styled");
-const list_1 = require("../../../styles/list");
-const RawPre = (0, styled_1.styled)({
-    name: 'CodeBlock',
-    tag: 'pre',
-    styleProps: list_1.CONTAINER_STYLES.concat([]),
-    props: { className: 'cube-prism-code' },
+const tasty_1 = require("../../../tasty");
+const RawPre = (0, tasty_1.tasty)({
+    as: 'pre',
+    qa: 'CodeBlock',
+    styleProps: tasty_1.CONTAINER_STYLES.concat([]),
+    className: 'cube-prism-code',
     styles: {
         margin: 0,
         Code: {

package/cjs/components/content/Result/Result.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-112bb48
  * Released under the MIT license.
  */
 
@@ -12,14 +12,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const icons_1 = require("@ant-design/icons");
 const Title_1 = require("../Title");
-const styled_1 = require("../../../styled");
-const list_1 = require("../../../styles/list");
-const filterBaseProps_1 = require("../../../utils/filterBaseProps");
-const styles_1 = require("../../../utils/styles");
+const tasty_1 = require("../../../tasty");
 const react_2 = require("../../../utils/react");
-const Container = (0, styled_1.styled)({
-    name: 'ResultContainer',
-    tag: 'section',
+const Container = (0, tasty_1.tasty)({
+    qa: 'Result_Container',
+    as: 'section',
     styles: {
         display: 'flex',
         flow: 'column',
@@ -38,7 +35,7 @@ const Container = (0, styled_1.styled)({
         },
     },
 });
-const IconWrapper = (0, styled_1.styled)({
+const IconWrapper = (0, tasty_1.tasty)({
     styles: {
         fontSize: '10x',
     },
@@ -97,8 +94,8 @@ function Result(props, ref) {
             : statusIconMap.info;
         return ((0, jsx_runtime_1.jsx)(IconWrapper, { "data-element": "IconWrapper", styles: { color }, children: (0, jsx_runtime_1.jsx)(Component, { "data-element": "Icon" }, void 0) }, void 0));
     }, [icon, status]);
-    const styles = (0, styles_1.extractStyles)(otherProps, list_1.CONTAINER_STYLES);
-    return ((0, jsx_runtime_1.jsxs)(Container, { ...(0, filterBaseProps_1.filterBaseProps)(otherProps, { eventProps: true }), ref: ref, styles: styles, children: [iconNode, (title || subtitle) && ((0, jsx_runtime_1.jsxs)("div", { "data-element": "Title", children: [(0, react_2.wrapNodeIfPlain)(title, () => ((0, jsx_runtime_1.jsx)(Title_1.Title, { level: 2, preset: "h4", children: title }, void 0))), (0, react_2.wrapNodeIfPlain)(subtitle, () => ((0, jsx_runtime_1.jsx)(Title_1.Title, { level: 3, preset: "h5m", children: subtitle }, void 0)))] }, void 0)), children && (0, jsx_runtime_1.jsx)("div", { "data-element": "Content", children: children }, void 0)] }, void 0));
+    const styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
+    return ((0, jsx_runtime_1.jsxs)(Container, { ...(0, tasty_1.filterBaseProps)(otherProps, { eventProps: true }), ref: ref, styles: styles, children: [iconNode, (title || subtitle) && ((0, jsx_runtime_1.jsxs)("div", { "data-element": "Title", children: [(0, react_2.wrapNodeIfPlain)(title, () => ((0, jsx_runtime_1.jsx)(Title_1.Title, { level: 2, preset: "h4", children: title }, void 0))), (0, react_2.wrapNodeIfPlain)(subtitle, () => ((0, jsx_runtime_1.jsx)(Title_1.Title, { level: 3, preset: "h5m", children: subtitle }, void 0)))] }, void 0)), children && (0, jsx_runtime_1.jsx)("div", { "data-element": "Content", children: children }, void 0)] }, void 0));
 }
 const _Result = (0, react_1.forwardRef)(Result);
 exports.Result = _Result;

package/cjs/components/content/Skeleton/Skeleton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-112bb48
  * Released under the MIT license.
  */
 
@@ -15,14 +15,14 @@ const Space_1 = require("../../layout/Space");
 const Grid_1 = require("../../layout/Grid");
 const LAYOUT_MAP = {
     page({ lines, children, ...props }) {
-        return ((0, jsx_runtime_1.jsxs)(Flow_1.Flow, { gap: "4x", ...props, children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { placeContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "100px 25% 300px" }, void 0), (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "50px 10% 150px" }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "2x", children: children
-                        || Array(lines || 5)
+        return ((0, jsx_runtime_1.jsxs)(Flow_1.Flow, { gap: "4x", ...props, children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { placeContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "100px 25% 300px" }, void 0), (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "50px 10% 150px" }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "2x", children: children ||
+                        Array(lines || 5)
                             .fill(0)
                             .map((item, i) => (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i)) }, void 0)] }, void 0));
     },
     content({ children, lines, ...props }) {
-        return ((0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "2x", ...props, children: children
-                || Array(lines || 5)
+        return ((0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "2x", ...props, children: children ||
+                Array(lines || 5)
                     .fill(0)
                     .map((item, i) => (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i)) }, void 0));
     },
@@ -42,8 +42,8 @@ const LAYOUT_MAP = {
     tabs({ tabs, children, lines, ...props }) {
         return ((0, jsx_runtime_1.jsxs)(Flow_1.Flow, { gap: "4x", ...props, children: [(0, jsx_runtime_1.jsx)(Space_1.Space, { children: Array(tabs || 3)
                         .fill(0)
-                        .map((item, i) => ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "15x" }, i))) }, void 0), (0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "2x", children: children
-                        || Array(lines || 5)
+                        .map((item, i) => ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "15x" }, i))) }, void 0), (0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "2x", children: children ||
+                        Array(lines || 5)
                             .fill(0)
                             .map((item, i) => (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i)) }, void 0)] }, void 0));
     },

package/cjs/components/content/Tag/Tag.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-112bb48
  * Released under the MIT license.
  */
 
@@ -14,16 +14,14 @@ exports.Tag = 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 tasty_1 = require("../../../tasty");
 const Action_1 = require("../../actions/Action");
 const Suffix_1 = require("../../layout/Suffix");
 const Block_1 = require("../../Block");
 const icons_1 = require("@ant-design/icons");
-const styled_1 = require("../../../styled");
-const RawTag = (0, styled_1.styled)({
-    name: 'Tag',
+const RawTag = (0, tasty_1.tasty)({
+    qa: 'Tag',
+    role: 'status',
     styles: {
         position: 'relative',
         display: 'inline-flex',
@@ -61,30 +59,34 @@ const RawTag = (0, styled_1.styled)({
             }, {}),
         },
     },
-    props: { role: 'status' },
 });
-const DEFAULT_CONTENT_STYLES = {
-    width: 'max 100%',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    pointerEvents: 'none',
-};
-const DEFAULT_CLOSE_STYLES = {
-    display: 'grid',
-    placeItems: 'center',
-    color: true,
-    placeSelf: 'center',
-    opacity: {
-        '': 0.85,
-        'pressed | hovered': 1,
+const RawContent = (0, tasty_1.tasty)(Block_1.Block, {
+    styles: {
+        width: 'max 100%',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        pointerEvents: 'none',
     },
-    transition: 'opacity',
-    padding: '0 .5x',
-};
+});
+const CloseAction = (0, tasty_1.tasty)(Action_1.Action, {
+    label: 'Close',
+    styles: {
+        display: 'grid',
+        placeItems: 'center',
+        color: true,
+        placeSelf: 'center',
+        opacity: {
+            '': 0.85,
+            'pressed | hovered': 1,
+        },
+        transition: 'opacity',
+        padding: '0 .5x',
+    },
+});
 const Tag = (allProps, ref) => {
     let { type, isClosable, onClose, children, ...props } = allProps;
-    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES);
-    return ((0, jsx_runtime_1.jsxs)(RawTag, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, "data-type": type, mods: { closable: isClosable }, ref: ref, children: [(0, jsx_runtime_1.jsx)(Block_1.Block, { mods: { closable: isClosable }, styles: DEFAULT_CONTENT_STYLES, children: children }, void 0), isClosable ? ((0, jsx_runtime_1.jsx)(Suffix_1.Suffix, { outerGap: "0", children: (0, jsx_runtime_1.jsx)(Action_1.Action, { onPress: onClose, styles: DEFAULT_CLOSE_STYLES, label: "Close", children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, { style: {
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
+    return ((0, jsx_runtime_1.jsxs)(RawTag, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, "data-type": type, mods: { closable: isClosable }, ref: ref, children: [(0, jsx_runtime_1.jsx)(RawContent, { mods: { closable: isClosable }, children: children }, void 0), isClosable ? ((0, jsx_runtime_1.jsx)(Suffix_1.Suffix, { outerGap: "0", children: (0, jsx_runtime_1.jsx)(CloseAction, { onPress: onClose, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, { style: {
                             fontSize: 'calc(var(--font-size) - (var(--border-width) * 2))',
                         } }, void 0) }, void 0) }, void 0)) : undefined] }, void 0));
 };

package/cjs/components/content/Text.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-112bb48
  * Released under the MIT license.
  */
 
@@ -10,53 +10,49 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = exports.TEXT_PROP_MAP = 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 styled_1 = require("../../styled");
+const tasty_1 = require("../../tasty");
 const react_2 = require("../../utils/react");
-const STYLE_LIST = [...list_1.BASE_STYLES, ...list_1.TEXT_STYLES, ...list_1.COLOR_STYLES];
-const DEFAULT_STYLES = {
-    display: {
-        '': 'inline',
-        ellipsis: 'block',
-    },
-    margin: '0',
-    whiteSpace: {
-        '': 'inherit',
-        'nowrap | ellipsis': 'nowrap',
-    },
-    textOverflow: {
-        '': false,
-        ellipsis: 'ellipsis',
-    },
-    overflow: {
-        '': false,
-        ellipsis: 'hidden',
-    },
-    width: {
-        '': false,
-        ellipsis: 'max 100%',
-    },
-};
+const STYLE_LIST = [...tasty_1.BASE_STYLES, ...tasty_1.TEXT_STYLES, ...tasty_1.COLOR_STYLES];
 exports.TEXT_PROP_MAP = {
     transform: 'textTransform',
     weight: 'fontWeight',
     italic: 'fontStyle',
 };
-const RawText = (0, styled_1.styled)({
-    name: 'Text',
-    tag: 'span',
-    styles: DEFAULT_STYLES,
+const RawText = (0, tasty_1.tasty)({
+    qa: 'Text',
+    as: 'span',
+    styles: {
+        display: {
+            '': 'inline',
+            ellipsis: 'block',
+        },
+        margin: '0',
+        whiteSpace: {
+            '': 'inherit',
+            'nowrap | ellipsis': 'nowrap',
+        },
+        textOverflow: {
+            '': false,
+            ellipsis: 'ellipsis',
+        },
+        overflow: {
+            '': false,
+            ellipsis: 'hidden',
+        },
+        width: {
+            '': false,
+            ellipsis: 'max 100%',
+        },
+    },
 });
 const _Text = (0, react_1.forwardRef)((allProps, ref) => {
     allProps = (0, react_2.useSlotProps)(allProps, 'text');
-    const { as, qa, block, styleName, ellipsis, css, nowrap, ...props } = allProps;
-    const styles = (0, styles_1.extractStyles)(props, STYLE_LIST, {}, exports.TEXT_PROP_MAP);
+    const { as, qa, block, styleName, ellipsis, nowrap, ...props } = allProps;
+    const styles = (0, tasty_1.extractStyles)(props, STYLE_LIST, {}, exports.TEXT_PROP_MAP);
     return ((0, jsx_runtime_1.jsx)(RawText, { as: as || 'span', qa: qa || 'Text', styleName: styleName, mods: {
             nowrap,
             ellipsis,
-        }, block: !!(block || ellipsis), css: css, ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+        }, block: !!(block || ellipsis), ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 const Text = Object.assign(_Text, {
     Minor: (0, react_1.forwardRef)(function MinorText(props, ref) {

package/cjs/components/content/Title.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-112bb48
  * Released under the MIT license.
  */
 
@@ -11,50 +11,43 @@ exports.Title = 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 filterBaseProps_1 = require("../../utils/filterBaseProps");
+const tasty_1 = require("../../tasty");
 const react_2 = require("../../utils/react");
-const styled_1 = require("../../styled");
-const DEFAULT_STYLES = {
-    gridArea: 'heading',
-    display: 'block',
-    color: '#dark',
-    preset: {
-        '': 'h6m',
-        '[data-level="1"]': 'h1',
-        '[data-level="2"]': 'h2',
-        '[data-level="3"]': 'h3',
-        '[data-level="4"]': 'h4',
-        '[data-level="5"]': 'h5',
-        '[data-level="6"]': 'h6',
-    },
-    margin: '0',
-    whiteSpace: {
-        '': 'initial',
-        'nowrap | ellipsis': 'nowrap',
-    },
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    width: 'max 100%',
-};
-const STYLE_LIST = [...list_1.TEXT_STYLES, ...list_1.CONTAINER_STYLES];
-const RawTitle = (0, styled_1.styled)({
-    name: 'Title',
-    tag: 'h1',
-    styles: DEFAULT_STYLES,
-    props: {
-        'data-qa': 'Title',
+const STYLE_LIST = [...tasty_1.TEXT_STYLES, ...tasty_1.CONTAINER_STYLES];
+const RawTitle = (0, tasty_1.tasty)({
+    qa: 'Title',
+    as: 'h1',
+    styles: {
+        gridArea: 'heading',
+        display: 'block',
+        color: '#dark',
+        preset: {
+            '': 'h6m',
+            '[data-level="1"]': 'h1',
+            '[data-level="2"]': 'h2',
+            '[data-level="3"]': 'h3',
+            '[data-level="4"]': 'h4',
+            '[data-level="5"]': 'h5',
+            '[data-level="6"]': 'h6',
+        },
+        margin: '0',
+        whiteSpace: {
+            '': 'initial',
+            'nowrap | ellipsis': 'nowrap',
+        },
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        width: 'max 100%',
     },
 });
 const _Title = (0, react_1.forwardRef)(({ qa, as, styleName, inline, nowrap, ellipsis, level, ...props }, ref) => {
     props = (0, react_2.useSlotProps)(props, 'heading');
     const tag = `h${level || 1}`;
-    const styles = (0, styles_1.extractStyles)(props, STYLE_LIST, {}, Text_1.TEXT_PROP_MAP);
+    const styles = (0, tasty_1.extractStyles)(props, STYLE_LIST, {}, Text_1.TEXT_PROP_MAP);
     return ((0, jsx_runtime_1.jsx)(RawTitle, { qa: qa || 'Title', as: as || tag, styleName: styleName, "data-level": level || 1, mods: {
             nowrap,
             ellipsis,
-        }, inline: inline, ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+        }, inline: inline, ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 const Title = Object.assign(_Title, {
     Danger: (0, react_1.forwardRef)(function DangerTitle(props, ref) {