@cube-dev/ui-kit 0.0.0-canary-70220b3 → 0.0.0-canary-4e595be

package/es/components/Base.js

@@ -1,17 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * 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.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * 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 RawBlock = 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(RawBlock, { ...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.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 

package/es/components/GridProvider.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * 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 = {
@@ -24,9 +24,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(() => {

package/es/components/HiddenInput.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-4e595be
  * 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.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 

package/es/components/Root.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-4e595be
  * Released under the MIT license.
  */
 
@@ -10,9 +10,7 @@ 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, } from '../tasty';
 import { Provider } from '../provider';
 import { ModalProvider } from '@react-aria/overlays';
 import { StyleSheetManager } from 'styled-components';

package/es/components/actions/Action.js

@@ -1,20 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * 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 { forwardRef, useCallback, useContext } from 'react';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, TEXT_STYLES, } from '../../tasty';
 import { Base } from '../Base';
 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 +92,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;
@@ -124,7 +122,7 @@ export const Action = forwardRef(({ to, as, htmlType, label, theme, css, mods, o
             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.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 
@@ -9,7 +9,7 @@ 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 { useContextStyles } from '../../../tasty';
 import { accessibilityWarning } from '../../../utils/warnings';
 export function provideStyles({ size, type, theme, isLoading, icon, children, label, }) {
     children = children || icon ? children : label;
@@ -249,7 +249,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;
@@ -287,7 +287,7 @@ export const Button = forwardRef((allProps, ref) => {
         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.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * 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.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * 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.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 
@@ -9,7 +9,7 @@ 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 { useContextStyles } from '../../../tasty';
 export const ButtonGroup = forwardRef((props, ref) => {
     let { styles, ...otherProps } = useSlotProps(props, 'buttonGroup');
     const contextStyles = useContextStyles('ButtonGroup', otherProps);

package/es/components/actions/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-4e595be
  * 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.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 
@@ -9,13 +9,11 @@ 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 { CONTAINER_STYLES, extractStyles, filterBaseProps, TEXT_STYLES, } from '../../../tasty';
 import { Base } from '../../Base';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
 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',

package/es/components/content/Alert/Alert.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-4e595be
  * Released under the MIT license.
  */
 

package/es/components/content/Alert/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-4e595be
  * Released under the MIT license.
  */
 

package/es/components/content/Alert/types.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-4e595be
  * Released under the MIT license.
  */
 

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

@@ -1,14 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 
-import { extractStyles } from '../../../utils/styles';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, TEXT_STYLES, } from '../../../tasty';
 import { useDeprecationWarning } from '../../../_internal';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../../styles/list';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
 const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
 export function useAlert(props) {
     var _a;

package/es/components/content/Avatar/Avatar.js

@@ -1,16 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Base } from '../../Base';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty';
 const DEFAULT_STYLES = {
     display: 'grid',
     gap: '1x',

package/es/components/content/Badge/Badge.js

@@ -1,20 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import THEMES from '../../../data/themes';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-import { styled } from '../../../styled';
-const RawBadge = styled({
-    name: 'Badge',
-    props: { role: 'region' },
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
+const RawBadge = tasty({
+    qa: 'Badge',
+    role: 'region',
     styles: {
         display: 'inline-flex',
         placeContent: 'center',

package/es/components/content/Card/Card.js

@@ -1,16 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Base } from '../../Base';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty';
 const DEFAULT_STYLES = {
     display: 'block',
     flow: 'column',

package/es/components/content/Content.js

@@ -1,21 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { styled } from '../../styled';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
 const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
-const RawContent = styled({
-    name: 'Content',
-    tag: 'section',
+const RawContent = tasty({
+    qa: 'Content',
+    as: 'section',
     styles: {
         gridArea: 'content',
         preset: 'p3',
@@ -26,9 +23,6 @@ const RawContent = styled({
         overflow: 'auto',
         styledScrollbar: true,
     },
-    props: {
-        'data-id': 'Content',
-    },
 });
 export const Content = forwardRef((props, ref) => {
     props = useSlotProps(props, 'content');

package/es/components/content/CopySnippet/CopySnippet.js

@@ -1,21 +1,20 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import copy from 'clipboard-copy';
-import { Button } from '../../actions';
+import { Action, Button } from '../../actions';
 import { Card } from '../Card/Card';
 import { Grid } from '../../layout/Grid';
-import { styled } from '../../../styled';
+import { tasty } from '../../../tasty';
 import { PrismCode, } from '../../content/PrismCode/PrismCode';
 import { notification } from '../../../services/notification';
 import { CopyOutlined } from '@ant-design/icons';
 import { TooltipTrigger } from '../../overlays/Tooltip/TooltipTrigger';
-import { Action } from '../../actions';
 import { Tooltip } from '../../overlays/Tooltip/Tooltip';
 const POSITION_ACTION = {
     position: 'absolute',
@@ -23,7 +22,7 @@ const POSITION_ACTION = {
     top: 0,
     zIndex: 1,
 };
-const StyledBlock = styled({
+const StyledBlock = tasty({
     styles: {
         position: 'relative',
         overflow: {
@@ -44,7 +43,7 @@ const StyledBlock = styled({
         },
     },
 });
-const ButtonContainer = styled({
+const ButtonContainer = tasty({
     styles: {
         position: 'relative',
         '&::after': {

package/es/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-4e595be
  * Released under the MIT license.
  */
 

package/es/components/content/Divider.js

@@ -1,16 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Base } from '../Base';
-import { OUTER_STYLES, BASE_STYLES, COLOR_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
+import { BASE_STYLES, COLOR_STYLES, extractStyles, filterBaseProps, OUTER_STYLES, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
 const STYLE_LIST = [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES];
 const DEFAULT_STYLES = {

package/es/components/content/Footer.js

@@ -1,28 +1,23 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
-import { styled } from '../../styled';
 const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
-const RawFooter = styled({
-    name: 'Footer',
+const RawFooter = tasty({
+    qa: 'Footer',
+    'data-id': 'Footer',
     styles: {
         gridArea: 'footer',
         display: 'block',
         flow: 'column',
     },
-    props: {
-        'data-id': 'Footer',
-    },
 });
 export const Footer = forwardRef((props, ref) => {
     props = useSlotProps(props, 'footer');

package/es/components/content/Header.js

@@ -1,22 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { styled } from '../../styled';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
 const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
-const RawHeader = styled({
-    name: 'Header',
-    tag: 'header',
-    props: { 'data-id': 'Header' },
+const RawHeader = tasty({
+    qa: 'Header',
+    as: 'header',
     styles: {
         display: 'block',
         gridArea: 'header',

package/es/components/content/Paragraph.js

@@ -1,15 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Text } from './Text';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
+import { CONTAINER_STYLES, extractStyles, TEXT_STYLES, } from '../../tasty';
 const DEFAULT_STYLES = {
     preset: 'p3',
     color: '#dark.75',

package/es/components/content/Placeholder/Placeholder.js

@@ -1,16 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-70220b3
+ * @cube-dev/ui-kit v0.0.0-canary-4e595be
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Base } from '../../Base';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty';
 const DEFAULT_STYLES = {
     display: 'block',
     fill: '#dark.10',