@cube-dev/ui-kit 0.0.0-canary-423c3d2 → 0.0.0-canary-ed2a55b

package/cjs/_internal/hooks/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-deprecation-warning.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 

package/cjs/_internal/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 

package/cjs/components/Base.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 

package/cjs/components/Block.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -11,14 +11,14 @@ exports.Block = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const tasty_1 = require("../tasty");
-const RawBlock = (0, tasty_1.tasty)({
+const BlockElement = (0, tasty_1.tasty)({
     styled: {
         display: 'block',
     },
 });
 exports.Block = (0, react_1.forwardRef)((props, ref) => {
     const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
-    return ((0, jsx_runtime_1.jsx)(RawBlock, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return ((0, jsx_runtime_1.jsx)(BlockElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/GlobalStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 

package/cjs/components/GridProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -31,10 +31,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const tasty_1 = require("../tasty");
 const react_2 = require("../utils/react");
-const Base_1 = require("./Base");
-const DEFAULT_STYLES = {
-    display: 'contents',
-};
+const tasty_2 = require("../tasty");
+const GridElement = (0, tasty_2.tasty)({
+    styled: {
+        display: 'contents',
+    },
+});
 const COLUMN_WIDTH = '((@grid-width - (@column-gap * (@columns-amount - 1))) / @columns-amount)';
 exports.GridProvider = (0, react_1.forwardRef)((props, outerRef) => {
     let ref = (0, react_2.useCombinedRefs)(outerRef);
@@ -73,8 +75,7 @@ exports.GridProvider = (0, react_1.forwardRef)((props, outerRef) => {
             return;
         resizeCallback();
     }, [resizeCallback]);
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: {
-            ...DEFAULT_STYLES,
+    return ((0, jsx_runtime_1.jsx)(GridElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: {
             '--grid-width': width,
             '--columns-amount': columns,
             '--column-gap': gap,

package/cjs/components/HiddenInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 

package/cjs/components/OpenTrasition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 

package/cjs/components/Root.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -11,7 +11,6 @@ exports.Root = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const GlobalStyles_1 = require("./GlobalStyles");
-const Base_1 = require("./Base");
 const portal_1 = require("./portal");
 const tasty_1 = require("../tasty");
 const provider_1 = require("../provider");
@@ -19,6 +18,10 @@ const overlays_1 = require("@react-aria/overlays");
 const styled_components_1 = require("styled-components");
 const tokens_1 = require("../tokens");
 const AlertDialog_1 = require("./overlays/AlertDialog");
+const RootElement = (0, tasty_1.tasty)({
+    id: 'cube-ui-kit-root',
+    className: 'root',
+});
 const DEFAULT_STYLES = {
     display: 'block',
     preset: 't3',
@@ -41,7 +44,7 @@ const Root = (allProps) => {
         }
     }, []);
     const styles = (0, tasty_1.extractStyles)(props, STYLES, DEFAULT_STYLES);
-    return ((0, jsx_runtime_1.jsx)(provider_1.Provider, { router: router, root: rootRef, children: (0, jsx_runtime_1.jsx)(styled_components_1.StyleSheetManager, { disableVendorPrefixes: true, children: (0, jsx_runtime_1.jsxs)(Base_1.Base, { ref: ref, id: "cube-ui-kit-root", className: "root", ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, children: [(0, jsx_runtime_1.jsx)(GlobalStyles_1.GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont }, void 0), (0, jsx_runtime_1.jsx)(overlays_1.ModalProvider, { children: (0, jsx_runtime_1.jsx)(portal_1.PortalProvider, { value: ref, children: (0, jsx_runtime_1.jsx)(AlertDialog_1.AlertDialogApiProvider, { children: children }, void 0) }, void 0) }, void 0)] }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(provider_1.Provider, { router: router, root: rootRef, children: (0, jsx_runtime_1.jsx)(styled_components_1.StyleSheetManager, { disableVendorPrefixes: true, children: (0, jsx_runtime_1.jsxs)(RootElement, { ref: ref, ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, children: [(0, jsx_runtime_1.jsx)(GlobalStyles_1.GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont }, void 0), (0, jsx_runtime_1.jsx)(overlays_1.ModalProvider, { children: (0, jsx_runtime_1.jsx)(portal_1.PortalProvider, { value: ref, children: (0, jsx_runtime_1.jsx)(AlertDialog_1.AlertDialogApiProvider, { children: children }, void 0) }, void 0) }, void 0)] }, void 0) }, void 0) }, void 0));
 };
 exports.Root = Root;
 

package/cjs/components/actions/Action.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -11,7 +11,6 @@ exports.Action = exports.performClickHandler = exports.parseTo = exports.openLin
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const tasty_1 = require("../../tasty");
-const Base_1 = require("../Base");
 const interactions_1 = require("@react-aria/interactions");
 const interactions_2 = require("../../utils/react/interactions");
 const button_1 = require("@react-aria/button");
@@ -122,7 +121,7 @@ exports.Action = (0, react_1.forwardRef)(({ to, as, htmlType, label, theme, mods
             },
         }
         : {};
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { mods: {
+    return ((0, jsx_runtime_1.jsx)(tasty_1.Element, { mods: {
             hovered: isHovered && !isDisabled,
             pressed: isPressed && !isDisabled,
             focused: isFocused && !isDisabled,

package/cjs/components/actions/Button/Button.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -13,7 +13,6 @@ const react_1 = require("react");
 const Action_1 = require("../Action");
 const icons_1 = require("@ant-design/icons");
 const warnings_1 = require("../../../utils/warnings");
-const StyleProvider_1 = require("../../../providers/StyleProvider");
 function provideStyles({ size, type, theme, isLoading, icon, children, label, }) {
     children = children || icon ? children : label;
     return {
@@ -233,7 +232,7 @@ const STYLES_BY_SIZE = {
     },
     large: {
         padding: '(1.5x - 1px) (2.5x - 1px)',
-        preset: 't2',
+        preset: 't2m',
     },
 };
 const DEFAULT_STYLES = {
@@ -268,7 +267,6 @@ exports.Button = (0, react_1.forwardRef)((allProps, ref) => {
         icon,
         children,
     };
-    const contextStyles = (0, StyleProvider_1.useContextStyles)('Button', propsForStyles);
     if (!children) {
         if (icon) {
             if (!label) {
@@ -284,7 +282,6 @@ exports.Button = (0, react_1.forwardRef)((allProps, ref) => {
     children = children || icon ? children : label;
     styles = {
         ...provideStyles(propsForStyles),
-        ...contextStyles,
         ...styles,
     };
     if (isLoading && !children && styles) {

package/cjs/components/actions/Button/Submit.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 

package/cjs/components/actions/Button/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 

package/cjs/components/actions/ButtonGroup/ButtonGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -12,17 +12,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("../../../utils/react");
 const Space_1 = require("../../layout/Space");
-const StyleProvider_1 = require("../../../providers/StyleProvider");
+const tasty_1 = require("../../../tasty");
+const ButtonGroupElement = (0, tasty_1.tasty)(Space_1.Space, {
+    qa: 'ButtonGroup',
+    styles: {
+        gridArea: 'buttonGroup',
+    },
+});
 exports.ButtonGroup = (0, react_1.forwardRef)((props, ref) => {
-    let { styles, ...otherProps } = (0, react_2.useSlotProps)(props, 'buttonGroup');
-    const contextStyles = (0, StyleProvider_1.useContextStyles)('ButtonGroup', otherProps);
-    styles = styles
-        ? {
-            ...contextStyles,
-            ...styles,
-        }
-        : contextStyles;
-    return (0, jsx_runtime_1.jsx)(Space_1.Space, { gridArea: "buttonGroup", styles: styles, ref: ref, ...props }, void 0);
+    return ((0, jsx_runtime_1.jsx)(ButtonGroupElement, { ref: ref, ...(0, react_2.useSlotProps)(props, 'buttonGroup') }, void 0));
 });
 
         

package/cjs/components/actions/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 

package/cjs/components/content/ActiveZone/ActiveZone.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -13,7 +13,6 @@ const react_1 = require("react");
 const interactions_1 = require("@react-aria/interactions");
 const react_2 = require("../../../utils/react");
 const tasty_1 = require("../../../tasty");
-const Base_1 = require("../../Base");
 const utils_1 = require("@react-spectrum/utils");
 const focus_1 = require("@react-aria/focus");
 const interactions_2 = require("../../../utils/react/interactions");
@@ -34,7 +33,7 @@ const ActiveZone = ({ as, label, onClick, ...props }, ref) => {
     let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
     let { focusProps, isFocused } = (0, interactions_2.useFocus)({ isDisabled });
     let { focusableProps } = (0, focus_1.useFocusable)(props, domRef);
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { "data-is-hovered": isHovered && !isDisabled ? '' : null, "data-is-focused": isFocused && !isDisabled ? '' : null, "data-is-disabled": isDisabled || null, "aria-label": label, ...(0, react_2.mergeProps)(hoverProps, focusProps, focusableProps, { onClick }, (0, tasty_1.filterBaseProps)(props, { eventProps: true })), tabIndex: props.excludeFromTabOrder || isDisabled ? -1 : 0, as: as, styles: styles, ref: domRef }, void 0));
+    return ((0, jsx_runtime_1.jsx)(tasty_1.Element, { "data-is-hovered": isHovered && !isDisabled ? '' : null, "data-is-focused": isFocused && !isDisabled ? '' : null, "data-is-disabled": isDisabled || null, "aria-label": label, ...(0, react_2.mergeProps)(hoverProps, focusProps, focusableProps, { onClick }, (0, tasty_1.filterBaseProps)(props, { eventProps: true })), tabIndex: props.excludeFromTabOrder || isDisabled ? -1 : 0, as: as, styles: styles, ref: domRef }, void 0));
 };
 const _ActiveZone = (0, react_1.forwardRef)(ActiveZone);
 exports.ActiveZone = _ActiveZone;

package/cjs/components/content/Alert/Alert.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -14,10 +14,12 @@ exports.Alert = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const themes_1 = __importDefault(require("../../../data/themes"));
-const styled_1 = require("../../../styled");
 const use_alert_1 = require("./use-alert");
-const RawAlert = (0, styled_1.styled)({
+const tasty_1 = require("../../../tasty");
+const AlertElement = (0, tasty_1.tasty)({
     name: 'Alert',
+    role: 'alert',
+    qa: 'Alert',
     styles: {
         display: 'block',
         flow: 'column',
@@ -43,14 +45,10 @@ const RawAlert = (0, styled_1.styled)({
             }, {}),
         },
     },
-    props: {
-        role: 'alert',
-        qa: 'Alert',
-    },
 });
 exports.Alert = (0, react_1.forwardRef)(function Alert(props, ref) {
     const { styles, theme, filteredProps } = (0, use_alert_1.useAlert)(props);
-    return ((0, jsx_runtime_1.jsx)(RawAlert, { ...filteredProps, "data-type": theme, styles: styles, ref: ref }, void 0));
+    return ((0, jsx_runtime_1.jsx)(AlertElement, { ...filteredProps, "data-type": theme, styles: styles, ref: ref }, void 0));
 });
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 

package/cjs/components/content/Alert/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -10,7 +10,6 @@ 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 tasty_1 = require("../../../tasty");
 const DEFAULT_STYLES = {
     display: 'grid',
@@ -31,7 +30,7 @@ exports.Avatar = (0, react_1.forwardRef)(({ size = '4x', icon, children, ...prop
         ...DEFAULT_STYLES,
         '--avatar-size': size,
     });
-    return ((0, jsx_runtime_1.jsxs)(Base_1.Base, { ...(0, tasty_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.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -15,7 +15,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const themes_1 = __importDefault(require("../../../data/themes"));
 const tasty_1 = require("../../../tasty");
-const RawBadge = (0, tasty_1.tasty)({
+const BadgeElement = (0, tasty_1.tasty)({
     qa: 'Badge',
     role: 'region',
     styles: {
@@ -46,7 +46,7 @@ const RawBadge = (0, tasty_1.tasty)({
 exports.Badge = (0, react_1.forwardRef)((allProps, ref) => {
     let { type, children, ...props } = allProps;
     const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
-    return ((0, jsx_runtime_1.jsx)(RawBadge, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), "data-type": type, mods: {
+    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.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -10,20 +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 tasty_1 = require("../../../tasty");
-const DEFAULT_STYLES = {
-    display: 'block',
-    flow: 'column',
-    radius: '1r',
-    fill: '#white',
-    border: true,
-    padding: '1.5x',
-    preset: 't3',
-};
+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, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES, DEFAULT_STYLES);
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { role: "region", ...(0, tasty_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.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -13,7 +13,7 @@ const react_1 = require("react");
 const tasty_1 = require("../../tasty");
 const react_2 = require("../../utils/react");
 const STYLE_LIST = [...tasty_1.CONTAINER_STYLES, ...tasty_1.TEXT_STYLES];
-const RawContent = (0, tasty_1.tasty)({
+const ContentElement = (0, tasty_1.tasty)({
     qa: 'Content',
     as: 'section',
     styles: {
@@ -30,7 +30,7 @@ const RawContent = (0, tasty_1.tasty)({
 exports.Content = (0, react_1.forwardRef)((props, ref) => {
     props = (0, react_2.useSlotProps)(props, 'content');
     const styles = (0, tasty_1.extractStyles)(props, STYLE_LIST);
-    return ((0, jsx_runtime_1.jsx)(RawContent, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return ((0, jsx_runtime_1.jsx)(ContentElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

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-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -15,19 +15,19 @@ 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("../Card/Card");
-const Grid_1 = require("../../layout/Grid");
 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 Tooltip_1 = require("../../overlays/Tooltip/Tooltip");
-const POSITION_ACTION = {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    zIndex: 1,
-};
+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',
@@ -67,6 +67,49 @@ const ButtonContainer = (0, tasty_1.tasty)({
         },
     },
 });
+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';
@@ -85,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)(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 ((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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */