@cube-dev/ui-kit 0.9.10 → 0.10.1

package/cjs/utils/react/mergeProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -13,6 +13,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.mergeProps = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const utils_1 = require("@react-aria/utils");
+const tasty_1 = require("../../tasty");
 /**
  * Merges multiple props objects together. Event handlers are chained,
  * classNames are combined, and ids are deduplicated - different ids
@@ -25,32 +26,32 @@ function mergeProps(...args) {
     for (let props of args) {
         for (let key in result) {
             // Chain events
-            if (/^on[A-Z]/.test(key)
-                && typeof result[key] === 'function'
-                && props
-                && typeof props[key] === 'function') {
+            if (/^on[A-Z]/.test(key) &&
+                typeof result[key] === 'function' &&
+                props &&
+                typeof props[key] === 'function') {
                 result[key] = (0, utils_1.chain)(result[key], props[key]);
                 // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
             }
-            else if (key === 'className'
-                && typeof result.className === 'string'
-                && props
-                && typeof props.className === 'string') {
+            else if (key === 'className' &&
+                typeof result.className === 'string' &&
+                props &&
+                typeof props.className === 'string') {
                 result[key] = (0, clsx_1.default)(result.className, props.className);
             }
-            else if (key === 'styles'
-                && typeof result.styles === 'object'
-                && props
-                && typeof props.styles === 'object') {
-                result[key] = { ...result.styles, ...props.styles };
+            else if ((key === 'styles' || key.endsWith('Styles')) &&
+                typeof result.styles === 'object' &&
+                props &&
+                typeof props.styles === 'object') {
+                result[key] = (0, tasty_1.mergeStyles)(result[key], props[key]);
             }
             else if (key === 'id' && result.id && (props === null || props === void 0 ? void 0 : props.id)) {
                 result.id = (0, utils_1.mergeIds)(result.id, props === null || props === void 0 ? void 0 : props.id);
                 // Override others
             }
             else {
-                result[key]
-                    = props && props[key] !== undefined ? props[key] : result[key];
+                result[key] =
+                    props && props[key] !== undefined ? props[key] : result[key];
             }
         }
         // Add props from b that are not in a

package/cjs/utils/react/nullableValue.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/cjs/utils/react/useCombinedRefs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/cjs/utils/react/useId.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/cjs/utils/react/useLayoutEffect.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/cjs/utils/react/wrapNodeIfPlain.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/cjs/utils/transitions.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/cjs/utils/tree.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/cjs/utils/warnings.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -14,6 +14,7 @@ const SUGGESTED_PROP_MAP = {
     selected: 'isSelected',
 };
 const PREFIX = 'CubeUIKit';
+const devMode = process.env.NODE_ENV !== 'production';
 function propDeprecationWarning(name, props, propList) {
     propList.forEach((prop) => {
         if (prop in props) {
@@ -24,11 +25,15 @@ function propDeprecationWarning(name, props, propList) {
 }
 exports.propDeprecationWarning = propDeprecationWarning;
 function accessibilityWarning(...args) {
-    console.warn(`${PREFIX} accessibility issue:`, ...args);
+    if (devMode) {
+        console.warn(`${PREFIX} accessibility issue:`, ...args);
+    }
 }
 exports.accessibilityWarning = accessibilityWarning;
 function warn(...args) {
-    console.warn(`${PREFIX}:`, ...args);
+    if (devMode) {
+        console.warn(`${PREFIX}:`, ...args);
+    }
 }
 exports.warn = warn;
 function deprecationWarning(
@@ -36,18 +41,16 @@ function deprecationWarning(
 condition, { property, name, betterAlternative, reason, }) {
     if (condition)
         return;
-    if (process.env.NODE_ENV === 'production') {
-        return warn(`DEPRECATION ${name} "${property}" -> ${typeof betterAlternative === 'function'
-            ? betterAlternative()
-            : betterAlternative}`);
-    }
+    if (!devMode)
+        return;
     // we can make deprecations even better if we add the md syntax in the console.
     // anyway, everything down below will be stripped in the production build
     console.group(`⚠️ ${PREFIX}: Deprecation in ${name}`);
     warn(`"${property}" is deprecated, consider better alternative: ${typeof betterAlternative === 'function'
         ? betterAlternative()
         : betterAlternative}`);
-    reason && warn(`Reason: ${typeof reason === 'function' ? reason() : reason}`);
+    reason &&
+        warn(`Reason: ${typeof reason === 'function' ? reason() : reason}`);
     console.groupEnd();
 }
 exports.deprecationWarning = deprecationWarning;

package/es/_internal/hooks/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.1
+ * Released under the MIT license.
+ */
+
+export * from './use-deprecation-warning';
+
+        

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

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.1
+ * Released under the MIT license.
+ */
+
+import React, { useEffect } from 'react';
+import { deprecationWarning } from '../../utils/warnings';
+export function useDeprecationWarning(...args) {
+    const didWarn = React.useRef(false);
+    useEffect(() => {
+        if (didWarn.current)
+            return;
+        didWarn.current = true;
+        deprecationWarning(...args);
+    }, [args[0]]);
+}
+
+        

package/es/_internal/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.1
+ * Released under the MIT license.
+ */
+
+export * from './hooks';
+
+        

package/es/components/Base.js

@@ -1,17 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from 'react';
 import styled from 'styled-components';
-import { BreakpointsContext } from '../providers/BreakpointsProvider';
-import { pointsToZones } from '../utils/responsive';
-import { renderStyles } from '../utils/renderStyles';
-import { modAttrs } from '../utils/react';
+import { BreakpointsContext, modAttrs, pointsToZones, renderStyles, } from '../tasty';
 const BLOCK_MAP = {
     inline: 'block',
     'inline-grid': 'grid',
@@ -24,7 +21,7 @@ const INLINE_MAP = {
 };
 const BaseElement = styled.div(({ css }) => css);
 /**
- * @deprecated consider using styled() instead
+ * @deprecated consider using tasty() instead
  */
 const Base = function Base(allProps, ref) {
     let { as, styles: originalStyles, breakpoints, block, mods, inline, isHidden, isDisabled, qa, qaVal, css, element, ...props } = allProps;
@@ -50,7 +47,7 @@ const Base = function Base(allProps, ref) {
     return (_jsx(BaseElement, { as: as, "data-element": element, "data-qa": qa, "data-qaval": qaVal, ...props, hidden: isHidden, disabled: isDisabled, ref: ref, css: css }, void 0));
 };
 /**
- * @deprecated consider using styled() instead
+ * @deprecated consider using tasty() instead
  */
 const _Base = forwardRef(Base);
 export { _Base as Base };

package/es/components/Block.js

@@ -1,22 +1,21 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { CONTAINER_STYLES } from '../styles/list';
-import { extractStyles } from '../utils/styles';
-import { filterBaseProps } from '../utils/filterBaseProps';
-import { Base } from './Base';
-export const CUBE_BLOCK_STYLES = {
-    display: 'block',
-};
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty';
+const BlockElement = tasty({
+    styled: {
+        display: 'block',
+    },
+});
 export const Block = forwardRef((props, ref) => {
-    const styles = extractStyles(props, CONTAINER_STYLES, CUBE_BLOCK_STYLES);
-    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    const styles = extractStyles(props, CONTAINER_STYLES);
+    return (_jsx(BlockElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/es/components/GlobalStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/es/components/GridProvider.js

@@ -1,18 +1,20 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useState } from 'react';
-import { filterBaseProps } from '../utils/filterBaseProps';
+import { filterBaseProps } from '../tasty';
 import { useCombinedRefs } from '../utils/react';
-import { Base } from './Base';
-const DEFAULT_STYLES = {
-    display: 'contents',
-};
+import { tasty } from '../tasty';
+const GridElement = tasty({
+    styled: {
+        display: 'contents',
+    },
+});
 const COLUMN_WIDTH = '((@grid-width - (@column-gap * (@columns-amount - 1))) / @columns-amount)';
 export const GridProvider = forwardRef((props, outerRef) => {
     let ref = useCombinedRefs(outerRef);
@@ -24,9 +26,9 @@ export const GridProvider = forwardRef((props, outerRef) => {
         if (!el)
             return;
         const computedStyle = getComputedStyle(el);
-        const containerWidth = el.clientWidth
-            - parseFloat(computedStyle.paddingLeft)
-            - parseFloat(computedStyle.paddingRight);
+        const containerWidth = el.clientWidth -
+            parseFloat(computedStyle.paddingLeft) -
+            parseFloat(computedStyle.paddingRight);
         setWidth(`${containerWidth}px`);
     }, [ref, columns, gap]);
     useEffect(() => {
@@ -52,8 +54,7 @@ export const GridProvider = forwardRef((props, outerRef) => {
             return;
         resizeCallback();
     }, [resizeCallback]);
-    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: {
-            ...DEFAULT_STYLES,
+    return (_jsx(GridElement, { ...filterBaseProps(props, { eventProps: true }), styles: {
             '--grid-width': width,
             '--columns-amount': columns,
             '--column-gap': gap,

package/es/components/HiddenInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/es/components/OpenTrasition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/es/components/Root.js

@@ -1,23 +1,24 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { GlobalStyles } from './GlobalStyles';
-import { Base } from './Base';
 import { PortalProvider } from './portal';
-import { BASE_STYLES, BLOCK_STYLES } from '../styles/list';
-import { extractStyles } from '../utils/styles';
-import { filterBaseProps } from '../utils/filterBaseProps';
+import { BASE_STYLES, BLOCK_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty';
 import { Provider } from '../provider';
 import { ModalProvider } from '@react-aria/overlays';
 import { StyleSheetManager } from 'styled-components';
 import { TOKENS } from '../tokens';
 import { AlertDialogApiProvider } from './overlays/AlertDialog';
+const RootElement = tasty({
+    id: 'cube-ui-kit-root',
+    className: 'root',
+});
 const DEFAULT_STYLES = {
     display: 'block',
     preset: 't3',
@@ -40,7 +41,7 @@ export const Root = (allProps) => {
         }
     }, []);
     const styles = extractStyles(props, STYLES, DEFAULT_STYLES);
-    return (_jsx(Provider, { router: router, root: rootRef, children: _jsx(StyleSheetManager, { disableVendorPrefixes: true, children: _jsxs(Base, { ref: ref, id: "cube-ui-kit-root", className: "root", ...filterBaseProps(props, { eventProps: true }), styles: styles, children: [_jsx(GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont }, void 0), _jsx(ModalProvider, { children: _jsx(PortalProvider, { value: ref, children: _jsx(AlertDialogApiProvider, { children: children }, void 0) }, void 0) }, void 0)] }, void 0) }, void 0) }, void 0));
+    return (_jsx(Provider, { router: router, root: rootRef, children: _jsx(StyleSheetManager, { disableVendorPrefixes: true, children: _jsxs(RootElement, { ref: ref, ...filterBaseProps(props, { eventProps: true }), styles: styles, children: [_jsx(GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont }, void 0), _jsx(ModalProvider, { children: _jsx(PortalProvider, { value: ref, children: _jsx(AlertDialogApiProvider, { children: children }, void 0) }, void 0) }, void 0)] }, void 0) }, void 0) }, void 0));
 };
 
         

package/es/components/actions/Action.js

@@ -1,20 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useContext, useCallback } from 'react';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
-import { Base } from '../Base';
+import { forwardRef, useCallback, useContext } from 'react';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, TEXT_STYLES, Element, } from '../../tasty';
 import { useHover } from '@react-aria/interactions';
-import { useFocus } from '../../utils/interactions';
+import { useFocus } from '../../utils/react/interactions';
 import { useButton } from '@react-aria/button';
 import { mergeProps } from '../../utils/react';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
 import { UIKitContext } from '../../provider';
 import { useFocusableRef } from '@react-spectrum/utils';
 const FILTER_OPTIONS = { propNames: new Set(['onMouseEnter', 'onMouseLeave']) };
@@ -94,7 +91,7 @@ const DEFAULT_STYLES = {
     cursor: 'pointer',
 };
 const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
-export const Action = forwardRef(({ to, as, htmlType, label, theme, css, mods, onPress, ...props }, ref) => {
+export const Action = forwardRef(({ to, as, htmlType, label, theme, mods, onPress, ...props }, ref) => {
     as = to ? 'a' : as || 'button';
     const router = useContext(UIKitContext).router;
     const isDisabled = props.isDisabled;
@@ -118,13 +115,13 @@ export const Action = forwardRef(({ to, as, htmlType, label, theme, css, mods, o
             },
         }
         : {};
-    return (_jsx(Base, { mods: {
+    return (_jsx(Element, { mods: {
             hovered: isHovered && !isDisabled,
             pressed: isPressed && !isDisabled,
             focused: isFocused && !isDisabled,
             disabled: isDisabled,
             ...mods,
-        }, "aria-label": label, "data-theme": theme, ...mergeProps(buttonProps, hoverProps, focusProps, customProps, filterBaseProps(props, FILTER_OPTIONS)), type: htmlType || 'button', rel: as === 'a' && newTab ? 'rel="noopener noreferrer"' : undefined, ref: domRef, as: as, isDisabled: isDisabled, styles: styles, target: target, href: href, css: css }, void 0));
+        }, "aria-label": label, "data-theme": theme, ...mergeProps(buttonProps, hoverProps, focusProps, customProps, filterBaseProps(props, FILTER_OPTIONS)), type: htmlType || 'button', rel: as === 'a' && newTab ? 'rel="noopener noreferrer"' : undefined, ref: domRef, as: as, isDisabled: isDisabled, styles: styles, target: target, href: href }, void 0));
 });
 
         

package/es/components/actions/Button/Button.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -9,7 +9,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Action } from '../Action';
 import { LoadingOutlined } from '@ant-design/icons';
-import { useContextStyles } from '../../../providers/StylesProvider';
 import { accessibilityWarning } from '../../../utils/warnings';
 export function provideStyles({ size, type, theme, isLoading, icon, children, label, }) {
     children = children || icon ? children : label;
@@ -115,7 +114,7 @@ const DEFAULT_STYLES_BY_TYPE = {
         fill: {
             '': '#dark.0',
             hovered: '#dark.04',
-            pressed: '#dark.05',
+            pressed: '#purple.10',
             '[disabled]': '#dark.04',
         },
         color: {
@@ -229,7 +228,7 @@ const STYLES_BY_SIZE = {
     },
     large: {
         padding: '(1.5x - 1px) (2.5x - 1px)',
-        preset: 't2',
+        preset: 't2m',
     },
 };
 const DEFAULT_STYLES = {
@@ -249,7 +248,7 @@ const DEFAULT_STYLES = {
     },
 };
 export const Button = forwardRef((allProps, ref) => {
-    let { type, size, label, styles, children, theme, css, icon, mods, ...props } = allProps;
+    let { type, size, label, styles, children, theme, icon, mods, ...props } = allProps;
     const isDisabled = props.isDisabled;
     const isLoading = props.isLoading;
     const isSelected = props.isSelected;
@@ -264,7 +263,6 @@ export const Button = forwardRef((allProps, ref) => {
         icon,
         children,
     };
-    const contextStyles = useContextStyles('Button', propsForStyles);
     if (!children) {
         if (icon) {
             if (!label) {
@@ -280,14 +278,13 @@ export const Button = forwardRef((allProps, ref) => {
     children = children || icon ? children : label;
     styles = {
         ...provideStyles(propsForStyles),
-        ...contextStyles,
         ...styles,
     };
     if (isLoading && !children && styles) {
         styles.fontSize = '1em';
         styles.lineHeight = '1em';
     }
-    return (_jsxs(Action, { as: props.to ? 'a' : undefined, css: css, ...props, ref: ref, isDisabled: isLoading || isDisabled, theme: theme, "data-type": type, "data-is-loading": isLoading ? '' : undefined, "data-is-selected": isSelected ? '' : undefined, "data-size": size, mods: mods, styles: styles, label: label, children: [icon || isLoading ? !isLoading ? icon : _jsx(LoadingOutlined, {}, void 0) : null, children] }, void 0));
+    return (_jsxs(Action, { as: props.to ? 'a' : undefined, ...props, ref: ref, isDisabled: isLoading || isDisabled, theme: theme, "data-type": type, "data-is-loading": isLoading ? '' : undefined, "data-is-selected": isSelected ? '' : undefined, "data-size": size, mods: mods, styles: styles, label: label, children: [icon || isLoading ? !isLoading ? icon : _jsx(LoadingOutlined, {}, void 0) : null, children] }, void 0));
 });
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/es/components/actions/ButtonGroup/ButtonGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -9,17 +9,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useSlotProps } from '../../../utils/react';
 import { Space } from '../../layout/Space';
-import { useContextStyles } from '../../../providers/StylesProvider';
+import { tasty } from '../../../tasty';
+const ButtonGroupElement = tasty(Space, {
+    qa: 'ButtonGroup',
+    styles: {
+        gridArea: 'buttonGroup',
+    },
+});
 export const ButtonGroup = forwardRef((props, ref) => {
-    let { styles, ...otherProps } = useSlotProps(props, 'buttonGroup');
-    const contextStyles = useContextStyles('ButtonGroup', otherProps);
-    styles = styles
-        ? {
-            ...contextStyles,
-            ...styles,
-        }
-        : contextStyles;
-    return _jsx(Space, { gridArea: "buttonGroup", styles: styles, ref: ref, ...props }, void 0);
+    return (_jsx(ButtonGroupElement, { ref: ref, ...useSlotProps(props, 'buttonGroup') }, void 0));
 });
 
         

package/es/components/actions/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/es/components/content/ActiveZone/ActiveZone.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -9,13 +9,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '../../../utils/react';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../../styles/list';
-import { Base } from '../../Base';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
+import { CONTAINER_STYLES, Element, extractStyles, filterBaseProps, TEXT_STYLES, } from '../../../tasty';
 import { useFocusableRef } from '@react-spectrum/utils';
 import { useFocusable } from '@react-aria/focus';
-import { useFocus } from '../../../utils/interactions';
+import { useFocus } from '../../../utils/react/interactions';
 const DEFAULT_STYLES = {
     display: 'inline-block',
     position: 'relative',
@@ -33,7 +30,7 @@ const ActiveZone = ({ as, label, onClick, ...props }, ref) => {
     let { hoverProps, isHovered } = useHover({ isDisabled });
     let { focusProps, isFocused } = useFocus({ isDisabled });
     let { focusableProps } = useFocusable(props, domRef);
-    return (_jsx(Base, { "data-is-hovered": isHovered && !isDisabled ? '' : null, "data-is-focused": isFocused && !isDisabled ? '' : null, "data-is-disabled": isDisabled || null, "aria-label": label, ...mergeProps(hoverProps, focusProps, focusableProps, { onClick }, filterBaseProps(props, { eventProps: true })), tabIndex: props.excludeFromTabOrder || isDisabled ? -1 : 0, as: as, styles: styles, ref: domRef }, void 0));
+    return (_jsx(Element, { "data-is-hovered": isHovered && !isDisabled ? '' : null, "data-is-focused": isFocused && !isDisabled ? '' : null, "data-is-disabled": isDisabled || null, "aria-label": label, ...mergeProps(hoverProps, focusProps, focusableProps, { onClick }, filterBaseProps(props, { eventProps: true })), tabIndex: props.excludeFromTabOrder || isDisabled ? -1 : 0, as: as, styles: styles, ref: domRef }, void 0));
 };
 const _ActiveZone = forwardRef(ActiveZone);
 export { _ActiveZone as ActiveZone };