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

package/cjs/_internal/hooks/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/_internal/hooks/use-deprecation-warning.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/_internal/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/Base.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/Block.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.
  */
 
@@ -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 BlockElement = (0, tasty_1.tasty)({
+const RawBlock = (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)(BlockElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return ((0, jsx_runtime_1.jsx)(RawBlock, { ...(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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -31,12 +31,10 @@ 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 tasty_2 = require("../tasty");
-const GridElement = (0, tasty_2.tasty)({
-    styled: {
-        display: 'contents',
-    },
-});
+const Base_1 = require("./Base");
+const DEFAULT_STYLES = {
+    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);
@@ -75,7 +73,8 @@ exports.GridProvider = (0, react_1.forwardRef)((props, outerRef) => {
             return;
         resizeCallback();
     }, [resizeCallback]);
-    return ((0, jsx_runtime_1.jsx)(GridElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: {
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: {
+            ...DEFAULT_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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -11,6 +11,7 @@ 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");
@@ -18,10 +19,6 @@ 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',
@@ -44,7 +41,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)(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));
+    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));
 };
 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -11,6 +11,7 @@ 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");
@@ -121,7 +122,7 @@ exports.Action = (0, react_1.forwardRef)(({ to, as, htmlType, label, theme, mods
             },
         }
         : {};
-    return ((0, jsx_runtime_1.jsx)(tasty_1.Element, { mods: {
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -13,6 +13,7 @@ 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 {
@@ -232,7 +233,7 @@ const STYLES_BY_SIZE = {
     },
     large: {
         padding: '(1.5x - 1px) (2.5x - 1px)',
-        preset: 't2m',
+        preset: 't2',
     },
 };
 const DEFAULT_STYLES = {
@@ -267,6 +268,7 @@ exports.Button = (0, react_1.forwardRef)((allProps, ref) => {
         icon,
         children,
     };
+    const contextStyles = (0, StyleProvider_1.useContextStyles)('Button', propsForStyles);
     if (!children) {
         if (icon) {
             if (!label) {
@@ -282,6 +284,7 @@ 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -12,15 +12,17 @@ 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 tasty_1 = require("../../../tasty");
-const ButtonGroupElement = (0, tasty_1.tasty)(Space_1.Space, {
-    qa: 'ButtonGroup',
-    styles: {
-        gridArea: 'buttonGroup',
-    },
-});
+const StyleProvider_1 = require("../../../providers/StyleProvider");
 exports.ButtonGroup = (0, react_1.forwardRef)((props, ref) => {
-    return ((0, jsx_runtime_1.jsx)(ButtonGroupElement, { ref: ref, ...(0, react_2.useSlotProps)(props, 'buttonGroup') }, void 0));
+    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);
 });
 
         

package/cjs/components/actions/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/content/ActiveZone/ActiveZone.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.
  */
 
@@ -13,6 +13,7 @@ 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");
@@ -33,7 +34,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)(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));
+    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));
 };
 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -14,12 +14,10 @@ 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 tasty_1 = require("../../../tasty");
-const AlertElement = (0, tasty_1.tasty)({
+const RawAlert = (0, styled_1.styled)({
     name: 'Alert',
-    role: 'alert',
-    qa: 'Alert',
     styles: {
         display: 'block',
         flow: 'column',
@@ -45,10 +43,14 @@ const AlertElement = (0, tasty_1.tasty)({
             }, {}),
         },
     },
+    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)(AlertElement, { ...filteredProps, "data-type": theme, styles: styles, ref: ref }, void 0));
+    return ((0, jsx_runtime_1.jsx)(RawAlert, { ...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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -10,6 +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 tasty_1 = require("../../../tasty");
 const DEFAULT_STYLES = {
     display: 'grid',
@@ -30,7 +31,7 @@ exports.Avatar = (0, react_1.forwardRef)(({ size = '4x', icon, children, ...prop
         ...DEFAULT_STYLES,
         '--avatar-size': size,
     });
-    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));
+    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));
 });
 
         

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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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 BadgeElement = (0, tasty_1.tasty)({
+const RawBadge = (0, tasty_1.tasty)({
     qa: 'Badge',
     role: 'region',
     styles: {
@@ -46,7 +46,7 @@ const BadgeElement = (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)(BadgeElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), "data-type": type, mods: {
+    return ((0, jsx_runtime_1.jsx)(RawBadge, { ...(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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -10,22 +10,20 @@ 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 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,
-});
+const DEFAULT_STYLES = {
+    display: 'block',
+    flow: 'column',
+    radius: '1r',
+    fill: '#white',
+    border: true,
+    padding: '1.5x',
+    preset: 't3',
+};
 exports.Card = (0, react_1.forwardRef)((props, ref) => {
-    return ((0, jsx_runtime_1.jsx)(CardElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: props.styles, ref: ref }, void 0));
+    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));
 });
 
         

package/cjs/components/content/Content.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.
  */
 
@@ -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 ContentElement = (0, tasty_1.tasty)({
+const RawContent = (0, tasty_1.tasty)({
     qa: 'Content',
     as: 'section',
     styles: {
@@ -30,7 +30,7 @@ const ContentElement = (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)(ContentElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return ((0, jsx_runtime_1.jsx)(RawContent, { ...(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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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 ActionElement = (0, tasty_1.tasty)(actions_1.Action, {
-    styles: {
-        display: 'block',
-        cursor: 'default',
-        width: '100%',
-    },
-});
+const POSITION_ACTION = {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    zIndex: 1,
+};
 const StyledBlock = (0, tasty_1.tasty)({
     styles: {
         position: 'relative',
@@ -67,49 +67,6 @@ 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';
@@ -128,17 +85,24 @@ function CopySnippet(allProps) {
         preset: 'default',
         ...styles,
     };
-    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: {
+    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: {
                         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 }, 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));
+                    }, 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));
     if (showTooltip) {
-        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 ((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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */